资讯专栏INFORMATION COLUMN

HTML标签笔记

whidy / 1953人阅读

摘要:换行符首部说明文档使用的标准在中仅为头标签在里使用的标签为头标签在标签上显示的内容设置页面的一些相关内容实现页面定时跳转秒数路径设置超链接的一些内容引入外部文件属性当前文档与被链接文档之间的关系被链接文档的类型文件路径引入文件文件路径定义

换行符:

首部:
: 说明html文档使用的标准, 在HTML5中仅为
1、头标签

  • :在head里使用的标签为头标签
    • :在标签上显示的内容  
    • :设置页面的一些相关内容  
      • 实现页面定时跳转:    
    • :设置超链接的一些内容  
    • :引入外部文件  
      • 属性:    
        • rel:当前文档与被链接文档之间的关系      
        • type:被链接文档的 MIME 类型      
        • href:文件路径      
      • 引入css文件:    
    • :定义样式信息,与css文件相同  

2、文字标签和注释标签

  • 文字标签:修改文字样式
    •   
    • 属性:  
      • size:文字的大小,取值范围1-7,超出7,默认是7    
      • color:文字颜色    
        • 两种表示方式:      
          • 英文单词:red green ......        
          • 使用十六进制数表示 #ffffff        
    • :加粗  
    • :删除线  
    • :下划线  
    • :斜体  
    • :原样输出  
    • :上角标  
    • :下角标  
    • :段落标签,比br标签多一行  
  • 注释标签
    •   

3、标题标签、水平线标签和特殊字符

  • 标题标签
    • ......
        
    • 从h1到h6,大小依次变小,同时自动换行  
  • 水平线标签

    •   
    • 属性:  
      • size:水平线的粗细,取值范围1-7    
      • color:颜色    
  • 特殊字符
    • < <  
    • > >  
    • 空格    
    • & &  

4、列表标签

  • :表示列表的范围
    • 在dl里面
      :上层内容  
    • 在dl里面
      :下层内容  
    :有序列表的范围
    • 属性:type 设置排序方式 1 a i  
    • 在ol里面
    • 具体内容
    •   
    :无序列表的范围
    • 属性:type 空心圆 circle 实心圆 disc 实心方块 square 默认 disc  
    • 在ul里面
    •   

5、图像标签

    • 一般用于图片的布局  
    • 属性:  
      • src:图片路径    
      • width:图片宽度    
      • height:图片高度    
      • title: 当鼠标放上去时显示的文字    
      • alt:图片读取异常时显示文字(图片上显示文字(兼容性差))    

