整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

程序员都必掌握的前端教程之HTML基础教程（上）

本篇文章开始成哥将带大家一起学习一下前端的基础知识，我们先讲解前端的基础HTML与CSS，这个讲完我们将讲解VUE前端框架，最后我们再讲讲Ant Design的VUE前端框架，从而形成前端一个系列的教程，下面就开始我们今天的内容吧！

01 HTML简介

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。

HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。

使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件"翻译"成可以识别的信息，即现在所见到的网页。HTML 不需要编译，可以直接由浏览器执行，非常方便开发时调试。

02 HTML实例

我们现在创建一个典型的HTML结构具体如下：

1. <!DOCTYPE html>  
2. <html lang="ch">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>HTML实例</title>  
6. </head>  
7. <body>  
8.   <h1>我是标题</h1>  
9.   <p>我是段落。</p>  
10. </body>  
11. </html> 

如上页面中各个标签代表的意思如下：

1）<!DOCTYPE html>是文档声明头，它告诉游览器当前处理的内容是HTML页面

2）html是 HTML 页面的根元素，用于标识HTML内容的开始与结束

3） head是HTML页面的头，包含了文档的一些属性。其中meta是元数据这边charset="UTF-8"标识当前页面编码格式为UTF-8，title为文档的标题

4）body是HTML主体也是游览器在显示页面时的内容。h1是body内容中定义的标题，p是body内容中定义的段落

我们现在通过游览器打开编写的HTML内容，具体内容如下

在HTML中的内容可以通过以下格式进行内容注释具体如下：

03 HTML标签、元素、属性、实体编码与事件

（1）HTML标签

HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML标签具有如下特点：

1）标签一般是成对出现的 如:<div></div>;也有空标签 如:<br />

2）标签由<>包括,分为开始标签(开放标签)和结束标签(闭合标签)

3）标签不区分大小写,根据W3C(万维网联盟)推荐,统一使用小写字母

标签的示列如下：

标签按照<>的对数可以分为如下两类分别为双标签与单标签，下面我们具体来了解一下这两类标签。

1）双标签

双标签指由开始和结束两个标记符组成的标记。其基本语法格式如下：

1. <标记名></标记名>

常见的双标签有如下几种：

1. <html></html>  
2. <head></head>  
3. <title></title>  
4. <body></body>  
5. <h1></h1>  
6. <p></p>  
7.   
8. <!-- 块级元素 -->  
9. <div></div>  
10. <span></span>  
11.   
12. <!-- 超链接元素 -->  
13. <a></a>  
14.   
15. <!-- 列表元素 -->  
16. <ul></ul>  

2）单标签

单标签是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：

1. <标记名/>

常见的单标签有如下几种：

1. <!-- 换行标签 -->  
2. <br />  
3.   
4. <!-- 分隔线标签 -->  
5. <hr />  
6.   
7. <!-- 图片标签 -->  
8. <img />  

（2）HTML元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码，如<p>段落</p>。元素可以进行嵌套具体如下：

1. <div>  
2.   <h1>我是标题</h1>  
3.     
4.   <div>  
5.     <p>元素嵌套示列</p>  
6.   </div>  
7.   
8. </div>  

（3）HTML属性

属性为 HTML 元素提供附加信息，可分为全局属性（即所有元素均可使用的属性，如id,class等）和元素属性（部分元素可使用的属性，例如<a href="http://www.baidu.com">搜索</a>），属性通常由属性名="属性值"构成,存在于开始标签中，示列如下:

（4）HTML实体编码

对于部分不易通过键盘输入的或和HTML冲突的部分符合,引入对应的"实体编码"，如< <> >空格 。

（5）HTML事件

通过某个动作,执行某个操作/JS脚本的能力。如点击按钮,改变颜色，事件可以分为多类比多鼠标点击、鼠标聚焦等，下面我看看看一个事件编写示列：

04 HTML常用标签示列

（1）h标签

h 标签有六种分别为h1、h2、h3、h4、h5、h6，这六个分别对应六种样式的标题，我们现在来编写这六种h标签，演示代码如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <h1>H1标题</h1>  
9.   <h2>H2标题</h2>  
10.   <h3>H3标题</h3>  
11.   <h4>H4标题</h4>  
12.   <h5>H5标题</h5>  
13.   <h6>H6标题</h6>  
14. </body>  
15. </html>  

