网页设计师要懂的前端知识之HTML标签及规范

快来打我* 2021-09-20 05:46 285阅读 0赞

## 1. HTML介绍 ##

超文本标记语言（英文：HyperText Markup Language，HTML）是为"网页创建和其它可在网页浏览器中看到的信息"设计的一种标记语言。

## 1.1 什么是浏览器 ##

解释和执行HTML源码的工具。

五大浏览器：Internet Explorer (IE)，FireFox(火狐)，Chrome（谷歌），Opera（欧朋），Safari（苹果）

**最后，如果大家如果在自学遇到困难，想找一个前端的学习环境，**[可以加入我们的前端学习圈，点击我加入吧][Link 1]**，会节约很多时间，减少很多在学习中遇到的难题。**

![v2-25a86f49d99e10fcf6b96ed04738bbb2_hd.jpg][]

## 1.2 浏览器内核 ##

1. Trident内核：代表产品IE,又称为IE内核。是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器有:IE，遨游,世界之窗浏览器，腾讯TT等等。

1. Gecko内核：代表产品Mozilla FirefoxGecko是一套开源的，C++编写的排版引擎。使用它最著名的浏览器有Firefox,Netscape6至9。

1. WebKit内核：代表产品有Safari，主要用于Mac OS系统。使用它的浏览器是Safari和谷歌浏览器Chrome。

1. Presto内核：代表产品OperaPresto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了。

1. Blink内核：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome和Opera内核是Blink。

## 1.3 HTML发展史 ##

## 1.3.1 HTML的概念 ##

HTML的概念HTML是Hypertext Markup Language（**超文本标记语言**）的缩写，是一种基于**SGML**（标准通用标记语言）的**标记语言**，是Web用于编辑网页的主要工具。在网上，如果要向全球范围内出版和发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于出版的"母语"。**WWW**是环球信息网的缩写，所使用的出版语言就是HTML语言。

## 1.3.2 HTML的功能 ##

· 展示在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。

· 通过超链接检索在线的信息。

· 为获取远程服务而设计表单，可用于检索信息、定购产品等。

· 在文档中直接包含电子表格、视频剪辑、声音剪辑以及其他的一些应用。

## 1.3.3 HTML历次版本 ##

· HTML 1.0——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）。

· HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时。

· HTML 3.2——1996年1月14日，W3C推荐标准。

· HTML 4.0——1997年12月18日，W3C推荐标准。

· HTML 4.01——1999年12月24日，是在HTML4.0基础上的微小改进W3C推荐标准。

· HTML 5——2014年10月28日，W3C推荐标准。

## 1.4 HTML与互联网介绍 ##

· HTML

· HTML超文本标记语言（Hyper Text Mark-up Language）是一种制作万维网页面的标准语言，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文件是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。

· 互联网

· 互联网（英语：Internet），又称网际网络，或者音译因特网、英特网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。

## 2. 开发工具 ##

安装文件请查看练习案例-1.安装文件及安装说明。

## 2.1 Adobe Dreamweaver ##

Adobe Dreamweaver简称"DW"，中文名称 "梦想编织者"，是美国Adobe公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器。DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

![v2-93c1433debf2576b8aef8b8f7713173d_hd.jpg][]

图2-1 Adobe Dreamweaver

## 2.2 DCloud - Hbuilder ##

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的最大优势，就是其拥有完整的语法提示和代码输入法，可以在编写HTML、CSS、JavaScript时更加快速便捷，同时默认添加了emmet语法插件，前端程序员在编写HTML代码时可以更加暴力。

![v2-b5275bcbe4816cc695e6ca0092a19908_hd.jpg][]

图2-2 DCloud - Hbuilder

## 2.3 Sublime Text 3 ##

**Sublime Text**是一个代码编辑器也是HTML和散文先进的文本编辑器。漂亮的用户界面和非凡的功能，例如迷你地图，多选择，Python的插件，代码段，等等。完全可自定义键绑定，菜单和工具栏。Sublime Text的主要功能包括：拼写检查，书签，完整的Python API，Goto功能，即时项目切换，多选择，多窗口等等。

![v2-45a7f2a3267456116778edccf8dbce38_hd.jpg][]

图2-3 Sublime Text 3

## 2.4 Visual Studio Code ##

**Visual Studio Code** (简称 VS Code / VSC) 是由微软推出的一款免费开源的现代化轻量级代码编辑器。支持语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，并且有强大的插件库，可以针对不同的开发需求进行对应的插件配置。

![v2-c0298c9a404165863a639f5d863f7ecc_hd.jpg][]

图2-4 Visual Studio Code

## 3.HTML的标签结构 ##

## 3.1 HTML文件结构 ##

## 3.1.1 HTML结构 ##

## 3.1.2 解释 ##

· <html></html>称为根元素，所有的网页元素都在<html></html>中

· <head></head>元素用于定义文档的头部

· 头部元素含有有:<meta> <title> <link> <script> <style>

· <title> 标签定义文档的标题

· <meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的 典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据 元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 针对搜索引擎的关键词，一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面

