HTML基础总结

HTML简介

网页

网站：利用前端技术制作的网页集合。

网页：构成网站的基本元素，通常是 HTML 格式的文件（.htm 或 .html），必须通过浏览器来阅读。

HTML

超文本：由图片、声音、动画、视频等构成且可以相互链接的文本。

HTML：超文本标记语言（HTML 不是编程语言，而是由一套标记标签构成的标记语言）。

网页的形成

前端代码开发
浏览器解析、渲染代码
呈现 Web 页面

浏览器

五大常用浏览器

Chrome、Firefox、Safari、Opera、 Edge

四大浏览器内核

IE（Trident）
Firefox（Gecko）
Safari（Webkit）
Chrome / Opera / Edge（Blink 属于 Webkit 的分支，Blink 兼容 Webkit）

注：目前国内浏览器一般都采用 Webkit / Blink 内核。

Web标准

W3C： 万维网联盟，国际最著名的标准化组织之一。

Web标准：W3C 组织和其他标准化组织为 Web 开发制定的一系列标准的集合。

Web标准构成

结构：用于对网页元素进行整理和分类，现阶段主要指的是 HTML
表现：用于设置网页元素的版式、大小、颜色等外观样式，主要指 CSS
行为：网页模型的定义及交互方式的编写，现阶段主要指的是 JavaScript

HTML标签

语法规范

标签关系

包含关系
```
<head>
    <title></title>
</head>
```
并列关系
```
<head></head>
<body></body>
```

基础结构标签

每个网页都会有一个基础的结构标签（骨架标签：4组），页面内容也是在这些基础标签上书写的。
HTML 页面也称为 HTML 文档。

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

标签名	定义	说明
`<html>` `</html>`	根标签	页面中最大的标签（最基础的标签）
`<head>` `</head>`	头部标签	在 head 标签中我们必须要设置 title 标签
`<title>` `</title>`	标题标签	页面自己的网页标题
`<body>` `</body>`	主体标签	包含文档的所有内容

文档类型声明标签 doctype

<!doctype> 文档类型声明，作用是告诉浏览器应该使用哪种 HTML 版本来解析渲染网页。

<!doctype html>
<!-- 当前页面采用 HTML5 版本 -->

注意：

<!doctype> 声明位于文档最前面的位置，处于 <html> 标签之前
<!doctype> 文档类型声明标签，不属于 HTML 标签
请默认统一指定 HTML5 版本 <!doctype html>

语言种类 lang

用来定义当前网页显示的主语言，书写在 <html> 标签内。

语言的设置是为了方便 浏览器搜索推荐 以及触发 浏览器翻译功能，并不是说设置了某类主语言后网页中就不能存在其他类型的语言了。

<html lang="zh-CN"> 
</html>

en-GB 英文（英国）

en-US 英文（美国）

zh-CN 中文（简体，中国大陆）

zh-SG 中文（简体，新加坡）

zh-HK 中文（繁体，香港）

zh-MO 中文（繁体，澳门）

zh-TW 中文（繁体，台湾）

字符集 charset

多个字符的集合，以便计算机能够识别和储存各种文字。

在 <head> 标签内，可以通过 <meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

<meta charset="UTF-8">

charset 常用的值有：GB2312、BIG5、GBK、UTF-8，其中 UTF-8 也被称为：万国码，基本包含了全世界所有国家需要用到的字符。

注意：字符设置是必须的，否则极大可能引起网页乱码。一般情况下，统一使用 "UTF-8" 编码，尽量统一写成标准的 UTF-8，不要写成 "utf8" 或 "UTF8"。

标准骨架

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
</body>

</html>

IE 兼容模式

IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的绘制模式。

<head>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
</head>

常用标签

标题标签

作为标题使用，并且依据重要性递减。

HTML 提供了 6 个等级的网页标题，即：<h1> 到 <h6>。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

特点：

