一. 概述
1. 一些概念
-
HTML 是超文本标记语言，用来描述网页【不是编程语言】
-
标记语言是一套标记标签（markup tag）
-
超文本有两层含义
-
可加入图片、声音、动画、多媒体等内容【超越了文本限制】
-
可以从一个文件跳转到另一个文件，与世界各地主机的文件连接【超级链接文本】
-
-
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面
-
Web 标准的构成
| 标准 | 说明 |
|---|---|
| 结构 | 对网页元素进行整理和分类（类似身体） |
| 表现 | 设置网页元素的版式、颜色、大小等外观样式（类似外观装饰） |
| 行为 | 指网页模型的定义及交互的编写（类似行为动作） |
- Web 标准提出的最佳体验方案：结构、样式、行为相分离
2. HTML 语法规范
2.1 标签关系
- HTML 标签通常为双标签，双标签关系分为两类
<!-- 包含关系 -->
<head>
<title></title>
</head>
<!-- 并列关系 -->
<head></head>
<body></body>
- 有些特殊的标签必须是单标签，如：
<br/>
2.2 结构标签（骨架标签）
| 标签名 | 定义 | 说明 |
|---|---|---|
<html></html> |
HTML 标签 | 页面中最大的标签，称为根标签 |
<head></head> |
文档的头部 | 在 head 标签中必须设置的标签是 title |
<title></title> |
文档的标题 | 网页标题 |
<body></body> |
文档的主体 | 用来放页面内容 |
3. vscode 插件
| 插件 | 作用 |
|---|---|
| Open in Browser | 右击选择浏览器打开 HTML 文件 |
| Auto Rename Tag | 自动重命名配对的 HTML / XML 标签 |
| Liver Server | 同步 |
二. HTML 基础
1. 基本骨架
-
新建
.html文件后，在 vscode 中输入!按下Tab键生成骨架结构 -
如果要在浏览器中打开页面，右键
Open in Default Browser，快捷键Alt+B
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
-
文档类型声明标签
-
<!DOCTYPE>声明位于<html>之前，不是 HTML 标签，而是文档类型声明标签，用来告诉浏览器使用哪种 HTML 版本来显示网页 -
<!DOCTYPE html>指当前页面采取的是 HTML5 版本来显示网页
-
-
lang 语言种类
-
用来定义当前文档显示的语言
- en 定义英文网页，zh-CN 定义中文网页
-
注：定义为 en 的文档也可以显示中文，反之亦然。该属性对浏览器和搜索引擎还是有作用的
-
-
字符集（Character set）
-
<meta charset="UTF-8">：规定 HTML 文档应该使用哪种字符编码 -
UTF-8 被称为万国码，基本包含了所有国家需要用到的字符
-
<meta charset="UTF-8">必须写，否则可能引起乱码，一般使用 "UTF-8" -
写代码时的编码要和保存时的编码一致，否则会出现乱码
-
-
注释
<!-- 注释语句 -->
快捷键：ctrl + /
2. 常用标签
2.1 标题与段落
| 标签 | 语义 | 特点 |
|---|---|---|
<h1>-<h6> |
作为标题使用，并且依据重要性递减（双标签） | 1. 字体加粗，字号依次变大【h1 最大】 2. 一个标题独占一行 |
<p></p> |
用于分段 | 1. 直到浏览器窗口的右端才自动换行 2. 段与段之间有间隔 |
<br/> |
强制换行 | 单纯换行，不会加入垂直间距 |
2.2 文本格式化标签
-
为文字设置粗体、斜体或下划线等效果
-
标签语义：突出重要性
| 语义 | 标签 |
|---|---|
| 加粗 | <strong></strong>或者 <b></b> |
| 倾斜 | <em></em>或者 <i></i> |
| 删除线 | <del></del>或者 <s></s> |
| 下划线 | <ins></ins>或者 <u></u> |
2.3 盒子标签
- 二者都没有语义，只是用来装内容
| 标签 | 特点 |
|---|---|
<div></div> |
一行只能放一个 【大盒子】 |
<span></span> |
一行可以放多个 【小盒子】 |
2.4 图像标签
-
<img>标签用于定义 HTML 页面中的图像 -
示例：
<img src="lbxx.jpeg" alt="测试图片" title="测试图片" width="300"/> -
属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| scr | 图片路径 | 必写【用于指定图片的路径和文件名】 |
| alt | 文本 | 图像显示不出来时用文字替换 |
| title | 文本 | 提示文本，鼠标放到图像上所显示的文字 |
| width | 像素 | 图像的宽度【宽度和高度一般只修改一个，另一个等比缩放】 |
| height | 像素 | 图像的高度 |
| border | 像素 | 图像的边框粗细 |
-
注意
-
图像标签可以拥有多个属性，必须写在标签名的后面
-
属性之间不分先后顺序，以空格分开
-
属性采取键值对的格式
-
2.5 超链接标签 <a>
-
作用：从一个页面链接到另一个页面
-
两个必须的属性
| 属性 | 作用 |
|---|---|
href |
指定链接目标的 url 地址 |
target |
指定窗口的打开方式_self：在当前窗口打开（默认值）_blank：新窗口打开 |
- 链接分类
| 类别 | 说明 | 示例 |
|---|---|---|
| 外部链接 | 链接的是网址 | <a href="http://www.baidu.com" target="_blank">百度</a> |
| 内部链接 | 网站内部页面之间的相互链接，直接链接内部页面名称即可 | <a href="index.html">首页</a> |
| 空链接 | 用于没有确定链接目标时 | <a href="#">首页</a> |
| 下载链接 | 若链接的是文件或者压缩包，会下载这个文件 | 地址链接的是文件 .exe 或者是 .zip 等压缩包形式 |
| 网页元素链接 | 网页中的文本、图像、表格、音频、视频等都可以添加超链接 | |
| 锚点链接 | 当点击链接时，可以快速定位到页面中的某个位置 |
- 锚点链接
<p id="db">顶部</p>
1、
<a href="#rwsp">人物生平</a>
<br />
2、
<a href="#drzw">担任职务</a>
<br />
3、
<a href="#rwsj">人物事迹</a>
<br />
<h1>黄文秀</h1>
<h2 id="rwsp">人物生平</h2>
<a href="#db">回到顶部</a>
2.6 特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | |
|
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
2.7 表格标签
- 基本语法
<table>
<tr>
<th>姓名</th>
<td>单元格内的文字</td>
...
</tr>
...
</table>
- 标签
| 标签 | 语义 |
|---|---|
<table></table> |
表格【就是大框架】 |
<tr></tr> |
行，必须放在 <table>中 |
<td></td> |
单元格，必须放在 <tr>中 |
<th></th> |
表格的表头部分，其中的文字加粗居中显示 |
<thead></thead> |
表格的头部，<thead>内部必须有 <tr>标签，一般位于第一 |
<tbody></tbody> |
表格的主体，主要放数据本体 |
-
<thead>和<tbody>是表格结构标签，必须放在<table>中 -
表格属性（了解）
实际开发不常用，通过 CSS 来设置
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 表格相对周围元素的对齐方式 |
| border | 1 或 "" | 表格单元是否有边框，默认：""，表示无边框 |
| cellpadding | 像素值 | 单元边沿与其内容之间的空白，默认 1px |
| cellspacing | 像素值 | 单元格之间的空白，默认 2px |
| width | 像素值或百分比 | 表格的宽度 |
<table align="center" border="1" cellpadding="0" cellspacing="0" width="300" height="100">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
-
合并单元格
-
方式：
-
跨行合并：
rowspan="合并单元格的个数" -
跨列合并：
colspan="合并单元格的个数"
-
-
目标单元格
-
跨行：最上侧单元格为目标单元格，写合并代码
-
跨列：最左侧单元格为目标单元格，写合并代码
-
-
步骤
-
确定跨行还是跨列
-
找到目标单元格，写上合并方式 = 合并的单元格数量，比如：
<td colspan="2"></td> -
删除多余的单元格
-
-
<!DOCTYPE html>
<html>
<head>
<title>合并单元格</title>
</head>
<table align="center" border="1" cellspacing="0" width="300" height="300">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</html>
2.8 列表标签
表格用来显示数据，列表用来布局
2.8.1 无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
...
<ul></ul>
</ul>
-
列表项无序且并列
-
以项目符号呈现列表项
2.8.2 有序列表
<ol>
<li>列表1</li>
<li>列表2</li>
...
</ol>
-
列表排序以数字来显示
-
注：
-
<ul>和<ol>中只能嵌套<li>，不能直接在<ul>和<ol>中放其他标签 / 文字 -
<li>：可容纳所有元素 【小容器】
-
2.8.3 自定义列表
常用于对术语 / 名词进行解释和描述，其列表项前没有任何项目符号
-
<dt>：定义项目 / 名字 -
<dd>：描述每一个项目 / 名字
<dl>
<dt>名词</dt>
<dd>名词1解释1</dd>
<dd>名词2解释2</dd>
</dl>
-
<dl>里面只能包含<dt>和<dd> -
<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
2.9 表单标签
-
作用
-
收集用户信息
-
提交页面输入的数据到指定页面或后台
-
-
表单的组成
- 由表单域、表单控件（表单元素）和提示信息3 个部分构成
2.9.1 表单域
<form>：用于定义表单域，会把收集到的信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">各种表单元素</form>
- 常用属性
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url 地址 | 指定接收并处理表单数据的服务器 url 地址 【收集到的数据传到什么地方】 |
| method | get / post | 设置表单数据的提交方式，其取值为 get 或 post |
| name | 名称 | 指定表单的名称，以区分同一个页面中的多个表单域 |
2.9.2 表单控件（表单元素）
允许用户在表单中输入或者选择的内容控件
| 标签 | 说明 |
|---|---|
input |
单标签，用来收集用户信息 |
select |
下拉表单 |
textarea |
定义多行文本输入，该控件常见于留言板、评论 |