一、HTML骨架组成
html骨架结构由四个标签组成：
- html：网页的整体。
- head：网页的头部。
- title：网页的标题。
- body：网页的身体。
<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>
</body>
</html>
二、HTML标签结构
- 组成结构：标签由<、>、/、英文单词或字母组成，标签中<>包裹起来的英文单词或字母称为标签名。
- 双标签：常见的标签由两部分组成，前部分叫开始标签，后部分叫结束标签。两部分之间包裹着内容。
- 单标签：少部分标签由一部分组成，自成一体，无法包裹内容。
三、标签之间的关系
- 父子关系（嵌套关系）：具有层级嵌套的标签，例如head和title标签。
- 兄弟关系（并列关系）：并列存在的标签，例如head和body标签。
四、标签记录
1.排版标签
标题标签<h1></h1>
- 在新闻和文章的页面中，都离不开标题，用来突出显示文章主题。标题标签一共分为6个等级，格式为、…，尖括号中的数字就是标题等级。
- 文字都有加粗。
- 文字都有变大，且从h1->h6文字逐渐减小。
- 独占一行。
段落标签<p></p>
- 在新闻和文章的页面中，用于分段显示。
- 段落之间存在间隙。
- 独占一行。
换行标签标签<br>
让文字强制换行。
水平分割线标签
水平方向的一条横线。
2.文本格式化标签
加粗<b></b>、<strong></strong>，给文字加粗。
下划线<u></u>、<ins></ins>，给文字加下划线。
倾斜<i></i>、<em></em>，让文字倾斜。
删除线<s></s>、<del></del>，给文字加删除线。
- 四种格式化都有两个标签，且显示效果完全一样。
- 不换行。
- 后者表示的强调语义更强烈，一般比较重要的标签会选择后者。
3.媒体标签
图片标签<img src="" alt="" title="" width="" height="">
- scr:图片文件路径。
- alt:替换文本，在图片显示失败时显示alt的文字。
- title:鼠标在图片处悬停时显示的文字。
- width、height:宽度和高度。如果都不设值，以图片实际尺寸显示；如果只给一个设值，图片会等比例缩放；如果给两个都设值，图形有可能会变形。
音频标签<audio src="" controls autoplay loop></audio>
目前支持三种格式：MP3、Wav、Ogg。
- scr:音频文件路径。
- controls:显示播放的控件。
- autoplay:自动播放（部分浏览器不支持）。
- loop:循环播放。
视频标签<video src="" controls autoplay muted loop></video>
- scr:视频文件路径。
- controls:显示播放的控件。
- autoplay:自动播放（部分浏览器不支持，谷歌浏览器可以通过autoplay后面跟一个muted属性，实现静音自动播放）。
- loop:循环播放。
路径
- 绝对路径：目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径，例如D:\day01\images\1.jpg。
- 相对路径：从当前文件开始出发找目标文件的过程，./表示当前位置，…/表示上级位置，”文件夹名“+”/“表示下级路径。
4.链接标签<a href="" target=""></a>
- href:跳转地址。如果设置#表示空链接，点击后回到网页顶部。
- target:目标网页的打开形式。
_self（默认值）表示在当前窗口中跳转（覆盖原网页），_blank表示在新窗口中跳转（保留原网页）。 - 默认文字有下划线。
- 未点击过时，默认文字显示蓝色。点击过之后文字显示紫色（清除浏览器历史记录可恢复蓝色）。
5.列表标签
无序列表<ul><li></li></ul>
- 在网页中表示一组无顺序的列表，如：新闻列表。
- 每组数据开头默认有个圆点。
- ul标签中只允许包含li标签，li标签中可以包含任意内容。
有序列表<ol><li></li></ol>
- 在网页中表示一组有顺序之分的列表，如：排行榜。
- 列表的每一项前默认显示序号标识。
- ol标签中只允许包含li标签。
- li标签可以包含任意内容。
自定义列表<dl><dt></dt><dd></dd></dl>
- 在网页的底部导航中通常会使用自定义列表实现。
- dd前会默认显示缩进效果。
- dl标签中只允许包含dt/dd标签。
- dt/dd标签可以包含任意内容。
6.表格标签
<table><caption></caption><tr><th></th><td></td></tr></table>
在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表。
- table:表格整体，可用于包裹多个tr。
- caption:表格大标题。默认在整个表格整体的顶部居中位置。
- tr:表格每行，可用于包裹多个td。
- th:表头标签，有加粗效果。一般在第一行（tr）中包裹th标签表示表头。
- td:表格单元格，可用于包裹内容。
常见属性：
- border：边框宽度。
- width：表格宽度。
- height：表格高度。
- rowspan：跨行合并单元格，竖直方向将多个单元格合并，保留最上边单元格，其他删除。
- colspan：跨列合并单元格，水平方向将多个单元格合并，保留最左边单元格，其他删除。
- 合并单元格属性加载td标签中；只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）。
有时为了让表格突出表现不同部分，和浏览器可以更快的渲染表格，可以将表格分为头部（thead标签）、主体（tbody）、底部（tfoot）三个部分。
代码示例：
<table border="1">
<caption>学生成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评级</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td rowspan="2">100分</td>
<td>优秀</td>
</tr>
<tr>
<td>小红</td>
<!-- <td>80分</td> -->
<td>良好</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>分数都不错</td>
<td>评级都不错</td>
</tr>
</tfoot>
</table>
7.表单标签
input系列标签<input type="">
input标签可以通过type属性值的不同，展示不同效果。
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，用于多选多 |
| input | file | 文件选择，用于上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置，恢复表单默认值。 |
| input | button | 普通按钮，默认无功能，配合js添加功能。 |
注意点：type为submit、reset时，可以点击按钮提交或重置一些输入框的内容。但是需要将这些输入框和按钮放在同一个表单域（form）中，否则点击无效。代码示例：
<form action="">
用户名：<input type="text">
<br>
密码：<input type="password">
<br>
<input type="submit">
<input type="reset">
</form>
其他常用属性：
- placeholder：占位符，用于提示用户输入内容的文本。
- value：用户输入的内容。
- name：分组。有相同name属性值的单选框为一组，一组中只能同时有一个被选中。
- check：默认选中，一般加在单选框或多选框上。
- multiple：多文件选择。
button标签<button></button>
button标签设置属性type值为submit、reset、button，同input标签的按钮样式一样。
下拉菜单标签<select><option></option></select>
- select：下拉菜单的整体。
- option：下拉菜单的每一项。
常见属性：
selected：默认选中，加在option标签中。
文本域标签<textarea"></textarea>
用来显示多行文字，可以自动换行。
常见属性：
- cols：规定了文本域内可见宽度。
- rows：规定了文本域内可见行数 。
label标签<label for=""></label>
场景：常用于绑定内容与表单标签的关系。例如，选择性别时，不光选择单选框有效，要求选择旁边的“男”、“女”文字也有效。
使用方法①：
- 使用label标签把内容（如：文本）包裹起来。
- 在表单标签上添加id属性。
- 在label标签的for属性中设置对应的id属性值。
使用方法②：
- 直接使用label标签把内容（如：文本）和表单标签一起包裹起来。
- 需要把label标签的for属性删除即可。
代码示例：
<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
<label><input type="radio" name="sex"> 女</label>
8.语义化标签
没有语义的标签：
<div></div>:一行只显示一个（独占一行）。<span></span>:一行可以显示多个。
有语义的布局标签：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用，一般用在手机端显示。这些标签显示特点和div一致，但是比div多了不同的语义 。
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
字符实体：在网页中展示特殊符号效果时，需要使用字符实体替代，如空格：
1524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