我们来运行该HTML文件，来看看这六种h标签有什么样式差异，从示列中可以发现h1标签字体最大然后依次减小。

（2）p标签

p 标签是文本标签，现在我们来编写一段含有p标签的html文本，然后运行了看看p标签的样式具体操作如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <h4>标题一</h4>  
10.   <p>我是段落1</p>  
11.   
12.   <h4>标题二</h4>  
13.   <p>我是段落2</p>  
14.   
15. </body>  
16. </html>  

（3）a标签

a标签是超链接标签，点击a标签可以跳转到其设置的网站，具体示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <div>  
9.     <a href="http://www.baidu.com">点我跳转到百度页面</a>  
10.   </div>  
11.   
12.   <div>  
13.     <a href="http://www.qq.com">点我跳转到腾讯页面</a>  
14.   </div>  
15.   
16. </body>  
17. </html>  

（4）div标签

div标签是一个块级元素，它可用于组合其他 HTML 元素的容器。可以把div看成一个盒子，我们可以为这个盒子设置各种各样属性（如高度、宽度、颜色等），下面我们编写一个div标签并设置其长为300px，宽度为200px，同时给其一个背景颜色，具体如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div>  
10.   
11. </body>  
12. </html>  

（5）列表标签

列表作为网页设计的重要内容之一，能够用来制作导航栏和新闻列表等。HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）

1）有序列表ul

有序列表的顺序是有序的，默认情况下会以数字来排列，但也可以通过设置其type属性以大写字母、小写字母、大写罗马数字、小写罗马数字来排列，我们现在来写一个示列，具体如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <!--  有序列表，以默认方式数字排列 -->  
10.   <p>有序列表默认方式数字排列</p>  
11.   <ol>  
12.     <li>列表1</li>  
13.     <li>列表2</li>  
14.     <li>列表3</li>  
15.   </ol>  
16.   
17.   <!--  有序列表，以大写字母排列 -->  
18.   <p>有序列表大写字母排列</p>  
19.   <ol type="A">  
20.     <li>列表1</li>  
21.     <li>列表2</li>  
22.     <li>列表3</li>  
23.   </ol>  
24.   
25. </body>  
26. </html>  

2）无序列表ol

无序列表的顺序是无序的，不会按照某个值来排序，无序列表中每个列表前默认都有一个实心圆，也可以通过type属性来设置成空心圆或者小方块，无序列表示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>无序列表默认type样式</p>  
10.   <ul>  
11.     <li>列表1</li>  
12.     <li>列表2</li>  
13.     <li>列表3</li>  
14.   </ul>  
15.   
16.   <p>无序列表方块样式</p>  
17.   <ul type="square">  
18.     <li>列表1</li>  
19.     <li>列表2</li>  
20.     <li>列表3</li>  
21.   </ul>  
22.   
23. </body>  
24. </html>  

3）自定义列表dl

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始，其列表内容是以<dd> 开始，自定义列表前面没有任何标识，其具体示例如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>自定义列表</p>  
10.   <dl>  
11.     <dt>东岳</dt>  
12.     <dd>泰山</dd>  
13.   
14.     <dt>南岳</dt>  
15.     <dd>衡山</dd>  
16.   
17.     <dt>西岳</dt>  
18.     <dd>华山</dd>  
19.   
20.     <dt>北岳</dt>  
21.     <dd>恒山</dd>  
22.   
23.     <dt>中岳</dt>  
24.     <dd>嵩山</dd>  
25.   </dl>  
26.   
27. </body>  
28. </html>  

（6）其它标签

1）换行标签<br/>

在HTML中如果想给内容进行换行可以使用换行标签，具体示列如下：

2）分割线标签<hr/>

<hr/> 标签用于在 HTML创建一条分割线，具体示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>我是张三</p>  
10.   <!-- 分割线标签 -->  
11.   <hr/>  
12.   <p>我是李四</p>  
13. </body>  
14. </html>  

05 总结

