分享

标梵html文档解析每个标签的作用和功能

 贪婪的戏子 2020-11-05

 1.什么是<!DOCTYPE html>?

在HTML文档初,往往会有这么一句话<!DOCTYPE html>,那么它的意义是什么呢?它是html5标准网页声明,全称为Document Type HyperText Mark-up Language,意思为文档种类为超文本标记性语言或超文本链接标示语言,现在是这个简洁形式,支持html5标准的主流浏览器都认识这个声明。表示网页采用html5,<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

这个标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

public 这行声明了文档的根元素是 html,它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 

  

Strict//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到,浏览器将使用公共标识符后面的URL 作为寻找 DTD 的位置。

标梵html文档解析每个标签的作用和功能

    2.<!DOCTYPE html>的重要性

作用:声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。

文档解析有两种模式,及document.compatMode为:

BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。

CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。

 这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,如果你没声明标准模式解析,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式。

如果你的页面添加了<!DOCTYPE html>那么,那么就等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就就是统一样式。

    3.如何使用<!DOCTYPE html>

使用也很简单,就是在你的html页面的第一行添加"<!DOCTYPE html>"一行代码就可以了

 jsp的话,添加在<%@ page %>的下一行。

不用区分大小写

    4.  <html lang="en">中lang的作用

原形式是<html language="english">,这句话的作用是告诉搜索引擎爬虫,我们这个网站的内容是关于英语的,en在这里是english,如果要告诉搜索引擎爬虫我们的内容是关于中文的,只要将“en”该为“zh”("中"拼音的前两个字母组合),如果是德语的话,将“en”改为“de”。这里需要注意的是除了“english”的缩写是“en”,其他语言都是汉语拼音的前两个字母组合。

    5.<meta>系列作用

<meta charset="utf-8">中charset作用

自己写的html文档用浏览器打开是乱码的话,就是这里出现了问题

这个charset原意是字符集,在这里是编码的意思,后面等于的值是指该文档字体的文字类型,这个编码类型有四类。第一类: gb2312(国家标准第2312条例,可以理解为简体中文)--->gb2312是中文的字符集,对中文支持比较好,但是如果网页使用英文或者其他的外文比如日文韩文,gb2312就不能支持了;第二类: gbk(在gb2312基础上加了繁体字类型);第三类: unicode(万国码),这个类型基本涵盖所有的语言了;第四类: utf-8 (是unicode的升级版本),也是现在公司最常用的编码类型。

<meta content="" name="">中content和name的作用

这个标签有几个类型,是由name值决定的,name值可以为description(描述),keywords(关键词),这两个是最常用的,content的话你可以根据需求来写,这个标签是为了别人输入关键词,能相应的找到对应的网站,比如我想了解一下淘宝网上的羽绒服,当你在淘宝网中输入羽绒服时,相应的会出现各种各样的羽绒服的链接,如果你是一个羽绒服店家,想让你的羽绒服更靠前,(先假设淘宝网每家的羽绒服销量,好评率等等都一样的时候),这样的话你就可以把这两个属性描述的夸张一点。

比如:

<meta content="羽绒服" name="keywords">

<meta content="这个羽绒服是你穿了就不想脱的羽绒服" name="description">

    6.<title> </title>的作用

这是一个双标签,是标题的意思,中间是你要写的标题,这个标签设置的内容是该网页显示的标题内容。

    7.<link href="" rel="stylesheet">的作用

这个标签是为了引入css文件,css文件名称写在href(hypertext reference 超文本引用)里,是为了渲染html文档的

    8.<body></body>的作用

这是身体标签,是你要写的网页的内容区,展示给用户看的

    9.<script src=""></script>

这是为了引入js文件,文件名称写在src里,是为了给html增加一种动态渲染的功能,为什么要将该标签放在</body>之前,是因为我们在渲染html网页时,浏览器遇到<link href="" rel="stylesheet">会同时(异步加载)渲染html和CSS,而遇到script时,留言器会暂停对html和css代码的加载,这样的话会导致html,css文档还未加载完就已经使用js渲染了页面,使得页面出错。

本文来源:标梵互动

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多