1. Web 标准：
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，现阶段主要为HTML |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS |
| 行为 | 行为是指网页模型的定义及交互的编写，现阶段主要为Javascript |
Web标准最佳体验方案：结构、样式、行为相分离
HTML 标签（一）
1. HTML 语法规范
1.1 基本语法规范
双标签：<html> </html>
单标签：<br />
1.2 标签关系
包含关系：
<head>
<title></title>
<head>
并列关系：
<head></head>
<boday></boday>
2. HTML 基本结构标签
2.1 HTML 网页
| 标题名 | 定义 | 说明 |
|---|---|---|
<html></html> | HTML标签 | 页面中最大的标签，根标签 |
<head></head> | 文档头部 | |
<title></title> | 文档标题 | 网页标题 |
<body></body> | 文档主体 | 元素包含文档所有内容 |
3. 开发工具
3.1 VSCode 的使用
新建文件：Crtl + N
保存：Ctrl + S 保存为.html文件
生成页面骨架结构：输入！+ Tab
3.2 文档类型声明标签
<!DOCTYPE html>
位于文档中最前面位置，处于 <html> 之前，
表示：当前页面采用HTML5版本显示网页
3.3 lang 语言种类
<html lang="en">
en 定义语言为英文
zh-CN 定义语言为中文
3.4 字符集
<meta charset="UTF-8">
字符集（Characher set）是多个字符的集合。以便计算机能够死别和存储各种文字。
在 <head> 标签内，可以通过 <meta> 标签的 charest 属性来规定HTMAL文档应该使用那种字符编码。
charset 常用值有：GB2312、BIG5、和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家长要用到的字符。
4. 常用标签
4.1 标签语义
标签含义，让页面结构更清晰
4.2 标题标签
<h1>这是一级标题<h1>
···
<h6>这是六级标题<h6>
- HTML提供了6个等级网页标签，即
<h1> ~ <h6>(head )
4.3 段落和换行标签
段落标签
<p>这是一个段落标签</p>
<p>（ patagraph ）标签用于定义段落，它可以将整个HTML网页分为若干个段落。
文本会根据浏览器窗口大小自动换行
段落之间会有段间距
换行标签
<br /> 或 <br>
<br />（break）标签用于某段文本强制换行
<br /是单标签><br />标签只是简单的开始新的一行，行与行之间没有段间距
练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>体育新闻</title>
</head>
<body>
<h1>水花61分伊戈达拉制胜抢断 西决勇士再胜开拓者总分2-0</h1>
<h4> 数据统计：水花兄弟合砍61分</h4>
<p>库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位，仅次于詹姆斯
和杜兰特。汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-格林得到16分10篮板7助攻5盖帽，凯文-鲁尼
得到14分7篮板2助攻，今天勇士有7名替补出场。</p>
<h4>兄弟对决升级：小库里给哥哥造成压力</h4>
<p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力，他出场19分钟，7投1中只得到3分3篮板2助攻
在场期间输掉10分。但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥
哥库里，在防守端给库里造成了极大的困扰。</p>
<p>作者：pink老师<br />
2019-8-8</p>
</body>
</html>
4.4 文本格式化标签
在网页中为文本设置 粗体、斜体、或 下划线 等效果，使文本以特殊方式显示。
- 突出重要性
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong> 或 <b></b> | |
| 倾斜 | <em></em> 或 <i></i> | |
| 删除线 | <del></del> 或 <s></s> | |
| 下划线 | <ins></ins> 或 <u></u> | |
| 引用 | <q></q> |
<strong>加粗</strong>
<em>倾斜</em>
<del>删除</del>
<ins>下划线</ins>
4.5 <div> 与 <span> 标签
<div> (diviision) 和 <span> 没有语义，用来分区内容
<div></div>
<span></span>
<div>标签用来布局，一行只能放一个<span>标签用来布局，一行可以放多个
4.6 图像标签和路径
4.6.1图像标签
<img> (image) 标签用于定义 HTML 页面中的图像
<img src="图像URL" />
src 是 <img> 标签的必须属性，它用于指定图像文件的路径和文件名
图像标签的其他属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能显示的替换文本 |
| title | 文本 | 提示文本，鼠标放到图像上显示的文本 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
<img src="图片名.jpg" alt="图片显示出错" title="图片描述" width="500" height="300" border="10"/>
wigth 与 height 一般只设置一个，另外一个会自动等比例缩放
- 图像标签可以拥有多个属性，必须写在标签名后面
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
- 属性采取键值对的格式，即 key=“vaue” 的格式，属性 =“属性值”
练习：
4.6.2 路径
目录文件夹和根目录
- 目录文件夹：存放页面所需材料
- 根目录：目录文件夹第一层
相对路径：
以引用文件所在位置为参考基础而建立的目录路径，图片相对于HTML页面的位置
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级，如 <img src="picture.jpg"> | |
| 下一级路径 | / | 图像位于HTML文件下一级，如 <img src="images/picture.jpg"> |
| 上一级路径 | …/ | 图像位于HTML文件上一级，如 <img src="/picture.jpg"> |
绝对路径：
目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径或完整的网络地址
"D:\web\img\logo.png" 或 “https://www.baidu.com/img/dong.gifs”
4.7 超链接标签
在 HTML 标签中,<a>标签用于定义超链接，作用是从一个页面链接到另一个页面
4.7.1 链接的语法格式
<a></a> (anchor) “锚”
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| 属性 | 作用 |
|---|---|
| href | 必须属性 指定链接目标的 url 地址 |
| target | 指定链接页面的打开方式，_self 为默认值，_blank 为在新窗口打开 |
练习：
4.7.2 超链接分类
| - [ ] | 链接分类 | 样式 |
| :----------: | -------------------------------------------------------------------------------------------------------------- |
| 外部链接 | <a href="http://www.baidu.com">百度</a> |
| 内部链接 | 网站内部页面之间的相互链接<a href="index.html">首页</a> |
| 空连接 | 暂时没有确定链接目标时<a href="#">待加入超链接的内容</a> |
| 下载链接 | 如果 href 里面的地址指向一个文件或者压缩包，点击就会进行下载操作 |
| 网页元素链接 | 文本、图像、表格、音频、视频等各种网页元素都可以添加超链接<a href="#"><img src="img.jpg"/></a> |
| 锚点链接 | 快速定位到同一页面中的某个位置<br / ><a href="#chepter1">第二章</a><h2 id="chepter1">第二章介绍</h2> |
5. HTML的注释与特殊字符
5.1 注释
<!-- 对代码内容进行注释，不执行不显示在页面中 -->
在 VSCode 中的快捷键：ctrl + /
5.2 特殊字符
在 HTML 页面中，一些特殊符号很难直接使用，可以用字符代码来代替
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| space | 空格符 | |
| < | 小于号 | ⁢ |
| > | 大于号 | > |
| & | 和 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 商标 | ® |
| ℃ | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方（上标2） | ² |
| ³ | 立方（上标3） | &su |
HTML 标签（二）
1. 表格标签
表格是实际开发中非常常用的标签
1.1 表格的主要作用
表格主要用于展示数据，布局（框）要用到 CSS
1.2 表格的基本用法
<table></table>用于定义表格的标签<tr></tr>用于定义表格中的行，必须嵌套在<table></table>标签中<td></td>(table data) 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
<table>
<tr>
<td>单元格信息1</td>
<td>单元格信息2</td>
···
</tr>
···
</table>
1.3 表头单元格标签
表头单元格位于表格第一行或第一列，表头单元格里面的文本内容会居中加粗显示
<th></th>(table head) 表示表格的表头部分
<table>
<tr>
<th>表头单元格信息1</th>
<th>表头单元格信息2</th>
</tr>
<tr>
<td>单元格信息1</td>
<td>单元格信息2</td>
···
</tr>
···
</table>
1.4 表格属性
实际开发不常用，CSS会用到
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| borden | 1 或 “” | 规定表格是否拥有边框，默认为“”,表示没有 |
| cellpadding | 像素值 | 规定单元格之间的空白，默认 1 像素 |
| cellingspace | 像素值或百分比 | 规定单元格的宽度 |
<table align="center" borden="1" cellpadding="0" cellspacing="0" width="500" heigth="300">
<!--表格居中，边框宽度为1，文字与边框距离为0，边框与边框距离为0，表格宽500，高300-->
<tr>
<th>表头单元格信息1</th>
<th>表头单元格信息2</th>
</tr>
<tr>
<td>单元格信息1</td>
<td>单元格信息2</td>
···
</tr>
···
</table>
1.5 表格结构标签
在较长表格中更好的分清表格结构，将表格分割成表格头和表格主体两大部分
<thead></thead>定义表格的 头部区域，内部必须有<tr>标签<tbody>表定义表格的 主体区域以上标签需存放在
<table></table>标签中
<table>
<thead>
<tr>
<th>表头单元格信息1</th>
<th>表头单元格信息2</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格信息1</td>
<td>单元格信息2</td>
···
</tr>
<tbody>
···
</table>
1.6 合并单元格
1.6.1合并方式：
跨行合并：rowspan
- 目标单元格：最上侧单元格
跨列合并：colapan
- 目标单元格：最左侧单元格
1.6.2 合并步骤：
确定合并方式（跨行或跨列）
找到目标单元格，标记合并方式、合并的单元格数量
<td rowspan="2"> </td> <td colspan="2"> </td>删除多余单元格
2. 列表标签
表格是用来展示数据的，列表是用来布局的
特点：整齐有序
分类：无序列表、有序列表、自定义列表
2.1 无序列表 <ul> (unordered list)
- 无序列表之间没有顺序级别之分，是并列的
<ul>中只能嵌套<li><li>与</li>之间可以容纳所有容器
- 无序列表会带有自己的样式属性，但在实际使用中一般会使用CSS来设置
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>
<p> </p>
</li>
···
</ul>
2.2 有序列表<ol> (ordered list)
<ol>中只能嵌套<li><li>与<li>之间可以容纳所有容器
- 有序列表会带有自己的样式属性，但在实际使用中一般会使用CSS来设置
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>
<p> </p>
</li>
···
</ol>
2.3 自定义列表 <dl>(definitin list)
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
<dl> (definitin list) 定义列表
<dt> (definitin term) 定义项目/名字
<dd> (definitin describe) 描述每一个项目
<dl>只能包含<dt>和<dd><dt>和<dd>没有个数限制，一般一个<dt>对应多个<dd>
<dl>
<dt>名词1</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
···
</dl>
3 表单标签
3.1 表单组成
一个完整的表单由表单域、表单控件、提示信息组成
3.2 表单域
表单域是一个包含表单元素的区域
<from> 定义表单域，以实现用户信息的收集和传递
<form action="url地址" method="提交方式" name="表单域名称">
各种表单控件元素
</form>
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url 地址 | 用于指定接收并处理表单数据的服务器程序的 url 地址 |
| method | get/post | 用于设置表单数据的提交方式 |
| name | 名称 | 用于指定表单名称，以区分同一个页面下的多个表单域 |
3.3 表单控件
3.3.1 <inport> 输入表单元素
type 属性:
| 属性值 | 描述 |
|---|---|
| text | 定义单行输入字段，默认宽度为 20 个字符 |
| password | 定义密码字段，该字段字符被掩码 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| button | 定义可点击按钮（一般通过 Javascript 启动脚本） |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| reset | 定义重置按钮，清楚表单中所有数据 |
| submit | 定义提交按钮，把表单数据发送到服务器 |
<form>
用户名：<input type="text"> <br />
密码：<input type="password"> <br />
...
</form>
其他属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 用户自定义 | 定义 input 元素的名称 |
| value | 用户自定义 | 定义 input 元素的值 |
| checked | checked | 规定此 input 元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符最大长度 |
- name 和 value 是每个表单元素都有的属性值，主要给后台人员使用
- name 表单元素的名字，要求单个按钮和复选框 name 值相同
- checked 属性主要针对单按钮和复选框，主要作用于打开页面默认选中某个表单元素
- maxlength 定义表单元素输入的最大字符数
<form>
用户名：<input type="text" name="username" value="请输入用户名"> <br>
密码：<input type="password" name="password"> <br>
性别：<input type="radio" name="sex" value="man"> 男 <input type="radio" name="sex" value="woman"> 女
</form>
<label> 标签
<label> 标签为 input 元素定标注（标签）
<label> 标签用于绑定一个表单元素，当点击标签内文本时，浏览器光标会自动将焦点转到对应的表单元素上。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
3.3.2 <select> 下拉表单元素
页面中有多个选项候选，为节约页面空间可以使用 <select> 控件定义下拉列表
<select>中至少包含一对<option>- 在
<option>中定义selected="selected"时，当前项即为默认选项
<select>
<option selected>选项1</option>
<option>选项2</option>
<option>选项3</option>
···
</select>
3.3.3 <textarea> 文本域表单元素
- 通过
<textarea>标签可以创建多行文本输入框 cols="每行中的字符"rows="显示的行数"多用 CSS 规定
<form>
<textarea rows="20" cols="5">文本内容</textarea>
</form>