至此我们《HTML基础教程上篇》就讲完了，下篇内容主要讲解HTML样式、HTML表单、Tabel等，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！

-END-

@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。

文章推荐：

  • 一文秒懂Web框架基础之WSGI协议
  • IT工程师都需要掌握的容器技术之扫盲篇

篇目录

  • 本篇目录

  • 什么是HTML

  • HTML的作用

  • HTML发展史

    • IETF简介

    • W3C简介

  • 网页的固定格式

    • html标签

    • head标签

    • title标签

    • body标签

  • head内部标签

    • meta标签

  • HTML标签

    • HTML标签分类

    • HTML标签关系分类

  • DTD文档声明

  • HTML和XHTML、HTML5区别

  • htm 和 .html扩展名区别


什么是HTML

  • HTML其实是HyperText Markup Language的缩写, 超文本标记语言

HTML的作用

  • 1.首先利用记事本保存了一个标题和两段描述, 然后修改纯文本文件的扩展名为.html, 然后再利用浏览器打开

  • 2.打开之后发现显示的格式不对, 不对的原因是因为在纯文本文件中所有文字都是同级别的, 浏览器不知道哪些文字代表什么意思. 也就是浏览器不知道哪些文字是标题, 哪些文字是段落…., 所以导致了显示的格式不正确

  • 正是因为如此, 所以HTML应用而生. HTML就只有一个作用, 它是专门用来描述文本的语义的. 也就是说我们可以利用HTML来告诉浏览器哪些是标题, 哪些是段落.

    • 这些用于描述其它文本语义的文本, 我们称之为标签. 并且这些用于描述文本语义的标签将来在浏览器中是不会被显示出来的

    • 所以正是因为HTML的这些标签是专门用来描述其它文本语义的, 并且在浏览器中不会被显示出来, 所以我们称这些文本为"超文本", 而这些文本又叫做标签, 所以HTML被称之为"超文本标记语言"

  • 注意事项:

    • 虽然我们利用H1标签描述一段文本之后, 这段文本在浏览器中显示出来会被放大和加粗, 看上去我们是利用HTML的标签修改了被描述的那段文本的样式. 但是一定要记住, HTML只有一个作用, 它是专门用来给文本添加语义的, 而不是用来修改文本的样式的

  • H1标签它的作用是什么?

    • 错误: H1标签可以用来修改文字的大小, 并且还可以将文字加粗

    • 正确: H1标签的作用是用来告诉浏览器, 哪些文字是标题. 也就是H1标签是专门用于给指定的文字添加标题语义的

HTML发展史

IETF简介

  • IETF是英文Internet Engineering Task Force的缩写, 翻译过来就是”互联网工程任务组”

  • IETF负责定义并管理因特网技术的所有方面。包括用于数据传输的IP协议、让域名与IP地址匹配的域名系统（DNS）、用于发送邮件的简单邮件传输协议（SMTP）等

W3C简介

  • W3C是英文World Wide Web Consortium的缩写， 翻译过来就是W3C理事会或万维网联盟, W3C是全球互联网最具权威的技术标准化组织.

  • W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee

  • W3C负责web方面标准的制定，像HTML、XHTML、CSS、XML的标准就是由W3C来定制的。

Tim Berners-Lee（蒂姆·伯纳斯-李），万维网之父、html设计者、w3c创始人

百度百科

网页的固定格式

  • 1.编写网页和写信一样都有一套规范和要求, 这套规范和要求中规定了写信的固定格式

  • 2.写信基本结构

  • 3.编写网页的步骤:

    3.1.新建一个文本文档

    3.2.利用记事本打开

    3.3.编写THML代码

    3.4.保存并且修改纯文本文档的扩展名为.html

    3.5.利用浏览器打开编写好的文件

  • 4.网页基本结构:

    5.通过观察我们发现, HTML基本结构中所有的标签都是成对出现的, 这些成对出现的标签中有一个带/有一个不带/, 那么这些不带/的标签我们称之为开始标签, 这些带/的我们称之为结束标签

html标签

  • 作用:

    • 用于告诉浏览器这是一个网页, 也就是说告诉浏览器我是一个HTML文档

  • 注意点:

    • 其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间

