前端大神总结的HTML标签，真的是太全了-连载1

TML

本文，有很多很棘手的问题，例如使用sublime 编辑器可能安装插件的时候会使用不了view in browser我公司的电脑可以安装、结果家里的电脑就报编码错误、需要改sublime插件源代码解码成utf8就可以了、还有一直连不上packagecontrol的网页，可以群（526929231）使劲砸我得到解决~ sublime编辑器对于前端来说确实很好用！很好用！很好用！ SublimeText、Webstorm推荐这两个编辑器

HTML起源

刚开始设计HTML语言是为了將文字图像关联在一起，用另一台发送或接收

HTML(HyperTextMark-up Language)超文本标记语言

HTML 不是一种编程语言，而是一中标记语言(mark-up language),标记语言是一套标记标签(mark-up tag)

HTML标签

标签是由尖括号 < > 把关键词括起来，标签通常是成对出现的

Web浏览器

读取 HTML 文档，使用标签来解析页面的内容，以网页的形式现实，浏览器不会现实HTML标签

现在市场上主流五大浏览器

每种浏览器都有自己的内核(引擎)（解析网页的一个程序，io以什么方式去渲染它都要通过引擎去执行）

目前主流的浏览器分为五种

Chrome谷歌浏览器（Webkit内核，V8 js引擎）
Firefox火狐浏览器（Gecko内核）
Internet Explorer IE浏览器（ Trident内核）
Opera 欧朋浏览器（Presto内核）主要市场：移动端
Safari 苹果浏览器（Webkit内核，但JS引擎为Nitro）
不需要去记，简单了解下

标签使用规范

标签必须闭合
所有标签名一律小写
代码缩进，使阅读代码更加易懂
特殊符号规范使用
命名规范，见名之意

PS: 所有的标记符号都是半角英文

编辑器

众说纷纭编辑器太多，最终只是一个工具，希望同学们能从万千世界中找到适合自己的编辑器伙伴

编辑器	描述
EditPlus	手写模式，适合初学手写，无代码提示(有IE调试视图)
Sublime	插件特别多，占用内存小，启动速度快，打开大项目较慢，管理文件方式有些缺陷
webstorm	集成插件特别多，启动较慢，占用内存大，开发和管理视图都很方便
Dreamweaver	适合初学，主要代码提示和代码插入功能强大，主要偏向于设计(有设计视图)

Sublime插件列表

插件名	描述	详情请戳
emmet	前端自动补全，提供快捷补全方式
ColorPicker	调色板，颜色选择器
SublimeTmpl	sublime模板，可以快速创建一个HTML模板
view in browser	用快捷方式打开浏览器进行调试HTML(需要配置参考后面网页)
LiveReload	实时刷新HTML(编辑器里按下保存ctrl+s的时候，已经打开的HTMl会自动刷新)	谷歌插件文件安装方法需要配合谷歌LiveReload插件插件文件下载
Color Highlighter	CSS颜色代码高亮及颜色预览提示
CSS3	CSS3的代码高亮提示	还针对了CSS3的选择器及锚类选择器`:hover :first-child :first-child ...`的高亮
JavaScript Completions	原生js 代码提示
Sublime-Better-Completion	可自选开启代码提示，支持jQ、js、bootstrap、php、sql ...	仓库地址此插件只能通过Github克隆下载安装安装方法

注：Github 网页中下面是有详细的使用方法 packagecontrol.io官网里面search 可以进行搜索插件名字来找到具体使用方法，还有什么不懂或者安装出现编码错误以及安装不上的可以拍打我~

模板的配置

配置	描述
!DOCTYPE html	不是标签，主要用于文档类型的声明
charset="utf-8"	声明字符编码集
http-equiv="Content-Type"	把Content属性关联到HTTP头部(协议头)

HTML模板

简单了解，并不需要熟练掌握

HTML树状结构

Dom节点树

HTML网页扩展名

.html .htm这两种是比较常见的
在早期系统中文件名是有8+3组成三个扩展名所以不支持四个字母的扩展采用.htm
现在通常使用.html作为扩展名

标签的学习

接下来所有的标签元素学习都在body标签里面去敲打实现、

H标签

为了突出标题，字体大小和加粗发生相应的改变