6、超链接标签

  • 链接资源
    •   
      • 属性:    
        • href:链接的资源地址      
        • target:设置打开方式      
          • _blank: 在新窗口打开        
          • _self: 在当前页打开(默认)        
          • framesetName: 在指定名称的框架中打开        
  • 定位资源
    • 定义位置  
      •     
        • 属性:      
          • name: 位置名称,定义一个位置        
          • href: 定位到指定名称的位置处( this.html#name)        

7、表格标签

  • : 表示表格的范围
    • 和 定义表格的标题与主题,标识作用  
    • 在table里面 :设置标题  
    • 在table里面 :表示行  
      • 在tr里面 :表示列    
      • 在tr里面 :相当于td的基础上做了居中和加粗的操作    
    • table属性:  
      • border:设置表格边框的宽度    
      • bordercolor:设置表格边框颜色    
      • cellspacing:设置单元格之间的距离    
      • width:表格宽    
      • height:表格高    
    • tr属性:  
      • align:设置显示方式 居左(left),居中(center),居右(right)    
    • td属性:  
      • align:设置显示方式 居左(left),居中(center),居右(right)    
      • rowspan:跨行的数量    
      • colspan:跨列的数量    

8、表单标签(注册)

  • : 定义一个表单的范围
    • 属性:  
      • action:数据提交地址,默认当前路径    
      • method:表单提交方式,有get(默认) post    
  • :输入项
    • input属性:  
      • type:输入项的类型    
        • text:普通输入项      
        • number: 数字项      
        • password:密码输入项      
        • radio: 单选输入项      
        • checkbox:复选输入项      
        • file:文件输入项(为表单添加 enctype="multipart/form-data" 属性, 且method="post")      
          • accept: 指定上传文件格式        
        • hidden:隐藏项      
        • submin:提交按钮      
        • image:图片形式提交按钮,src指定路径      
        • reset:重置按钮      
        • button:普通按钮      
        • placeholder: 提示信息(HTML5)      
        • name:元素名称      
        • value: 元素值      
        • checked:预先选定复选框或单选按钮      
        • readonly: 指定输入框为只读,不可编辑(布尔值)      
        • disabled: 禁用输入(布尔值), 不可与 type 为 hidden 的同时出现      
        • required: 该项必须填写      
        • pattern: 指定正则表达式, 与该表达式匹配才可以提交      
        • autofocus: 自动聚焦      
        • maxlength: 限制最大输入长度      
  • : 绑定表单控件  
    • for: 控件id, 当点击其中文字时, 焦点到该控件上  
  • :文本域  
    • textarea属性:  
      • cols:列的数量    
      • rows:行的数量    
  • :下拉的输入项
    • :选择列表  
  • select 属性:
    • name  
  • option 属性:
    • value:元素值  
    • selected: 预选值  

9、框架标签

  • :定义框架集
    • 在frameset里面 :frameset 中的一个特定的窗口  
  • frameset属性:
    • rows:按照行进行划分,*代表剩下所有(200px, *)  
    • cols:按照列进行划分,*代表剩下所有(200px, *)  
  • : 其中的内容只有在浏览器不支持js或禁用了js时执行

10、内容标签

  • 无意义标签(用来布局):
    • :自动换行  
    • :在一行显示  
    • : 头部(HTML5)  
    • : 在页面尾部显示(HTML5)  
    • : 表示页面一个内容区块,如章节,页眉等(HTML5)  
    • : 表示独立的内容,如文章等(HTML5)  
    • : 页面中的标题(HTML5)  


11. 影音标签

  • : 视频标签(HTML5)
  • : 音频标签(HTML5)

 

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

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

相关文章

  • 学习笔记 | HTML 基本结构和基本标签 ——前端学习第一步!

    摘要:基本结构语言中,一个页面是由四个部分组成文档声明标签对标签对标签对图示文档声明这是一个文档声明,表示这是一个页面。标签标签表示页面内容的范围。 HTML HTML ...

    sPeng 评论0 收藏0
  • 重学前端学习笔记(十六)--HTML元信息类标签

    摘要:元信息类标签,就是用于描述文档自身的一类标签。二标签作为盛放其它语义类标签的容器使用。五标签标签是一组键值对,它是一种通用的元信息表示标签。具有属性的具有属性的标签,表示执行一个命令,可以不需要属性。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入w...

    wemall 评论0 收藏0
  • 重学前端学习笔记(十六)--HTML元信息类标签

    摘要:元信息类标签,就是用于描述文档自身的一类标签。二标签作为盛放其它语义类标签的容器使用。五标签标签是一组键值对,它是一种通用的元信息表示标签。具有属性的具有属性的标签,表示执行一个命令,可以不需要属性。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入w...

    gaomysion 评论0 收藏0
  • 重学前端学习笔记(十六)--HTML元信息类标签

    摘要:元信息类标签,就是用于描述文档自身的一类标签。二标签作为盛放其它语义类标签的容器使用。五标签标签是一组键值对,它是一种通用的元信息表示标签。具有属性的具有属性的标签,表示执行一个命令,可以不需要属性。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入w...

    printempw 评论0 收藏0
  • 重学前端学习笔记(四)--div和span不是够用吗?

    摘要:笔记说明重学前端是程劭非前手机淘宝前端负责人在极客时间开的一个专栏,每天分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入的专栏学习原文有的语音,如有侵权请联系我,邮箱。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以...

    lx1036 评论0 收藏0

发表评论

0条评论

whidy

|高级讲师

TA的文章

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