head标签

  • 作用:

    • 指定网站的标题 / 指定网站的小图片

    • 添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)

    • 外挂一些外部的css/js文件

    • 添加一些浏览器适配相关的内容

    • 用于给网站添加一些配置信息

    • 例如:

  • 注意点:

    • 一般情况下, 写在head标签内部的内容都不会显示给用户查看, 也就是说一般情况下写在head标签内部的内容我们都看不到

title标签

  • 作用:

    • 专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题

  • 注意点:

    • title标签必须写在head标签里面

body标签

  • 作用:

    • 专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)

  • 注意点:

    • 虽然说有时候你可能将内容写到了别的地方在网页中也能看到, 但是千万不要这么干, 一定要将需要显示的内容写在body中

    • 一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签

head内部标签

meta标签

  • 1.为什么会有乱码现象?

    • 因为我们在编写网页的时候没有指定字符集

  • 2.如何解决乱码现象?

    • 在head标签中添加<meta charset="GBK" />, 指定字符集

  • 3.什么是字符集

    • 字符集就是字符的集合, 也就是很多字符堆在一起. 其实字符集很像我们古代的”活字印刷术”, 在活字印刷术中就是将很多刻有汉字的小章放到一个盒子中, 然后需要印刷文字的时候再去盒子中取这个小章出来用, 正是因为如此, 所以导致了乱码问题

    • 假设北方人和南方人都拥有装满小章的盒子, 但是南方人和北方人在盒子中存储小章的顺序不太一样, 那么这个时候如果北方人和南方人都需要去取”李”字, 在南方人记忆中李字在第6个盒子的第6行的第6列中(666), 在北方人的记忆中李字在第8个盒子的第8行的第8列中(888). 那么此时如果让一个南方人去北方人的盒子中取”李”字的小章, 必然找不到,, 所以就导致了乱码问题

    • 这个地方北方人的存储小章的盒子和南方人存储小章的盒子就对应网页中指定的字符集, 在网页中我们常见的字符集有两个GBK/UTF-8, GBK就对应北方人存储的盒子, UTF-8就对应南方人存储的盒子

    • 所以在网页中指定字符集的意义就在于告诉浏览器我用的是哪个盒子, 你应该如何去查找才能找到对应的正确的内容

  • 4.GBK(GB2312)和UTF-8区别

    • 提交比较大

    • 体积比较小

    • GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外文

    • UTF-8里面存储的世界上所有的文字

  • 5.那么在企业开发中我们应该使用GBK(GB2312)还是UTF-8呢?

    • 如果你的网站仅仅包含中文, 那么推荐使用GB2312, 因为它的体积更小, 访问速度更快

    • 如果你的网站除了中文以外, 还包含了一些其它国家的语言 , 那么推荐使用UTF-8

    • 懒人推荐: 不管三七二十一, 一律写UTF-8即可

  • 6.注意点:

    • 在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码

    • 所以仅仅指定字符集不一定能解决乱码问题, 还需要保存文件的时候, 文件的保存格式必须和指定的字符集一致才能保证没有乱码问题

HTML标签

HTML标签分类

  • 单标签

    • 只有开始标签没有结束标签, 也就是由一个<>组成的



  • 双标签

    • 有开始标签和结束标签, 也就是由一个<>和一个</>组成的

      HTML标签关系分类

  • 并列关系(兄弟/平级)



  • 嵌套关系(父子/上下级)



DTD文档声明

  • 什么是DTD文档声明?

    • 由于HTML有很多个版本的规范, 每个版本的规范之间又有一定的差异. 所以为了让浏览器能够正确的编译/解析/渲染我们的网页, 我们需要在HTML文件的第一行告诉浏览器, 我们当前这个网页是用哪一个版本的HTML规范来编写的. 浏览器只要知道了我们是用哪一个版本的规范来编写之后, 它就能够正确的编译/解析/渲染我们的网页

  • DTD文档声明格式:



  • 注意事项:

    • 不写也能运行

    • H5网页里面用H4也能运行

    • <!DOCTYPE>声明必须是 HTML 文档的第一行，位于 <html> 标签之前

    • <!DOCTYPE> 声明不是 HTML 标签

    • <!DOCTYPE> 声明没有结束标签

    • <!DOCTYPE> 声明对大小写不敏感

    • 这个声明浏览器会看, 但是并不是完全依赖于这个声明, 浏览器有一套自己的默认的处理机制

  • HTML5之前有2大种规范, 每种规范中又有3小种规范

