HTML (Hyper Text Markup Language,超文本标记语言)

Hyper（超）：超（Hyper）是相对于线性（Linear）而言的，HTML 之前的计算机程序大多是线性的，即必须由上至下顺序执行，而用 HTML 制作的网页可以通过其中的超链接从一个网页跳转至另一个网页。
Text（文本）：不同于一些编译型的程序语言，例如 C、C++ 或 Java 等，HTML 是一种文本解释型的程序语言，即它的源代码不经过编译而直接在浏览器中被翻译运行。
Markup（标记）：HTML 的基本规则就是用标记语言（成对尖括号组成的标签元素）来描述网页内容如何在浏览器中显示。
Language（语言）：HTML 是一种语言，但它是解释型语言。它所有的标记都会被浏览器翻译成最终显示的效果。

「所谓超文本，有2层含义：」

因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

HTML基础标签

HTML标签

HTML 标签有两种形式：

<标签名>内容</标签名>
<标签名/>

1
2

W3C标准推荐使用小写

双标签指标签是成对出现的，单标签指标签不是成对出现的，杜绝出现<标签名>

标签分为两部分：开始标签 <html> 和结束标签 </html>，两个标签之间的部分我们叫做标签体。

有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签，例如：<br/>、<hr/>、<img/> 等。

标签可以嵌套，例如：<a><b></b></a>；但是不能交叉嵌套，例如：<a><b></a></b>。

HTML属性

所有属性都放在起始标签的尖括号内，并相互用空格分开。

为了符合 W3C 标准，要求所有的属性值都使用引号。

在一个标签中可以设置多个属性，语法形式如下：

<标签名　属性名1="属性值1"　属性名2="属性值2" ... 属性名N="属性值N">内容</标签名>

有多个属性说明标签时，它们出现的先后顺序不影响页面显示的结果。

实例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <title>我的第一个网页</title>
    </head>  
    <body>
        Hello World ！  
    </body> 
</html>

1
2
3
4
5
6
7
8
9
10

注释及特殊符号

HTML 注释

基本语法：

<!-- 在此处写注释 -->

保存一个良好的注释风格，可以有以下好处：

让他人更好地解读你的代码，多用于团队协作
或许现在你懂写了什么，可是过了一段时间，并不能就能记得这片的功能
为未来调试查找提供方便
可以通过注释掉一部分暂时不用的代码

特殊符号

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
&ensp;		半个空白位
&emsp;		一个空白位
		不断行的空白

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

HTML 基本结构

<!-- 页面中最大的标签 根标签 -->
<html>
    <!-- 头部标签 -->
    <head>     
        <!-- 标题标签 -->
        <title></title> 
    </head>
    <!-- 文档的主体 -->
    <body>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11

`<!DOCTYPE >`文档类型

<!DOCTYPE>声明位于文档中的最前面，处于<html>标签之前。用来说明你用的XHTML或者HTML是什么版本。<!DOCTYPE html>告诉浏览器按照HTML5标准解析页面。

文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式

在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示

html 标签

<html> 标签标识该文档为 HTML 文档。

<html> 标签置于 HTML 文档最前边，用来标识 HTML 文档的开始，而 </html> 标签恰好相反，它放在 HTML 文档最后边，用来标识 HTML 文档的结束。

两个标签必须成对使用，网页中所有其他的内容都应该放在 <html> 和 </html> 标签之间。

基本语法：

<html>
    包含<head>、<body>等其他标签
</html>

1
2
3

lang指定该html标签内容所用的语言

  <html lang="en">  
  en 定义语言为英语 zh-CN定义语言为中文

1
2

「lang的作用」

根据根据lang属性来设定不同语言的css样式，或者字体
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别

head 标签

<head> 和 </head> 定义了 HTML 文档的头部，其中包含的内容主要包括对页面的一些基本描述。如标题、关键字等。

常用的头部标签：

标签	描述
`<title>`	定义页面标题内容（唯一必须的头部标签）。
`<base>`	当前文档的基准地址，其他相对地址都建立在此基准地址之上。
`<meta>`	有关文档本身的元信息，例如文档的作者，用于查询的关键词，关于文档的描述等。
`<style>`	定义 CSS 层叠样式表的内容。
`<link>`	定义外部文件的链接，最常见的用途是链接外部样式表。
`<script>`	定义页面中程序脚本的内容。

meta 标签

meta有两个属性name 和 http-equiv

name属性的取值

