🏆一、HTML是什么又不是什么？
👤1.1、HTML是什么
- 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
- 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
- 网页文件的扩展名：.html或.htm
👤1.2、HTML不是什么
HTML是一种标记语言（markup language），它不是一种编程语言。HTML使用标签来描述网页。
🏆二、HTML文档基本结构
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css样式优先级</title> </head> <body> </body> </html>
对HTML基本格式的说明
- <!DOCTYPE html>声明为HTML5文档。
- <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）不会显示在网页上。
- <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
- <title>、</title>定义了网页标题，在浏览器标题栏显示。
- <body>、</body>之间的文本是可见的网页主体内容。
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
👤2.1、head内部常用标签
head内常用标签
| 标签 | 意义 |
| <title></title> | 定义网页标题 |
| <style></style> | 定义内部样式表 |
| <script></script> | 定义JS代码或引入外部JS文件 |
| <link/> | 引入外部样式表文件 |
| <meta/> | 定义网页原信息 |
<!--标签的分类<h1></h1>--> <!DOCTYPE html> <!--lang="en" 表示网页的主要语言是英语--> <html lang="zh-CN"> <head> <!--定义网页原信息--> <meta charset="UTF-8"> <!--方便搜索引擎查找的，一个是keywords搜索关键字可以引导到到该网页，description相当于摘要--> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩教育Python学院"> <!--标签页上显示的内容--> <title>My First HTML</title> <!--定义a标签的样式--> <style> a{ color:darkred; } </style> <!-- 定义JS代码或引入外部JS文件 <script>alert("Hello World")</script> --> <!--引入外部样式表文件text.css将a标签的颜色变为绿色--> <link rel="stylesheet" href="text.css"> <!-- 2秒后跳转到对应的网址，注意引号 <meta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/zaixiazhouzhou/default.html?page=1"> --> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge"> </head>
👥2.1.1、对Meta标签的再补充
- <meta>元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
- <meta>标签位于文档的头部，不包含任何内容。
- <meta>提供的信息是用户不可见的。
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址，注意引号--> <meta http-equiv="refresh" content="2;URL=https://baidu.com"> <!--指定文档的编码类型--> <meta http-equiv="content-Type" charset=UTF8"> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge">
2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩教育Python学院">
🏆三、Body内部常用的标签
👤3.1、基本标签
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--换行--> <br> <!--水平线--> <hr>
👤3.2、img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
img标签中除了自带的属性，我们还可以给它添加一些自定义的属性
如以下的代码：
<img format="jpg" sx="自定义的属性" src="图片的路径" >
👤3.3、a标签
👥3.3.1、a标签的介绍
a标签也就是我们常见的超链接标签，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，
还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时，链接显示为红色并带有下划线。
- 注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
👥3.3.2、a标签的语法格式
<a href="http://www.oldboyedu.com" target="_blank" id="自定义的ID值">点我</a>
href属性指定目标网页地址。该地址可以有几种类型：
- 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
- 相对URL - 指当前站点中确切的路径（href="index.htm"）
- 锚URL - 指向页面中的锚（href="#top"）
target 属性：
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
id 属性:
id 属性可用于创建一个 HTML 文档书签。
提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。
值得注意:
在HTML文档中插入ID:
<a id="ID为1">现在是ID为1的位置</a>
在HTML文档中创建一个链接，点击此链接就可以调到相对应id的位置
<a href="#ID为1">点我跳到ID为1的位置</a>
👤3.4、HTML中特殊字符
| 显示结果 | 描述 | 实体名称 | 实体编号 |
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 人民币/日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
值得注意的是：虽然 html 不区分大小写，但实体字符对大小写敏感。
下面来看一个实际的例子
<h1>海 燕</h1>
上面不论两个字之间空的有多宽，都会默认是看做只有一个空格，如果想在两个字之间显示多个空格，就可以使用以下的方式
<h1>海 燕</h1>
👤3.5、div和span标签
span和div区别在于，div是一个块级元素，它包含的元素会自动换行。而span是行内元素，在它的前后不会换行。
span没有结构上的意义，只是单纯的应用样式，其他元素不适合时，就可以使用span元素。span可以作为div的子元素，但div不能是span的子元素，如果出现span中出现div不符合ws3c的页面标准。
👤3.6、重点：标签的分类
👥3.6.1、第一种：块级标签
特点：标签独占一行，可指定宽、高。
特性：
- 能够识别宽高
- margin和padding的上下左右均对其有效
- 可以自动换行
- 多个块状元素标签写在一起，默认排列方式为从上至下
- 可以使用margin:0 auto居中对齐
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
👥3.6.2、第二种： 内敛标签(行内标签)
特点：标签在一行内，宽度与高度由内容决定，只有在内容超过HTML的宽度时，才会换行。
特性：
- 无法设置宽高
- margin上下无效，只有左右有效果，padding都有效果，会撑大空间；box-sizing:border-box;无效，因为该属性针对盒模型。
- 不会自动换行
常用的内联元素有：
<a>、<span>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
👤3.7、列表标签
列表标签的属性大概有以下几种
| 标签 | 描述 |
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表，可以指定id、style、class等属性，还可以指定onclick等事件属性。 |
| <li> | 定义列表项 |
| <dl> | 用于定义术语列表。自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始 |
| <dt> | 定义标题列表项。可以指定id、style、class等属性，还可以指定onclick等事件属性。该元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素等 |
| <dd> | 定义普通列表项。该元素可以包含与<div../>完全类似的内容 |
👥3.7.1、无序列表 ul 的相关属性
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
栗子：
<ul type="disc"> <li>实心圆点-默认值</li> </ul> <ul type="circle"> <li>实心圆圈</li> </ul> <ul type="square"> <li>实心方块</li> </ul> <ul type="none"> <li>无样式</li> </ul>
输出示例：
👥3.7.2、有序列表 ol 的相关属性
有序列表type属性值
并不是有序列表只能用1、2、3 ……来表示序列。也可以使用下面的方式：
| type属性值 | 列表项的序号类型 |
| 1 | 数字1、2、3…… |
| a | 小写英文字母a、b、c…… |
| A | 大写英文字母A、B、C…… |
| i | 小写罗马数字i、ii、iii…… |
| I | 大写罗马数字I、II、III…… |
有序列表的其他属性
| 属性 | 值 | 描述 |
| reversed | reversed | 指定列表倒序(9,8,7...) |
| start | number | 一个整数值属性，指定了列表编号的起始值。这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。 |
👥3.7.3、标题列表的相关属性
栗子：
<dl> <dt>标题一</dt> <dd>标题一下的内容1</dd> <dt>标题二</dt> <dd>标题二下的内容1</dd> <dd>标题二下的内容2</dd> </dl>
输出示例：
👤3.8、文本格式化标签
| 名称 | 标签 |
| 粗体标签 | strong(定义加重语气)、b(定义粗体文本) |
| 斜体标签 | em(推荐)、i、cite |
| 中划线标签 | del(推荐，定义删除字)、s |
| 下划线标签 | ins(推荐)、u |
| 上标标签 | sup |
| 下标标签 | sub |
| 大字号标签 | big |
| 小子号标签 | small |