大规范小规范
HTMLStrict (严格的)
HTMLTransitional(过度的,普通的,宽松的)
HTMLFrameset(带有框架的页面)
XHTMLStrict (严格的)
XHTMLTransitional(过度的,普通的,宽松的)
XHTMLFrameset(带有框架的页面)

  • HTML的DTD文档声明和XHTML的DTD文档声明有何区别?

    • XHTML本身规定比如标签必须小写、必须严格闭合、必须使用引号引起属性等等, 而HTML会更加松散没有这么严格

  • Strict表示严格的, 这种模式里面的要求更为严格.这种严格主要体现在有一些标签不能使用

    • 例如font标签/u标签等

    • font标签可以修改一个文本的字号、颜色、字体,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而font标签是用于修改样式的,所以在Strict中是不能使用font标签

    • u标签可以给一个文本加上下划线,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而u标签是用于添加下划线是样式.所以在Strict中是不能使用u标签

  • Transitional表示普通的, 这种模式是没有一些别的要求

    • 例如可以使用font标签、u标签等

    • 但是在企业开发中不会使用这些标签,因为这违背了HTML的本质, 而是将这些标签作为css的钩子使用

  • Frameset表示框架, 在框架的页面使用

    • 后面学到框架/NodeJS 再做详细了解

  • 常见的DOCTYPE有如下几种

  • 有这么多规范我们学习过程中到底使用哪一种比较合适呢?

    • www.baidu.com (B)

    • www.taobao.com (A)

    • www.qq.com (T)

    • www.sohu.com(大奇葩)

    • 无论是HTML还是XHTML,过去企业级开发中用的比较多的大部分都是Transitional类型的文档声明

    • 但是HTML5的时代已经到来,以上6中规范仅仅作为了解, 以后都用HTML5类型的文档声明, HTML5向下兼容(求此刻WC3心里阴影面积)

    • 目前国内一线网站都更新到了HTML5的文档声明, 所以后续授课也是全程使用HTML5的文档声明

HTML和XHTML、HTML5区别

  • 在HTML的早期发展中，大部分标准都是所谓的retro-spec，即先有实现后有标准。在这种情况下，HTML标准不是很规范，浏览器也对HTML页面中的错误相当宽容。这反过来又导致了HTML开发者写出了大量含有错误的HTML页面

  • html语言本身有一些缺陷（例如： 内容和形式不能分离；标签单一；数据不能复用等等），随着xml的兴起人们希望xml来弥补html的不足，但是目前有成千上万的网页都是用html编写的，所以完全使用xml来替代html还为时过早，于是W3C在2000年推出了xhtml1.0， 建立xhtml的目的就是实现从html向xml的过度

  • 为了规范HTML，W3C结合XML制定了XHTML 1.0标准，这个标准没有增加任何新的标签，只是按照XML的要求来规范HTML，并定义了一个新的MIME type application/xhtml+xml。W3C的初衷是要求浏览器对这个MIME type实行强错误检查，如果页面有HTML错误，就要显示错误信息。但是由于已有的web页面中已经有了大量的错误，很多开发者拒绝使用新的MIME type。W3C不得已，在XHTML 1.0的标准之后增加了一个附录C，允许开发者使用XHTML语法来写页面，同时使用旧的MIME type，application/html，来分发页面

  • W3C随后在XHTML 1.1中取消了附录C，即使用XHTML 1.1标准的页面必须用新的MIME type来分发。于是这个标准并没有很多人采用

  • 有了XHTML的教训，W3C在制定下一代HTML标准时（HTML5），就将向后兼容作为了一个很重要的原则。HTML5确实引入了许多新的特性，但是它最重要的一个特性是，不会break已有的网页。你可以将任何已有的网页的第一行改成<!DOCTYPE html>，它就成也一个HTML5页面，并且可以照样在浏览器里正常的展示。

  • 简而言之

    • HTML语法非常宽松容错性强;

    • XHTML更为严格,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引起等等;

    • HTML5是HTML的下一个版本所以除了非常宽松容错性强以外,还增加许多新的特性

