一、HTML网页布局概述
1、Web标准目的
统一不同浏览器的渲染效果，提升用户体验。
2、Web标准的构成
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 用于构建页面的元素和内容。 |
| 表现 | CSS | 控制网页元素的外观、位置等页面样式，例如颜色、大小等。 |
| 行为 | JavaScript | 定义网页模型并实现与页面的交互。 |
Web标准要求⻚⾯实现：结构、表现、⾏为三层分离
二、HTML的基本结构标签
html标签：⽹⻚的整体
head标签：⽹⻚的头部
body标签：⽹⻚的身体
title标签：⽹⻚的标题
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体内容
</body>
</html>三、常用HTML标签
1、html标签的结构
结构说明：
1. 标签由、/、英⽂单词或字⺟组成。并且把标签中<>包括起来的英⽂单词或字⺟称为标签名
2. 常⻅标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之 间包裹内容
3. 少数标签由⼀部分组成，我们称之为：单标签。⾃成⼀体，⽆法包裹内容
2、HTML标签的属性
属性名 = 属性值
属性注意点：
1. 标签的属性写在开始标签内部
2. 标签上可以同时存在多个属性
3. 属性之间以空格隔开
4. 标签名与属性之间必须以空格隔开
5. 属性之间没有顺序之分
3、标签结构分类
| 类型 | 说明 | 示例 |
|---|---|---|
| 双标签 | 有开始和结束标签 | <p>内容</p> |
| 单标签 | 自闭合，不包裹内容 | <img>, <br> |
4、显示模式分类
| 类型 | 说明 | 示例 |
|---|---|---|
| 块元素 | 独占一行，可设宽高 | div, h1~h6 |
| 行内元素 | 不独占一行，不可设宽高 | span, a |
| 行内块元素 | 不独占一行，可设宽高 | img, input |
5、常用标签详解
① 基础布局标签
| 标签 | 说明 | 特点 |
|---|---|---|
h1~h6 |
标题 | 1 、标签的⽂字都有加粗 2 、标签的⽂字都有变⼤，从 h1~h6 ⽂字逐渐减⼩ 3 、每⼀个标题独占⼀⾏ |
p |
段落 | 1 、段落之间存在间隙 2 、每个段落是独占⼀⾏ |
a |
超链接 | 双标签 取值：路径 内部链接：推荐使⽤相对路径 2 、 target ：⽬标⽹⻚的打开⽅式 取值： 1 、 _self ： ( 默认值 ) 在当前窗⼝中进⾏跳转，原⽹⻚会被覆盖 2 、 _blank ：在新窗⼝中进⾏跳转，原⽹⻚保留 |
img |
图片 | 单标签 作⽤：在⽹⻚中展示⼀张图⽚ 属性： 1 、 src ：告诉浏览器要显示哪⼀张图⽚ 属性值：路径（如果图⽚和当前⻚⾯在同级⽬录下，此时直接写图⽚的名字即可） 2 、 alt ：替换⽂本 当图⽚加载失败时（如：路径写错了），才显示的⽂字 3 、 title ：提示⽂本 当⿏标悬停在图⽚上时，才显示的⽂字 4 、 width ：图⽚的宽度 5 、 height ：图⽚的⾼度 注意点： 1 、如果只设置图⽚的宽度或者⾼度，此时另⼀个会⾃动等⽐例缩放 2 、如果同时设置了两个，若设置不当此时图⽚可能会变形 |
audio |
音频 | 属性： 1 、 src ：路径 2 、 controls ：播放的控件 3 、 autoplay ：⾃动播放（部分浏览器不⽀持） 4 、 loop ：循环播放 |
video |
视频 | 属性： 1 、 src ：路径 2 、 controls ：播放的控件 3 、 autoplay ：⾃动播放（部分浏览器不⽀持） —— 》在⾕歌浏览器中写 muted 可以完成 静⾳的⾃动播放 4 、 loop ：循环播放 |
div |
块级容器 | 无语义，用于布局，独占一行 |
span |
行内容器 | 无语义，用于文本或小范围样式，一行多个 |
br |
换行 | 单标签，作⽤：强制换⾏ |
hr |
水平线 | 单标签，作⽤：分割不同主题的⽔平线 |
strong |
加粗（语义化） | 推荐使用 |
em |
倾斜（语义化） | 推荐使用 |
② 结构布局标签
列表
| 类型 | 标签 | 说明 |
|---|---|---|
| 无序列表 | ul > li |
无顺序(ul 表示⽆序列表的整体,用于包裹li标签；li 表示⽆序列表的每⼀项，用于包含每一行的内容） |
| 有序列表 | ol > li |
有顺序（ol 表示有序列表的整体，用于包裹li标签； li 表示有序列表的每⼀项，用于包含每一行的内容） |
| 自定义列表 | dl > dt, dd |
术语与描述 |
表格
在⽹⻚中以⾏+列的单元格的⽅式整⻬展示和数据
| 标签名 | 说明 |
|---|---|
| table | 表格整体，可用于包裹多个tr |
| tr | 表格每行，可用于包裹td |
| td | 表格单元格，可用于包裹内容 |
注意点：标签的嵌套关系为 table > tr > td。
<table>
<tr>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>100分</td>
</tr>
</table>常见相关属性
属性名 |
属性值 |
效果 |
|---|---|---|
border |
数字 |
边框宽度 |
width |
数字 |
表格宽度 |
height |
数字 |
表格高度 |
其他标签
| 标签名 | 名称 | 说明 |
|---|---|---|
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th | 表头单元格 | 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中 |
注意点：
- caption标签书写在table标签内部。
- th标签书写在tr标签内部（用于替换td标签）。
合并单元格：
rowspan：跨行合并colspan：跨列合并
CSS建议：border-collapse: collapse; 合并边框
表单
场景：在⽹⻚中显示收集⽤户信息的表单效果，如：登录⻚、注册⻚
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | text | 文本框，用于输入单行文本。 |
| input | password | 密码框，用于输入密码，输入内容通常会以掩码形式显示。 |
| input | radio | 单选框，用于在多个选项中多选一，同一组单选框需设置相同的name属性值。 |
| input | checkbox | 多选框，用于在多个选项中多选多。 |
| input | file | 文件选择框，用于选择文件，以便之后上传文件。 |
| input | submit | 提交按钮，用于提交表单数据到服务器。 |
| input | reset | 重置按钮，用于将表单内的输入字段重置为初始值。 |
| input | button | 普通按钮，默认无功能，通常需要配合JavaScript添加点击等功能。 |
<form action="/submit" method="post">
<input type="text" name="username">
<textarea name="intro"></textarea>
<select name="city">
<option value="sh">上海</option>
</select>
<button type="submit">提交</button>
</form>表单控件：
input：input标签可以通过type属性值的不同，展示不同效果
textarea：场景：在⽹⻚中提供可输⼊多⾏⽂本的表单控件（cols ：规定了⽂本域内可⻅宽度 rows ：规定了⽂本域内可⻅⾏数）
select：场景：在⽹⻚中提供多个选择项的下拉菜单表单控件（select 标签：下拉菜单的整体 option 标签：下拉菜单的每⼀项 常见属性：selected ：下拉菜单的默认选中）
button：在⽹⻚中显示⽤户点击的按钮
| 标签名 | type属性值 | 说明 |
|---|---|---|
<button> |
submit | 提交按钮，用户点击后，会将所在表单内的数据提交给后端服务器进行处理。 |
<button> |
reset | 重置按钮，用户点击时，会把表单中的各个输入字段恢复到初始的默认值状态。 |
<button> |
button | 普通按钮，本身不具备特定功能，通常需要配合JavaScript代码来为其添加点击等交互功能。 |
label标签：场景：常⽤于绑定内容与表单标签的关系
使⽤⽅法①：
1. 使⽤ label 标签把内容（如：⽂本）包裹起来
2. 在表单标签上添加 id 属性
3. 在 label 标签的 for 属性中设置对应的 id 属性值
使⽤⽅法②：
1. 直接使⽤ label 标签把内容（如：⽂本）和表单标签⼀起包裹起来
2. 需要把 label 标签的 for 属性删除即可
常用属性：
name：字段名
placeholder：提示文本
checked：默认选中
selected：默认选中（下拉菜单）
multiple：多选（文件/下拉）
四、路径与语义化标签
1、路径
| 类型 | 说明 | 示例 |
|---|---|---|
| 相对路径 | 从当前⽂件开始出发找⽬标⽂件的过程 下级⽬录：直接写：⽂件夹名 / ⽬标⽂件名字！ 上级⽬录：直接下： ../ ⽬标⽂件名字！） |
./image.jpg |
| 绝对路径 | 指⽬录下的绝对位置，可直接到达⽬标位置，通常从盘符开始的路径 | C:/images/1.jpg |
2、语义化布局标签（HTML5）
| 标签 | 说明 |
|---|---|
header |
页头 |
nav |
导航 |
footer |
页脚 |
aside |
侧边栏 |
section |
区块 |
article |
文章 |