<h1>我是大主题</h1>
<h2>我是大主题</h2>
<h3>我是大主题</h3>
<h4>我是大主题</h4>
<h5>我是大主题</h5>
<h6>我是大主题</h6>

<!doctype html><!-- 让浏览器使用html5的标准解析 -->
<html>
 <head>
 <!-- 设置字符编码集让浏览器使用utf8解析当前网页 -->
 <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
 <meta name="keywords" content="SEO搜索引擎，关键词，多个请用逗号分开" />
 <meta name="description" content="网页描述，八十字内" />
 <title>浏览器标签页上的网页标题</title>
 </head>
 <body> <!-- 所有的标签学习都在这body里面去敲，上面head元素里面的内容做个了解就可以了 -->
 
 <h1>我是大标题</h1>
 <h2>我是主题2</h2>
 <h3>我是主题3</h3>
 <h4>我是主题4</h4>
 <h5>我是主题5</h5>
 <h6>我是主题6</h6>
 
 </body>
</html>

可以发现h标签从h1到h6会随着数值越小字越小，并且都是会加粗和各占一行的状态（前后的元素都会被换行）

h1标签一般一个页面里面只会写一次，为了让搜索引擎爬取到 (写一次利于SEO搜索引擎优化)

p段落标签

<p>
 冬着一身素衣，缓缓而来，季节没有了往日的姹紫嫣红，却用简单的线条，勾勒出一幅洁白的画，纯洁通透，轻盈自然。
</p>

特殊符号

刚我们了解到了浏览器是识别尖括号的，如果要在页面中显示html标记那要怎么做呢？这时候就需要特殊符号的表示来显示

符号	描述
空格
小于	<
大于	>
引号	"
版权	©
×叉	×
&	&

加粗标签

符号	描述
B标签	物理加粗，页面呈现加粗状态.
Strong标签	不仅能加粗，还利于搜索引擎优化

<b>物理加粗，页面呈现加粗状态.</b>

<strong>不仅能加粗，还利于搜索引擎优化，就是类似于百度、谷歌这种搜索引擎爬取你的网页的时候会查找这个标签里面的内容来优化显示网页的排名</strong>

可以根据word文档上面发现 b是加粗 u是下划线 i是倾斜同样适用于标签
<i>我是倾斜</i> <u>我加了下划线</u>

A标签

链接一个页面,点击则会跳转这个链接页面
使用锚点滚动到设定的位置

<a href=""></a> a标签中的href控制点击的时候跳转到哪里如果没写表示刷新当前页面


<a href="#"></a> 跳转到当前页面(回归到页面顶部)


<a href="javascript： void(0);"></a> 死链接，不会跳转，一般用于js特效


<a href="#name">锚点到一个标签上所对应的ID名字，点击则跳到那个标签位置</a>


<a href="http://baidu.com">跳转到百度</a> 跳转到百度 需要注意的是 http 协议不能少

点击#flag的a标签的时候会跳到到上面h2标签

只有拥有name属性的
a标签
才能锚点,还有一种方式是通过ID标识唯一元素，也可以跳转(不仅仅是a标签)

补充标签

描述	标签
滚动标签	marquee
字体标签	font
定义水平线	hr

滚动标签

marquee

属性	描述
direction	滚动方向
behivior	行为

behivior

值	描述
alternate	交替滚动
scroll	滚动
slide	滑落

Font标签

属性	描述
color	颜色
size	0-7
face	字体

hr水平线

与font相似，拥有color和size属性

hr标签没有结束标签按照早期的习惯也H5也遵循XHTML的解析所以统一会加一个反斜杠表示结束这个标签，不加也能够正确显示，但是养成一个良好的习惯确实重要，比如微信小程序就是没有结束标签必须要使用一个反斜杠结尾否则直接报错、

练习一、

结合今天所学，写一个简单的网页

内容如下：

写一篇收获或感受 / 写一篇文章 ————> 为什么要自己写，网上一大把哈哈，可以自己写下，锻炼下思维
需要包括h、p、a、加粗
题材不限，至少200字

练习二、

在习题一的文章底部，使用滚动标签进行滚动方向为45°

可以在头部找到我，如有勘误、错别字、尽情见谅很用心的检查了码了这么久

TTP/1.1 GET Request