· <meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content="xxx@qq.com"><meta name="Keywords" content="HTML,CSS,HTML5,CSS3,jQuery"><meta name="Description" content="辛苦一阵子，幸福一辈子">

· <link> 元素引入外部样式

· <link rel="shortcut icon " type="images/x-icon" href="[http://www.jd.com/favicon.ico][http_www.jd.com_favicon.ico]">

· <script> 元素该元素可以定义页面的脚本内容

· <style>标签用于为 HTML 文档定义样式信息

· <body></body>元素用于定义网页显示的内容

## 3.2 基本标签 ##

· <div>

· div 标签它是可用于组合其他HTML元素的容器。

· 可用于对大的内容块设置样式属性。

· 文档布局。它取代了使用表格定义布局的老式方法。

· <hx>

· hx HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题 html提供的标题有六种分别是h1 h2 h3 h4 h5 h6 。

· <h1> 定义字号最大的标题,代表大标题,一般一个页面只用一次。

· <h6> 定义字号最小的标题。

· <p>

· p 元素定义段落,会自动在其前后创建一些空白。浏览器会自动添加这些空间。

· <br>

· br 元素会在浏览器插入一个简单的换行符。

· <hr>

· hr 标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。

· <a>

· a标签签用来设置超文本链接。 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

· href属性：描述了链接的目标URL。

· target属性：设置链接跳转方式

· <img>

· img 标签 用来申明图像的插入。

· src属性：规定显示图像的 URL。URL为图片的相对路径或者绝对路径均可。

· alt属性：规定图像的替代文本。

· title属性：定义图片的标题，鼠标移动到图片出现。

· <span>

· span 用来组合文档中的行内元素,可用作文本的容器。 span 元素没有固定的格式表现，当对它应用样式时，它才会产生视觉上的变化。

· <ul>

· ul 标签作为无序列表，它是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记，无序列表始于 <ul> 标签。每个列表项始于 <li> 标签

· <ul> <li>无序列表一</li> <li>无序列表二</li></ul>

· <ol>

· 有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签

· <ol> <li>有序列表一</li> <li>有序列表二</li></ol>

·

· 注释标签用于在源代码中插入注释。注释不会显示在浏览器中。 可使用注释对代码进行解释，这样做有助于在以后的时间对代码的修改，当编写了大量代码时尤其有用

· <p>这是一个p标签</p>

## 3.3 标签属性 ##

HTML 元素可以通过设置属性，实现某些特定的效果。

属性可以在元素中添加附加信息。

属性一般描述于开始标签。

属性总是以名称/值对的形式出现，比如：name="value"。

<p class="container"> 这是一个带有class属性且值为container的段落<P>标签</p>

## 3.4 文本格式化标签 ##

· <b>

· b 标签表示 以粗体字体形式展现内容

· <strong>

· strong标签与b标签都表示粗体。 但strong表示强调。例如，一个单词或短语需要显示得更高调，更响亮...总之要比一般文本更加突出。这里我们就使用strong标签在SEO中的应用，告知搜索引擎我们内容强调的是什么。

· <i>

· i 标签表示 以斜体字体形式展现内容

· <em>

· em 标签告诉浏览器把其中的文本表示为强调的内容 并以斜体形式展现

· <pre>

· pre 标签可定义预格式化的文本。 被包围在 pre 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体

· <small>

· small标签 定义小型文本

· <bdo>

· bdo 标签指定文本方向，其dir属性申明文本显示方向

· ltr 属性值 默认 从左到右显示

· rtl 属性值 从右到左显示

· <sub>

· sub 标签定义下标文本。下标文本将会显示在当前文本流中字符高度的一半为基准线的下方

· <sup>

· sup 标签定义上标文本。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方

## 3.5 HTML 单双标记的区别 ##

## 3.5.1 单标记 ##

单标记指的是由一个标签组成。

比如：

换行符：<br/>

水平线：<hr/>

图片标签:<img/>

文本标签:<input/>

link标签：<link/>

元信息标签： <meta/>

## 3.5.2 双标记 ##

由"开始标签"和"结束标签"两部分构成，必须成对使用。

如：

<p></p>段落标签，其中<p>是开始标签表示一个段落的开始，</p>是结束标签，表示一个段落的结束。

常见的双标记标签的有：

<html> <head> <title> <body> <table> <span> <div> <p> <h1>等等。

## 3.6 HTML 实体转义 ##

在HTML中，内容编辑时，如果是通过空格键编辑的多个空格，网页只会显示成一个，而小于号（<）和大于号（>），网站则会认为是标签而无法直接显示在页面中。而这些都可以通过实体字符来解决。

## 4. HTML块状元素&&行内元素 ##

根据CSS规范的规定，每一个网页元素都有一个*display*属性，用于确定该元素的类型，每一个元素都有默认的*display*属性值，比如div元素，它的默认*display*属性值为**block**，成为"块级"元素(block-level)；而span元素的默认*display*属性值为**inline**，称为"行内"元素。

## 4.1 块状元素 ##