加了标题的文字会自动加粗，字号也会依次变大
一个标题就独占一行，同一行标题后不会再放置其他任何内容（后期可以通过 CSS 修改）
级别越大的标题标签，对网页元素的强调性越强，同时也和浏览器 SEO 优化有关。

段落和换行标签

<p> 标签用于定义段落，它可以将整个网页分为若干个段落。

<p>我是一个段落标签</p>

特点：

文本在一个段落中会根据浏览器窗口的大小自动换行。（对于中文段落来说无论如何都会自动换行，但是对于英文段落来说如果字母是连续的（aaa...），那么浏览器会认为该段落整体都是一个字母不会自动换行，要想英文段落自动换行字母之间得有空格。）
段落和段落之间保有空隙（段间距）
同一段落里的不同行文字之间也有一定的空隙（行间距）

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。

换行标签

如果希望某段文本强制换行显示，就需要使用换行标签 <br>强制换行。

<br>

特点：

<br> 是个单标签
<br> 标签只是简单地开始新的一行，跟段落不一样，所以不会产生段间距

分割线标签

某些时候需要对内容块进行分割时会用到分割线标签<hr>

<hr>

注意：实际开发中并不常用 hr 作为分割线，而是使用 CSS 盒子模型中的边框来实现分割线效果，或是利用一个空盒子设置长宽高及背景颜色来实现分割线效果。

文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

标签语义：突出重要性，比普通文字更重要。

语义	标签
加粗	`<strong>` `</strong>` 或 `<b>` `</b>`
倾斜	`<em>` `</em>` 或 `<i>` `</i>`
删除线	`<del>` `</del>` 或 `<s>` `</s>`
下划线	`<ins>` `</ins>` 或 `<u>` `</u>`

备注：介于可读性、搜索引擎优化及屏幕阅读器适配，推荐使用前者。

div和span标签

<div> 和 <span> 是没有语义的，它们就是两种盒子，用来对网页进行布局和装其他内容。

<div>这是头部</div>
<span>今日价格</span>

特点：

div 是 division 的缩写表示：分割、分区。一行只能放一个 <div>，大盒子
span 意为：跨度、跨距。一行上可以放多个 <span>，小盒子

拓展： span 标签不单单是用于布局，对于一些需要单独修饰和设置的元素，可以将其用 span 标签嵌套起来，然后就可以单独对其进行设置。

图像标签

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。

<img src="图像URL">

src 是 <img> 标签的必须属性，它用于指定图像文件的路径和文件名。

URL 是 统一资源定位符（通俗理解：地址、网址）。

属性	属性值	说明
`src`	图片路径	必须属性
`alt`	文本	替换文本，图像显示失败时显示（为了提高 SEO 及适配屏幕阅读器，建议都把 alt 写上）
`title`	文本	提示文本，鼠标放到图片上，显示的提示文字
`width`	像素	设置图像的宽度（了解，后面通过 CSS 设置）
`height`	像素	设置图像的高度（了解，后面通过 CSS 设置）
`border`	像素	设置图像的边框粗细（了解，后面通过 CSS 设置）

注意：

设置图像的宽度与高度时：一般设置其中之一便可，另外一个会自动按比例适配
设置宽高时，可以使用百分数作为值，此时图片大小会以当前父元素的大小为基础进行比例缩放，这样做的好处在于当父元素改变大小时，图片也会随比例同等缩放

路径

相对路径：以引用文件所在位置为参考基础，而建立出目录路径。

相对路径分类	符号	说明
同一级路径	`.`	如：`<img src="baidu.png" />`
下一级路径	`/`	如：`<img src="image/baidu.png" />`
上一级路径	`../`	如：`<img src="../image/baidu.png" />`

绝对路径：指目录下的绝对位置，直接到达目的位置，通常是从盘符开始的路径。如D:\web\img\logo.png

网络地址：https://blog.itxiaoma.cn/img/...

注意：实际开发中建议使用相对路径或网络地址

超链接标签

在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。

<a href="跳转目标" target="目标窗口的弹出方式">文本、图像或其他内容</a>