HTTP / 1.1服务器支持所谓的虚拟主机。也就是说，相同的物理服务器可以容纳多个虚拟主机，具有不同的主机名（例如，www.nowhere123.com和www.test909.com）以及它们自己的专用文档根目录。因此，在HTTP / 1.1 GET请求中，必须包括一个名为“Host”的请求头，以选择其中一个虚拟主机。

GET /index.html HTTP/1.1
Host: 127.0.0.1
(blank line)

HTTP/1.1 200 OK
Date: Sun, 18 Oct 2009 12:10:12 GMT
Server: Apache/2.2.14 (Win32)
Last-Modified: Sat, 20 Nov 2004 07:16:26 GMT
ETag: "10000000565a5-2c-3e94b66c2e680"
Accept-Ranges: bytes
Content-Length: 44
Content-Type: text/html
 
<html><body><h1>It works!</h1></body></html>

Example: HTTP/1.1 Missing Host Header

以下示例显示HTTP / 1.1请求中的“Host”标头是必需的。如果缺少“Host”标头，则服务器返回错误“400 Bad Request”。

GET /index.html HTTP/1.1
(blank line)
HTTP/1.1 400 Bad Request
Date: Sun, 18 Oct 2009 12:13:46 GMT
Server: Apache/2.2.14 (Win32)
Content-Length: 226
Connection: close
Content-Type: text/html; charset=iso-8859-1
 
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>400 Bad Request</title>
</head><body>
<h1>Bad Request</h1>
<p>Your browser sent a request that this server could not understand.<br />
</p>
</body></html>

有条件的GET请求

在前面的所有示例中，如果可以满足请求（即无条件），则服务器返回整个文档。您可以使用其他请求标头来发出“条件请求”。例如，要根据上次修改日期请求文档（以便决定是否使用本地缓存副本），或者要求提供文档（或范围）的一部分而不是整个文档（对于下载大文件）。

条件请求标头包括：

If-Modified-Since (check for response status code "304 Not Modified").
If-Unmodified-Since
If-Match
If-None-Match
If-Range

Request Headers

本节介绍一些常用的请求标头。

有关更多详细信息，请参阅HTTP规范。

标题名称的语法是使用短划线（ - ）连接的初始标题的单词，例如，Content-Length，If-Modified-Since。

Host: domain-name HTTP / 1.1支持虚拟主机。多个DNS名称（例如，www.nowhere123.com和www.nowhere456.com）可以驻留在同一物理服务器上，具有自己的文档根目录。HTTP / 1.1中必须使用主机头来选择其中一个主机。

如果服务器，客户端可以使用以下标头进行内容协商，以请求服务器提供文档的首选类型（就媒体类型而言，例如JPEG与GIF，或使用的语言，例如英语与法语）维护同一文档的多个版本。

Accept: mime-type-1, mime-type-2, ...客户端可以使用Accept标头告诉服务器它可以处理的MIME类型，它更喜欢。如果服务器具有所请求文档的多个版本（例如，GIF和PNG中的图像，或TXT和PDF中的文档），则它可以检查该标题以决定将哪个版本传递给客户端。（例如，PNG比GIF更先进，但并非所有浏览器都支持PNG。）此过程称为内容类型协商。

Accept-Language: language-1, language-2, ... 客户端可以使用Accept-Language标头告诉服务器它可以处理或更喜欢的语言。如果服务器具有所请求文档的多个版本（例如，英语，中文，法语），则它可以检查该标题以决定返回哪个版本。此过程称为语言协商。

Accept-Charset: Charset-1, Charset-2, ...对于字符集协商，客户端可以使用此标头告诉服务器它可以处理或更喜欢哪些字符集。字符集的示例是ISO-8859-1，ISO-8859-2，ISO-8859-5，BIG5，UCS2，UCS4，UTF8。

Accept-Encoding: encoding-method-1, encoding-method-2, ... 客户端可以使用此标头告诉服务器它支持的编码类型。如果服务器具有所请求文档的编码（或压缩）版本，则它可以返回客户端支持的编码版本。服务器还可以在返回客户端之前选择对文档进行编码，以减少传输时间。服务器必须设置响应头“Content-Encoding”以通知客户端返回的文档已编码。常见的编码方法是“x-gzip（.gz，.tgz）”和“x-compress（.Z）”。

