HTML5文档的基本格式 HTML5的基本语法详细介绍

鳄鱼君

发表文章数:642

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » HTML » HTML5文档的基本格式 HTML5的基本语法详细介绍

HTML5文档的基本格式

初始HTML 5这篇文章中,我们已经看到了HTML 5的基本格式了,如下代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>标题</title>
</head>
<body>

</body>
</html>

其中有<!doctype>、根标记<html>、头部标记<head>、主体标记<body>,我们首先来看一下<!doctype>标记:

<!doctype>标记在文档的最前面,用于向浏览器说明文章使用哪种HTML标准规范,只有在开头处使用声明,浏览器才能将该网页作为有效的HTML文档,并按照指定的文档类型进行解析。使用HTML5的DOCTYPE声明,会触发浏览器以标准兼容模式来显示页面。HTML5文档中的DOCTYPE声明非常简单,代码如下:

<!doctype html>

我们可以了解一下其它文档的声明方式:

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

接着是<html>标记,它位于<!doctype>之后,也称为根标记,用于告知浏览器其自身是一个HTML文档,<html>标记标志着HTML文档的开始,</html>标记标志着HTML文档的结束,在它们之间的是文档的头部和主体内容。

<head>标记用于定义HTML文档的头部信息,也称为头部标记,紧跟在<html>标记之后,主要用来封装其他位于文档头部的标记,比方说<title><meta><link><style>等用来描述文档的标题、作者、以及与其他文档的关系。一个HTML文档只能含有一对<head>标记,绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

<body>标记用于定义HTML文档所有显示的内容,也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内,<body>标记中的信息才是最终展示给用户看的。一个HTML文档只能含有一对<body>标记,且<body>标记必须在<html>内,位于<head>头部标记之后,与<head>标记是并列关系。

HTML5的语法

为了兼容各个浏览器,HTML 5采用宽松的语法格式,在设计和语法方面有着一些变化,具体如下:

  • 1.标签不区分大小写
  • 2.允许属性值不使用引号
  • 3.允许部分属性的属性值省略

在HTML5中以下的写法是没有问题的:

<p>这里的p标签大小写不一致</P>
<input checkbox=a type=checbox/> 等价于<input checkbox="a" type="checkbox"/>
<input checked="checked" type="checkbox"/> 可省略为 <input checked type="checkbox"/>

HTML 5中可以省略属性值的属性有以下几种:

属性 描述
checked 省略属性值后,等价于checked=”checked”
readonly 省略属性值后,等价于readonly=“readonly”
defer 省略属性值后,等价于defer=“defer”
ismap 省略属性值后,等价于ismap=“ismap”
nohref 省略属性值后,等价于nohref=“nohref”
noshade 省略属性值后,等价于noshade=“noshade”
nowrap 省略属性值后,等价于nowrap=“nowrap”
selected 省略属性值后,等价于selected=“selected”
disabled 省略属性值后,等价于disabled=“disabled”
multiple 省略属性值后,等价于multiple=“multiple”
noresize 省略属性值后,等价于noresize=“noresize”

虽然HTML 5采用比较宽松的语法格式,简化了代码。但是为了代码的完整性和严谨性,建议网站开发人员还是按照规范代码的编写模式,这样更有利于你的队友和自己维护!

HTML5标记

什么是HTML标记?带有< > 符号的元素被称为HTML标记,比方说上面提到过的<html>、<head>、<body>都是HTML标记,也称为HTML标签或者HTML元素

HTML 标记分为双标记和单标记两种。双标记也称为体标记,是指由开始结束两个标记符组成的标记,它的语法格式为:<标记名>内容</标记名>

单标记也称为空标记,是指用一个标记符号即可完整的描述某个功能的标记,它的语法格式为:<标记名/>

在HTML 标记中有一个特殊的标记:HTML注释标记。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标记,它的基本格式语法为:<!--注释语句-->,来看一个简单的列子:

<p>这是普通的一个段落。</p><!--这是一段注释,在浏览器中不会显示。-->

HTML5标记的属性

使用HTML制作网页时,如果想让HTML提供更多的信息,比方说字体、字号、颜色、位置等信息,就需要使用HTML标记的属性加以设置,它的基本语法格式为:<标记名 属性1="属性值1" 属性2="属性值2" ...> </标记名>

HTML5文档头部相关标记

<title>标记用于定义HTML页面的标题,就是给网页取一个名字,必须位于<head>标记之内。

<meta>标记用于定义页面的元信息,可重复出现在<head>头部标记中。

<head>中使用<link>标记可引用外部文件,一个页面允许使用多个<link>标记引用多个尾部文件。

<style>标记用于为HTML文档定义样式信息,位于<head>头部标记中。

一个HTML文档只能含有一个<title></title>标记,<title></title>之间的内容将显示在浏览器窗口的标题栏中,它的语法格式为:<title>网站标题</title>

<meta/>用于定义页面的元信息,可重复出现在<head>头部标记中,在一个HTML中是一个单标记<meta/>标记本身不包含任何内容,通过“名称/值”的形式成对的使用其属性可定义页面的相关参数,比方说为搜索引擎提供网页的关键字、作者姓名、内容描述、以及定义网页的刷新时间等。meta定义页面元信息:

<meta name="keywords" content="HTML、CSS"/>  #设置网页关键字
<meta name="description" content="鳄鱼教程"/>  #设置网页描述
<meta name="author" content="鳄鱼君"/>  #设置网页作者
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>  #设置字符集
<meta http-equiv="refresh" content="10;url=https://www.e1yu.com"/>  #设置页面自动刷新与跳转

引用外部文件标记<link>,在<head>中使用<link>标记可引用外部文件,一个页面允许使用多个<link>标记引用多个外部文件,它的基本语法格式为:<link 属性="属性值"/>,通常它有以下属性:

属性名 常用属性值 描述
href URL 指定引用外部文档的地址
rel stylesheet 指定当前文档与引用外部文档的关系,该属性值通常为stylesheet,表示定义一个外部样式表
type text/css 引用外部文档的类型为CSS样式表    
text/javascript 引用外部文档的类型为JavaScript脚本

内嵌样式标记<style>用于为HTML文档定义样式信息,位于<head>头部标记中,它的基本语法格式为:<style 属性="属性值">样式内容</style>,在HTML中使用style标记时,常常定义其属性为type,相应的属性值为text/css,表示使用内嵌式的CSS样式。

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《HTML5文档的基本格式 HTML5的基本语法详细介绍》 发布于2020-04-05

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

9 + 7 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册