html5新语义化标签

HTML5的浏览器兼容

支持Html5的浏览器包括Firefox (火狐浏览器) , IE9及其更高版本，Chrome (谷歌浏览器)，Safari, Opera等; 国内的遨游浏览器(Maxthon) ，以及基于IE或Chromium (Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

常用的五大浏览器有: IE, chrome,firefox,safari,opera

内容类型(ContentType)

HTML5的文件扩展符与内容类型保持不变,仍然为".html" 或" .htm"。

DOCTYPE声明

不区分大小写

指定字符集编码

meta charset=“UTF-8”

可省略标记的元素

不允许写结束标记的元素: br、col、 embed、 hr、img、 input、link、meta
可以省略结束标记的元素: li、dt、dd、p、 option、colgroup、thead、 tbody、tfoot、 tr、td、 th
可以省略全部标记的元素: html、head、 body、colgroup、 tbody

省略引号

属性值可以使用双引号，也可以使用单引号。

HTML5新增语义化标签

section元素表示页面中的一个内容区块

article元素表示一块与上下文无关的独立的内容

aside元素在article之外的，与article内容相关的辅助信息

header元素表示页面中一个内容区块或整个页面的标题

footer元素表示页面中一个内容区块或整个页面的脚注

nav元素表示页面中导航链接部分

figure元素表示一段独立的流内容,使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)main元素表示页面中的主要的内容(ie不兼容)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}html,body{height: 100%;}header,footer{height: 50px;line-height: 50px;text-align: center;background-color: orange;}section{height: calc(100% - 100px);}nav,aside{width: 100px;height: 100%;background-color: #ccc;float: left;}main{float: left;width: calc(100% - 200px);background-color: white;height: 100%;}aside_p{font-size: 12px;color: white;}main .article1{height: 60%;}main .article2{height: 40%;}</style>
</head>
<body><header>header</header><section><nav><figure>nav</figure><ul><li>111</li><li>222</li><li>333</li><li>444</li></ul></nav><main><article class="article1"><header>article-header</header><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab quod id, nulla tempora expedita animi eum eius, quia sint eos, quisquam dolores dignissimos modi aliquam commodi? Enim eligendi eos earum?</p><footer>article-footer</footer></article><article class="article2"><header>article-header</header><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab quod id, nulla tempora expedita animi eum eius, quia sint eos, quisquam dolores dignissimos modi aliquam commodi? Enim eligendi eos earum?</p><footer>article-footer</footer></article></main><aside><figure>aside</figure><p class="aside_p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos amet magni nisi reprehenderit quis quisquam. At nesciunt tempore architecto possimus amet voluptates itaque libero placeat quibusdam perferendis, praesentium consectetur alias.</p></aside></section><footer>footer</footer>
</body>
</html>

H5新增音频标签

H5新增视频标签

link标签最常见的用途是链接样式表

<html>
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>
<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>
</html>

header页眉
footer页脚
main主体
hgroup标题组合
nav导航

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><header><hgroup><h1>主标题</h1><h2>副标题</h2></hgroup><nav><ul><li>首页</li><li>论坛</li><li>关于</li></ul></nav></header><main></main><footer></footer>
</body>
</html>

注：header和main和footer在一个网页中只能出现一次
article独立的内容
aside辅助信息的内容
section区域
figure描述图像或视频
figcaption描述图像或视频的标题部分

<main><article><section><ul><figure><img src="https://pic3.iqiyipic.com/image/20171009/64/c9/a_100104281_m_601_m1_260_360.jpg?caplist=jpg,webp,avif" alt="干物妹！小埋第2季 "><figcaption>干物妹！小埋第2季 2017</figcaption></figure></ul></section></article></main>

datalist选项列表
details/summary文档细节/文档标题
progress/meter定义进度条/定义度量范围
time定义日期或时间
mark带有记号的文本

 <main><input type="text" list="elems"><datalist id="elems"><option value="围棋少年"></option><option value="超智能足球"></option><option value="干物妹！小埋"></option></datalist><details open><summary>HTML</summary></details><progress min="0" max="10" value="8"></progress><br><meter min="0" max="100" value="80" ></meter><p>今天是<time title="2-14">情人节</time>，街上人很多</p><p>今天是<mark>情人节</mark>，街上人很多</p></main>

H5新增标签

Type= "color” 生成一个颜色选择的表单

Type= "tel” 唤起拨号盘表单

Type= "search” 产生一个搜索意义的表单

Type= "range” 产生一个滑动条表单

Type= "number” 产生一个数值表单

Type= "email" 限制用户必须输入email类型

Type= "url" 限制用户必须输入url类型

Type= "date" 限制用户必须输入日期
Type= "month” 限制用户必须输入月类型
Type= "week" 限制用户必须输入周类型

Type= "time” 限制用户必须输入时间类型
Type= "datetime-local" 选取本地时间

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action=""><div>颜色选择：<input type="color" name="color"></div><div>邮箱：<input type="email" name="myemail"></div><div>url地址(完整地址): <input type="url"></div><div>电话号码:<input type="tel"></div><div>滑块效果:<input type="range" name="range" min="100px" max="200px"></div><div>数字类型<input type="number"><br>数字类型<input type="number" name="age" min="0" max="10" value="4" step="2"></div><div>搜索:<input type="search"></div><div>日期选择:<input type="date"><br>月份选择:<input type="month"><br>周数选择:<input type="week"><br><input type="datetime-local" name="" id=""></div><input type="submit"></form>
</body>
</html>