HTML5学习之HTML5基础

　　文档类型定义（Document Type Definition，DTD）。DTD指明了文档中所包含的HTML版本。浏览器与HTML代码校验器在处理网页时就可以使用DTD里的信息。网页文档里的第一行就是DTD语句，通常称作文档类型语句（doctype）。HTML5的DTD如下：

　　所创建的每一张页面都会包含DTD、html、head、title、meta和body元素。一个基本的HTML5网页模板如下：

　　html元素的目的是指明该文档是HTML格式。该元素告诉浏览器怎样解释这个文档。开始的标签放置在DTD的下一行。结束的指明网页的结束位置，它放置在文档中所有的HTML元素之后。指定文档所含文本使用的语言是中文，lang属性规定了文档的语言代码。

　　网页有两部分：标题和主体。标题部分包含描述网页文档的信息。主体部分包含实际标签、文本、图像以及其他被浏览器显示为网页的对象。

　　头部（head section）的元素包含页面的标题title、描述文档的元信息meta标签以及对脚本和样式的引用等。这部分的许多特性并不直接显示在网页上。

　　head元素包含标题，以标签开头，以标签结尾。在标题部分里面，至少要包含两个其他的元素：title元素和meta元素。

　　头部的第一个元素是title，它配置了在浏览器窗口标题栏里显示的文本。文本包含在和标签之间，称为标题网页，在此页面上添加书签或打印网页时即可访问这一元素。网页标题应该是具有描述性质的。如果是公司或组织的网页，那么网页标题应该包含公司的名称。

　　meta元素描述网页特性，例如字符集。使用charset属性来指定字符集。如下示例：

　　主体（body section）包含的文本和元素直接显示在浏览器所展现的网页上，所以也称作浏览器视窗（viewport）。使用主体的目的在于配置网页的内容。

　　主体元素包含网页的实体部分，以标签开头，以标签结尾。在写网页时，绝大部分的时间都用在写主体部份的代码上。如果在主体部份里面输入文本，他将直接显示在浏览器视窗的网页上。

　　新建一个文件夹新建一个html文件编写代码浏览器运行

　　代码如下：

　　有六种级别的标题元素，从h1到h6。包含在标题元素里的文本被浏览器视作一“块文本”（称作块显示），其上其下均显示空白区域（有时称作“白色空格” white space）。

　　标题标签要写在主体部分，不能写在头部中。

　　示例代码如下：

　　段落元素用来将文本的句子和章节组合在一起。包含在和标签之间的文本被显示在一“快”儿（称作块显示），其上其下均显示为空白区域。示例代码如下：

　　网页默认对齐方式是左对齐。HTML5不使用align属性来设置对齐方式。XHTML可以使用。

　　添加换行元素后，浏览器会先换行再显示页面上的下一个元素或文本部分。换行不像别的标签那样由开始与结束标签组成，它是独立使用的，或者称为空元素，代码为。示例代码如下：

　　除了组织段落文本与标题外，有时候我们需要在页面上添加引用。块引用元素就是用来以特殊的方式显示被引用的文本块的，与左、右边界之间均有缩进。一块缩进的文本从标签开始，至标签为止。示例代码如下：

　　短语元素有时候也称为逻辑样式元素，指出某个容器标签内文本的上下文与意义。根据浏览器的不同，它们所解析的样式也有所不同。短语元素与文本一起成行显示（称为内联显示），可适用于文本的一部分，甚至是单个字符。例如，元素指明与之关联的文本特别重要，因此需要加粗显示。

　　元素示例用法WIPO指出文本为缩写；用全名配置网页标题（title）属性bold text根据使用惯例将文本设置为加粗显示，并未强调额外的重要性cite text指出文本为引用或参考，以斜体显示code te指出为程序代码示例；通常为固定空格的字体dfn text指出某个单词或术语的定义；通常以斜体显示emphasiz强调文本与另一文本间的关系；通常以斜体显示italicized根据使用惯例将文本设置为斜体显示，并未强调额外的重要性kbd text指出需要用户输入文本；通常为固定空格的字体mark text突出显示文本以便于引用samp text显示程序示例输出；通常为固定空格的字体small text法律上的免责声明与注意事项，呈现小号字体效果strong text特别重要；使文本从上下文中脱颖而出；通常以加粗显示sub text小段文本，在基线以下以下标方式呈现sup text小段文本，在基线以上以上标方式呈现var text指定并显示变量或程序输出；通常以斜体显示

