资讯专栏INFORMATION COLUMN

HTML常用标签及属性

番茄西红柿 / 2240人阅读

标签格式

  • 格式:

    • 双边:<标签名 属性1="值1" 属性2=值2 属性3=值3>内容

    • 单边:<标签名 属性1="值1" 属性2=值2 属性3=值3 />

  • 特点:

    • 标签都是成对出现的,单边标签也不要忘记结尾的/

    • 容错性强,但是不要故意写错,故意挑战浏览器的解析能力

    • 标签名已经预定义,不要随便自己起名字

    • 标签统一使用小写,属性值统一使用双引号包括

  • 说明:标签就是HTML文件的骨架,是最重要的组成部分

全局架构标签

  • 示例:

    <html>

    <head>
    <title>页面标题title>
    head>
    <body text="red" bgcolor="#00ff00">
    这里是页面内容
    body>
    html>
  • 说明

    • html:是文档中最大的标签,所有的标签都有放在该标签中

    • head:头部,里面的内容不会显示在页面上,但是可以设置页面信息,如:标题、字符集

    • body:身体,存放用于显示的页面内容,是页面的主体部分

  • body属性:

    • text:设置字体颜色

    • bgcolor:设置背景颜色

  • 几乎每个标签都有的属性:

    • class、id、style、name

常用标签(文本修饰)

  • 标题:h1~h6,字体从大到小,h1一个页面最多一个,不能为了调整字体大小而使用

  • 加粗:

  • 斜体:

  • 下划线:

  • 删除线:

  • 上标:

  • 下标:

  • 字体:

    • size:大小

    • color:颜色

    • face:类型

