HTML5文档结构与语法-优快云博客

1.2.1 HTML5文档基本格式

1、<!doctype>标记

<!doctype>标记标记位于文档的最前面用于向浏览器说明当前文档使用哪种html标准规范。

2、HTML 标记

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

3、head标记

用于定义文档的头部信息，也成为头部标记，紧跟在html标记之后，主要用来封装其他位于头部的标记。

4、body标记

用于定义所要显示的内容，也称为主体标记，所有的文本、图像、音频和视频等信息都要位于此标记内，此标记内的信息才是最终给客户看的。

一个HTML文档只能含有一对< body>标记，且< body> 标记必须在< html>标记内，位于< head>头部标记之后，与< head> 标记是并列关系。

HTML5 语法
1、标签不区分大小写
2、允许属性值不使用引号
3、允许部分属性值的属性省略
注意：虽然HTML5采用比较宽松的语法格式，简化了代码。但是为了代码的严谨性和完整性，建议网站开发人员采用严谨的代码编写方式。
HTML标记
1、单标记和双标记

双标记：是只有开始和结束两个标记符组成的。
< 标记名> 内容</ 标记名>
单标记：也称空标记，是指用一个符号即可完整的描述某个功能的标记。
< 标记名 />

2、注释标记

可以在文档中添加一些便于阅读和理解但又不在页面中显示的注释文字
< ! – 注释标记 – >

3、标记属性

< 标记名属性1=“属性值1” 属性2=“属性值2” …> 内容</ 标记名>
< h1 align=“center”>标题文本< h1>

在< p>标记中包含了< strong>之标记。在HTML 中，把这种标记间的包含天系称为标记嵌套。

< p>传智云课堂是
< strong>传智播客< /strong>
在线教育平台，可以实现晚上在家学习、在线直播教学、实时互动辅导等多种功能，
专注于网页、平面、UI设计以及Web前端的培训。
< /p>

注意：需要注意的是，在标记的嵌套过程中，必须先结束最靠近内容的标记，再按照由内及外的顺序依次关闭标记。
HTML5文档头部相关标记
1、设置页面标题标记< title>
2、定义页面元信息标记< meta />

设置网页关键字
设置网页描述
设置网页作者
设置字符集
设置页面自动刷新与跳转

3、引用外部文件标记< link>
4、内嵌样式标记< style>

标题标记
使用< h1>< h2>< h3 >< h4>< h5 >< h6>，有< h1>到< h6>重要性递减
语法格式：

<hn align =" 对齐方式">标题文本</hn>

对齐方式

left: 设置标题文字左对齐（默认值）
center：设置标题文字居中对齐
right：设置标题文字右对齐

段落标记
语法格式：

< p align=“对齐方式”>段落文本< /p>

水平线标记
语法格式：

< hr 属性=“属性值” />

hr标记的常用属性

属性名	含义
align	设置水平线的对齐方式
size	设置水平线的粗细
color	设置水平线的颜色
width	设置水平线的宽度

换行标记<br/>

文本格式化标记

标记	显示效果
< b>< /b>和< strong>< /strong>	文字以粗体显示
< i>< /i>和< em>< /em>	文字以斜体显示
< s>< /s>和< del>< /del>	文字以加删除线方式显示
< u>< /u>和< ins>< /ins>	文字以加下划线方式显示

图形标记< img />

< img src=“图像URL” />

绝对路径和相对路径
1、绝对路径

绝对路径就是网页上的文件或目录在硬盘上的真正路径，如“D:\HTML5+CSS3\images\logo.gif”，或完整的网络地址，如“http://www.itcast.cn/images/logo.gif”。
网页中不推荐使用绝对路径，因为网页制作完成之后我们需要将所有的文件上传到服务器，这时图像文件可能在服务器的C盘，也有可能在D盘、E盘，可能在aa文件夹中，也可能在bb文件夹中。也就是说，很有可能不存在“D\HTML5+CSS3\images\logo.gif”这一个路径。

2、相对路径

相对路径就是相对于当前文件的路径，相对路径不带有盘符，通常是以 HTML 网页文件为起点，通过层级关系描述目标图像的位置。总结起来，相对路径的设置分为以下3种。
（1）图像文件和 html文件位于同一文件夹：只需输入图像文件的名称即可，如< img src=“logo.gif” />。
（2）图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之用“/”隔开，如< img src=“images/logo.gif”/>。
（3）图像文件位于html文件的上一级文件夹：在文件名之前加入“…/”，如果是上两级需要使用“…/…/”，以此类推，如<imgsrc="…/logo.gif"/>。