.htm 和 .html扩展名区别

  • DOS操作系统（win95或win98）下只能支持长度为3的后缀名，所以是htm

  • 但在windows后缀长度可以大于3位，所以windows下无所谓htm与html，html是为长文件的格式命名的

  • 所以htm是为了兼容过去的DOS命名格式存在的

关于课程的疑问和讨论，可以登录http://bbs.520it.com/forum.php?mod=viewthread&tid=2423。

、定义

<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

2、作用

meta里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的http头部内容，例如我们为页面中添加如下meta标签：


  2. <meta http-equiv="charset" content="iso-8859-1">
  3. <meta http-equiv="expires" content="31 Dec 2008">

浏览器的头部就会包括这些:


  2. charset:iso-8859-1
  3. expires:31 Dec 2008

只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

3、meta的必需属性和可选属性

meta的必需属性是content，当然并不是说meta标签里一定要有content，而是当有http-equiv或name属性的时候，一定要有content属性对其进行说明。例如：

必需属性

<meta name="keywords" content="HTML,ASP,PHP,SQL">

这里面content里的属性就是对keywords进行的说明，所以呢也可以理解成一个键值对吧，就是{keywords:"HTML,ASP,PHP,SQL"}。

可选属性

在W3school中，对于meta的可选属性说到了三个，分别是http-equiv、name和scheme。考虑到scheme不是很常用，所以就只说下前两个属性吧。

http-equiv

http-equiv属性是添加http头部内容，对一些自定义的，或者需要额外添加的http头部内容，需要发送到浏览器中，我们就可以是使用这个属性。在上面的meta作用中也有简单的说明，那么现在再举个例子。例如我们不想使用js来重定向，用http头部内容控制，那么就可以这样控制：

<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />

在页面中加入这个后，5秒钟后就会跳转到指定页面啦，效果可看W3school的例子

name

第二个可选属性是name，这个属性是供浏览器进行解析，对于一些浏览器兼容性问题，name属性是最常用的，当然有个前提就是浏览器能够解析你写进去的name属性才可以，不然就是没有意义的。还是举个例子吧:

<meta name="renderer" content="webkit">

这个meta标签的意思就是告诉浏览器，用webkit内核进行解析，当然前提是浏览器有webkit内核才可以，不然就是没有意义的啦。当然看到这个你可能会有疑问，这个renderer是从哪里冒出来的，我要怎么知道呢？这个就是在对应的浏览器的开发文档里就会有表明的，例如这个renderer是在360浏览器里说明的。360浏览器内核控制Meta标签说明文档

常用meta标签大总结

接下来就是常用的meta标签大总结啦，我会尽可能的做到全

charset

charset是声明文档使用的字符编码，解决乱码问题主要用的就是它，值得一提的是，这个charset一定要写第一行，不然就可能会产生乱码了。

charset有两种写法


  2. <meta charset="utf-8">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

两个都是等效的。

百度禁止转码

百度会自动对网页进行转码，这个标签是禁止百度的自动转码

<meta http-equiv="Cache-Control" content="no-siteapp" />

SEO 优化部分


  2. <!-- 页面标题<title>标签(head 头部必须) -->
  3. <title>your title</title>
  4. <!-- 页面关键词 keywords -->
  5. <meta name="keywords" content="your keywords">
  6. <!-- 页面描述内容 description -->
  7. <meta name="description" content="your description">
  8. <!-- 定义网页作者 author -->
  9. <meta name="author" content="author,email address">
  10. <!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->
  11. <meta name="robots" content="index,follow">

viewport

viewport主要是影响移动端页面布局的，例如：


  2. <meta name="viewport" content="width=device-width, initial-scale=1.0">

content 参数：

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)

各浏览器平台