属性	作用
`href`	用于指定链接目标的 url 地址，（必须属性）当标签应用 href 属性时，它就具有了超链接的功能
`target`	用于指定链接页面的打开方式，其中 `_self` 在当前页面打开的方式（为默认值），`_blank` 在新窗口中打开的方式

链接分类:

外部链接：例如：<a href="http://www.baidu.com">百度</a>
内部链接：网站内部页面之间相互链接，直接链接内部页面名称即可，例如： <a href="index.html">首页</a>
空链接：如果当时没有确定链接目标时， <a href="javascript:void(0)">首页</a>"，当用户点击链接时，void(0) 计算为 0，但 Javascript 上没有任何效果
下载链接：如果 href 里面地址是一个文件或者压缩包（前提：路径包含文件类型后缀名，如：.exe、.zip 等），便会下载这个文件
网页元素链接：在网页中的各种网页元素，如：文本、图像、表格、音频、视频等都可以添加超链接
锚点链接：点击链接，可以快速定位到当前页面中的某个位置
- 在链接文本的 href 属性中，设置属性值的 #名字 的形式，如：<a href="#two">第2集</a>
- 找到目标位置标签（此处以 h3 标签为例），里面添加一个 id属性="刚才的名字"，如：<h3 id="two">第2集介绍</h3>
- <a href="#"></a> 默认定位到页面顶部

注释

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的文字，就需要使用注释标签。

HTML 中的注释以： 结束。

<!-- 注释语句 -->

特殊字符

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

特殊字符	描述	字符的代码
	空格符	` `
`<`	小于号	`<`
`>`	大于号	`>`
`&`	和号	`&`
`±`	正负号	`±`
`×`	乘号	`×`
`÷`	除号	`÷`
`²`	上标	`²`

注意：下标请使用：<sub>2</sub>，同时上标也建议使用：<sup>2</sup>。

表格标签

表格主要用于显示、展示数据。因为它可以让数据显示得非常的规整，可读性非常好。

注意：表格不是用来布局页面的，而是用来展示数据的。表格常用于表单数据的布局。

<table>
    <tr>
        <td>单元格</td>
        ...
    </tr>
    ...
</table>

<table> </table> 是用于定义表格的标签
<tr> </tr> 用于定义表格中的行，必须嵌套在 <table> </table> 标签中
<td> </td> 用于定义表格中的单元格，必须嵌套在 <tr> </tr> 标签中
字母 td 指表格数据（table data），即：数据单元格的内容
单元格 td 里面可以放任何的元素

表头标签

一般表头单元格位于表格的第一行或第一列，作用是：突出重要性，表头单元格里面的文本内容默认加粗居中显示。

<th> 标签表示 HTML 表格的表头部分（table head 的缩写）。

<table>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        ...
    </tr>
    ...
</table>

表格属性

注意：表格标签的属性在实际开发中并不常用，而是通过后面的 CSS 来设置，这里了解即可。

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="240">
    ...
</table>

属性名	属性值	描述
`align`	`left`、`center`、`right`	规定表格相对周围元素的对齐方式（默认 left），注意指的是整个表格的对齐方式（表格是在父盒子中默认往左靠，还是居中或是往右靠），而不是指单元格内容的对齐方式（单元格内容对齐可以通过：`style="text-align: center;"` 设置）（了解）
`border`	`1` 或 `""`	规定表格单元是否拥有边框，默认为 ""，表示没有边框（了解）
`cellpadding`	像素值	规定单元边沿与其内容之间的空白，默认 1 像素（了解）
`cellspacing`	像素值	规定单元格之间的空白，默认 2 像素（了解）
`width`	像素值或百分比	规定表格的宽度（了解）
`height`	像素值或百分比	规定表格的高度（了解）

表格结构标签

因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成：表格头部 和 表格主体 两大部分。

<thead> </thead>：用于定义表格的头部，<thead> 内部必须拥有 <tr> 标签，一般是位于第一行，且一般 <tr> 标签中推荐放置 <th> 标签
<tbody> </tbody>：用于定义表格的主体，主要用于放数据本体
以上标签都是放在 <table> </table> 标签中

