概念性小知识点
- 语义化：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析
- 双标记：<标签名></标签名>
- 单标记：<标签名/>
常用的HTML标签
标题标签 ：h1 h2 h3 h5 h5 h6
- 语义化标签双标记
Tips:请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>效果图：
段落标签 p
语义化标签双标记
<p>段落元素由 p 标签定义。</p>效果图：
格式化标签
标签名 | 作用 | 是否语义化 | 单双标记 |
em | 让文本倾斜 | 是 | 双标记 |
i | 让文本倾斜 | 否 | 双标记 |
br | 换行 | 是 | 单标记 |
strong | 加粗 | 是 | 双标记 |
b | 加粗 | 否 | 双标记 |
<p>
<em>em标签让文本倾斜</em>
<br/> <!--换行标记-->
<strong>strong标签让文本加粗</strong>
<br/> <!--换行标记-->
<i>i标签让文本倾斜</i>
<br/> <!--换行标记-->
<b>b标签让文本加粗</b>
</p>效果图：
图片标签 img
- 语义化标签双标记
标签有两个必需的属性：src 属性 和 alt 属性。 此外常见的还有title，width，height 等属性。
属性 | 作用 |
src | 定义显示图像的 URL，可以是相对路径，绝对路径或者http的URL等 |
alt | 定义图像的替代文本，若网页无法加载图片，则会用该属性定义的文本展示 |
title | 主题，鼠标悬浮图片上显示的文字 |
width | 设置图像的宽度 |
height | 定义图像的高度 |
<img src="../img/cat.jpg" title="我是一只猫" alt="猜猜我是谁"
width="100" ,height="100" />
<img src="" title="我是一只猫" alt="猜猜我是谁" width="100" ,height="100" />效果图：（鼠标悬浮在图片上会将title属性的内容展示出来，截图截不出来）
列表标签
语义化标签双标记
列表类型 | 上级标签 | 下级标签 | 标签样例 |
有序列表 | ol | li | <ol><li></li><ol> |
无序列表 | ul | li | <ul><li></li><ul> |
自定义列表 | dl | dt | <dl><dt></dt><dd></dd></dl> |
自定义列表 | dt | dd | 展示效果的时可见dt是dd的行标签 |
<!-- 无序列表 -->
<ul type="cycle"> <!-- type="cycle" 将展示的圆圈改成实心展示，即可通过定义不同的type来改变列表的标记格式 -->
<li>北京</li>
<ul>
<li>海淀区</li>
<li>朝阳区</li>
</ul>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>html</li>
<li>css</li>
<li>js</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>自定义1</dt>
<dd>11</dd>
<dd>11</dd>
<dt>自定义2</dt>
<dd>22</dd>
<dd>22</dd>
<dt>自定义3</dt>
<dd>33</dd>
<dd>33</dd>
</dl>效果图：
超链接标签
语义化标签双标记
常见属性 | 作用 |
href | 定义连接的目标 |
target | 定义被链接的目标在何处显示 |
target常用值 | 作用 |
_blank | 在新窗口中打开被链接文档 |
_parent | 在父框架集中打开被链接文档 |
_self | 默认。在相同的框架中打开被链接文档 |
_top | 在整个窗口中打开被链接文档 |
framename | 在指定的框架中打开被链接文档 |
<a href="http://www.baidu.com" target="_blank">点我进行搜索</a>效果图：（点击后会跳转到一个加载百度首页的新网页）
表格标签
- 布局展示数据
标签名 | 描述 |
table | 定义一个表格 |
caption | 定义表格的标题 |
thead | 定义表格的表头，可不加 |
tbody | 定义表格主体，可不加 |
tfoot | 定义表格的表尾，可不加 |
tr | 定义表格的一行，tr中包含多个td或者th |
td | 定义表格的单元格，多个单元格组成一行，默认样式水平垂直居左显示 |
th | 定义表头单元格，默认样式让内容加粗居中 |
表格属性名称 | 作用 |
border | 单元格之间的分隔线粗细 |
width | 宽 |
heigth | 高 |
cellspacing | 单元格间距 |
cellpadding | 单元格内容与边框距离 |
align | 居中/居左/居右 |
单元格属性名称 | 作用 |
width | 宽 |
heigth | 高 |
align | 居中/居左/居右（水平） |
valign | 居上/居中/居下 （垂直） |
rowspan | 单元格垂直方向占多少行，例如设置rowspan=“2”,则该单元格会同时占据所在行和下一行的同列单元格 |
colspan | 单元格水平向占多少行，例如设置colspan=“2”,则该单元格会同时占据所在行当前单元格和右边单元格 |
<table border="1">
<caption>信息表格</caption>
<thead>
<tr>
<th>first</th>
<th>second</th>
<th>third</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>last</td>
<td>over</td>
</tr>
</tfoot>
</table>
<table border="1">
<caption>信息表格</caption>
<tr>
<th>first</th>
<th>second</th>
<th>third</th>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
<tr>
<td>last</td>
<td colspan="2">over</td>
</tr>
</table>效果图：
表单标签
form标签常用于收集数据,数据交互
input标签常用于用户输入数据
input标签类型 | 作用 |
text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符 |
button | 定义可点击按钮 |
checkbox | 定义复选框 |
file | 定义输入字段和 "浏览"按钮，供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段。该字段中的字符被掩码 |
radio | 定义单选按钮 |
reset | 定义重置按钮,重置按钮会清除表单中的所有数据 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器 |
常见标签属性 | 作用 |
name | 表示表单元素名称，以后想携带数据到后台，需要设置name |
value | 初始值 |
checked /checked=“checked” / checked=“true” | 表示是否被选中 |
selected | 下拉列表选项是否选中 |
readonly | 只读 |
disabled | 不能被操作，而且不能被提交 |
maxlength | 输入框最大长度 |
action | form表单提交动作 |
<form action="###">
<p>用户名 <input type="text" name="username" ></p>
<p>密 码 <input type="password" name="password" id=""></p>
<p>性别 <input type="radio" name="sex" id="" >男
<input type="radio" name="sex" id="" >女
</p>
<p>
擅长领域
<!-- 数组 -->
<input type="checkbox" name="major" id="">前端
<input type="checkbox" name="major" id="" checked>后端
<input type="checkbox" name="major" id="">数据库
<input type="checkbox" name="major" id="">运维
</p>
<p>
<select name="city" id="">
<option value="bj">北京</option>
<option value="nj" selected>南京</option>
<option value="sh">上海</option>
</select>
</p>
<p >
<textarea name="words" id="" cols="30" rows="10">理由</textarea>
</p>
<p>
<input type="file" name="file" id="">请上传文件
</p>
<p>
<input type="hidden" name="hiddenDate">
</p>
<p>
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
</p>
<p>
<input type="email" name="email" id="">邮箱
<!-- 会校验@符号 -->
</p>
<p>
<input type="datetime" name="date" id="">日期
</p>
<p>
<input type="image" src="../img/cat.jpg" alt="" width="100px" height="100px">
</p>
</form>效果图：
表单标签
标签名称 | 单双标签 | 描述 |
div | 双标签 | 该标签用于做网页布局 |
span | 双标签 | 对局部范围的修饰 |
pre | 双标签 | 根据内容来换行 |
s | 双标签 | 删除线 |
del | 双标签 | 删除线 |
<div>
头部
</div>
<div>主题</div>
<div>尾部 <span style="color: red;">2020-07-21</span></div>
<pre>
1
2
3
4
</pre>
<s>$1200</s>
<del>$1200</del>效果图：
使用语义化标签的好处
- 增强代码可读性
- 有利于团队协作
- 用户体验
