<返回更多

HTML基本结构

2020-07-27    
加入收藏
前端入门|HTML的基本介绍2:HTML基本结构

 

一、html基本结构

前端入门|HTML的基本介绍2:HTML基本结构

 

1、doctype的作用

DOCTYPE是document type (文档类型) 的缩写。<!DOCTYPE >声明位于文档的最前面,处于标签之前,它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分

2、删除<!DOCTYPE>会发生什么

在W3C标准出来之前,不同的浏览器对页面渲染有不同的标准,产生了一定的差异。这种渲染方式叫做混杂模式。在W3C标准出来之后,浏览器对页面的渲染有了统一的标准,这种渲染方式叫做标准模式。不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现,就是把如何渲染html页面的权利交给了浏览器,有多少种浏览器就有多少种展示方式。因此要提高浏览器兼容性就必须重视

3、严格模式和混杂模式

严格模式和混杂模式都是浏览器的呈现模式,浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD(文件类型定义)有关。

严格模式:又称标准模式,是指浏览器按照W3C标准来解析代码,呈现页面

混杂模式:又称为怪异模式或者兼容模式,是指浏览器按照自己的方式来解析代码,使用一种比较宽松的向后兼容的方式来显示页面。

我们写好一份HTML文档,这时候全是代码,用户看不懂,是不是得用浏览器里的引擎给翻译一下?用户才看得到界面。关键是HTML有好多个版本,浏览器怎么知道按哪个版本解释?你老爸让你去扫地,你老妈让你去洗碗,你是听谁的,都是长辈,这时候如果你们家规定好了,凡事都听你老爸的,这个就很好解决了,去扫地。这个DTD文档模型就是这个意思,管它多少个HTML版本,我规定好我写的这个HTML文档以哪个为准就行,那我就知道我最终页面会被解释成一个什么样子。

DTD文档模型=DOCTYPE=DOCTYPE文档声明

4、常见的DOCTYPE声明

HTML5

前端入门|HTML的基本介绍2:HTML基本结构

 


HTML 4.01 Strict 该DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

前端入门|HTML的基本介绍2:HTML基本结构

 


HTML 4.01 Transitional

该DTD包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

前端入门|HTML的基本介绍2:HTML基本结构

 


HTML 4.01 Frameset

该DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。

前端入门|HTML的基本介绍2:HTML基本结构

 


XHTML 1.0 Strict

该DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。

前端入门|HTML的基本介绍2:HTML基本结构

 


XHTML 1.0 Transitional

该DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。

前端入门|HTML的基本介绍2:HTML基本结构

 


XHTML 1.0 Frameset

该DTD 等同于 XHTML 1.0 Transitional,但允许框架集内容。

前端入门|HTML的基本介绍2:HTML基本结构

 


4、HTML标签

定义HTML 文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其它元素要包裹在它里面,标签限定了文档的开始点和结束点,在它们之间是文档的头部和主体。

前端入门|HTML的基本介绍2:HTML基本结构

 


5、head标签

Head标签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在head 部分:

<title>、<meta>、<link>、<style>、 <script>。

应该把 标签放在文档的开始处,紧跟在 后面,并处于 标签之前。

文档的头部经常会包含一些 标签,用来告诉浏览器关于文档的附加信息。

前端入门|HTML的基本介绍2:HTML基本结构

 


lang是language的意思,lang=”en”属性对每张页面中的主要语言进行声明,en代表了英文,只是个声明,声明了它,对搜索引擎和浏览器更友好,并不会更改显示内容。它还有常见的值是zh-CN,代表了中文。(搜索引擎不会判断该站点是中文还是英文,它让搜索引擎知道你的站点是中文站,这些都是html规范,越规范,越容易被收录)

6、title标签

前端入门|HTML的基本介绍2:HTML基本结构

 

SEO是搜索引擎优化的英文缩写。通过对网站内容调整,满足搜索引擎的排名需求,从而提高自己网站被搜索引擎平台录取的几率,从而把精准用户带到网站。

网站都有目标群体,通过title、meta标签可以让目标群体通过关键词找到你的网站,所以你定义的关键词决定了会吸引什么样的群体。

7、meta标签

META标签用来描述一个HTML网页文档的属性,此处的charset=”utf-8”是说当前使用的是utf-8编码格式,在开发中我们经常会看到utf-8,或是gbk,这些都是编码格式。国外一般会用gbk、gb2312,国内通常使用utf-8。

元素可提供有关页面的元信息(meta-information),用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。

常见的meta有:

Keywords(关键字) keywords用来告诉搜索引擎你网页的关键字是什么。

前端入门|HTML的基本介绍2:HTML基本结构

 


<meta name="keywords" content="web前端,尚学堂培训">

description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。

前端入门|HTML的基本介绍2:HTML基本结构

 

author作者 标注网页的作者

前端入门|HTML的基本介绍2:HTML基本结构

 


前端入门|HTML的基本介绍2:HTML基本结构

 

二、标签相互嵌套

标签之间可以相互嵌套,但要注意嵌套顺序

前端入门|HTML的基本介绍2:HTML基本结构

 


前端入门|HTML的基本介绍2:HTML基本结构

 

三、语义化标签

1、什么是HTML语义化标签

语义化的标签,旨在让标签有自己的含义。

前端入门|HTML的基本介绍2:HTML基本结构

 


如上代码,p 标签与 span 标签都区别之一就是,p 标签的含义是:段落。而 span 标签则没有独特的含义。

2、语义化标签的优势

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>