<table>
    <!-- 头部区域 -->
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            ...
        </tr>
    </thead>
    <!-- 主体区域 -->
    <tbody>
        <tr>
            <td>周吉瑞</td>
            <td>男</td>
            <td>18</td>
            ...
        </tr>
        ...
    </tbody>
</table>

合并单元格

跨行合并（上下合并）：rowspan="合并单元格的个数"
跨列合并（左右合并）：colspan="合并单元格的个数"

<body>
    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

列表标签

表格是用来显示数据的，那么列表就是用来布局的。

列表最大的特点就是：整齐、整洁、有序、它作为布局会更加自由和方便。

在实际开发中凡是遇到排列整齐的简洁内容，都可以使用列表来进行布局。

标签名	定义	说明
`<ul>` `</ul>`	无序标签	里面只包含 li，没有顺序，使用较多，li 里面可以包含任何标签
`<ol>` `</ol>`	有序标签	里面只包含 li，有顺序，使用相对较少，li 里面可以包含任何标签
`<dl>` `</dl>`	自定义标签	里面只能包含 dt 和 dd，dt 和 dd 里面可以放任何标签，dd 一般作为对 dt 的细分描述

无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义（开发中经常使用）。

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

无序列表的各个列表项之间没有顺序级别之分，是并列的
<ul> </ul> 中只能嵌套 <li> </li>，直接在 <ul> </ul> 标签中输入其他标签或者文字的做法是不被允许的，列表中的任何内容都应该放在 li 中
<li> 与 </li> 之间相当于一个容器，可以容纳所有的元素
无序列表会带有自己的样式属性（比如圆点），但在实际开发中，我们会使用 CSS 来设置

有序列表

有序列表即为有序排列顺序的列表，其各个列表项会按照一定的顺序排列定义（开发中不太常用）。

在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>

<ol> </ol> 中只能嵌套 <li> </li>，直接在 <ol> </ol> 标签中输入其他标签或者文字的做法是不被允许的
<li> 与 </li> 之间相当于一个容器，可以容纳所有的元素
有序列表会带有自己样式属性（比如序号），但在实际使用时，我们会使用 CSS 来设置

自定义列表

自定义列表常用于对术语或名词进行解释、描述和展开，定义列表的列表项前没有任何项目符号（开发中常用）。

在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

<dl> </dl> 里面只包含 <dt>、<dd>
<dt> 和 <dd> 个数没有限制，经常是一个 <dt> 对应多个 <dd>

表单标签

在网页中，需要跟用户进行交互，收集用户资料，此时就需要表单。

在 HTML 中，一个完整的表单通常由 表单域、表单控件（也称为表单元素）和 提示信息 3 个部分构成。

表单域

在 HTML 标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递。

<form action="url地址" method="提交方式" name="表单域名称">
    <!-- 各种表单元素控件 -->
</form>

属性名	属性值	作用
`action`	`url` 地址	用于指定接收并处理表单数据的服务器程序的 url 地址
`method`	`get` / `post`	用于设置表单数据的提交方式，其取值为 get 或 post
`name`	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

表单控件（表单元素）

input

<input type="属性值" />

属性值	描述
`button`	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
`checkbox`	定义复选框，即：多选框，在一组多选中，要求它们必须拥有相同的 name
`file`	定义输入字段和 “浏览” 按钮，供文件上传
`hidden`	定义隐藏的输入字段
`image`	定义图像形式的提交按钮
`password`	定义密码字段，该字段中的字符被掩码
`radio`	定义单选按钮，在一组单选按钮中，要求它们必须拥有相同的 name
`reset`	定义重置按钮，重置按钮会清除表单中的所有数据
`submit`	定义提交按钮，提交按钮会把表单数据发送到服务器
`text`	定义单行的输入字段，用户可在其中输入文本，默认宽度为 20 个字符

除 type 属性外，<input> 标签还有很多其他属性，其常用属性如下：