块级元素会独占一行，其宽度自动填满其父元素宽度，一般情况下，块级元素可以设置**width**, **height**属性一般用来搭建网站架构、布局、承载内容……

它包括以下这些标签： **address、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、menu、noframes、ol、p、pre、table、ul**

## 4.2 行内元素 ##

行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下才会换行，其宽度随元素的内容而变化，行内元素设置**width**, **height**无效。一般用在网站内容之中的某些细节或部位，用以"强调、区分样式、上标、下标、锚点"等等。

下面这些标签都属于内嵌元素： **a、b、bdo、big、small、br、cite、em、font、i、img、input、kbd、label、select、span、strong、sub、sup、textarea**

## 5. w3c规范 ##

## 5.1 什么是W3C ##

万维网联盟(**world wide web**)。

简单的说就是一个国际性的中立组织，专门负责统一web相关的各项标准。

## 5.2 为什么要统一web标准 ##

试想你用湖北话交流，他用广东话交流，你们是永远都无法进行畅通的沟通。

所以这个时候"普通话"就出现了！它能够促使你们畅通的交流，互相理解彼此的意图。

这里的不同话种其实就是不同浏览器的解析规则，而你想表达的意思就是浏览器的解析结果。

因此，不同的浏览器想要解析出相同的内容呈现给用户，就需要有一个统一标准的解析规则。

这就是W3C出现的缘由。

## 5.3 标签嵌套规则 ##

1. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素

· <div><h1></h1><p></p></div> —— 对<a href="\#"><span></span></a> —— 对<span><div></div></span> —— 错

1. 块级元素不能放在<p>里面

· <p><ol><li></li></ol></p> —— 错<p><div></div></p> —— 错

1. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是

· h1、h2、h3、h4、h5、h6、p、dt

1. 块级元素与块级元素并列、内嵌元素与内嵌元素并列

· <div><h2></h2><p></p></div> —— 对<div><a href="\#"></a><span></span></div> —— 对<div><h2></h2><span></span></div> —— 错

## 5.4 HTML语义化标签 ##

1. 什么是语义化标签 那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下我可以使用这个标签才合理）比如： 网页上的文章的 标题 就可以用h1~h6，网页上的各个栏目的 栏目名称 也可以使\`h1~h6。 文章中内容的段落就得放在 段落标签p 中，在文章中有想强调的文本，就可以使用em标签表示强调等等

1. 为啥使用语义化标签

10. 更容易被搜索引擎收录

10. 更容易让屏幕阅读器读出网页内容

10. 能够更好的体现页面的主题

10. 兼容性更好，支持更多的网络设备

1. HTML语义化标签

11. <a>标签：实现超链接 强调:title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）

11. <p>标签：文章段落放到<p>标签中

11. <hx>标签：文章标题，栏目标题用<hx>表示 标题标签一共有6个， h1、h2、h3、h4、h5、h6 分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。 <h1> 是最高的等级

11. <strong>和<em>标签：特别强调某几个文字 但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用 *斜体* 表示，<strong>用 **粗体**表示。 两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调

11. <q>标签：短文本引用 注意要引用的文本不用加 双引号 ，浏览器会对q标签自动添加双引号

11. <blockquote>标签：长文本引用 注意浏览器对 <blockquote>标签的解析是 缩进样式

11. <address>标签：为网页加入地址信息

11. <ul>标签：无序列表

11. <ol>标签：有序列表

11. <caption>标签：为表格添加标题和摘要 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容 语法： <table summary="表格简介文本"> 标题用以描述表格内容，标题的显示位置：表格上方。 语法：<caption>标题文本</caption>

## 6. 企业官网命名规范 ##

页面命名规范

首页：index.html

公司介绍：about.html

新闻列表： news.html

新闻详情页：news\_details.html

产品列表：product.html

产品详情页：pro\_details.html

联系我们：contact.html

## 7. 总结 ##

通过本篇文章，你可以学到以下几点

· HTML介绍

· 开发工具

· HTML结构、标签

· HTML块状元素&&行内元素

· w3c规范

· 企业官网命名规范

[Link 1]: https://link.zhihu.com/?target=https%3A//jq.qq.com/%3F_wv%3D1027%26k%3D5mtz2T
[v2-25a86f49d99e10fcf6b96ed04738bbb2_hd.jpg]: /images/20210812/82799e6a54b6420a9e4f703390584b0d.png
[v2-93c1433debf2576b8aef8b8f7713173d_hd.jpg]: /images/20210812/7808fd4a997d4b9bb2b606112dce34ea.png
[v2-b5275bcbe4816cc695e6ca0092a19908_hd.jpg]: /images/20210812/38d77972b5a04a0698994ea2400844a3.png
[v2-45a7f2a3267456116778edccf8dbce38_hd.jpg]: /images/20210812/14b35f985ed04b51bdf9a576ac41beb1.png
[v2-c0298c9a404165863a639f5d863f7ecc_hd.jpg]: /images/20210812/d4c025843e094c2cab12ba2a5a356ea7.png
[http_www.jd.com_favicon.ico]: https://link.zhihu.com/?target=http%3A//www.jd.com/favicon.ico