文章目录
五大主流浏览器
网页是由代码通过浏览器渲染而成的，而常用浏览器分为五种：
五大主流浏览器：IE（Edge），FireFox，Chrome，Opera，Safari（苹果）
浏览器内核由渲染引擎和JS引擎两部分组成。
渲染引擎：浏览器中专门对代码进行解析和渲染的部分
内核：Trident(IE)，Gecko(FireFox),Webkit(safari/chrome),Blink(chrome/opera)
国内大多数浏览器采用的是双核驱动(Trident&Webkit或Trident&Blink)
移动端：iphoe/ipad采用的是webkit内核，Android 4.4以下采用的是webkit内核，而4.4以上版本采用的是blink内核。
浏览器内核不同，形成的网页也就不同，为了避免这一现象，故规定了web标准：HTML、css、JavaScript
一.HTML简介
万维网W3C标准中网页分为结构（HTML），表现（css）和行为（JavaScript）三部分。
HTML用于描述页面的结构，CSS用于控制页面中的元素样式，JavaScript用于响应用户的操作。
1.什么是HTML
HTML的全称为超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
超文本：是一种组织信息的方法，通过超级链接将多种媒介关联起来。
标记：就是标签，用<>包裹的具有一定含义的内容，比如：< head> < /head>
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
2.HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 < html>
- HTML 标签通常是成对出现的，比如 < p> 和 < /p>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
例如：
<标签>内容</标签>
所有 HTML 文档必须以 <!DOCTYPE> 声明开头，该声明并非一个 HTML 标签，它是一条“信息”，告知浏览器期望的文档类型。
3.HTML元素
HTML 元素指的是从开始标签到结束标签的所有代码。
例如：
<h1>一级标题</h1>
4.HTML版本
| 版本 | 发布时间 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
5.web浏览器
Web浏览器（如谷歌浏览器，Edge，Safari 等）用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示HTML标签，而是负责网页的渲染和呈现，标签决定了如何展现HTML页面的内容给用户。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h1>欢迎！！</h1>
<p>你好，一起来学习前端吧！</p>
</body>
</html>
6.HTML网页结构
- < !DOCTYPE html> 声明为 HTML5 文档
- < html> 元素是 HTML 页面的根元素
- < head> 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
- < title> 元素描述了文档的标题
- < body> 元素包含了可见的页面内容
- < h1> 元素定义一个大标题
- < p> 元素定义一个段落
注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。
7.中文编码
当在浏览器输出中文乱码时，需要在头部将字符声明为 UTF-8 或 GBK。
例如：
<meta charset="UTF-8">
二.HTML基础标签
1.HTML 标题
HTML 标题是通过 < h1 > - < h6 > 标签来定义的。
实例：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
2.HTML 段落
HTML 段落是通过标签 < p > 来定义的。
实例：
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
3.HTML 链接
HTML 链接是通过 < a > 标签进行定义的。a标签也叫跳转锚点标签，通过它可以实现页面的跳转。
< a href= " " > < /a>
href 表示路径，后面跟的是链接的地址
实例：
<a href = "https://www.baidu.com/">百度一下</a>
此时只需在浏览器中点击 “百度一下” 即可跳转。
4.HTML 图像
HTML 图像是通过 < img > 标签进行定义的。
img是一个单标签，没有结束标签，< img src=" " />
实例：
<img src = "images/1.jpg" alt = "图片路径加载错误" />
参数src为图片的路径，这里可以选择网页图片的地址，或者是本地图片；
参数alt为当图片路径不对加载图片出现错误时显示的内容（可自定义）。
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。默认单位是像素（px）。
实例：
<img src="baidu.jpg" alt="百度" width="200" height="100">
注意：加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。
三.HTML元素
1.HTML 元素语法
- HTML 元素以开始标签起始，以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容，某些 HTML 元素具有空内容
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
2.嵌套的 HTML 元素
大多数 HTML 元素可以嵌套使用，即HTML 元素可以包含其他 HTML 元素。HTML 文档由相互嵌套的 HTML 元素构成。
实例：
<!DOCTYPE html>
<html>
<body>
<p>百度：<a href = "https://www.baidu.com/">百度一下</a></p>
</body>
</html>
可以看到< p >中包含了< a >标签
3.HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
实例：
<p>段落1</p>
<br />
<p>段落2</p>
< br > 就是没有关闭标签的空元素（< br > 标签定义换行）。
在开始标签中添加斜杠，比如 < br />，是关闭空元素的正确方法。
四.HTML属性
属性是 HTML 元素提供的附加信息，属性值应该始终被包括在引号内，如果属性值本身就含有双引号，那么必须使用单引号包含属性值。
- HTML元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于 开始标签
- 属性总是以名称/值对的形式出现，比如：name=“value”。
实例：
<a href="https://www.baidu.com/">百度一下</a>
这里的href就是a标签的属性，且是设置在a标签的开始标签里面的。
总结：
1.标签由标签名、标签属性和文本内容三部分组成。
2.标签属性是对标签的一种描述方式。
3.标签属性分通用属性、自有属性和自定义属性。
1）通用属性：所有标签都具有的属性。
通用属性有：
id：用来给标签取一个唯一的名称。id名称在一个网页必须是唯一的。
class：用来给标签取一个类名。
style：用来设置该标签的行内样式。
title：当鼠标已到该标签，所显示的提示内容。
2）自定义标签属性：通常用来传值或用于图片懒加载（未滑到当前页面图片暂时不加载）等方面。
格式：data-自定义名称
<img data-src=“图片名” alt=“提示文本” / >
< p data-id=“goodsid” >文本内容
五.HTML区块
HTML 可以通过 < div > 和 < span >将元素组合起来。
大多数 HTML 元素被定义为块级元素或内联元素。
1.HTML区块元素
块级元素在浏览器显示时，通常会以新行来开始和结束。
在浏览器中会独占一行，识别宽高，例如< div >标签，相当执行了display：block操作（display： 显示 ；block：块的意思）也叫块级元素。
- 独占一行
- 宽度和高度是可控的，如果没有设置其宽度，将会默认铺满整行
- 其内可以包含块级元素和行级元素。
< div >标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
2.HTML内联元素
内联元素在浏览器显示时通常不会以新行开始。
在浏览器中不会独占一行，且不识别宽高，例如< span >标签，相当执行了display：inline操作（inline：行的意思）也叫行级元素。
- 不会独占一行，与相邻的行级元素占同一行，直到行占满，会自动掉到下一行
- 宽度和高度是不可控的
- 其内只包含行级元素
< span > 用于对文档中的行内元素进行组合。
块级标签转行级标签只需要在样式中设置 display：inline，行级转块级则反之。
3.标签嵌套规则
标签嵌套规则：
1.块元素可以包含块元素和内联元素（也就是行级元素），但行级元素不能包含块元素，它只能包含行级元素；
2.< p >标签内不能放块级元素，能放行级元素，只能在块元素里放< p >标签；
3.有几个特殊块元素只能放行级元素，不能放块级元素，例如：h1,h2,h3,h4,h5,h6,p,dt ;
4.块元素要跟块元素并列，行级元素要跟行级元素并列，不能在一个块元素中块元素与行级元素并列。
六.HTML文本样式
HTML 使用标签 < b >(“bold”) 与 < i >(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体。也可使用标签 < strong > 替换加粗标签 < b > 来使用, < em > 替换 < i >标签使用。但是两者的含义不同，< strong > 或者 < em >标签表示呈现的文本是重要的，所以有突出显示的意思。
| 标签 | 作用 |
|---|---|
| < b > | 定义粗体文本 |
| < em > | 定义着重文字 |
| < i > | 定义斜体文字 |
| < small > | 定义小号文字 |
| < strong > | 定义加重语气文本 |
| < sub > | 定义下标 |
| < sup > | 定义上标 |
| < ins> | 定义插入字 |
| < del > | 定义删除字 |
实例：
<body>
<p>定义<b>粗体文本</b></p>
<p>定义<em>着重文本</em></p>
<p>定义<i>斜体文本</i></p>
<p>定义<small>小号文本</small></p>
<p>定义<strong>加重语气文本</strong></p>
<p>定义<sub>下标</sub>H<sub>2</sub>O</p>
<p>定义<sup>上标</sup>2<sup>10</sup></p>
<p>定义<ins>插入字</ins></p>
<p>定义<del>删除字</del></p>
</body>
1.HTML 水平线
< hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
实例：
<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
2.HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
编译器 VScode 中加注释快捷键是 Ctrl + /
实例：
<body>
<!--这是一个注释，注释在浏览器中不会显示-->
<p>这是一个段落</p>
</body>
七.HTML链接
实例：
< a href="https://www.baidu.com/">访问百度< /a>
点击这个链接会把用户带到百度的首页。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签< a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时，链接显示为红色并带有下划线。
注意：如果为这些链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
1.a标签的target属性
target 属性定义被链接的文档在何处显示。
实例：
<a href="https://www.baidu.com/" target="_blank" >访问百度!</a>
| 属性值 | 描述 |
|---|---|
| _blank | 在新窗口打开 |
| _parent | 在父窗口中打开链接 |
| _self | 默认，在当前页面跳转 |
| _top | 在当前窗口打开链接，并替换当前的整个窗体 |
八.HTML头部信息
一个默认的HTML文件头部信息如下：
最低0.47元/天 解锁文章
847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
