1. html 是超文本标记语言。
- 超文本——含有超链接的文本。
- 预定义标记——用来描述内容的固定标签，html 文档中的一切,都是基于标签实现的（还有一种为自定义标记）。
- 语言——html 并不是编程语言,是用标签来标记的标记语言，只是书写 html 文档的工具。
2. html 页面由文本内容、标记、其它文件的引用这三部分组成, 并采用纯文本进行描述。
- 文本内容——用户看到的网页文本,例如新闻、电话等。
- 标记——对文本以及引用文件的正确描述。
- 其它文件的引用——如图片、视频、音频、CSS 样式表、JS 脚本等。
<p>php中文网</p><!-- <p>为标记，“php中文网”为文本内容 --><img src="logo.jpg" alt="log" /><!-- logo.jpg为文件的引用 --><!-- 一般其它资源的引用为单标签，是通过属性指示出来的 --><!-- `<p>`为不可置换元素，`<img>`为可置换元素 -->
任何能编写纯文本的编辑器都可以用来创建 HTML 页面，现在主流 HTML 版本是 5.0。
3. 基本的 html 网页的标签及页面结构
html 页面中看到的所有内容都称为元素，元素是由标签来进行描述的。
- 标签——标签是用来识别元素的。
| 代码 | 解析 |
|---|---|
| <!DOCTYPE html> | 通知浏览器这是一个 HTML5 文档，应始终写在第一行 |
| <html>…</html> | 根标签,或叫根元素，整个 hmtl 文档内容都必须写到这对标签中 |
| <html lang="en"> | 通知搜索引擎 html 文档使用的编写语言，如果是中文建议改成`<html lang="zh-CN"> |
| <head>…</head> | 供浏览器和搜索引擎使用，描述字符编码集、视口与页面标题 |
| <meta> | 设置页面元素数据, 所谓元数据, 就是描述某种特定信息的数据 |
| <meta charset="UTF-8"> | 通知浏览器 html 文档编写语言所属的字符编码集,最流行的是 UTF-8 ,已成行业标准 |
| <title>…</title> | 显示在浏览器标签上的文本, 指定当前页面的标题, 这个标签对 SEO 非常重要 |
| <body>…</body> | 页面主体内容，允许或希望用户的内容都应该写到这里 |
| <!--注释内容--> | 注释用来描述标签功能或用途，它的内容不出现在显示的网页中, 只会出现在 html 源代码中 |
| <h2>…</h2> | 浏览器渲染这个 html 文档时，最终只会呈现这个标题的内容与效果,并不显示标签<h2> |
- 结构源码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- name="viewport" 设置视口(即可视区屏幕) --><!-- width=device-width 页面宽度应该与显示设备的宽度相匹配，类似还有 device-height 表示设备的屏幕高度 --><!-- initial-scale=1.0 设置页面初始绽放比例，1.0 表示原样 1:1 显示,不允许有任何绽放 --><title>HTML5页面结构</title></head><body><!-- 页面主体内容 --><h2>PHP中文网欢迎您...</h2></body></html>
4. html 的元素、属性和值及之间的关系
- 元素
| 元素 | 标签 | 语法 | 描述 |
|---|---|---|---|
| 空元素 | 单标签 | <img src="..." alt=""> | <标签> |
| 非空元素 | 双标签 | <p>…</p> | <起始标签>元素内容</结束标签> |
非空元素是有内容的，如：<p>文本内容<p>
空元素也有使用双标签描述的，如：<script>|<video>|<br>…，不是没有内容，内容来自外部引用或文件，如：<img src=”1.jpg alt=””>
- 属性:是用来对元素进一步描述的文本，属性必须写到元素的 “起始标签” 中，由属性和值二部分组成。
| 语法 | 属性名=”属性值” |
|---|---|
| 案例 | <input type="password" maxlength="20" placeholder="至少8个字符" required> |
属性使用小写字母，属性的值加上双引号
- 值
| 值类型 | 描述 |
|---|---|
| 字符串 | <p class="active">…</p> |
| 预定义值 | <input type="text"> |
| 指定格式 | <a href="https://php.cn">…</a> |
| 数值 | <table width="200">…</table> |
| 布尔值 | <input type="email" required> |
布尔属性的值是可选的, 只要元素中出现该属性,表示它取真值，不需要就不要写，不写默认取假值。
- 元素、属性和值之间的关系
实例：<a href="https://www.php.cn/">php中文网</a>为元素<a></a>为标签href="https://www.php.cn/"为属性
href 为变量名，https://www.php.cn/为变量值
- 三大通用属性
| 属性名 | 描述 | 举例 |
|---|---|---|
| id | 元素的唯一标识 | <div id="wrap">…</div> |
| class | 给元素添加类样式 | <div class="box">…</div> |
| style | 设置当前元素样式 | <div style="...">…</div> |
id、class、style 三大属性几乎可以添加到任何元素上
id 在当前页面中只能标注一个元素，应该具有唯一性，唯一性由程序员自己保证，浏览器不检查。
实例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.aaa {background-color: brown;/* 定义aaa */}</style></head><body><h2 style="color: aqua;font-size: 36px;" class="aaa" ;>文本内容</h2><!-- color: aqua为预定义值，不能随便写；font-size: 36px为数值；aaa为自定义的字符串，在<head>中<style>定义 --><a href="https://www.php.cn/">php中文网</a><!-- https://www.php.cn/为指定格式 --><form action=""><label for="">邮箱</label><input type="email" placeholder="email" id="my-email" required /><!-- required是布尔值,my-email为id属性（唯一性） --><button>提交</button></form></body></html>
实例效果：
" class="reference-link">
5. html 中元素之间的层级关系
元素中允许包含另一个元素，被包含的元素叫做子元素, 子元素又可以继承包含其它元素，依此类推。
元素层级结构中, 必须保持正确的嵌套关系。
实例：
<!DOCTYPE html><!-- 通知浏览器，这是一个html5文档 --><!-- html为根标签/根元素，是一个双标签，说明里面有内容 --><html lang="en"><!-- 当前文档使用的编辑语言为英文，中文：lang="zh-CH" --><head><!-- head中的内容不需要用户看到，是给浏览器/开发者看的，主要是设置网站的元数据（元数据是描述某种特定信息的数据，是用来解释数据的数据） --><meta charset="UTF-8" /><!-- 当前字符集是“UTF-8” --><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- viewport：视口/可视区屏幕，width=device-width：当前页面的宽度为设备的宽度，initial-scale=1.0：页面1:1显示（不允许缩放） --><title>元素的标签,属性和值,正确的嵌套关系</title></head><body><!-- 元素之间应该保持正确的嵌套 --><form action=""><div><label for="email">邮箱:</label><!-- 元素值: 预定义值, 指定值, 布尔值,数值 --><input type="email" name="email" id="email" maxlength="100" required /></div><div><label for="password">密码:</label><inputtype="password"name="password"id="papassword"placeholder="至少8位"required/></div><div><button>提交</button></div></form></body></html>
实例效果：
" class="reference-link">
6. html 网页中的文本字符
空格
多个空格、制表符、回车符、换行符、都会被压缩为一个空格具有特殊意义的字符
<、>、& 等字符具有特殊意义、需要转义后才允许添加到 html 文档转义字符
语法：& + 字符实体名称 + ;， 如“<”使用“<”表示Unicode极大的缓解了特殊字符的问题，推荐将文档编码设置为 utf-8，如：<head> <mata charset="UTF-8"> </head>
常用转义字符表
| 字符 | 描述 | 转义字符 | 实体编号 |
|---|---|---|---|
' ' |
空格 | |
  |
< |
小于 | < |
< |
> |
大于 | > |
> |
& |
&符号 |
& |
& |
© |
版权 | © |
© |
× |
乘号 | × |
× |
÷ |
除号 | ÷ |
÷ |
7. 文件与文件夹名称
| 格式 | 实例 |
|---|---|
| 全部使用小写字母 | chapter1/demo1.html |
| 采用合适的扩展名: | .html（不要用“.htm”） |
| 用连接线“-”分隔多个单词 | my-note（不用下划线“_”） |
html 中设置的名称一般规范用中划线“-”（css 中用中划线），如：my-email；变量名用下划线“_”（提交到 php 的），变量名一般不加连接线。
8. html 中 URL 的使用
URL 语法及其描述
URL 是统一资源定位符, 互联网上任何一个文件都有一个唯一的 URL，语法:
http://模式/主机名/路径/文件名。
| 名称 | 描述 | 实例 |
|---|---|---|
| 模式 | 也称”协议”,浏览器如何访问这个文件 | http,https,ftp,mailto… |
| 主机名 | 使用”域名”或”IP”表示 | https://www.php.cn/,或者 http://127.0.0.1/ |
| 路径 | 使用一个或多个正斜线分割的字符串 | public/admin |
| 文件名 | 最后一个路径后面的,带有扩展名的文档 | ablut.html |
如果 URL 是以路径分隔符“/”结尾, 则启用默认文件名，如：index.html.
web 访问默认端口 80 ，如：https://www.php.cn/
ftp（文件的上传下载）默认端口 21，如：ftp://123.45.6.5:21/ddd/sss
email 访问默认端口 25
- URL 的分类及各类型的使用场景
URL 有绝对与相对两种类型，绝对 URL 被引用目标与当前位置无关；相对 URL 是以包含 URL 本身的文件位置为参考点,描述目标文件的位置。
| URL | 使用场景 | 举例 |
|---|---|---|
| 绝对 | 被引用目标与当前位置无关 | http://php.cn/courses/123.html |
| 绝对 | 引用其它服务器上的文件 | https://www.php.net/manual/zh/ |
| 相对 | 引用同一目录下文件 | 直接写文件名,如：demo2.html |
| 相对 | 引用子目录下文件 | 目标文件前带上子目录名,使用目录分隔符/连接,如：chapter2/demo2.html |
| 相对 | 引用上层目录的文件 | 文件名前添加二个点,同样使用目录分隔符/连接,允许逐级向上查询,如：../../demo2.html |
| 相对 | 根路径 “/” | 为防止过多层级的向上递归查询,可以从当前服务器根目录开始查询,如：/admin/books/chapter2/ |
访问同一个网站的文件，应该始终坚持使用相对 URL 地址.
9. html 标签语义化的优势
- 更直观：对于一篇文章<article>标签，显然要比使用<div class="article">更直观。
- SEO 优化：让搜索引擎更加喜欢你的网页，有利于 SEO, 得升关键词优化与排名
- 代码更少：提高加载速度,也方便代码维护与样式控制
- 无障碍支持：例如视力受损使用的屏幕阅读器, 语义化就非常重要了
10. html 元素的默认样式
同样的内容，添加不同的标签，在不同的浏览器中可能呈现出不同的显示效果。原因是浏览器为这些元素预定了一张样式表,即每个元素都有默认样式，这些元素在不同浏览器的表现并不完全相同，所以,我们需要使用自定义的样式表来重置元素的样式,让它们在所有浏览器中看上去是完全一样的。
用户自定义的样式规则, 优先级要高于默认样式。