【逆战】HTML5新语义化标签 （一）

一、html5语义化标签优点：

　　1、能够清楚地让维护人员知道整个html的作用，方便代码维护。

　　2、方便搜索引擎到该网页。

　　3、能够更好的适配屏幕阅读器等，特殊人群对网站有较好的体验。

二、 html新旧区别：

　　1、html4.0开始出现：div      span      img      h1-h6等

　　2、html5开始出现：header      footer      main等

　　3、css2.1开始：widht      height      background等

　　4、css3新增：transform      border-radius等

三、语义化标签（语义化标签都是双标签）

 1 header : 页眉
 2 footer : 页脚
 3 main : 主体 
 4     *注：header footer main 语义化标签在一个页面中只能出现一次。*
 5 hgroup : 标题组合
 6 nav : 导航    
 7 article : 独立的内容
 8           论坛帖子
 9           报纸文章
10           博客条目
11           用户评论
12 aside : 辅助信息的内容
13 section : 区域 , 跟div的功能以及语义是一样的
14 figure : 描述图像或视频
15 figcaption : 描述图像或视频的标题部分
16 datalist : 选项列表（跟seclect下拉菜单用处相同）
17     涉及到的语法：list id value ...
18     <input type="text" list="elems">
19     <datalist id="elems">
20         <option value="a"></option>
21         <option value="ab"></option>
22         <option value="abc"></option>
23         <option value="abcd"></option>
24         <option value="apple"></option>
25         <option value="around"></option>
26     </datalist>
27 details / summary : 文档细节 / 文档标题
28     相关语法：open属性
29     <details open>
30         <summary>HTML</summary>
31         <p>超文本标记语言</p>
32     </details>
33 progress / meter : 定义进度条 / 定义度量范围
34     <progress min="0" max="100" value="50"></progress>
35     <meter min="0" max="100" value="80" low="30" high="70"></meter>
36 time : 定义日期或时间
37     <p>今天是 <time>3月3日</time></p>
38     <p>今天是 <time title="2月14日">情人节</time></p>
39 mark : 带有记号的文本

四、音频与视频：

 1 audio ：音频 
 2 以下是可能需要添加的控件属性
 3     controls : 显示控件
 4     loop : 循环播放
 5     autoplay : 自动播放 ( 很多浏览器已经禁止这个功能，因为考虑到用户体验的问题,几乎用不上 )
 6     muted : 静音
 7 例子：<audio src='#' controls loop muted>
 8 
 9 video : 视频 
10     object-fit: cover; 可以让视频覆盖整个父容器。
11 
12 例子：<video src='#' controls loop  muted object-fit: cover; >

五：表单控件：

 1 <input type="值">，加在type中的属性控件
 2 email  :  电子邮件地址输入框
 3 url  :  网址输入框
 4 number  :  数字输入框
 5 range  :  滑动条（min=x;最小值 max=x;最大值value=x;默认值step=x移动步数）
 6 date / month / week  :  日期控件    
 7 search  :  搜索框 ( 跟普通框的区别，会多一个关闭按钮 )
 8 color  :  颜色控件
 9 tel  :  电话号码输入框 ( 仅在移动端，会调起带数字的软键盘 )
10 time  :  时间控件

六、name和value：

1、name：用于提交数据

2、value：需要提交的数据

　　（后端通过获取表单中的的name，就可以得到value值，这也叫做键值对；）

3、method : 数据传输方式
　　GET （ 默认的，获取的时候网址后面会带有你输入的东西 ）
　　POST （从网址上看不到你提交成功没）

4、enctype : 数据传输类型
　　application/x-www-form-urlencoded 默认传输的是文本
　　multipart/form-data 传输的是文件

posted @ 2020-03-04 21:40  不懂老爱瞎逼逼  阅读(269)  评论(0)  编辑  收藏  举报