属性名	属性值	描述
`name`	由用户自定义	定义 input 元素的名称
`value`	由用户自定义	规定 input 元素的值，也就是提交到服务器的值
`checked`	checked	规定此 input 元素首次加载时应当被选中
`maxlength`	正整数	规定输入字段中的字符的最大长度

name 和 value 是每个表单元素都有的属性值，主要给后台人员使用
name 表单元素的名字，要求：单选按钮和复选框要有相同的 name 值
checked 属性主要针对于单选按钮和复选框，主要作用：打开页面时默认选中某个表单元素
maxlength 是用户可以在表单元素输入的最大字符数，一般很少使用

select

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用 <select> 标签控件定义下拉列表。

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option selected="selected">默认选中</option>
    ...
</select>

每个 <option> 元素都应该有一个 value 属性，其中包含选择该选项时要提交给服务器的数据值。
如果不包含 value 属性，则 value 默认为元素内包含的文本。
可以在 <option> 元素上包含 selected 属性，以使其在页面首次加载时默认选中。

textarea

<textarea> 标签是用于定义多行文本输入的控件。

<textarea rows="3" cols="20">
    文本内容
</textarea>

cols="每行中的字符数"，rows="显示的行数"，我们在实际开发中不会使用，都是用 CSS 来改变大小
如果要禁止拉伸文本框大小，则：style="resize: none"

内联框架

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

<iframe src="URL"></iframe>

属性默认以像素为单位，但是你可以指定其按比例显示（如："70%"）。

<iframe height="500px" src="https://www.bilibili.com/" width="70%"></iframe>

提示：把需要的文本放置在 <iframe> 和 </iframe> 之间，以应对不支持 <iframe> 的浏览器。

隐藏 `<iframe>` 滚动条

<div style="width: 400px; overflow: hidden">
    <iframe height="480" src="https://www.runoob.com" width="415">您的浏览器不支持</iframe>
</div>

SEO优化

SEO（Search Engine Optimization）：搜索引擎优化。利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。

外链：链接到外部网页的链接，外链不是越多越好，而是外链的质量越高、越合理、越方便越好。

反链：被其他页面链接，反链的源头质量越高、链接次数越高越好。

参考

黑马程序员pink老师前端入门教程

HTML CSS

特殊字符	描述	字符的代码
	空格符	` `
`<`	小于号	`<`
`>`	大于号	`>`
`&`	和号	`&`
`±`	正负号	`±`
`×`	乘号	`×`
`÷`	除号	`÷`
`²`	上标	`²`

特殊字符	描述	字符的代码
	空格符	` `
`<`	小于号	`<`
`>`	大于号	`>`
`&`	和号	`&`
`±`	正负号	`±`
`×`	乘号	`×`
`÷`	除号	`÷`
`²`	上标	`²`

HTML基础总结

HTML简介

网页

网页

HTML

网页的形成

浏览器

五大常用浏览器

四大浏览器内核

Web标准

Web标准构成

HTML标签

语法规范

标签

双标签

单标签

标签关系

基础结构标签

文档类型声明标签 doctype

语言种类 lang

字符集 charset

标准骨架

IE 兼容模式

常用标签

标题标签

段落和换行标签

换行标签

分割线标签

文本格式化标签

div和span标签

图像标签

路径

超链接标签

注释

特殊字符

表格标签

表头标签

表格属性

表格结构标签

合并单元格

列表标签

无序列表

有序列表

自定义列表

表单标签

表单域

表单控件（表单元素）

input

select

textarea

内联框架

隐藏 <iframe> 滚动条

SEO优化

参考

IT小马

引用和评论

PHP5.1~8.2特性详解

网页设计的垂直居中

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

隐藏 `<iframe>` 滚动条

特殊字符	描述	字符的代码
	空格符	` `
`<`	小于号	`<`
`>`	大于号	`>`
`&`	和号	`&`
`±`	正负号	`±`
`×`	乘号	`×`
`÷`	除号	`÷`
`²`	上标	`²`