HTML语义化
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
为什么语义化
- 为了在没有CSS的情况下，页面也能呈现出很好地内容结构。
- 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用。
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
- 便于团队开发和维护。
在不该用
div和span的时候，少用。div和span的作用是区域的划分，在使用div和span时加上class。html行内和块级是由css决定的，html标签并不管这些。html标签有各自的语义。写代码时不应该想这个元素是行内元素还是块级元素，应该想这个元素表示的语义。
空标签
没有闭合标签的称为空标签。下列不懂的标签可以搜索MDN。例：
command MDN
* <area>
* <base>
* <br>
* <col>
* <colgroup>
* <command>
* <embed>
* <hr>
* <img>
* <input>
* <keygen>
* <link>
* <meta>
* <param>
* <source>
* <track>
* <wbr>
可替换标签
含义：指标签会被替代，例如img标签会被下载的图片替代。
典型的可替换元素有<img>、<object>、<video>和 表单元素，如<textarea>、<input>。 某些元素只在一些特殊情况下表现为可替换元素，例如<audio>和<canvas>`。
head标签内可存在的标签
<meta charset="utf-8">
<title>Page Title</title>
<base href="https://example.com/page.html"> // 指定用于一个文档中包含的所有相对URL的基本URL。一份中只能有一个<base>元素。
<link rel="stylesheet" href="styles.css">
<style>
/* ... */
</style>
<script src="script.js"></script>
<script>
// function(s) go here
</script>
<noscript>
<!-- No JS alternative --> //如果用户浏览器不支持 script，则会显示 noscript 中的内容
</noscript>
一些标签
1. iframe标签
iframe标签就是在当前页面嵌套其他的HTML页面。iframe有一个name属性。
a 标签的 target 可以通过 name 指向这个 iframe
<iframe src="#" frameborder="0" name="aaa"></iframe> //frameborder清除默认的边框
<a href="https://www.baidu.com" target="aaa">nihao</a> //百度页面将在iframe标签中打开
2. a标签
a标签的target属性。有四个值，
_blank_self_parent_top。这四个值结合iframe标签理解。
// index.html
<body>
<iframe src="./index2.html"></iframe>
<div>
<p>123</p>
</div>
<body>
//index2.html
<body>
<iframe src="./index3.html"></iframe>
</body>
//index3.html
<body>
nihao
<a href="https://www.baidu.com" target="_blank">_blank nihao</a> //新开页面
<a href="https://www.baidu.com" target="_self">_self nihao</a> // 在当前页打开,即index3.html页面打开
<a href="https://www.baidu.com" target="_parent">_parent nihao</a> //父窗口打开，即index2.html页面打开
<a href="https://www.baidu.com" target="_top">_top nihao</a> //在祖先窗口打开，即index.html页面打开
</body>
a标签的
download属性，此属性指示浏览器下载URL而不是导航到它，因此将提示用户将其保存为本地文件。此属性仅适用于同源 URLs
还有一种方式可以使a标签执行下载而不是导航。就是HTTP响应的content-type:application/octet-stream
a标签的
href属性。
<a href="//qq.com">nihao</a> // 将使用本html文件的协议。点击之后，地址栏file://qq.com/
<a href="javascript:;">nihao</a> // 伪协议，点击将执行后面的JavaScript代码。设置一个点击之后什么也不做的a标签
<a href="javascript:alert('1');">nihao</a> //执行JavaScript代码
<a href="">nihao</a> //点击之后还是会刷新本页面
<a href="#">nihao</a> // 锚点，点击跳转到页面顶部
<a href="？name=xxx">nihao</a> //点击后在地址中添加?name=xxx，并作为参数发起一个get请求
3. form标签。
form标签主要用于发起一个post请求。form标签的target属性和a标签的一致
<form method="post" action="users"> // action:请求的服务器地址，method：请求方法，仅支持get/post两种
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交"> // 点击发起一个post请求，携带请求参数，name=用户输入&password=用户输入。请求参数的数据格式由请求首部content-type规定。
</form>
4. input标签。
input标签都给上name值。请求参数的key即为name,value为用户输入内容。
下方的请求参数?username=df&password=a&loveFruit=apple&choose=yes&group=1&group=2&group=4
<form action="user" method="get" target="_blank"> //此时选择使用get是方便查看请求参数
<label>用户名：<input type="text" name="username"></label>
<label>密码：<input type="password" name="password"></label>
水果:
<label><input type="checkbox" name="loveFruit" value="banana">香蕉</label>
<label><input type="checkbox" name="loveFruit" value="apple">苹果</label>
单选：
<label><input type="radio" name="choose" value="yes">对</label>
<label><input type="radio" name="choose" value="no">错</label>
<select name="group" multiple> // multiple属性可多选，按住ctrl键就可以多选。
<option value="">-</option>
<option value="1">第一组</option>
<option value="2">第二组</option>
<option value="3" disabled>第三组</option>
<option value="4" selected>第四组</option>
</select>
<input type="submit" value="提交">
</form>
<input type="button" value="button">和<input type="submit" value="提交">两个长的一模一样，请问两者有什么区别。
<form action="user" method="post">
<input type="text" name="username">
<input type="password" name="password">
<button>提交</button> // 也可触发提交表单
<button type="button">提交</button>
<input type="submit" value="提交"> // 点击可触发提交表单
<input type="button" value="button"> // 点击不可触发提交表单
</form>
input标签和label标签创建关联。
//一般这样写
<label for="username">用户名：</label> // 点用户名就可以使input标签聚焦。
<input type="text" name="username" id="username">
//另一种写法 用label包住input标签
<label>用户名：<input type="text" name="username"></label>
5. table标签
<table border="1" style="border-collapse: collapse"> //border-collapse使border没有空隙
<caption>成绩单</caption>
<colgroup>
<col width="100">
<col width="200">
<col bgcolor="pink" width="300">
<col width="400">
</colgroup>
<thead>
<tr>
<th>科目</th>
<th>班级</th>
<th>姓名</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<th>数学</th>
<td>1</td>
<td>小明</td>
<td>60</td>
</tr>
<tr>
<th>英语</th>
<td>1</td>
<td>小明</td>
<td>90</td>
</tr>
<tr>
<th>物理</th>
<td>1</td>
<td>小明</td>
<td>30</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总分</th>
<td></td>
<td></td>
<td>180</td>
</tr>
</tfoot>
</table>
6. dl、dt、dd标签
是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。例如下列的键值对。可以多个术语，一个描述的组合。或者一个术语，多个描述
姓名:某某
年龄：1000
<dl>
<dt>姓名：</dt> // 术语定义
<dd>某某</dd> // 描述
<dt>年龄：</dt>// 术语
<dd>1000</dd> // 描述
</dl>
7. strong标签
Strong 元素 (<strong>)表示文本十分重要，一般用粗体显示。
理解b标签和strong标签的差异：
必须要理解使用strong呈现出的表现形式不同于单纯的加粗。
8. em标签
em元素标记出需要用户着重阅读的内容， <em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。
i标签和em标签，i标签只是单纯的斜体，而em有着重的语义。
<strong>和<em>。em 表示内容的着重点，强调文本。strong元素表示某些重要性的文本，表示内容的重要性。
网友评论