keywords(关键字) 告诉搜索引擎，该网页的关键字
description(网站内容描述) 用于告诉搜索引擎，你网站的主要内容。
viewport(移动端的窗口)
robots(定义搜索引擎爬虫的索引方式) robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引
author(作者)
generator(网页制作软件）
copyright(版权)

http-equiv有以下参数

http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容

content-Type 设定网页字符集(Html4用法，不推荐)
Expires(期限) ,可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
Pragma(cache模式),是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出
Refresh(刷新),自动刷新并指向新页面。
cache-control（请求和响应遵循的缓存机制）

1．设定关键字

<meta name="Keywords" content="value" />

关键字能被搜索引擎准确地获取,但不是越多越好，影响搜索引擎对该页面质量评价。

2．设定描述

对于一个网站的每个页面，都可以在源代码中添加说明，用来将页面的主题描述清楚，这就是页面描述的作用。

搜索引擎同样对描述文字的字数有一定的要求，所以内容应尽量简明扼要。

以上两个适当使用，能够起到优化SEO的作用。

基本语法：

<meta name="description" content="value" />

3．设定字符集

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

解释：告诉浏览器准备接收一个 HTML 文档，并且编码为UTF-8( 国际化编码)

charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”，不要写成'utf8'等。

HTML5 字符集设置简化写法：

<meta charset="UTF-8" />

4.IE 兼容模式

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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Title</title>
</head>

<body>
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

body 标签

<body> 标签界定了 HTML 文档的主体。

在 <body> 和 </body> 之间放置的是实际要显示的所有内容和其他用来控制显示方式的标签，如 <p></p>、<h1></h1>、<br />、<hr /> 等，它们中间所定义的文本、超链接、图像、表格和列表等将会在浏览器窗口中显示出来。

HTML 块级标签

特点：

总是以新行开始；
高度、行高、外边距和内边距都可以控制；
宽度缺省是它所在容器的 100%，除非设定一个宽度；
可以容纳行内元素和其他块元素。

div 标签

<div>标签没有特定的含义，它主要是用于实现页面布局操作。

网络流行的“DIV+CSS”布局方式中的 div 指的就是 <div> 标签。

p 标签

用标签 <p> 表示段落。

<br>是换行,<p>是段落。换行后<br>不会空行,而<p>换行后会空一行。

对于段落标签，有一个可选的属性 align，用于表示段落相对浏览器窗口在水平位置上的对齐方式。align 属性有四个可取值，每个可取值的含义如表所示：

值	描述
left	段落左对齐
right	段落右对齐
center	段落居中对齐
justify	对行进行伸展，每行都可以有相等的长度

但我觉得还是css好👌

特点：

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

br标签

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

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

<br>

单词 break 的缩写，意为：打断、换行。

**标签语义：**强制换行。

特点：

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

hr标签

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

1
2

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

hx 标签

主要用来标识 HTML 文档中的各级标题。在浏览器解析标题标签时，会将标题内容设为一个段落，字体设为黑体，字号大小根据 x 值的大小确定。

标题标签共有六种，每种的标题在字号上都有明显的区别。在 HTML 中，定义了六级标题，从一级到六级，每级标题的字体大小依次递减。

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

1
2
3
4
5
6

xvIUaFBq2JzXi6k

特点：

加了标题的文字会自动加粗，字号也会依次变大
一个标题就独占一行，同一行标题后不会再放置其他任何内容（后期可以通过 CSS 修改）

级别越大的标题标签，对网页元素的强调性越强，同时也和浏览器 SEO 优化有关。
故：标题标签不得滥用，要用在合适的地方！

列表标签

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

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

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

合理的使用列表布局可以有效提高 SEO。

根据使用情景不同，列表可以分为三大类：无序列表、有序列表 和 自定义列表。

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

ul、ol 和 li 标签

HTML 中的列表可分为两种类型，一种是有序列表，另一种是无序列表。前者使用编号来记录，而后者则使用项目符号来标识无序的项目。

有序列表

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

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

基本语法：

<ol>
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
  …
</ol>

1
2
3
4
5
6

对于 <ol> 标签有两个可选的属性，下表列出了每个属性、可取值和简单描述。

属性	可取值	描述
type	A、a、I、i、1	规定列表的类型，默认为数字
start	start_number	规定列表中的起始点，默认为 1
reversed	reversed	能够让有序列表中的序列倒序排列

示例代码：

<ol type="A" start="3">
  <li>华为</li>
  <li>小米</li>
  <li>苹果</li>
  <li>oppo</li>
  <li>三星</li>
</ol>

1
2
3
4
5
6
7

显示效果：

i62RraW1mgOC9bM

无序列表

在 HTML 文档中，所谓无序列表，是指以实心圆 ●（默认）、空心圆 ○、实心方块 ■ 开头的，没有顺序的列表项目。

基本语法：

<ul>
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
  …
</ul>

1
2
3
4
5
6

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

无序列表的 type 属性可以设置为 disc、circle、square，其中 disc 代表实心圆 ●（默认），circle 代表空心圆 ○、square 代表实心方块 ■。

附：去除 li 前符号的方法：style="list-style: none;"

示例代码：

<ul type="disc">
  <li>华为</li>
  <li>小米</li>
  <li>苹果</li>
  <li>oppo</li>
  <li>三星</li>
</ul>

1
2
3
4
5
6
7

显示效果：

ExYCnAgXMJQl7z1

dl、dt和dd标签

也称自定义列表

如果使用 <dt> 或 <dd> 标签的话，那么最外层就必须使用 <dl> 包裹，这种组合标签也称作表格标签，与 <table> 表格类似故而也可以称之为 <dl> 表格。

<dl> 标签定义了列表（daodefinition list），用于结合版 <dt> （定义列表中的项目）和权 <dd> （描述列表中的项目）。 <dt> 标签定义了定义列表中的项目（即术语部分）[Definition Term] <dd> 在定义列表中定义条目的定义部分。[Definition Description]

基本语法：

<dl>
  <dt>列表项</dt>
  <dd>列表描述</dd>
</dl>

1
2
3
4

注意:dt和dd是同级关系
<dt> 和 <dd> 个数没有限制，经常是一个 <dt> 对应多个 <dd>

blockquote标签

<blockquote> 标签它是用来定义一段引语的。比如我们要引用某篇诗文或者文章片段。

浏览器通常会对 <blockquote> 元素进行缩进。

讲到他，我们就插上另外两个引用标签

cite是用来标明引言的，所谓引言，就是对一本书、一篇报告或其它出版的来源资料的引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

q是用来分离文本中的引语，定义一个短的引用，引用的是一句话或者一句文档摘要

<cite>《傲慢与偏见》</cite>
<q>能一起吃顿饭么？</q>，那位帅气的先生带着期盼的眼神等她回复。
<blockquote>
    <pre> 　　　   你站在桥上看风景， 　　　   看风景人在楼上看你。 　　　   明月装饰了你的窗子， 　　　   你装饰了别人的梦。 　　　
    </pre> 　　
</blockquote>

1
2
3
4
5
6

q可以只包含存文本，或者内联元素，但blockquote的子节点必须为块元素，而不能是文本或者内联元素

有一点相同的就是q和blockquote都有一个重要而且相同的属性cite，“cite？这不是一个标签元素么？我们前面才说到啊。”是的，确实有一个<cite>标签，但同时也有一个cite属性，它是用来注明引用来源的URL。

如上面的blockquote的例子，我们就可以加上cite属性来表明该引用的来源：

<blockquote cite=“http://www.doyoe.com/plwj/article.asp?fid=pop&id=54”...

HTML行内标签

和其他元素都在一行上；
高、行高及外边距和内边距部分可改变；
宽度就是它的文字或图片的宽度，不可改变；
行内元素只能容纳文本或者其他行内元素。(不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变)
设置行内元素，需要注意如下
1. 设置宽度 width 无效。
2. 设置高度 height 无效，但可以通过 line-height 来设置。
3. 设置 margin 只有左右有效，上下无效。
4. 设置 padding 只有左右有效，上下无效。

a标签

超链接，也可以称之为锚（anchor）

超链接可以是一个字，一个词，也可以是一张图片，点击这些内容来跳转到新的文档或者当前文档中的某个部分。

尽管如此，现在一些鼠标箭头变为小手的也不一定是超链接(cursor:pointer附加上什么都可以)，可跳转的也不一定是超链接。

经常，我们使用其中的3种属性：

href 属性

基本语法：

<a href="链接地址">文本或者图片</a>

如何在刷新本页面？

<a href="javascript:void(0)"></a>
<a href="#"></a>

1
2

target 属性

<a> 标签的 target 属性规定在何处打开链接文档。

如果在一个 <a> 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。

😶‍🌫️？？我们来个小栗子：

<ul>
  <li><a href="1.html" target="showHTML">第一页</a></li>
  <li><a href="2.html" target="showHTML">第二页</a></li>
  <li><a href="3.html" target="showHTML">第三页</a></li>
</ul>

1
2
3
4
5

第一次选择内容列表中的某个链接时，浏览器会打开一个新的窗口，将它标记为 "showHTML"，并在其中显示文档内容。当用户选择另一个链接打开时，如果这个标记为 "showHTML" 的窗体仍处于打开状态，浏览器就会再次将选定的文档在该窗口中显示。

题外话：

我们还可以不打开一个完整的浏览器窗口，而是在框架中的一个 frame 中通过超链接控制另一个 frame 的页面显示。

例如，我们新建一个名为 1.html 的文件，写入以下内容。

<!--1.html-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <p>我是2.html</p>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11

再新建一个名为 2.html 的文件，写入以下内容。

<!--2.html-->
<frameset cols="300,*">
    <frame src="index.html">
    <frame src="1.html" name="showHTML">
</frameset>

1
2
3
4
5

点击查看 2.html 就会有以下显示效果：

iJLSWRvnTACDugE

回到正题：

<a> 标签的 target 属性有一个有 4 个保留的目标名称用作特殊的文档重定向操作：

（后3个不是经常用到）

值	描述
_blank	浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self	浏览器在当前窗口载入目标文档。
_parent	浏览器在父窗口载入目标文档。如果这个引用是在窗口或者在顶级框架中，那么它与 _self 等效。
_top	浏览器在最顶端的框架窗体载入目标文档。

title属性

链接的解释文字，它的作用可以在悬浮超链接时候，给用户一个关于超链接的介绍。

<a class="a" title="233">233</a>

其它用法

链接分类：

**外部链接：**例如：<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> 默认定位到页面顶部

邮件

超链接不仅可以链接网页，也可以链接到邮箱地址，也就是用户单击这个超链接时，会打开邮件客户端程序（必须安装），邮件客户端程序会根据超链接的内容自动填入收件人、主题等信息，等待用户发送邮件。

<p>
  邮件链接：
  <a href="mailto:1176996982@qq.com?subject=test%20mail">发送测试邮件</a>
  <!--“%20”来替换单词之间的空格-->
</p>

1
2
3
4
5

文档书签

博客要做目录的时候，经常用到这个方法

当一个页面内容特别多时，可以通过给页面建立书签的方式，对同一页面里的内容进行链接。这样用户在浏览网页时，可以通过书签进行页面内的内容跳转，提高浏览者的用户体验效果。

基本语法：

<a name="书签名称">文字</a>
<!--or-->
<div id="书签名称">文字</div>
<!--使用id可以是任何标签，但是name只能是a标签-->

1
2
3
4

定义了书签后，链接到该书签的超链接的基本语法为：

<a href="#书签名称">链接点</a>

拓展

<head>
    <base href="http://www.baidu.com" target="_blank">
    <base target="_self">
</head>
<body>
    <a href="">测试</a> 跳转到 百度
</body>

1
2
3
4
5
6
7

规定页面上所有链接的默认 URL 和设置整体链接的打开状态
base标签必须在head里

span标签

如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。使用<span>可以对包裹的文本设置独立的样式

基本语法：

<span>选中的文本</span>

示例代码：

<body>
  <span style="color: blue"我span>们
</body>

1
2
3

拓展： span 标签不单单是用于布局，对于一些需要单独修饰和设置的元素，可以将其用 span 标签嵌套起来，然后就可以单独对其进行设置（比如：在一个 p 标签的段落中要对其中某一句话单独设置样式，那么就可以用 span 将这句话单独嵌套起来，这样就方便对其单独设置样式还不会影响段落中的其他内容，这其实也是利用了 span 一行可以放置多个盒子的特性），不过对于特殊且具有强调性的元素建议使用 em，对于重点强调但不特殊的的元素建议使用 strong。

strong标签

<strong> 标签是一个短语标签，用来定义重要的文本。

在 HTML 中，短语标签是专用标签，用于指示文本块具有结构意义，执行与文本格式标签类似的特定操作。在开发的过程中并不反对使用这个标签，但如果只是为了达到某种视觉效果而使用这个标签的话，强烈建议使用 CSS ，这样可能会取得更丰富的效果。

基本语法：

<strong>重要的文本</strong>

短语标签

标签	描述
`<em>`	呈现为在语气上被强调的文本。`<em>`标签在样式上表示为斜体，同时在语义上也表示为斜体。`<em>`标签可以被设备识别，而`<i>`标签不能被识别。
`<strong>`	定义重要的文本。
`<dfn>`	定义一个定义项目。
`<code>`	定义计算机代码文本。
`<samp>`	定义样本文本。
`<kbd>`	定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
`<var>`	定义变量。您可以将此标签与 `<pre>` 及 `<code>` 标签配合使用。
`<abbr>`	要在HTML中缩写文本，请使用abbr标记。在开始和结束abbr标签内写入文本的缩写。`<abbr title = "超文本标记语言">HTML</abbr>`
`<q>`	要在句子中添加双引号，请使用q标签。`<q></q>`标签内的内容将用双引号输出。
`<mark>`	在`<mark>`和`</mark>`标签内写入的内容将显示为黄色标记。基本上，它像荧光笔一样工作，用来突出句子中的一些单词。
`<blockquote>`	`<blockquote>`标签用于引号语句。`<blockquote> ... </ blockquote>`标签之间写入的内容将被视为引用文本。

注： <i>标签只是单纯的样式标签，表现斜体的样式，但是语义上与普通文本无异

文本格式化标签

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

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

语义	标签	说明
加粗	`<strong>` `</strong>` 或 `<b>` `</b>`	介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者
倾斜	`<em>` `</em>` 或 `<i>` `</i>`	介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者
删除线	`<del>` `</del>` 或 `<s>` `</s>`	介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者
下划线	`<ins>` `</ins>` 或 `<u>` `</u>`	介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者

注意：<em> 标签不只是单纯的用于倾斜文本，其核心的意义在于对元素进行强调！**所以在后期的开发中可以把一些**特殊性、强调性的元素放在 em 标签中，然后再对 em 这个盒子进行样式设置，这比把其放入其他盒子（如：span）中要更合理，同理 <strong> 标签页适合放一些重点强调的元素。

img标签

在 HTML 文档中，插入图像的标签只有一个，即 <img> 标签，它负责向页面中嵌入一幅图像。准确来讲，<img> 标签并不会在页面中真正插入图像，而只是提供了一个链接地址，链接显示出图像。所以说，<img> 标签创建的是被引用图像的占位空间。

基本语法：

<img src="图像 URL" alt="图像描述" />

基本语法中只列出了 <img> 标签的两个重要属性：src 属性和 alt 属性，其中 src 属性定义了图像的链接地址（通常会把图像文件存放在一个单独的目录中，并将这个目录命名为 pics 或者 images 之类的名称），而 alt 属性则当图像无法显示时，替代显示的文本。

alt的设置也利于seo

对于 <img> 图像标签还有一些其他可选的属性，例如 width 属性和 height 属性。下表列出了属性名、可取值及简单描述。

属性	属性值	说明
`src`	图片路径	必须属性
`alt`	文本	替换文本，图像显示失败时显示（为了提高 SEO 及适配屏幕阅读器，建议都把 alt 写上）
`title`	文本	提示文本，鼠标放到图片上，显示的提示文字
`width`	像素	设置图像的宽度（了解，后面通过 CSS 设置）
`height`	像素	设置图像的高度（了解，后面通过 CSS 设置）
`border`	像素	设置图像的边框粗细（了解，后面通过 CSS 设置）
`align`	top、bottom、middle、left、right	`<img>` 标签的 align 属性定义了图像相对于周围元素的水平和垂直对齐方式。尤其需要注意的是，`<img>` 标签的 align 属性是一个表示相对位置的属性，是表示图像相对于图像周围元素的位置关系，不是图像本身绝对的对齐方式。
`border`	像素	定义图像周围的边框，默认为无边框

图像标签的注意点：

图像标签可以同时拥有多个属性（其它标签也是同理）
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开（其它标签也是同理）
属性均采取键值对的格式，即：key="value" 的格式，属性="属性值"
设置图像的宽度与高度时：一般设置其中之一便可，另外一个会自动按比例适配
设置宽高时，可以使用百分数作为值，此时图片大小会以当前父元素的大小为基础进行比例缩放，这样做的好处在于当父元素改变大小时，图片也会随比例同等缩放

路径

相对路径

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

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

绝对路径

绝对路径：指目录下的绝对位置，直接到达目的位置，通常是从盘符开始的路径。

如 Windows 系统的绝对路径：D:\web\img\logo.png

网络地址
https://github.com/readme.gif

注意：

相对路径为 /（正斜杆），绝对路径为 \（反斜杆）
实际开发中建议使用相对路径或网络地址（都是 / 正斜杆）

这里所说的绝对路径为 /（正斜杠）指的是在 Windows 环境中，而 Linux 系统依旧是反斜杠。

src 和 href 的区别

一句话概括:src 是引入资源的 href 是跳转url的

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。如果我们在文档中添加那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

置换元素与不可置换元素

很简单，先来一个问题。什么是行内元素？什么是块级元素？

一般我们都会答：

行内元素不能设置宽高，不会新起一行，行内元素只能包含数据或者行内元素，不能设置上下margin等等。

块级元素，能够新起一行，能够设置宽高，margin，并且可以包含块级元素，行内元素和数据。

好的，没问题，那么再问：

img是行内元素吗？马上回答，是的。

那么img能够设置宽高吗？有点基础的都会说可以吧，但是等等，上面说过什么了，行内元素不是不能设置宽高吗？？？

其实这里就牵扯到置换元素和非置换元素。

置换元素

置换元素（replaced element）主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。

例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；<input>标签的type属性来决定是显示输入框，还是单选按钮等。

置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。

不可置换元素

进而可知，不可置换元素（non-replaced element）就是除了 img, input, textarea, select, object 等置换元素以外的元素。

例如：<label>label中的内容</label>标签<label>是一个非置换元素，文字label中的内容”将全被显示。

HTML表格标签

表格是行和列排列而成的结构，常用来组织和展现数据。下图展示了一个表格的基本形态，并对表格的常用元素给出了标注。

ygYRDJb1ZqXftTv

一般而言，表格中除了表格标题外，通常还包含如图所示的其他三类元素。其中，单元格是表格的最小单位，多个单元格的纵横排列形成了表格，由一个或多个单元格的横向排列形成了行，纵向排列则形成了列。

对应于 HTML 文档，一个表格由表格标签 <table>、表格行标签 <tr>、单元格标签 <td> 组成，还可以包括标题标签 <caption>、列标题标签 <th>，通过这些标签能构建起 HTML 中的表格。

一个表格由三个必备元素构成，依次是 table 表格元素、tr 行元素和 td、th 单元格元素，元素是由相应的标签和内容组成的。下表是对以上各个标签分别作了说明。

标签	说明	选项
table	table 元素用来定义表格，整个表格内容都包含在 `<table>` 和 `</table>` 标签之中。	必选
tr	tr 元素用来定义表格中的一行，它是单元格的容器，每行可以包含多个单元格，由 `<tr>` 和 `</tr>` 标签表示。	必选
td	td 代表一个单元格，所有单元格都在 tr 元素内，每个单元格都由一对 `<td>` 和 `</td>` 标签。	必选
th	th 也代表一个单元格，同时也表示该表格的表头。每个单元格都由一对 `<th>` 和 `</th>` 标签。	可选
caption	caption 代表为该表格的表格标题，位于 table 中的第一行。	可选

特别强调，表格是用于表单数据的 “布局”，而不是页面的布局！

基本语法：

<table>
  <caption>
    表格标题
  </caption>
  <tr>
    <th>1列表头</th>
    <th>2列表头</th>
    …
  </tr>
  <tr>
    <td>1行1列的内容</td>
    <td>1行2列的内容</td>
    …
  </tr>
  <tr>
    <td>2行1列的内容</td>
    <td>2行2列的内容</td>
    …
  </tr>
  …
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

示例代码：

<table border="1">
  <caption>
    一、二季度小说类图书销售情况
  </caption>
  <tr>
    <th>一季度销售量</th>
    <th>一季度销售额</th>
    <th>二季度销售量</th>
    <th>二季度销售额</th>
  </tr>
  <tr>
    <td>23521</td>
    <td>￥559,940.00</td>
    <td>18423</td>
    <td>￥44,841.00</td>
  </tr>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

显示效果：

pwUOvDms14TNx9g

表格标签属性

th 标签属性

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

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

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

1
2
3
4
5
6
7
8
9

table 标签属性

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

下面通过一个简单的例子，演示设置 <table> 标签 align、border、width 这三个属性的作用。

<table align="left" border="4" width="600">
  <caption>
    一、二季度小说类图书销售情况
  </caption>
  …
</table>

1
2
3
4
5
6

显示效果：

aWfgAqjYCUF7uMO

表格结构标签

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

在表格标签中，分别用：<thead> 标签表示表格的头部区域，<tbody> 标签表示表格的主体区域，这样可以更好的分清表格结构。

<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>
            ...
        </tr>
        ...
    </tbody>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

tr标签属性

tr 元素可包含一个或多个 th 或 td 元素。

属性	可取值	描述
align	right、left、center、justify	定义表格行中内容的水平对齐方式，其中justify是对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。
valign	top、middle、bottom、baseline（基线对齐）	定义表格行中内容的垂直对齐方式
bgcolor	颜色的表示方法	定义表格行的背景颜色

valign 属性有四个可取值，每个可取值的含义及示意图如下表：

值	描述	示意图
top	对内容进行上对齐
middle	对内容进行居中对齐（默认值）
bottom	对内容进行下对齐
baseline	与基线对齐

td标签属性

td 元素中的文本一般显示为正常字体且左对齐。

属性	可取值	描述
align	left、right、center、justify	定义单元格中内容的水平对齐方式
valign	top、middle、bottom、baseline	定义单元格中内容的垂直对齐方式
bgcolor	颜色的表示方法	定义单元格的背景颜色
height	pixels、%	定义单元格的高度
width	pixels、%	定义单元格的宽度
colspan	number	定义单元格可横跨的列数
rowspan	number	定义单元格可纵跨的行数
nowrap	nowrap	定义单元格中的内容是否折行

单元格跨行跨列的基本语法：

<td colspan="所跨列数">单元格内容</td>
<td rowspan="所跨行数">单元格内容</td>

1
2

合并单元格三步曲：

先确定是跨行还是跨列合并
找到目标单元格，写上 合并方式=合并的单元格数量，比如：<td colspan="2"> </td>
删除多余单元格

示例代码：

<table width="800" border="1" cellspacing="1" cellpadding="1">
  <tr>
    <td colspan="9" align="center">2020年度图书销售统计</td>
  </tr>
  <tr>
    <td rowspan="2" align="center">图书分类</td>
    <td colspan="2">一季度</td>
    <td colspan="2">二季度</td>
    <td colspan="2">三季度</td>
    <td colspan="2">四季度</td>
  </tr>
  <tr>
    <th width="60">销售量</th>
    <th width="80">销售额</th>
    <th width="60">销售量</th>
    <th width="80">销售额</th>
    <th width="60">销售量</th>
    <th width="80">销售额</th>
    <th width="60">销售量</th>
    <th width="80">销售额</th>
  </tr>
  <tr>
    <td align="center">小说</td>
    <td align="center">23521</td>
    <td align="center">￥559,940.00</td>
    <td align="center">18423</td>
    <td align="center">￥44,841.00</td>
    <td align="center">32125</td>
    <td align="center">￥829,870.00</td>
    <td align="center">25188</td>
    <td align="center">￥586,564.00</td>
  </tr>
  …
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

显示效果：

xZnhRBv6iuPjgr5

万维网联盟 W3C 推荐用 <div> 元素和 CSS 来进行布局，而不是用表格进行页面布局，因为 table 元素本来的目的就是显示数据。

当然肯定还有一些僵尸网站仍然使用table布局

示例代码：

<table width="800" border="0">
  <tr>
    <td colspan="2" height="40" bgcolor="#DDDDDD"><h3>区域1</h3></td>
  </tr>
  <tr>
    <td height="160" width="300" bgcolor="#BBBBBB"><h3>区域2</h3></td>
    <td rowspan="2" bgcolor="#999999"><h3>区域3</h3></td>
  </tr>
  <tr>
    <td height="240" bgcolor="#BBBBBB"><h3>区域4</h3></td>
  </tr>
</table>

1
2
3
4
5
6
7
8
9
10
11
12

显示效果：

WJ9R2SKAkogxGfI

技巧：

<tr align="center">能代替n个<td align="center">

<table border="1" width="60%"  cellpadding="2">
      <caption>
        课程表
      </caption>
      <tr align="center">
        <td colspan="2">时间\日期</td>
        <td>一</td>
        <td>二</td>
        <td>三</td>
        <td>四</td>
        <td>五</td>
      </tr>

      <tr align="center">
        <td rowspan="2">上午</td>
        <td>9:30-10:15</td>
        <td>语文</td>
        <td>数学</td>
        <td>外语</td>
        <td>音乐</td>
        <td>体育</td>
      </tr>

      <tr align="center">
        <td>10:25-11:10</td>
        <td>数学</td>
        <td>数学</td>
        <td>物理</td>
        <td>化学</td>
        <td>生物</td>
      </tr>

      <tr>
        <td colspan="7">&nbsp;</td>
      </tr>

      <tr align="center">
        <td rowspan="2">下午</td>
        <td>14:30-15:15</td>
        <td>体育</td>
        <td>语文</td>
        <td>历史</td>
        <td>政治</td>
        <td>化学</td>
      </tr>

      <tr align="center">
        <td>15:25-16:10</td>
        <td>音乐</td>
        <td>语文</td>
        <td>数学</td>
        <td>美术</td>
        <td>语文</td>
      </tr>
    </table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

效果：

xYQf8e9AVnGHykO

<td colspan="7"> </td>效果与<td colspan="7" height="20"></td>一样

vBu2aeoTMzVWFNS

如果是

<td colspan="7"></td>

wa9jmO7I8u3FioS

高度变矮了，所以&nbsq;还能增开

jSt6pm7uoIa935y

HTML表单标签

为什么需要表单

使用表单的目的是收集用户信息。

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

表单的组成

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

项目	表单元素	图例
用户名、注册邮箱	单行文本框
密码	密码框
性别	单选按钮
出生年月	下拉列表框
兴趣	复选框
个人简介	多行文本域
头像	文件上传
免费注册	提交按钮

form元素-表单域

基本语法：

<form action="表单提交地址" method="提交方法">…</form>

现在的时代已经不使用这样的方法了，大多通过ajax的方式。

基本语法中的 action 属性（表单提交地址）就是这个指定位置。如若不填，则默认用当前页面进行处理，但不建议这么做。

method 属性规定了表单提交方式，最常用的有两种方式，分别是 GET 和 POST。其中 GET 是把表单中的参数放置在 HTTP 请求的头部发送给服务器，而 POST 是将请求参数置于请求体内发送。

除了基本语法中提交的 action 属性和 method 属性外，下表还列出了 form 元素的其他属性：

属性	可取值	描述	示例
accept	mime_type	规定能够通过文件上传进行提交的文件类型	accept="image/gif, image/jpeg"
accept-charset	charset	规定服务器处理表单数据所接受的字符集	accept-charset="UTF-8"
enctype	mime_type	规定在发送到服务器之前应该如何对表单数据进行编码	enctype="text/plain"
name	name	定义表单的名称	name="divForm"
target	blank、parent、 self、top、 framename	定义在何处打开 action URL	target="_blank"

默认情况下,enctype的值是application/x-www-form-urlencoded,不能用于文件上传,只有使用了multipart/form-data,才能完整的传递文件数据

form 表单中 method 的 get 和 post 区别：

method 方法规定如何发送表单数据（form-data）（表单数据会被发送到在 action 属性中规定的页面中）。
表单数据可被作为 URL 变量的形式来发送（method="get"）或者作为 HTTP post 事务的形式来发送（method="post"）。
关于 GET 的注释：
将表单数据以名称/值对的形式附加到 URL 中
URL 的长度是有限的（大约 3000 字符）
绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的，且浏览器会记录 URL）
对于用户希望加入书签的表单提交很有用（因为信息记录在 URL 中，直接保存 URL 即可）
GET 更适用于非安全数据，比如在 Google 中查询字符串
关于 POST 的注释：
将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
没有长度限制
通过 POST 提交的表单不能加入书签
对比：
GET在浏览器回退时是无害的，而POST会再次提交请求。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求大小一般是(1024字节)，http协议并没有限制，而与服务器，操作系统有关，POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

input元素-表单元素

input 元素基本语法：

<input type="元素类型" name="表单元素名称" />

input 的常用属性如下表：

type 属性的属性值及其描述如下：

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

【hidden解释】

<input type="hidden" name="..." value="..."> 上面是 html 中的隐藏域。主要作用为：
隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如 sessionkey，等等。当然这些东西也能用 cookie 实现，但使用隐藏域就简单的多了。而且不会有浏览器不支持，也避免了用户禁用 cookie 后的烦恼。
有些时候一个 form 里有多个提交按钮，怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢？我们就可以写一个隐藏域，然后在每一个按钮处加上 onclick="document.form.command.value="xx"" 然后我们接到数据后先检查 command 的值就会知道用户是按的那个按钮提交上来的。
有时候一个网页中有多个 form，我们知道多个 form 是不能同时提交的，但有时这些 form 确实相互作用，我们就可以在 form 中添加隐藏域来使它们联系起来。
javascript 不支持全局变量，但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了。
定义隐藏输入字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值。
通常是提交一些表格的时候，有些变量是预先定了其值的，而且不想客户再改变其值，所以用 hidden 隐藏，但提交表单的时候还是会把其值上交上去的。
以上为基本用法，其实和文本框差不多的作用，唯一的区别就是用户界面是不可见的。
在使有中要注意，不要将敏感信息存放在隐藏域里！尽管一般用户看不到它。

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

input元素，如果省略type属性，默认为普通文本框

属性	可取值	描述
type	text、password、radio、checkbox、file、submit、reset、button、hidden、image	定义 input 元素的类型
name	name	定义 input 元素的名称
value	value	定义 input 元素的值
accept	mime_type	仅在文件上传中使用 accept 属性，规定能够通过文件上传进行提交的文件类型
align	left、right、top、middle、bottom	仅能对图像类型使用 align 属性，定义图像的对齐方式
alt	text	仅能对图像类型使用 alt 属性，定义图像输入的替代文本
src	URL	仅能对图像类型使用 src 属性，规定图像的 URL
checked	checked	仅能对单选按钮或复选框使用 checked 属性，定义此 input 元素是否默认被选中
disabled	disabled	禁用此 input 元素
size	number	定义 input 元素的宽度
maxlength	number	定义输入字段中字符的最大长度（注意和 size 的区别）
readonly	readonly	规定输入字段为只读

<1>、有些表单元素刚打开页面就须要默认显示几个文字怎么做？

答：可以给这些表单元素设置 value属性="值"。

用户名：<iuput type="text" value="请输入用户名" />

<2>、页面中的表单元素很多，如何区别不同的表单元素？

答：name 属性：当前 input 表单的名字，后台可以通过这个 name 属性找到这个表单，页面中的表单很多，name 的主要作用就是用于区别不同的表单。

用户名：<input type="text" value="请输入用户名" name="username" />

name 属性后面的值是自定义的
radio（或者 checkbox）如果是一组，我们必须给他们命名相同的名字

<input type="radio" name="sex" />男
<input type="radio" name="sex" />女

1
2

<3>、如果页面一打开就让某个单选按钮或者复选框是选中状态？

答：checked 属性：表示默认选中状态，用于单选按钮和复选按钮。

性 别：
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" >女

1
2
3

`<label>` 标签

<label> 标签为 input 元素定义标注（标签）。

<label> 标签用于绑定一个表单元素，当点击 <label> 标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

语法：

第一种用法就是用label标签直接包含input表单，适合单个表单选择
第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。

第一种
  <label> 用户名： 
    <input type="radio" name="usename" value="请输入用户名">   
  </label>
  
  第二种
  <label for="sex">男</label>
  <input type="radio" name="sex"  id="sex">

1
2
3
4
5
6
7
8

继续详细查看：

文本类表单元素

以文本框为代表的表单元素称之为文本类元素。示例如下：

<form action="" method="post">
  <p>
    &nbsp;用户名：<input type="text" name="name" size="22" maxlength="16" />
  </p>
  <p>&nbsp;密&nbsp;&nbsp;码：<input type="password" name="pass" size="22" /></p>
  <p>
    <input type="submit" name="submit" value="登录" />
    <input type="reset" name="reset" value="重置" />
    <input type="button" name="exit" value="退出" disabled="disabled" />
  </p>
</form>

1
2
3
4
5
6
7
8
9
10
11

选择类表单元素

选择类表单元素只要是指单选框和复选框。使用选择类元素需要注意两点：

使用相同的 name 属性来控制分组操作。
value 属性为提交值，显示值为标签后紧跟的内容。

示例代码：

<form action="" method="post">
  性别：<input type="radio" name="sex" value="man" />男
  <input type="radio" name="sex" value="woman" />女 <br />
  爱好：<input type="checkbox" name="hobby" value="basketball" />篮球
  <input type="checkbox" name="hobby" value="football" />足球
</form>

1
2
3
4
5
6

其他表单元素

input 元素中有几个特殊的元素和其他元素的使用不同。这里例举两个常用的文件上传元素和隐藏元素。

文件上传：文件需要以流的形式上传，所以在表单 form 中需要设置上传方式 enctype。
隐藏元素：该元素同文本类元素使用方法一致，区别在于该元素无法在文档中显示。

示例代码：

<form action="xxxx" method="post" enctype="multipart/form-data">
  <p><input type="file" name="img" accept="image/gif, image/jpeg" /></p>
  <p><input type="hidden" name="imgdesc" value="bug截图" /></p>
  <p><input type="submit" name="upload" value="上传" /></p>
</form>

1
2
3
4
5

非 input 元素 -表单元素

在表单中，有两个常用的表单元素不属于 input 元素，它们分别是下拉列表框（<select> 和 <option> 标签实现）和多行文本域（<textarea> 标签实现）

下拉列表框

下拉列表框通过 <select> 和 <option> 标签实现，<select> 标签用于显示可供用户选择的下拉列表，其中的每个选项都由 <option> 标签标识。

select选中是selected，其余是checked

下拉列表框中的内容可以单选或多选，当用户提交表单时，浏览器会将选定的项目合成一个单独的参数列表，随同 <select> 标签的 name 属性提交给服务器。

<select> 中至少包含一对 <option>
在 <option> 中定义 selected="selected" 时，当前项即为默认选中项

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

示例代码：

<html>
  <body>
    <h3>请提交就业相关信息</h3>
    <form>
      <p>
        学历：
        <select name="edu">
          <option value="0">初中</option>
          <option value="1">高中</option>
          <option value="2">大专</option>
          <option value="3" selected="selected">本科</option>
          <option value="4">硕士</option>
          <option value="5">博士</option>
          <option value="6">其他</option>
        </select>
        就业城市：
        <select name="city" multiple="multiple">
          <option value="A" selected="selected">北京</option>
          <option value="B">上海</option>
          <option value="C">深圳</option>
          <option value="D">广州</option>
          <option value="E">其他</option>
        </select>
      </p>
      <p><input type="submit" name="submit" value="提交" /></p>
    </form>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

显示效果：

多行文本域

**使用场景：**当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签

在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常用于留言板、评论。

多行文本域用于显示或输入多行的文本，通过 <textarea> 标签来实现。在文本域内可容纳无限数量的文本，通过 cols 和 rows 属性来规定 textarea 元素的尺寸，其中 cols 属性定义了文本域内的可见列数，rows 属性定义了可见行数。

示例代码：

<html>
  <body>
    <form action="xxxx" method="post">
      <h3>淘宝服务协议</h3>
      <textarea name="content" cols="30" rows="6" readonly="readonly">
          本协议由您与淘宝平台的经营者共同缔结，本协议具有合同效力…
      </textarea>
      <p><input type="button" name="agree" value="同意" /></p>
    </form>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11

显示效果：

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

表单元素几个总结

（1）表单元素我们学习了三大组 input 输入表单元素、select 下拉表单元素、textarea 文本域表单元素

（2）这三组表单元素都应该包含在 form 表单域 里面，并且有 name 属性

<form>
    <input type="text" name="username">
    <select name="jiguan">
        <option>北京</option>
    </select>
    <textarea name="message"></textarea>
</form>

1
2
3
4
5
6
7

（3）有三个名字非常相似的标签：

表单域 form 使用场景：提交区域内表单元素给后台服务器
文件域 file 是 input type 属性值使用场景：上传文件
文本域 textarea 使用场景：可以输入多行文字，比如：留言板、网站介绍等……

HTML框架标签

现在呈现给最终用户的网页很少再使用框架技术啦

框架集（frameset）

使用框架可以把浏览器窗口划分为多个区域，每个区域显示不同的页面，每次用户在访问框架页面时，只下载框架页面中变化的区域，对于不变的区域（例如顶部和底部）不用重新下载，从而节省了流量，有利于用户体验。

框架主要包括两个部分，框架集和框架。框架集（frameset）是一个页面文件，它的目的是将浏览器窗口划分成多个子窗口（或称框架），而框架是通过框架集划分出来的一个区域，用于显示与浏览器窗口其余框架无关的独立页面。

框架集页面的结构是通过属性 rows 和 cols 来设置的，根据框架的分割方式可分为上下分割窗口（rows），左右分割窗口（cols），嵌套分割窗口（rows+cols）。

基本语法：

<frameset rows="行数列表" cols="列数列表">
  <frame src="html文件">
  <frame src="html文件">
  …
</frameset>

1
2
3
4
5

例如，我们创建四个 .html 文件，分别为 f1.html、f2.html、f3.html、f4.html：

<!--f1.html-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <p>f1框架页面</p>
  </body>
</html>
<!--f2.html-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <p>f2框架页面</p>
  </body>
</html>
<!--f3.html-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <p>f3框架页面</p>
  </body>
</html>
<!--f4.html-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <p>f4框架页面</p>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

然后创建一个 index.html 文件，写入以下代码：

<!--index.html-->
<html>
<frameset rows="20%,*,20%">
    <frame src="f1.html">
    <frameset cols="240px,*">
        <frame src="f2.html">
        <frame src="f3.html">
    </frameset>
    <frame src="f4.html">
</frameset>
</html>

1
2
3
4
5
6
7
8
9
10
11

注意：使用框架的时候不需要 <head> <body> 标签。

显示效果：

图片描述

<frameset rows="20%,*,20%">说明上下3行，第一行和最后一行占20%，中间的自适应

<frameset cols="240px,*">说明左右2列，第一列240px

内嵌框架

iframe 内嵌框架，它更适用于将一个页面内嵌到另一个页面中。在日常开发中的使用比 frameset 框架更常用。

部分常用属性：

属性	可取值	描述
frameborder	0、1	规定是否显示框架周围的边框
height	pixels	定义框架高度
width	pixels	定义框架宽度
name	自定义	框架名，用于超链接操作。
scrolling	yes、no、auto	规定是否在框架中显示滚动条
src	引用页面地址	内嵌页面地址。

iframe 语法

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

该 URL 指向不同的网页。

iframe - 设置高度与宽度

height 和 width 属性用来定义 iframe 标签的高度与宽度。

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

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

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

**提示：**使用 CSS 为 <iframe>（包括滚动条）定义样式。

使用 CSS 隐藏 <iframe> 滚动条

如果你直接使用

<iframe
  src="..."
  scrolling="no" 
  style="overflow: hidden;" 
  ...
>
</iframe>

1
2
3
4
5
6
7

那么就会连滚动功能都没了, 相当于一张静态的图片, 不太好。

遮掉 iframe 滚动条：

<div style="width:500px;overflow: hidden;">
    <iframe height="500px" src="https://www.bilibili.com/" width="580"></iframe>
</div>

1
2
3

原理：因为我们设置iframe的时候会给定它宽度和高度, 所以我们可以在它外部包一个<div>, 通过overflow: hidden把iframe右边滚动条的地方盖掉.

注意这里父元素是500px, iframe是580px, 这样相差的80px就正好覆盖掉了滚动条.

新选择器原生移除滚动条：

<!-- 此方法目前暂不推荐使用 -->
<head>
  <style>
    iframe::-webkit-scrollbar { 
      display: none;
    }
  </style>
</head>

1
2
3
4
5
6
7
8

SEO优化

SEO 优化是个复杂长期的过程，此处只是简单的介绍 SEO 优化，目的是提高前端开发者的认知。

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎open in new window的规则提高网站在有关搜索引擎内的自然排名open in new window。目的是让其在行业内占据领先地位，获得品牌open in new window收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。（百度百科）

外链：链接到外部网页的链接，外链不是越多越好，而是外链的质量越高、越合理、越方便越好。
反链：被其他页面链接，反链的源头质量越高、链接次数越高越好。

【用户体验优化】

网站体验也可称为网站用户体验，如何做好这一步优化！首先得确定你的目标用户群体，了解他们的上网习惯，分析他们的心理。然后顺着用户的特征来一步步优化网站，从而获得用户的青睐，通过用户体验优化来提高转换率。

UEO（用户体验优化）=PV/OR

PV：即页面浏览量或点击量
OR：跳出率，跳出率指那些访问该网站，仅浏览了一个页面就离开的用户所占的比例

从上述可以看出，用户跳出率低，页面浏览量就越高，用户体验就越好！

总结

写HTML代码时应注意什么？

尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for来让说明文本和相对应的input关联起来。

从输入url到页面展示发生了什么(面试)

作者：三余链接：https://juejin.cn/post/6858551640220729351 来源：稀土掘金

上述链接非常详细，下面是集中一部分

1.输入url

用户输入url，处理输入信息：

如果为非url结构的字符串，交给浏览器默认引擎去搜索改字符串；

若为url结构的字符串，浏览器主进程会交给 网络进程 ,开始干活。

2.1查找浏览器缓存

网络进程会先看看是否存在本地缓存，如果有就直接返回资源给浏览器进程，无则下一步 DNS-> IP -> TCP

2.2DNS解析

网络进程拿到url后，先会进行DNS域名解析得到IP地址。如果请求协议是HTTPS，那么还需要建立TLS连接。

2.3建立TCP连接，三次握手

接下来就是利用IP地址和服务器建立TCP连接。连接建立之后，向服务器发送请求。

3服务器响应

服务器收到请求信息后，会根据请求信息生成响应行、响应头、响应体，并发给网络进程。网络进程接受了响应信息之后，就开始解析响应头的内容。

网络进程解析响应行和响应头信息的过程：

3.1重定向

如果响应行状态码为301（永久重定向）和302（临时），那么说明需要重定向到其他url。这时候网络进程会从响应头中的Location字段里读取重定向的地址，并重新发起网络请求。

3.2 响应数据处理

导航会通过请求头的Content-type字段判断响应体数据的类型。浏览器通过这个来决定如何显示响应体的内容。

比如：若为application/octet-stream，则会按照下载类型来处理这个请求，导航结束。

若为text/html，这就告诉浏览器服务器返回的是html格式，浏览器会通知渲染进程，你要干活了。

4 准备渲染进程

默认情况，每个页面一个渲染进程。但若处于同一站点（同根域名+协议），那么渲染进程就会复用。

5提交文档

渲染进程准备好后，浏览器进程发出**“提交文档的消息”**，渲染进程接受了消息之后，会跟网络进程简历传输数据的管道。

等数据传输完成了，渲染进程会告诉浏览器进程，确认文档提交，这时候浏览器会更新页面，安全状态，url，前进后退的历史。

到这里导航结束，进入渲染阶段。

注：当浏览器刚开始加载一个地址之后，标签页上的图标便进入了加载状态。但此时图中页面显示的依然是之前打开的页面内容，并没立即替换为百度首页的页面。因为需要等待提交文档阶段，页面内容才会被替换。

iframe有哪些缺点？

iframe是一种框架，也是一种很常见的网页嵌入方式。

「iframe的优点」

iframe能够原封不动的把嵌入的网页展现出来。
如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

「iframe的缺点」

会产生很多页面，不容易管理。
iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。

label的作用是什么？是怎么用的？

例子1: 点击" 用户名:" 就可以定位光标到输入框

<form><label for="myid "> 用户名:</label>
<input type="text" id="myid" /></form>

1
2

例子2: 点击" 用户名:" 或按键alt+1, 都可以定位光标到输入框

<form>
    <label for="myid" accesskey="1"> 用户名:</label>
    <input type="text" id="myid" tabindex="1" />
</form>

1
2
3
4

for 属性功能：表示Label 标签要绑定的HTML 元素，你点击这个标签的时候，所绑定的元素将获取焦点。

acesskey 属性 功能：表示访问Label 标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。局限性：accessKey 属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。

HTML5的form如何关闭自动完成功能？

HTML的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。

关闭输入框的自动完成功能有3种方法：

在IE的Internet选项菜单里的内容--自动完成里面设置
设置form的autocomplete为"on"或者"off"来开启或者关闭自动完成功能
设置输入框的autocomplete为"on"或者"off"来开启或者关闭该输入框的自动完成功能

什么是 HTML5 的基本构件（building block）？

语义 - 提供更准确地描述内容。
连接 - 提供新的方式与服务器通信。
离线和存储 - 允许网页在本地存储数据并有效地离线运行。
多媒体 - 在 Open Web 中，视频和音频被视为一等公民（first-class citizens）。
2D/3D 图形和特效 - 提供更多种演示选项。
性能和集成 - 提供更快的访问速度和性能更好的计算机硬件。
设备访问 - 允许使用各种输入、输出设备。
外观 - 可以开发丰富的主题。

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

在浏览器的html头部加上manifest属性，如果是第一次访问浏览器会根据manifest的内容进行下载存储离线内容，如果已经访问过则从离线存储中进行加载，然后在比对服务器如果有新内容在更新离线存储离线的情况下，浏览器就直接使用离线存储的资源。

浏览器的渲染过程？

1、将获取的html解析成dom树 2、处理css，构成层叠样式表模型CSSOM 3、将dom树和CSSOM合并为渲染树 4、根据CSSOM将渲染树的节点布局计算 5、将渲染树节点样式绘制到页面上
// 注意在渲染的过程中是自上而下渲染， js会阻塞页面的渲染，优先等js执行完成如果在渲染的过程中改变了样式，会造成回流需要重新渲染

link和@import的区别？

1、从属关系区别： link属于html标签，而@import是css提供的。 2、加载顺序区别：页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载。 3、兼容性区别： import只在IE5以上才能识别，而link是html标签，无兼容问题。 4、dom可操作性区别：可以通过JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式 5、权重区别：如果已经存在相同样式，@import引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出link方式的样式权重高于@import的权重这样的直观效果。（简而言之，link和@import，谁写在后面，谁的样式就被应用，后面的样式覆盖前面的样式。）

src与href的区别？

1、href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。 2、src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

# HTML基础标签

# HTML标签

# HTML属性

# 注释及特殊符号

# HTML 注释

# 特殊符号

# HTML 基本结构

# <!DOCTYPE >文档类型

# html 标签

# head 标签

# meta 标签

# 1．设定关键字

# 2．设定描述

# 3．设定字符集

# 4.IE 兼容模式

# body 标签

# HTML 块级标签

# div 标签

# p 标签

# br标签

# hr标签

# hx 标签

# 列表标签

# ul、ol 和 li 标签

# 有序列表

# 无序列表

# dl、dt和dd标签

# blockquote标签

# HTML行内标签

# a标签

# href 属性

# target 属性

# title属性

# 其它用法

# 链接分类：

# 邮件

# 文档书签

# 拓展

# span标签

# strong标签

# 短语标签

# 文本格式化标签

# img标签

# 路径

# 置换元素与不可置换元素

# 置换元素

# 不可置换元素

# HTML表格标签

# 表格标签属性

# th 标签属性

# table 标签属性

# 表格结构标签

# tr标签属性

# td标签属性

# HTML表单标签

# 为什么需要表单

# 表单的组成

# form元素-表单域

# input元素-表单元素

# <label> 标签

# 文本类表单元素

# 选择类表单元素

# 其他表单元素

# 非 input 元素 -表单元素

# 下拉列表框

# 多行文本域

# 表单元素几个总结

# HTML框架标签

# 框架集（frameset）

# 内嵌框架

# iframe 语法

# iframe - 设置高度与宽度

# SEO优化

# 总结

# 写HTML代码时应注意什么？

# 从输入url到页面展示发生了什么(面试)

# 1.输入url

# 2.1查找浏览器缓存

# 2.2DNS解析

# 2.3建立TCP连接，三次握手

HTML基础标签

HTML标签

HTML属性

注释及特殊符号

HTML 注释

特殊符号

HTML 基本结构

`<!DOCTYPE >`文档类型

html 标签

head 标签

meta 标签

1．设定关键字

2．设定描述

3．设定字符集

4.IE 兼容模式

body 标签

HTML 块级标签

div 标签

p 标签

br标签

hr标签

hx 标签

列表标签

ul、ol 和 li 标签

有序列表

无序列表

dl、dt和dd标签

blockquote标签

HTML行内标签

a标签

href 属性

target 属性

title属性

其它用法

链接分类：

邮件

文档书签

拓展

span标签

strong标签

短语标签

文本格式化标签

img标签

路径

置换元素与不可置换元素

置换元素

不可置换元素

HTML表格标签

表格标签属性

th 标签属性

table 标签属性

表格结构标签

tr标签属性

td标签属性

HTML表单标签

为什么需要表单

表单的组成

form元素-表单域

input元素-表单元素

`<label>` 标签

文本类表单元素

选择类表单元素

其他表单元素

非 input 元素 -表单元素

下拉列表框

多行文本域

表单元素几个总结

HTML框架标签

框架集（frameset）

内嵌框架

iframe 语法

iframe - 设置高度与宽度

SEO优化

总结

写HTML代码时应注意什么？

从输入url到页面展示发生了什么(面试)

1.输入url

2.1查找浏览器缓存

2.2DNS解析

2.3建立TCP连接，三次握手