Web标准
为什么需要Web标准？
- 不同的开发人员写出的页面更标准、更统一
- 让Web的发展前景更广阔
- 内容能被更广泛的设备访问
- 更容易被搜索引擎搜索到
- 降低网站流量费用
- 使网站更易于维护
- 提高页面浏览速度
Web标准的构成
主要包括结构(Structure)、表现(Presentation)、行为(Behavior)三个方面
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，现阶段主要学的是 HTML |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是 CSS |
| 行为 | 行为是指网页模型的定义及交互的编写，现阶段主要学的是 Javascript |
Web标准提出的最佳体验方案： 结构、样式、行为相分离
简单理解：结构写到 HTML 文件中，表现写到 CSS 文件中，行为写到 JavaScript 文件中
HTML构造出身体，CSS决定了样式美观，JavaScript决定了交互的动态效果
HTML基础
HTML 标签
排版标签
标题标签
- 应用场景：新闻或文章等的 标题 ，用来突出显示文章主题
实现代码： h 系列标签
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>特点：
- 文字都有加粗
- 字号都有变大，h1→h6逐渐减小
- 独占一行
段落标签
- 应用场景：分段显示
- 代码实现：
<p>一段文字</p> 特点：
- 段落之间存在间隙
- 独占一行
换行标签
- 应用场景：强制文字换行
- 代码实现：
<br /> 特点
- 单标签
- 使文字强制换行
水平线标签
- 应用场景：分隔不同主题内容的水平线
- 代码实现：
<hr /> 特点：
- 单标签
- 在页面中显示一条水平线
文本格式化标签⭐
- 使用场景：需要对文字进行处理，添加 加粗 、 倾斜 、
删除线、 下划线 等效果 代码实现：
标签 说明 strong / b 加粗 em / i 倾斜 del / s 删除线 ins / u 下划线 实际开发中标签选择的原则： 标签语义化
- 根据语义选择正确对应的标签
- 如：需要写标题，使用h系列标签
- 如：需要些段落，使用p标签
- ……
好处：
- 对人：易于理解、记忆
- 对机器：有利于机器解析，对搜索引擎优化（SEO）有帮助
- 推荐使用 strong 、 em 、
del、 ins 语义更强烈的标签
媒体标签
图片标签
- 使用场景：在页面中显示图片
代码实现：
<img src="" alt="" />- 属性名="属性值"
- key="value" 键值对
常见属性
属性名 属性值 作用场景 备注 alt 替换文本 当图片加载失败时，显示alt替换文本 图片加载成功时不会显示 title 提示文本 鼠标悬停时，显示title提示文本 title属性不仅可以用于图片标签，还可作用于其他标签 width / height 宽度/高度 改变图片的宽度/高度 只设置宽度或高度中的一项时，另一项会等比例缩放 注意：
- 标签的属性写在 开始标签内部
- 标签名与属性之间 必须以空格分隔开
- 标签上可以同时存在多个属性
- 同一个标签内，属性之间以空格分割
- 属性与属性之间没有顺序要求
音频标签
- 应用场景：在页面中插入音频
- 代码实现：
<audio src="" conteols></audio> 常见属性：
属性名 功能 src 音频路径 controls 显示播放的控件 autoplay 自动播放（部分浏览器不支持） loop 循环播放 注意：
- 音频标签目前支持的格式为： MP3 、Wav 、Ogg
视频标签
- 应用场景：在页面中插入视频
- 代码实现：
<video src="" controls></video> 常见属性：
属性名 功能 src 视频路径 controls 显示播放的控件 autoplay 自动播放（谷歌浏览器中需要配合 muted实现静音播放）loop 循环播放 注意：
- 视频标签目前支持的格式为： MP4 、WebM 、Ogg
链接标签⭐
应用场景：页面跳转、文件下载等
- 其他称呼：a标签、超链接、锚链接
- 代码实现：
<a href="">超链接</a> 分类
外部链接
链接，外部网页，需以
http://为首<a href="https://www.baidu.com">百度</a>
内部链接
网站内部页面之间的相互链接，可直接写入页面名称
<a href="index.html">首页</a>
空链接
使用 "#" 占位
<a href="#">空标签</a>
下载链接
链接地址写入文件路径+文件名
<a href="./images.zip">下载文件</a>
特点：
- 双标签，内部可包裹内容
- 如果需要跳转到指定页面，需对a标签的 href 属性进行设置
其他属性：
target : 目标网页的打开形式
属性取值 效果 _self 默认值，在当前窗口跳转（覆盖原网页） _blank 在新的窗口中跳转（保留原网页）
列表标签
- 应用场景：在页面中按照 行 展示关联性的内容——如新闻列表、排行榜、账单等
- 特点：按照行的方式，整齐显示内容
种类：
- 无序列表
- 有序列表
- 自定义列表
无序列表：
- 应用场景：在页面中表示一组无顺序之分的列表
标签组成：
标签名 说明 ul 表示无需列表的整体，用于包裹li标签 li 表示无序列表的每一项，用于包含每一行的内容 显示特点：
- 列表的每一项前默认显示圆点标识
注意：
- ul标签中只允许包含li标签
- li标签可以包含任意内容
有序列表
- 应用场景：在页面中表示一组有顺序之分的列表
标签组成：
标签名 说明 ol 表示有序列表的整体，用于包裹li标签 li 表示有序列表的每一项，用于包含每一行的内容 显示特点
- 列表的每一项前默认显示序号标识
注意：
- ol标签中只允许包含li标签
- li标签可以包含任何内容
自定义列表
- 应用场景：页面的底部导航栏通常会使用自定义列表实现
标签组成：
标签名 说明 dl 表示自定义列表的整体，用于包裹dt/dd标签 dt 表示自定义列表的主题 dd 表示自定义列表的针对主题的每一项内容 显示特点：
- dd前会默认显示缩进效果
注意：
- dl标签中只允许包含dt/dd标签
- dt/dd标签可以包含任意内容
表格标签
表格的基本标签
- 应用场景：在页面中以行+列的单元格形式整齐展示数据
基本标签：
标签名 说明 table 表格整体，可用于包裹tr tr 表格每行，可用于包裹td td 表格单元格，可用于包裹内容 注意：
- 表格标签的嵌套关系：table > tr > td
表格的相关属性
- 应用场景：设置表格基本展示效果
常见属性：
属性名 属性值 效果 border 数字 边框宽度 width 数字 表格宽度 height 数字 表格高度 注意：
- 实际开发中，针对样式效果 推荐使用CSS进行设置
表格标题和表头单元格标签
- 应用场景：在表格中设置整体大标题和一列小标题
其他标签：
标签名 语义 说明 caption 表格大标题 表示表格整体大标题，默认在表格整体顶部剧中位置显示 th 表头单元格 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 注意：
- caption标签书写在table标签内部
- th标签书写在tr标签内部（用于替换td标签）
表格的结构标签
- 应用场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部）
结构标签：
标签名 语义 thead 表格头部 tbody 表格主体 tfoot 表格底部 注意：
- 表格结构标签内部用于包裹tr标签
- 表格的结构标签可以省略
- 作用：使代码语义性更强，提升浏览器的处理速度
合并单元格
合并单元格步骤：
- 明确合并哪几个单元格
通过左上原则，确定保留谁删除谁
- 上下合并 → 只保留最上的，删除其他
- 所有合并 → 只保留最左的，删除其他
给保留的单元格进行设置
- 跨行合并（rowspan）
- 跨列合并（colspan）
属性名 属性值 说明 rowspan 合并单元格的个数 跨行合并，将多行的单元格垂直合并 colspan 合并单元格的个数 跨列合并，将多列的单元格水平合并
表单标签
input系列标签
应用场景：在页面中显示收集用户信息的表单效果
- 如：登录、注册页面
标签名： input
- input标签可以通过 type属性值 的不同，展示不同效果
type属性值：
标签名 type属性值 说明 input text 文本框，用于输入单行文本 input password 密码框，用于输入密码 input radio 单选框，用于多选一 input file 多选框，用于多选多 input checkbox 文件选择，用于之后上传文件 input submit 提交按钮，用于提交 input reset 重置按钮，用于重置 input button 普通按钮，默认无功能，之后配合js添加功能 文本框
- 应用场景：在页面中显示 输入单行文本 的表单控件
- type属性值：text
常用属性：
属性名 说明 placeholder 占位符，提示用户输入内容的文本
单选框
- 应用场景：在页面中显示 多选一的单选 表单控件
- type属性值：radio
常用属性：
属性名 说明 name 分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中 checked 默认选中 注意：
- name属性对于单选框有分组功能
- 有相同name属性值的单选框为一组，一组中同时只能有一个被选中
文件选择
- 应用场景：在页面中显示 文件选择 的表单控件
- type属性值：file
常用属性：
属性名 说明 multiple 多文件选择
input按钮
- 应用场景：在页面中显示 不同功能的按钮 表单控件
type属性值：
标签名 type属性值 说明 input submit 提交按钮，点击之后提交数据给后端服务器 input reset 重置按钮，点击之后恢复表单默认值 input button 普通按钮，默认无功能，之后配合js添加功能 注意：
- 如果需要实现以上按钮功能，需要配合from标签使用
- form使用方法：使用form标签把表单标签一起包裹起来
button按钮标签
- 应用场景：在页面中显示用户点击的按钮
- 标签名： button
type属性值（同input按钮系列）
标签名 type属性值 说明 button submit 提交按钮，点击之后提交数据给后端服务器 button reset 重置按钮，点击之后恢复表单默认值 button button 普通按钮，默认无功能，之后配合js添加功能 注意：
- 谷歌浏览器中button默认是提交按钮
- button标签是双标签，更便于包裹其他内容，如：文字、图片等
下拉菜单标签
- 应用场景：在页面中提供多个选项的下拉菜单表单控件
标签组成：
- select标签：下拉菜单的整体
- option标签：下拉菜单中的每一项
常见属性：
- selected：下拉菜单的默认选中
文本域标签
- 应用场景：在页面中提供可输入多行文本的表单控件
- 标签名： testarea
常见属性：
- cols：规定了文本域的可见宽度
- rows：规定了文本域的可见行数
注意：
- 右下角可以拖拽以改变大小
- 实际开发时针对样式效果 推荐使用CSS进行设置
label标签
- 应用场景：常用于绑定内容与表单标签的关系
- 标签名： label
使用方法
方式一
- 使用label标签把文本等内容包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
方式二
- 直接使用label标签将内容和表单标签一起包裹起来
- 需要把label标签的for属性删除
语义化标签⭐
没有语义的布局标签
应用场景：实际开发时会大量用到 div 和 span 这两个没有语义的布局标签
- div 标签：独占一行
- span 标签：一行可以显示多个
有语义的布局标签
- 应用场景：HTML5新版本中，推出了一些有语义的布局标签供开发者使用
标签：
标签名 语义 header 网页头部 nav 网页导航 footer 网页底部 aside 网页侧边栏 section 网页区块 article 网页文章 注意：
- 以上标签显示特点和div一致（独占一行），但是比div多了不同的语义
字符实体
- 应用场景：在网页中展示特殊符号效果时，需要使用字符实体进行替代
- 结构： & + 英文字符
常见字符实体：
显示结果 描述 实体名称 空格 < 小于号 <> 大于号 >& 和号 &" 双引号 "' 单引号 '（IE不支持）¢ 美分（cent） ¢￡ 英镑（pound） £￥ 元（yen） ¥€ 欧元（euro） €§ 小节 §© 版权（copyright） ©right;
