标签部分
元数据
重要：meta
示例代码
<meta name="viewport" content="width=devide-width,initial-scale=1”>
1.用于指定用户是否可以缩放web页面，并对相关选项进行设定，width和height，它们的值可以是以像素为单位的数字，也可以是一个特殊的标记符号。devide-width 视区宽度应为设备的屏幕宽度，devide-height，设备的屏幕高度。
2.user-scalable指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放。initial-scale用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下为1，设备会在浏览器中呈现出整个Web页面。设为1.0则显示未经缩放的Web页面。
<meta charset="UTF-8">
万国码
<meta name=“UA-X-Compatable” content=”EDGE”>
浏览器内核用什么渲染
<mata name=“keywords” content=“关键词1 2 3 4 5 6 7 8 9 0”>
<meta name=“description” content=“描述”>
关键字 搜索引擎优化
<meta name=“refresh” content=“1”>
每过一秒刷新一次
次要：title base link style
章节
重要：section nav artical aside header footer main
次要：h1~h6 address
示例代码：
<section>
<h1>PRC</h1>
<p>The People's Republic of China was born in 1949</p>
</section>
// section 文档中的节、区段
使用禁忌：
（1）不要将section元素用作设置样式的页面容器，那是div元素的工作。
（2）如果article元素、aside元素或nav元素更符合使用条件，不要使用section元素。
（3）不要为没有标题的内容区块使用section元素。
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
// nav 导航链接
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>
//article 元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容
<p>Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.</p>
<aside>
<p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>
<p>Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.</p>
// aside元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框
<header>Gecko facts</header>
<main role="main">
<p>Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Australia.</p>
<p>Many species of gecko have adhesive toe pads which enable them to climb walls and even windows.</p>
</main>
// main元素 呈现了文档的body或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
内容层次
重要：ol + li / ul + li / dl + dt + dd
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 </dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置</dd>
</dl>
预览
次要：p hr pre blockquote figure +figcaption
文字
重要：a
次要：em strong q time code kdb sub/sup mark br/wbr ins/del
嵌入内容
重要：img video canvas svg
次要：iframe audio
<video src="/i/movie.ogg" controls="controls">
your browser does not support the video tag
</video>
效果图
属性值
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
// canvas 标签定义图形，比如图表和其他图像。
canvas 标签只是图形容器，您必须使用脚本来绘制图形。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
表格
重要：table tbody thead tfoot tr td th
次要：无
<table>
<thead>
<tr>
<th>球员</th>
<th>号码</th>
<th>身高</th>
<th>体重</th>
<th>生日</th>
<th>国籍</th>
<th>出生地</th>
<tr>
</thead>
<tbody>
<tr>
<td>勒布朗·詹姆斯</td>
<td>23</td>
<td>2.03米/6英尺8英寸</td>
<td>113.4公斤</td>
<td>1984年12月30日</td>
<td colspan="2">美国</td>
</tr>
<tr>
<td>凯里·欧文</td>
<td>2</td>
<td>1.91米/6英尺3英寸</td>
<td>88公斤/193磅</td>
<td>1992年3月23日</td>
<td>美国/澳洲</td>
<td>澳洲</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>凯文·乐福</td>
<td>0</td>
<td>2.08米/6英尺10英寸</td>
<td>110公斤/243磅</td>
<td>1988年9月7日</td>
<td colspan="2">美国</td>
</tr>
</tfoot>
</table>
表单
重要：form label input button select option textarea
次要：progress
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="login">
<input type="text" name="sex">
<form action="这里写提交给服务器的地址" method="get">
<div class="submit">
<button>提交</button>
</div>
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username" value="zhangxinwei">
</div>
<div class="password">
<label for="password">密码</label>
<input id="password" type="password" name="password" placeholder="输入密码">
</div>
<div class="hobby">
<label>爱好</label>
<input type="checkbox" name="hobby" value="read"> 读书
<input type="checkbox" name="hobby" value="music"> 听歌
<input type="checkbox" name="hobby" value="study"> 学习
</div>
<div class="sex">
<label>性别</label>
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女"> 女
</div>
<div class="file">
<input type="file" name="myfile" accept="image/png">
</div>
<div class="select">
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="hangzhou">杭州</option>
</select>
</div>
<div class="textarea">
<textarea name="article">
多行文本，注意和 type=text的区别
</textarea>
<input type="hidden" name="csrf" value="12345623fafdffdd">
<input type="button" value="Buttom" /> 不会提交
<input type="submit" value="Submit" /> 会提交
<input type="reset" value="Reset" /> 重置输入
</div>
</form>
</div>
</body>
</html>
可交互元素
重要：无
次要：summary+details menu+menuitem
理解HTML语义化
- 语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
- 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
- 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
- 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
