整合营销服务商

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

免费咨询热线:

HTML5中的标记方法

们来看一下在HTML5中的标记方法。

 内容类型(ContentType)

首先,HTML5文件的扩展名和内容类型没有发生变化。即扩展名还是.html或.htm,内容类型还是.text/html。

 DOCTYPE声明

要使用HTML5标记,必须先进行如下的DOCTYPE声明。不区分大小写。Web浏览器通过判断文件开头有没有这个声明,让解析器和渲染类型切换成对应HTML5的模式。

<!DOCTYPE html>

另外,当使用工具时,也可以在DOCTYPE声明方式中加入SYSTEM标识。不区分大小写。此外还可将双引号换为单引号来使用,声明方法如下面的代码。

<!DOCTYPE HTML SYSTEM "about:legacy-compat">

 字符编码的设置

字符编码的设置方法也有些新的变化。以前,设置HTML文件的字符编码时,要用到meta元素,代码如下。

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">


在HTML5中,可以使用<meta>元素的新属性charset来设置字符编码。

<meta charset="UTF-8">


以上两种方法都有效。因此也可以继续使用前者(通过content元素的属性来设置)。但二者不能同时使用。如下所示代码的使用方法是错误的。

<!-- 不能混合使用charset 属性和http-equiv 属性 -->

<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">


注意

从HTML5开始,文件的字符编码推荐使用UTF-8。

TML+CSS文档结构

小编在前端课程的第一部分讲的HTML不知道童靴们都掌握没有,新来的童靴们可以看一下之前的文章。(小白前端文章知识整理——HTML部分)

学过的童靴了解,在普通的html文档中,我们一般用div去布局网页的结构。

如上,我们用ID选择器去标识页面中的特定结构元素(页眉,页脚,导航,内容),而且ID标识的元素是唯一的。class选择器可以用来标识任意个元素,非常适合标识内容类型或其他相似的条目。

HTML5语义化标签

根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

如上,HTML5语义化标签有专门添加页眉、页脚、导航、文章内容等跟结构相关的结构元素标签,是不是结构看起来更清晰了呢。

那么上面的结构在html文档你能够写出来吗?

一个简单的HTML5文档结构:

给童靴们一个任务,写出上面文档结构的CSS。下篇HTML5文章,给大家总结HTML5语义化标签。

你必须非常努力,才能看起来毫不费力!

关注小白前端,持续收到文章推送!

迎你来到站长在线的站长学堂,学习html5的知识,今天分享的是《HTML的相关概念详解》。主要内容有:WWW,W3C,WHATWG,URL,HTTP,XHTML,网站,域名,网站空间,网站程序。

WWW:(World Wide Web,万维网)是一种建立在Internet上的、全球性的、交互的、多平台的、分布式的信息资源网络。它采用HTML语言描述超文本(Hypertext)文件。这里所说的超文本指的是包含有链接关系的文件,并且包含了多媒体对象的文件。

W3C:( World Wide Web Consortium )万维网联盟,创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构。W3C 制定了结构(xhtml、xml)和表现(CSS)的标准,非赢利性的。

WHATWG:网页超文本应用技术工作小组,一个以推动网络HTML 5 标准为目的而成立的组织。在2004年,由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

WWW有3个基本组成部分,分别是URL(统一资源定位器)、HTTP(超文本传输协议)和HTML(超文本标识语言)。

URL:(Universal Resource Locators)提供在Web上进入资源的统一方法和路径,使得用户所要访问的站点具有唯一性,这就相当于我们每个人只有一个身份证号一样。它说明了链接所指向的每个文件的类型及其准确位置。

HTTP:(Hypertext Transfer Protocol)超文本传输协议是一种网络上传输数据的协议,专门用于传输以“超文本”(Hypertext)或“超媒体”(Hypermedia)的形式提供的信息。

HTML语言:(Hypertext Markup Language,中文通常称为超文本置标语言或超文本标记语言)是一种文本类、解释执行的标记语言,它是Internet上用于编写网页的主要语言。用HTML编写的超文本文件称为HTML文件。

XHTML:指可扩展超文本标记语言(标识语言)(EXtensible HyperText Markup Language)是一种置标语言,表现方式与超文本标记语言(HTML)类似,不过语法上更加严格。

要把信息发布到全球,就必须要使用能够被大众接受的语言,也就是使用一种大多数计算机能够识别的出版语言。在WWW上,通常使用的发布语言是HTML,即超文本标识语言。


HTML5:指的是HTML的第五次重大修改(第5个版本)(HTML5 是 W3C 与 WHATWG 合作的结果)。

HTML是纯文本类型的语言,使用HTML编写的网页文件也是标准的纯文本文件。

我们可以用任何文本编辑器,例如Windows的“记事本”程序打开它,查看其中的HTML源代码,也可以在用浏览器打开网页时,通过相应的“查看/源文件”命令查看网页中的HTML代码。HTML文件可以直接由浏览器解释执行,而无须编译。当用浏览器打开网页时,浏览器读取网页中的HTML代码,分析其语法结构,然后根据解释的结果显示网页内容,正是因为如此,网页显示的速度同网页代码的质量有很大的关系,保持精简和高效的HTML源代码是十分重要的。

网站:一个完整的网站,主要由域名,网站空间和网站程序组成。如果我们把网站比喻成一栋房子的话,域名相对于门牌号,代表了地址。网站空间相对于房子的地皮,房子的空间与网站空间的大小相对应。网站程序相对于建筑材料和建筑方法了。建房子是需要建筑工人来完成,做网站就是程序员的事情了。

域名:简单的说就是网站的网址最重要的部分。如本站的域名是olzz.com。输入哪一个域名就到达哪一个网站。这相对于房子的门牌号,有了实际的地址,你才知道要去哪里。域名在互联网上是唯一的,你注册了这个域名,别人就不能注册了,所以那些简短、有意义的域名,价格就很昂贵。实际中的地址也是一样,相同大小的房子,北京一环内的是要比大西北沙漠里面的房子要贵。

网站空间:网站空间主要用于存放网页内容的,比如网站的源码,图片,视频,文档等内容。目前主要有两种,一个是云服务器,一个是虚拟主机。一台云服务器相对于一台独立的电脑,通常可以做无数个网站。一个虚拟主机,就是服务器里面的一个文件夹,通常来说,一个虚拟主机只能做一个网站。不管是服务器还是虚拟主机,空间越大就越贵(当然其他的配置也会更高)。拿房子来说,一个占地几个平方的茅草屋和几万平方的高楼大厦的成本是不一样的。

网站程序:网站程序也叫网站源码,你要建什么功能的网站,就要开发什么样的程序。比如购物网站,视频网站,游戏网站,博客网站等网站程序不一样,对应的功能也是不一样的。就好比建房子,你建一个 茅草屋和建一个高楼大厦,所用的材料和建筑方法是不一样的。现在有很多开源的建站程序,比如搭建博客用WordPress、zblog,搭建论坛用discuz。当然现成的网站程序的功能不能满足自己的需求,这就需要对网站的功能进行单独定制。