常用标签(格式控制)

  • 换行:
    ,浏览器对任意多个空格、回撤都解析为一个空格

  • 段落:

    ,表示一个段落

  • 横线:


    ,一条顺平横线

  • 滚动:

  • 原样:

    ,浏览器中显示的文本内容与文本一样

  • 无序列表:

      ,里面的每个元素都是一个
      • type:disc(实心圆,默认)、circle(空心圆)、square(实心方框)

    • 有序列表:

        • type:1、A、a、I

        • start:起始序号

      字符实体

      • 说明:HTML中预留的字符都必须替换为字符实体才可以显示。

      • 提醒:不用刻意记录这些字符实体,用的时候查一下即可。

      • 示例:


        > >
        < <
          空格
        & &
      • 参考:http://www.w3school.com.cn

      URL(重点)

      • 说明:统一资源定位符,是URI的一种,可以唯一标识一个网络资源

      • 组成:协议://主机:端口/文件?参数1=值1&参数2=值2

        • http:80,可以省略

        • https:443

      • 例子:http://www.baidu.com:80/index.html?kw=python&page=2

      超链接(a)

      • 名称:

      • 说明:超链接,可以完成页面的跳转

      • 属性:

        • href:指定跳转地址

        • title:光标放上去的提示信息

        • target:新页面的打开目标

          • _self:当前标签栏,默认设置

          • _blank:新的空白标签栏

          • _parent:覆盖父级标签栏

          • _top:覆盖顶层标签栏

        • name:设置锚点,用于跳转定位

          • 可以在href属性设置时更精准定位跳转地址

          • 如:,使用:xxx

          • 说明:锚点不但可在一个页面内部跳转,还可进行跨越面跳转定位

         

      多媒体标签

      • 图片:img(重点)

        • src:图片资源位置

        • width:宽度

        • height:高度,多带带设置一个时,另一个会等比缩放,若同时设置可能会拉伸或压缩

        • title:光标放上去的提示信息,图片加载失败是也会显示。

      • 音频(audio)

        • src:指定资源

        • controls:显示控制条(值为controls,可以不写值)

        • loop:循环播放(值为loop,可以不写值)

        • autoplay:自动播放(值为autoplay,可以不写值)

      • 视频(video)

        • 音频的属性视频都有,功能也一样

        • 多出来关于尺寸的属性:width、height

        • 多带带设置会进行等比缩放,同时设置时会出现留白

      表格(table)

      • 说明:就是类似于excel的形式

      • table:表格标签,所有的表格内容都要放在该标签中

        • border:边框尺寸

        • bordercolor:边框颜色

        • width:宽度

        • height:高度

        • bgcolor:背景色

        • align:水平对齐方式(left默认、center、right)

      • tr:表格中的一行

        • bgcolor:背景色

        • align:水平对齐方式(left默认、center、right)

        • valign:垂直对齐方式(top、middle默认、bottom)

      • td:一行的一列

        • colspan:列合并,合并一行的若干列

        • rowspan:行合并,合并一列的若干行

      • th:功能与td相同,只不过样式不同,进行了着重强调,用于设置表头

      • caption:表格标题,通常用于描述表格的作用

      分帧(iframe)

      • 说明:就是一个页面中包含另一个页面

      • 属性:

        • src:加载的资源地址

        • width:宽度

        • height:高度

        • frameborder:是否显示边框(1/0)

        • scrolling:滚动条控制(yes、no、auto)

        • name:标识窗口的名字,可以用于a标签的打开目标地址

      分帧(frameset)

      • 说明:替代body定义网页框架,而且可以根据需要指定尺寸或比例进行划分

      • 属性:

        • rows:垂直方向的尺寸划分,可以使用像素、也可以使用百分比,*表示其他

        • cols:水平方向的尺寸划分

        • noresize:禁止调整尺寸

        • frameborder:是否显示边框

        • border:边框宽度

        • bordercolor:边框颜色

      • frame:frameset中的一帧内容,也就是一个页面

      • noframes:浏览器不支持frameset时使用,兼容设置显示内容

      表单(form)(非常重要)

      • 说明:服务器收集用户信息,如:登录、注册等场景

      • form:表单,所有提交的数据都需要放在该标签中

        • action:指定提交地址,默认提交到当前地址

        • method:请求方法,get、post

          • get:提交的数据会出现在URL中

          • post:提交的数据不会出现在URL中,经常用于登录、注册、上传文件等

      • input:输入框,是表单中最重要的组成部分

        • name:指定名字,没有名字是无法提交的(即使能提交,数据也没有意义)

        • value:文本框的内容,一般用于不可输入的文本框

        • placeholder:占位内容,通常用于提示

        • size:设置尺寸(宽度)

        • maxlength:限制最大输入字符个数

        • readonly:只读状态,不可更改

        • disabled:禁用状态

        • type:设置输入框类型

          • text:可见文本,默认属性

          • submit:是提交按钮

          • password:密文文本

          • radio:单选框,注意事项:

            • 多个单选项的name属性要一样

            • 因为无法输入内容,所以需要书写value属性进行选项的区分,不必非要与提示信息一致

            • checked属性可以用于默认选择状态的设置

            • 想让提示信息关联单选框,可以通过label标签结合id属性完成

          • checkbox:复选框,注意事项与radio相同

          • hidden:隐藏字段,不可见的,可以传递特定不公开信息

          • file:上传文件字段,需要对表属性进行配套设置

            • 表单提交方法只能是post:method="post"

            • 指定编码类型:enctype="multipart/form-data"

      • select:下拉选择框

        • 属性name需要设置

        • 属性size可以控制显示的选项个数

        • 每一个选项通过option标签体现,必须指定其value属性,默认选中使用selected

      • textarea:文本域,多行文本

        • 说明:input是单行文本,textarea是多行文本

        • 属性:

          • rows:设置行数

          • cols:设置列数

        • 注意:不要在输入区域书写任何多余的内容

      • 表单提交

        • ,标准的提交按钮,可以提交按钮本身的值

        • ,可以提交,但是不能提价按钮的值

        • ,长的跟按钮一样,但是不能提交,后面可以结合JS使用

      head标签

      • 说明:一般存放对网页进行说明的内容,不会显示在页面上

      • 示例:


        <meta charset="utf-8" />

        <title>表单内容title>

        <meta name="keywords" content="PYTHON培训,PYTHON开发培训" />

        <meta name="description" content="教育第一" />

        <meta http-equiv="content-type" content="text/html;charset=utf-8" />

        <link rel="stylesheet" type="text/css" href="xxx.css">

        <meta http-equiv="refresh" content="5;url=http://www.baidu.com">

        

           

      文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

      转载请注明本文地址:https://www.ucloud.cn/yun/1452.html

      相关文章

      • 4.HTML 常用标签属性

        摘要:链接标签属性链接地址打开方式新标签页打开当前页面打开默认链接提示文本标记标题元素文本样式斜体粗体删除线下划线上标下标段落元素换行元素分割线元素标签属性尺寸宽度颜色水平对齐方式分区元素块分区元素行内分区元素块级元素与行内元素块级元素行内元 showImg(http://upload-images.jianshu.io/upload_images/12209211-2241c9bcfba4...

        spademan 评论0 收藏0
      • HTML文本结构常用标签

        摘要:一什么是超文本标签语言万维网的描述性语言。空标记没有结束标签,用代替。字母顺序的有序列表,大写罗马数字,小写。一、什么是HTML? HTML:超文本标签语言(Hyper Text Markup Language) www万维网的描述性语言。 XHTML指可扩展超文本标记语言(标识语言)(EXtensible HyperText Markup Language)是一种置标语言,表现方式与超文本...

        番茄西红柿 评论0 收藏0
      • 保姆级教程HTML两万字笔记大总结【建议收藏】(上篇)

        摘要:标签不区分大小写,但推荐小写。标签可以嵌套,但不能交叉嵌套。标签也称为元素。比如行内标签亦可成行内元素。 ❤️HTML必备知识详解❤️ 第一部分:HTML框架简介...

        paulli3 评论0 收藏0

      发表评论

      0条评论

      最新活动
      阅读需要支付1元查看
      <