Connection: Close|Keep-Alive -客户端可以使用此标头告知服务器在此请求之后是否关闭连接，或者为另一个请求保持连接活动。HTTP / 1.1默认使用持久（保持活动）连接。HTTP / 1.0默认关闭连接。

Referer: referer-URL - 客户端可以使用此标头指示此请求的引用者。如果您点击网页1中的链接访问网页2，则网页1是请求网页2的推荐人。所有主要浏览器都设置此标题，可用于跟踪请求的来源（用于网络广告），或内容定制）。尽管如此，这个标题不可靠并且很容易被欺骗。请注意，推荐人拼错为“Referer”（不幸的是，您也必须遵循）。

User-Agent: browser-type - 确定用于发出请求的浏览器类型。服务器可以根据浏览器的类型使用此信息返回不同的文档。

Content-Length: number-of-bytes -由POST请求使用，以通知服务器请求正文的长度。

Content-Type: mime-type -由POST请求使用，以通知服务器请求正文的媒体类型。

Cache-Control: no-cache|... -客户端可以使用此标头指定代理服务器如何缓存页面。“no-cache”要求代理从原始服务器获取新副本，即使本地缓存副本可用。（HTTP / 1.0服务器无法识别“Cache-Control：no-cache”。而是使用“Pragma：no-cache”。如果您不确定服务器的版本，则包括两个请求标头。）

Authorization: 客户端使用它来提供其凭据（用户名/密码）以访问受保护资源。

Cookie: cookie-name-1=cookie-value-1, cookie-name-2=cookie-value-2, ... - 客户端使用此标头将cookie返回给服务器，该服务器之前由此服务器设置用于状态管理。

If-Modified-Since: date -告诉服务器仅在特定日期之后修改了页面。

GET Request for Directory

假设文档基目录“htdocs”中存在名为“testdir”的目录。

如果客户端向“/ testdir /”发出GET请求（即，在目录中）。

如果目录包含“index.html”文件，服务器将返回“/testdir/index.html”。
否则，如果在服务器配置中启用了目录列表，则服务器返回目录列表
否则，服务器返回“404找不到页面”。

有趣的是，如果客户端向“/ testdir”发出GET请求（未指定目录路径“/”），则服务器返回“301 Move Permanently”，其新“Location”为“/ testdir /“。

大多数浏览器将跟进另一个“/ testdir /”请求。例如，如果您从浏览器发出不带尾随“/”的http://127.0.0.1:8000/testdir，您可能会注意到在给出响应后，地址中添加了一个尾随的“/”。所以应该在目录请求中包含“/”以保存额外的GET请求。

URL and URI

URL (Uniform Resource Locator)

RFC 2396中定义的URL（统一资源定位符）用于通过Web唯一标识资源。 URL具有以下语法：

protocol://hostname:port/path-and-file-name

URL中有4个部分：

Protocol:客户端和服务器使用的应用层协议，例如HTTP，FTP和telnet。
Hostname: 服务器的DNS域名（例如，www.nowhere123.com）或IP地址（例如192.128.1.2）。
Port:服务器正在侦听来自客户端的传入请求的TCP端口号。
Path-and-file-name: 服务器文档基目录下所请求资源的名称和位置。

Encoded URL

URL不能包含特殊字符，例如空格或“〜”。特殊字符以％xx的形式编码，其中xx是ASCII十六进制代码。例如，'〜'编码为％7e;'+'编码为％2b。空白可以编码为％20或'+'。编码后的URL称为编码URL。

URI (Uniform Resource Identifier)

RFC3986中定义的URI（统一资源标识符）比URL更通用，URL甚至可以在资源中定位片段。

HTTP协议的URI语法是：

http://host:port/path?request-parameters#nameAnchor

名称=值对形式的请求参数通过“？”与URL分隔。名称=值对由'＆'分隔。
#nameAnchor标识HTML文档中的片段，通过锚标签<a name="anchorName"> ... </a>定义。
用于会话管理的URL重写，例如“...; sessionID = xxxxxx”。

Character Set Negotiation

客户端可以使用请求标头Accept-Charset与服务器协商它喜欢的字符集。

Accept-Charset: charset-1, charset-2, ...

