目录
1.HTML页面固定结构
网页中的固定结构是要通过特点的HTML标签进行描述的
HTML骨骼结构由哪些标签组成
html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签： 网页的标题
<html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> </body> </html>
2.HTML语法规范
2.1 注释
样式：<!---->
注释快捷键： ctrl + / (对想要注释的那一行按下快捷键)
2.2 标签结构
1.常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容。
eg: <strong>文字变粗</strong>
2.少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
eg: <br> 换行用
<hr> 出现水平分割线
2.3 标签之间的关系
1.嵌套关系
2.并列关系
2.4 标签嵌套规范：
1.块级元素一般作为大容器，可以嵌套L文本、块级元素、行内块元素等等
但是 ：p标签不要嵌套div，p,h等级块元素
2.a标签内部可以嵌套任意元素
但是：a标签不能嵌套a标签
3 标签学习
3.1 标题标签 h
h系列标签， 1~6级标签，重要程度依次递减，文字都有加粗，独占一行
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6> 
3.2段落标签 p
用于分段显示
<p>这是一段文字</p>特点：
段落之间存在间隙
独占一行
3.3 换行标签 br
让文字强制换行显示
<br>
你好呀 <br> 好的3.4 水平线标签 hr
分割不同主题内容的水平线， 在页面中显示一天水平线
<hr>3.5文本格式化标签
需要让文字加粗，下划线，倾斜，删除线等效果
3.5 图像标签 img
在网页中显示图片
<img src="" alt="">src : 图片的地址
alt: 替换文本，当图片加载失败时，才会显示alt文本，如果加载成功不会显示
title: 提示文本，当鼠标悬停时，才显示的文本
width,height: 宽度和高度，如果只设置一个，另一个会自动等比例缩放（图片不会变形），如果同时设置两个，若设置不当，此时图片会变形
特点：
img标签需要展示对应的效果，需要借助标签的属性进行设置
3.6 音频标签 audio
在页面中插入音频
<audio src="./music.mp3" controls></audio>controls: 显示播放控件
autoplay: 自动播放（部分浏览器不支持）
loop： 循环播放
3.7 视频标签 video
在页面中插入视频
<video src="./video.mp4"></video>controls: 显示播放控件
autoplay: 自动播放（部分浏览器不支持）
loop： 循环播放
3.7 链接标签 a
点击之后，从一个页面跳转到另一个页面
<a href="./目标网页.html">超链接</a>target：控制目标网页的打开形式
取值：
_self :默认值，在当前窗口跳转（覆盖原网页）
_blank:在新窗口中跳转（保留原网页）
特点：
双标签，内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a标签的href属性
3.8 列表标签
在网页中按照行展示关联性的内容，如：新闻列表，排行榜，榜单
特点：按照行的方式，整齐显示内容
种类：无序列表，有序列表，自定义列表
3.8.1 无序标签：ul, li
在网页中表示一组无顺序之分的列表，如新闻列表
标签组成
| 标签名 | 说明 |
| ul | 表示无序列表的整体，用于包裹li标签 |
| li | 表示无序列表的每一项，用于包含每一行的内容 |
显示特点：列表每一项前默认圆点标识
注意：
ul标签中只允许包含li标签
li标签可以包含任意内容
<ul>
<li>榴莲</li>
<li>拼柜</li>
</ul>
3.8.2 有序列表
在网页中表示一组有顺序之分的列表：如排行榜
标签组成：
| 标签名 | 说明 |
| ol | 表示有序列表的整体，用于包裹li标签 |
| li | 表示有序列表的每一项，用于包含每一行的内容 |
显示特点： 列表每一项默认显示序号标识
注意点：
ol标签中只允许包含li标签
li标签可以包含任意内容
<ol>
<li>darcy</li>
<li>Bob</li>
</ol> 
3.8.3 自定义列表
在网页的底部导航中通常会使用自定义列表实现
标签组成：
| 标签名 | 说明 |
| dl | 表示自定义列表的整体，用于包裹dt/dd标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
显示特点：dd前 默认显示缩进效果
注意点：dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
</dl> 
3.9 表格基本标签
在网页中以行+列的单元格的方式整齐展示和数据
基本标签：
| 标签名 | 说明 |
| table | 表格整体，可用于包裹多个tr |
| tr | 表格每行，可用于包裹td |
| td | 表格单元格，可用于包裹内容 |
注意：标签嵌套关系：table> tr > td
表格相关属性
设置表格基本展示效果
常见属性：
| 属性名 | 属性值 | 效果 |
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
注意：实际开发时针对样式效果推荐用css设置
<table border="1", width="500" height="300">
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>哥哥</td>
<td>100</td>
<td>优秀</td>
</tr>
</table>
3.10 表格标题和表头单元格标签
在表格中表示整体大标题和一列小标题
其他标签：
| 标签名 | 名称 | 说明 |
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th | 表头单元格 | 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 |
注意： caption标签书写在table 标签内部
th标签书写在tr标签内部（用于替换td标签）
<table border="1">
<captiomn><p>学生成绩单</p></captiomn>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>哥哥</td>
<td>100</td>
<td>优秀</td>
</tr>
</table> 
3.11表格结构标签
让表格的内容结构分组，突出表格的不同部分（头部，主体，底部），使语义更加清晰
结构标签：
| 标签名 | 名称 |
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
注意点：
表格结构标签内部用于包裹tr标签
表格的结构标签可以省略
<table border="1">
<captiomn><p>学生成绩单</p></captiomn>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>哥哥</td>
<td>100</td>
<td>优秀</td>
</tr>
</tbody>
</table> 
3.12 合并单元格
合并单元格的步骤：
1.明确合并哪几个单元格
2.通过左上原则，确定保留谁删除谁
上下合并，只保留最上的，删除其他
左右合并，只保留最左的，删除其他
3.给保留的单元格设置：跨行合并或者跨列合并
| 属性名 | 属性值 | 说明 |
| rowspan | 合并单元格个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元格个数 | 跨列合并，将多列的单元格水平合并 |
注意：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并(不能跨 thead,tbody,tfoot)
<table border="1">
<captiomn><p>学生成绩单</p></captiomn>
<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>好</td>
</tr>
</tbody>
</table> 
3.13 表单标签
3.13.1 inpu系列标签
在网页中显示收集用户信息的表单效果，如：登录页，注册页
input标签可以通过type属性值的不同，展示不同效果、
type属性值：
| 标签名 | type属性值 | 说明 |
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbok | 多选框，用于多选多 |
| input | file | 文件选择，用于之后上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
文本框：<input type="text">
<br>
密码框：<input type="password">
<br>
<br>
单选框：<input type="radio">
<br>
<br>
多选框：<input type="checkbox">
<br>
<br>
上传文件：<input type="file"> 
3.13.2 占位符
在网页中显示输入单行文本的表单控件
type属性值：text
常用属性：palceholder 占位符，提示用户输入内容的文本。
文本框：<input type="text" placeholder="请输入">
<br>
密码框：<input type="password" placeholder="请输入密码"> 
3.13.3 单选功能和默认选中
在网页中显示多选一的单选表单控件
type属性值：radio
常用属性：
| 属性名 | 说明 |
| name | 分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中 |
| checked | 默认选中 |
注意：
name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中
单选框：<input type="radio" name="性别">男 <input type="radio" name="性别">女 
3.13.4 上传多个文件
在网页中显示文件选择的表单控件
type属性值：file
常用属性： multiple 多文件选择
上传文件：<input type="file" multiple>3.13.5 按钮
在网页中显示不同功能的按钮的表单控件
type属性值：
| 标签名 | type属性值 | 说明 |
| input | submit | 提交按钮，点击之后提交数据给后端服务器 |
| input | reset | 重置按钮，点击之后恢复表单默认值 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
注意：
如果需要实现以上的按钮功能，需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹起来即可
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮"> 
3.14 button按钮
在网页中显示用户点击的按钮
标签名：button
type属性值（同 type的按钮系列）
| 标签名 | type属性值 | 说明 |
| button | submit | 提交按钮，点击之后提交数据给后端服务器 |
| button | reset | 重置按钮，点击之后恢复表单默认值 |
| button | button | 普通按钮，默认无功能，之后配合js添加功能 |
注意：
谷歌浏览器中button默认是提交按钮
button标签是双标签，更便于包裹其他内容：文字，图片等
<button>我是按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮，没有任何功能</button> 
3.15 下拉菜单标签 select， option
在网页中提供多个选项的下拉菜单表单控件
标签组成：
select标签：下拉菜单的整体、
option标签：下拉菜单的每一项
常见属性：
selected: 下拉菜单的默认选中
<select name="" id="">
<option selected>北京</option>
<option>上海</option>
<option>深圳</option>
<option>广州</option>
</select> 
3.16 文本域标签 textarea
在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：
cols:规定了文本域内可见宽度
rows:规定了文本域内可见行数
注意点：
右下角可以拖拽改变大小
实际开发时针对样式效果推荐css设置
<textarea name="" id="" cols="30" rows="10"></textarea>3.17 label标签
常用于绑定内容与表单标签的关系
标签名：label
使用方法1：
使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应id属性值
使用方法2：
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可
性别：
<input type="radio" name="sex" id="nan"><label for="nan">男</label>
<label ><input type="radio" name="sex">女</label> 
3.18 语义化标签 div ，span
实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
3.19 有语义的布局标签 header, nav, dotter, aside, section, article
在HTML5新版本中，推出了一些有语义的布局标签供开发者使用（ 手机端 ）
标签：
| 标签名 | 语义 |
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
注意：
以上标签显示特点和 div一致，但是比div多了不同的语义
3.20 字符实体
能通过字符实体在网页中显示特殊符号
在网页中展示特殊符号效果时，需要使用字符实体替代
结构：&英文；
常见字符实体：
<body>
这是一个HTML文档 哈哈哈
</body> 
扫一扫
1249
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