Microsoft Internet Explorer


  2. <!-- 优先使用最新的ie版本 -->
  3. <meta http-equiv="x-ua-compatible" content="ie=edge">
  4. <!-- 是否开启cleartype显示效果 -->
  5. <meta http-equiv="cleartype" content="on">
  6. <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
  9. <!-- Pinned Site -->
  10. <!-- IE 10 / Windows 8 -->
  11. <meta name="msapplication-TileImage" content="pinned-tile-144.png">
  12. <meta name="msapplication-TileColor" content="#009900">
  13. <!-- IE 11 / Windows 9.1 -->
  14. <meta name="msapplication-config" content="ieconfig.xml">

Google Chrome


  2. <!-- 优先使用最新的chrome版本 -->
  3. <meta http-equiv="X-UA-Compatible" content="chrome=1" />
  4. <!-- 禁止自动翻译 -->
  5. <meta name="google" value="notranslate">

360浏览器


  2. <!-- 选择使用的浏览器解析内核 -->
  3. <meta name="renderer" content="webkit|ie-comp|ie-stand">

UC手机浏览器

UCBrowser_U3_API

QQ手机浏览器


  2. <!-- 锁定屏幕在特定方向 -->
  3. <meta name="x5-orientation" content="landscape/portrait">
  4. <!-- 全屏显示 -->
  5. <meta name="x5-fullscreen" content="true">
  6. <!-- 页面将以应用模式显示 -->
  7. <meta name="x5-page-mode" content="app">

Apple iOS


  2. <!-- Smart App Banner -->
  3. <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
  6. <!-- 禁止自动探测并格式化手机号码 -->
  7. <meta name="format-detection" content="telephone=no">
  10. <!-- Add to Home Screen添加到主屏 -->
  11. <!-- 是否启用 WebApp 全屏模式 -->
  12. <meta name="apple-mobile-web-app-capable" content="yes">
  13. <!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 -->
  14. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  15. <!-- 添加到主屏后的标题 -->
  16. <meta name="apple-mobile-web-app-title" content="App Title">

Google Android


  2. <meta name="theme-color" content="#E64545">
  3. <!-- 添加到主屏 -->
  4. <meta name="mobile-web-app-capable" content="yes">
  5. <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

App Links


  2. <!-- iOS -->
  3. <meta property="al:ios:url" content="applinks://docs">
  4. <meta property="al:ios:app_store_id" content="12345">
  5. <meta property="al:ios:app_name" content="App Links">
  6. <!-- Android -->
  7. <meta property="al:android:url" content="applinks://docs">
  8. <meta property="al:android:app_name" content="App Links">
  9. <meta property="al:android:package" content="org.applinks">
  10. <!-- Web Fallback -->
  11. <meta property="al:web:url" content="http://applinks.org/documentation">
  12. <!-- More info: http://applinks.org/documentation/ -->

最后——移动端常用的meta


  2. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  3. <meta name="apple-mobile-web-app-capable" content="yes" />
  4. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  5. <meta name="format-detection"content="telephone=no, email=no" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  7. <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
  9. <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
  10. <!-- 启用360浏览器的极速模式(webkit) -->
  11. <meta name="renderer" content="webkit">
  12. <!-- 避免IE使用兼容模式 -->
  13. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  14. <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
  15. <meta name="HandheldFriendly" content="true">
  16. <!-- 微软的老式浏览器 -->
  17. <meta name="MobileOptimized" content="320">
  18. <!-- uc强制竖屏 -->
  19. <meta name="screen-orientation" content="portrait">
  20. <!-- QQ强制竖屏 -->
  21. <meta name="x5-orientation" content="portrait">
  22. <!-- UC强制全屏 -->
  23. <meta name="full-screen" content="yes">
  24. <!-- QQ强制全屏 -->
  25. <meta name="x5-fullscreen" content="true">
  26. <!-- UC应用模式 -->
  27. <meta name="browsermode" content="application">
  28. <!-- QQ应用模式 -->
  29. <meta name="x5-page-mode" content="app">
  30. <!-- windows phone 点击无高光 -->
  31. <meta name="msapplication-tap-highlight" content="no">
  32. <!-- 适应移动端end -->

在线咨询
上一篇：值得收藏的HTML DOM事件和鼠标键盘事件
下一篇：功能强大的串口工具，抓紧收藏！

您的项目需求

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

推荐阅读
友情链接 鸡西 崇义县 西丰县 潍坊 北碚区 建华区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服