常见的字符集包括：ISO-8859-1（Latin-I），ISO-8859-2，ISO-8859-5，BIG5（繁体中文），GB2312（简体中文），UCS2（2字节Unicode），UCS4（4字节Unicode），UTF8（编码Unicode）等。

Encoding Negotiation

客户端可以使用Accept-Encoding标头告诉服务器它支持的编码类型。常见的编码方案是：“x-gzip（.gz，.tgz）”和“x-compress（.Z）”。

Accept-Encoding: encoding-method-1, encoding-method-2, ...

类似地，AddEncoding指令用于将文件扩展名与编码方案相关联。

例如：

AddEncoding x-compress .Z
AddEncoding x-gzip .gz .tgz

Persistent (or Keep-alive) Connections

在HTTP / 1.0中，服务器在默认情况下传递响应后关闭TCP连接（连接：关闭）。也就是说，每个TCP连接只服务一个请求。这不是效率，因为许多HTML页面包含超链接（通过<a href="url">标记）到其他资源（例如图像，脚本 - 本地或远程服务器）。如果下载包含5个内联图像的页面，则浏览器必须与同一服务器建立6次TCP连接。

客户端可以与服务器协商并要求服务器在传递响应后不关闭连接，以便可以通过同一连接发送另一个请求。这称为持久连接（或保持连接）。持久连接极大地提高了网络的效率。对于HTTP / 1.0，默认连接是非持久性的。要请求持久连接，客户端必须在请求消息中包含请求标头“Connection：Keep-alive”以与服务器协商。

对于HTTP / 1.1，默认连接是持久的。客户端不必发送“Connection：Keep-alive”标头。相反，客户端可能希望发送标题“Connection：Close”以要求服务器在传递响应后关闭连接。

持久连接对于具有许多小内联图像和其他相关数据的网页非常有用，因为所有这些都可以使用相同的连接下载。

持久连接的好处是：

在客户端，代理，网关和源服务器中打开和关闭TCP连接时的CPU时间和资源节省。
请求可以“pipelined”。也就是说，客户端可以在不等待每个响应的情况下发出多个请求，从而更有效地使用网络。
响应更快，因为没有时间执行TCP的连接打开握手。

KeepAlive指令决定是否支持持久连接。这取值为On或Off。

KeepAlive On|Off

MaxKeepAliveRequests指令设置可以通过持久连接发送的最大请求数。您可以设置为0以允许无限数量的请求。建议设置较高的数字以获得更好的性能和网络效率。

MaxKeepAliveRequests 200

KeepAliveTimeOut指令设置持久连接等待下一个请求的超时时间（以秒为单位）。

KeepAliveTimeout 10

本文版权归是三僡然所有，转载请标明出处。欢迎转载，欢迎评论，欢迎分享。如果你有文章想分享可以联系我。

标

超链接标签的作用是什么？
页面间如何进行跳转？
快速定位的锚链接的使用？

超链接标签的作用

网页必定会存在跳转不同网页的功能，几乎可以在所有的网页中找到链接，点击链接可以从一个网页跳转到另一个网页。

跳转到百度

超链接标签的语法

1、标签

<a />

2、属性

Href:要跳转到的地址

Target：跳转的网页在哪个窗口打开

Target常用的值有两个，_self表示在自身网页中打开，_blank表示新打开一个窗口。默认是_self。

3、示例

<a href="https://www.baidu.com/" target="_blank">我要跳转到百度</a>

锚链接

超链接标签除了有跳转网页的功能以外，还有一个功能，就是书签功能，经常会用在小说网站或者文档网站。

跳转到书签位置

综合运用

超链接标签本身是具有跳转功能，再结合书签功能，就能达到跳转到其他页面的书签位置。用法都一样，只不过书签是定在其他网页，然后本页面的超链接标签的href的值，是跳转路径+#+书签标签。以下示例：

1、在目标网页里定好书签

在目标网页里定好书签

2、本网页的超链接标签对接好目标地址以及目标书签.

对接目标地址以及目标书签

跳转到目标网页并定位到书签位置

总结

超链接标签知识体系

在线咨询

上一篇：HTML常用全部代码，你懂，你不想成功都难
下一篇：小程序富文本（HTML+MarkDown），200+种语言代码高亮支持

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商