　　每个短语元素都是一个容器，所以必须既要有开始标签，又要有结束标签，配合成对使用。下面是的示例代码：

　　下面是标签的示例代码：

　　可以在网页上用列表来组织信息。在写网页时，使用标题、短段落和列表可以使页面更简洁易读。HTML中可以创建三种类型的列表：描述性列表、有序列表以及无序列表。所有的列表都成块显示，上下均有空行。

　　有序列表按数字或字母排序的方式条目化地罗列出表中所包含的信息。有序列表的组织可以使用数字（默认）、大写字母、小写字母、大写罗马数字以及小写罗马数字。

　　有序列表包含在和标签对之间。每一个列表项又包含在和标签之内。代码示例如下：

　　类型属性用于指定列表的符号。下表为type值：

　　属性值符号1数字A大写字母a小写字母I罗马数字i小写的罗马数字

　　起始值属性用以这个数排列的列表，但该列表不从1开始计数。倒序属性是HTML5中的新属性（使用方法为reversed=“reversed”），用来配置降序排列的列表。

　　本节实践代码如下：

　　在无序列表中，每个清单条目前会显示一个着重号或别的列表标识。此处的着重号有几种类型：圆盘形（默认）、方形、环形。

　　有序列表包含在和标签对之间。每一个列表项又包含在和标签之内。代码示例如下：

　　实践代码如下：

　　描述列表（description list）是在HTML5中引入的新元素名，用于取代之前的名称定义列表（definition list，用于XHTML以及之前的HTML版本）。

　　描述列表自标签开始，至标签结束。每个术语或名称包含在和标签对中。对术语的定义描述则包含在和标签对中。

　　实践代码如下：

　　使用特殊字符要使用特殊代码表示，有时候也称为实体字体。如下版权说明代码：

　　另一个很有用的特殊字符是？，它代表不间断空格。以下为常见特殊字符表：

　　字符实体名称代码“双引号"‘右单引号’？版权符号？&&符号&Empty space不间断空格？__长的短划线—竖条|

　　div是一个已经使用多年的分区元素，用于在网页上设置一般的结构区域，或所谓的“分区”（division），用于块显示，其上其下均会换行。分区元素由标签开始，至标签结束。

　　除了常见的分区元素外，HTML5中还引入了一系列语义上的结构性元素，用来配置网页中的特殊区域：页眉（header）、导航链接（nav）和页脚（footer）。下图展示的页面示意图称作线框图（wireframe），说明了如何用页眉、导航链接（nav）、主体（main）、分区和页脚等结构元素来配置网页。

　　[外链图片转存失败，源站可能有防盗链机制，建议将图片保存下来直接上传（img-c0bPVLtY-1576498041600）（：storage\b11a6e0a-9014-4464-afa6-ca7daf8432b4\858c5045.bmp）]

　　HTML5中引入页眉元素的目的在于为网页文档或者文档内的区域（如节或文章）添加页眉。页眉元素从标签开始，到标签结束。页眉是块显示元素，通常包括一个或多个不同级别的标题元素（h1到h2）。

　　HTML5中引入导航链接元素的目的在于定义导航链接部分。它也是块显示元素，从标签到标签。

　　HTML5中引入主体元素的目的在于规定网页文档的主要内容。每张网页上应当只包括一个主体元素。它也是块显示元素，从标签到标签。

　　HTML5中引入页脚元素的目的在于定义网页文档或节的页脚。它也是块显示元素，从标签到标签。

　　实践代码如下：

　　使用该元素可以定义超链接，一般来说是指向你希望展示的其他网页或文件的链接。锚元素从标签开始，到标签结束。点击这对标签所包围的文本，即可实现跳转。使用href属性来设置超链接的内容，也就是跳转到的文件的名称与位置。

　　示例代码如下：

　　网页上的绝对超链接指向的是资源的绝对位置。当我们要跳转到其他网站上时，就可以使用此类型的链接。

　　如果打算访问自己网站内部的网页，就可以使用相对超链接。

　　网站地图以图示的方式展现了某个网站内网页的结构或组织。地图中的方框代表了网站内的某张页面。

　　实践代码如下：