首页 > 代码库 > Html5相关的知识点总结
Html5相关的知识点总结
1.html5：万维网的核心语言、HTML规范的第五次重大修改。HTML是一种标记语言。
2.布局的语义化标签：
article：标签装载显示一个独立的文章内容
section ：标签定义文档中的节
aside：用来装载非正文类的内容
header ：标签定义文档的页面头部，通常是一些引导和导航信息
footer ： 标签定义 section 或 document 的页脚
nav ：标签定义显示导航链接
他们的使用场景代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title> Html5标签布局</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 header{ 12 width: 1000px; 13 height: 90px; 14 background: #9cf1fd; 15 margin-left: 150px; 16 } 17 p{ 18 margin-left: 20px; 19 } 20 nav{ 21 width: 950px; 22 height: 30px; 23 line-height: 30px; 24 text-align:left; 25 background: #e9fad0; 26 margin-top: 20px; 27 margin-left: 20px; 28 } 29 article{ 30 width: 700px; 31 height: 400px; 32 background: #b2d5fd; 33 margin-top: 10px; 34 margin-left: 150px; 35 } 36 section{ 37 width: 650px; 38 height: 100px; 39 margin-left: 20px; 40 margin-top: 20px; 41 background: #fcb062; 42 float: left; 43 } 44 aside{ 45 width: 280px; 46 height: 400px; 47 float: right; 48 margin-top: -400px; 49 margin-right: 125px; 50 background: #c8b1e7; 51 } 52 footer{ 53 width: 1000px; 54 height: 40px; 55 background: #78def3; 56 margin-left: 150px; 57 margin-top: 10px; 58 } 59 60 </style> 61 </head> 62 <body> 63 <header> 64 <p>header</p> 65 <nav> 66 <p>nav</p> 67 </nav> 68 </header> 69 <article> 70 <p>article</p> 71 <section><p>section</p></section> 72 <section><p>section</p></section> 73 <section><p>section</p></section> 74 </article> 75 <aside><p>aside</p></aside> 76 <footer> 77 <p>footer</p> 78 </footer> 79 </body> 80 </html>
3.标题语义化标签
<hgroup> 标签用于对网页或区段（section）的标题进行组合.
1 <hgroup class="hgroup"> 2 <h2>会议内容</h2> 3 <h2>会议主题</h2> 4 </hgroup>
4.媒体语义化标签
<figure>： 标签包含独立的媒体内容
<figcaption> 标签定义 figure 元素的标题
<figure>
<img src=http://www.mamicode.com/"../../img/8.jpg" alt=""/>
<figcaption>这是黑夜</figcaption><!--图片注释-->
</figure>
5.标记标签
<mark> 在需要突出显示文本时使用 <mark> 标签。
<p><mark>我的骑士</mark></p><!--mark默认背景色是黄色 标记字体-->
6.详细信息标签
<details> 标签用于描述文档或文档某个部分的细节，而这个细节并不需要文档加载时就展示，而是可以折叠。
<summary> 默认显示的details 元素的标题。
1 <details open="open"> 2 <!--//option默认导航为打开状态--> 3 <summary>导航1</summary> 4 <p>导航内容1</p> 5 <p>导航内容2</p> 6 <p>导航内容3</p> 7 </details>
7.进度条标签
<progress> 标签定义运行中的进度（进程）
<progress max="100" value=http://www.mamicode.com/"90"></progress>
8.新增表单类型
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
1 <input type="search" list="A"/> 2 <datalist id="A"> 3 <option>111</option> 4 <option>222</option> 5 <option>321</option> 6 <option>444</option> 7 <option>555</option> 8 </datalist>
9.新增表单输入类型
email ---- 邮箱验证【@】
url ---- 网址输入法【http://www.xx.xx】
number --- (min、max、step数字间隔、value)
range --- (min、max、step数字间隔、value)---进度条
color ---- 检色器
date ---- 选取日、月、年
month ---- 选取月、年 week - 选取周和年
time ---- 选取时间（小时和分钟）
datetime ---- 选取时间、日、月、年（UTC 时间）
datetime-local ---- 选取时间、日、月、年（本地时间）
1 <form> 2 <input type="email"/> <!--required必填提示【不能为空】 ，email邮箱验证【@】--> 3 4 <input type="url" /> <!--网址输入法【http://www.xx.xx】--> 5 6 <input type="number" min="0" max="10"/> <!--购物车【min最小值数，max最大值数】--> 7 8 <input type="range" min="0" max="10" step="5"/> <!--进度条--> 9 <input type="color"/> <!--检色器--> 10 <form>
10.新增表单属性
placeholder : 输入框提示信息
autofocus : 指定表单获取输入焦点
required : 必须要填写的字段
pattern : 正则验证 pattern="\d{1,5}"
1 <input type="text" placeholder="请输入内容1 " required="required" pattern="\d{1,5}"/> 2 <input type="text" placeholder="请输入内容2 " autofocus="autofocus"/>
Html5相关的知识点总结