01HTML5学习之HTML5基础

文章目录

1、文档类型定义
2、网页模板
3、HTML元素
4、四大元素head、title、meta和body

头部（Head）
主体（body）

5、你的第一张网页
6、标题元素
7、段落元素

对齐

8、换行元素
9、块引用元素
10、短语元素
11、有序列表

类型（Type）、起始值（Start）和倒序*(Reversed)属性

12、无序列表
13、描述列表
14、特殊字符
15、结构元素

分区元素（Div）
HTML结构性元素
页眉元素（Header）
导航链接元素（Nav）
主体元素（Main）
页脚元素（Footer）

16、锚元素

绝对超链接
相对超链接
网站地图
电子邮件超链接

1、文档类型定义

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

<!DOCTYPE html>

2、网页模板

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Page Title Goes Here</title>
</head>
<body>
... body text and more HTML tags go here ...
</body>
</html>

3、HTML元素

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

4、四大元素head、title、meta和body

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

头部（Head）

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

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

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

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

<meta charset="utf-8">

主体（body）

主体（body section）包含的文本和元素直接显示在浏览器所展现的网页上，所以也称作浏览器视窗（viewport）。使用主体的目的在于配置网页的内容。
主体元素包含网页的实体部分，以<body>标签开头，以</body>标签结尾。在写网页时，绝大部分的时间都用在写主体部份的代码上。如果在主体部份里面输入文本，他将直接显示在浏览器视窗的网页上。

5、你的第一张网页

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

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>My First HTML5 Web Page</title>
<meta charset="utf-8">
</head>
<body>
Hello World
</body>
</html>

6、标题元素

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

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

示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Heading Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>

7、段落元素

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Paragraph Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Heading Level 1</h1>
<p>This is a sample paragraph. Heading tags can help to make your pages more accessible and usable. It is good coding practice to use heading tags to outline the structure of your web page content.</p>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>

对齐

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

8、换行元素

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Linebreak Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Heading Level 1</h1>
<p>This is a sample paragraph. <br>Heading tags can help to make your pages more accessible and usable. It is good coding practice to use heading tags to outline the structure of your web page content.</p>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>

9、块引用元素

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Blockquote Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>The Power of the Web</h1>
<p>According to Tim Berners-Lee, the inventor of the World Wide Web, at http://www.w3.org/WAI/:</p>
<blockquote>
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
</blockquote>
</body>
</html>

10、短语元素

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

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

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

<p>Call for a free quote for your web development needs:
<strong>888.555.5555</strong></p>

下面是<em>标签的示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Blockquote Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>The Power of the Web</h1>
<p>According to Tim Berners-Lee, the inventor of the World Wide Web, at http://www.w3.org/WAI/:</p>
<blockquote>
The power of the Web is in its universality. <em>Access by everyone</em> regardless of disability is an essential aspect.
</blockquote>
</body>
</html>

11、有序列表

可以在网页上用列表来组织信息。在写网页时，使用标题、短段落和列表可以使页面更简洁易读。HTML中可以创建三种类型的列表：描述性列表、有序列表以及无序列表。所有的列表都成块显示，上下均有空行。
有序列表按数字或字母排序的方式条目化地罗列出表中所包含的信息。有序列表的组织可以使用数字（默认）、大写字母、小写字母、大写罗马数字以及小写罗马数字。
有序列表包含在<ol>和</ol>标签对之间。每一个列表项又包含在<li>和</li>标签之内。代码示例如下：

<h1>My favorite Colors</h1>
<ol>
<li>Blue</li>
<li>Teal</li>
<li>Red</li>
</ol>

类型（Type）、起始值（Start）和倒序*(Reversed)属性

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

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

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Heading and List</title>
<meta charset="utf-8">
</head>
<body>
<h1>My favorite Colors</h1>
<ol>
<li>Blue</li>
<li>Teal</li>
<li>Red</li>
</ol>
</body>
</html>

12、无序列表

在无序列表中，每个清单条目前会显示一个着重号或别的列表标识。此处的着重号有几种类型：圆盘形（默认）、方形、环形。
有序列表包含在<ul>和</ul>标签对之间。每一个列表项又包含在<li>和</li>标签之内。代码示例如下：

<h1>My favorite Colors</h1>
<ul>
<li>Blue</li>
<li>Teal</li>
<li>Red</li>
</ul>

实践代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Heading and List</title>
<meta charset="utf-8">
</head>
<body>
<h1>My favorite Colors</h1>
<ul>
<li>Blue</li>
<li>Teal</li>
<li>Red</li>
</ul>
</body>
</html>

13、描述列表

描述列表（description list）是在HTML5中引入的新元素名，用于取代之前的名称定义列表（definition list，用于XHTML以及之前的HTML版本）。
描述列表自<dl>标签开始，至</dl>标签结束。每个术语或名称包含在<dt>和</dt>标签对中。对术语的定义描述则包含在<dd>和</dd>标签对中。
实践代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Description List</title>
<meta charset="utf-8">
</head>
<body>
<h1>Sample Description List</h1>
<dl>
<dt>TCP</dt>
<dd>Transmission Control Protocol is method (protocol) used along with the Internet Protocol(IP) to send data in the form of message units, called packets, between computers over the Internet.</dd>
<dt>IP</dt>
<dd>Internet Protocol is the method or protocol by which data is sent from one cpmputer to another on the Internet. Each computer on the Internet is uniquely identified by an IP address.</dd>
<dt>FTP</dt>
<dd>File Transfer Protocol is a protocol used to exchange files between computers on the Internet.</dd>
<dt>HTTP</dt>
<dd>Hypertext Transfer Protocol is the protocol used for exchanging text, graphic images, sound, video, and other multimedia files on the Web.</dd>
</dl>
</body>
</html>

14、特殊字符

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

&copy; Copyright 2019 My Company. All rights reserved.

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

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

15、结构元素

分区元素（Div）

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

HTML结构性元素

除了常见的分区元素外，HTML5中还引入了一系列语义上的结构性元素，用来配置网页中的特殊区域：页眉（header）、导航链接（nav）和页脚（footer）。下图展示的页面示意图称作线框图（wireframe），说明了如何用页眉、导航链接（nav）、主体（main）、分区和页脚等结构元素来配置网页。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c0bPVLtY-1576498041600)(:storage\b11a6e0a-9014-4464-afa6-ca7daf8432b4\858c5045.bmp)]

页眉元素（Header）

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

导航链接元素（Nav）

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

主体元素（Main）

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

页脚元素（Footer）

HTML5中引入页脚元素的目的在于定义网页文档或节的页脚。它也是块显示元素，从<footer>标签到</footer>标签。
实践代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Trillium Media Design</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Trillium Media Design</h1>
</header>
<nav>
<b>Home &nbsp; Service &nbsp; Contact</b>
</nav>
<main>
<h2>New Media and Web Design</h2>
<p>Trillium Media Design will bring your company&rsquo;s Web presence to the next level. We offer a comprehensive range of services.</p>
<h2>Meeting Your Business Needs</h2>
<p>Our expert designers are creative and eager to work with you.</p>
</main>
<footer>
<small><i>Copyright &copy; 2014 Your Name Here</i></small>
</footer>
</body>
</html>

16、锚元素

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Anchor Example</title>
<meta charset="utf-8">
</head>
<body>
<a href="https://cn.bing.com/">Bing</a>
</body>
</html>

绝对超链接

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

相对超链接

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

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Trillium Media Design</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Trillium Media Design</h1>
</header>
<nav>
<b>
<a href="index.html">Home</a> &nbsp;
<a href="service.html">Service</a> &nbsp;
<a href="contact.html">Contact</a>
</b>
</nav>
<main>
<h2>New Media and Web Design</h2>
<p>Trillium Media Design will bring your company&rsquo;s Web presence to the next level. We offer a comprehensive range of services.</p>
<h2>Meeting Your Business Needs</h2>
<p>Our expert designers are creative and eager to work with you.</p>
</main>
<footer>
<small><i>Copyright &copy; 2014 Your Name Here</i></small>
</footer>
</body>
</html>

<!-- service.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Trillium Media Design</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Trillium Media Design</h1>
</header>
<nav>
<b>
<a href="index.html">Home</a> &nbsp;
<a href="service.html">Service</a> &nbsp;
<a href="contact.html">Contact</a>
</b>
</nav>
<main>
<h2>Our Services Meet Your Business Needs</h2>
<dl>
<dt><strong>Website Design</strong></dt>
<dd>Whether your needs are large or small, Trillium can get you on the Web!</dd>
<dt><strong>E-Commerce Solutions</strong></dt>
<dd>Trillium offers quick entry into the e-commerce marketplace.</dd>
<dt><strong>Search Engine Optimization</strong></dt>
<dd>Most people find new sites using search engines. Trillium can get your website noticed.</dd>
</dl>
</main>
<footer>
<small><i>Copyright &copy; 2014 Your Name Here</i></small>
</footer>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Trillium Media Design</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>Trillium Media Design</h1>
</header>
<nav>
<b>
<a href="index.html">Home</a> &nbsp;
<a href="service.html">Service</a> &nbsp;
<a href="contact.html">Contact</a>
</b>
</nav>
<main>
<h2>Contact Trillium Media Design Today</h2>
<ul>
<li>E-mail: 
<a href="mailto:[email protected]">[email protected]</a>
</li>
<li>Phone: 555-555-5555</li>
</ul>
</main>
<footer>
<small><i>Copyright &copy; 2014 Your Name Here</i></small>
</footer>
</body>
</html>

电子邮件超链接

锚元素还可以用于创建指向电子邮件的链接。点击这种类型的链接会自动打开为浏览器配置的默认邮件程序。

用mailto:来代替http://。
自动打开访问者浏览器中的默认电子邮件应用，并且已经填写了邮件接收者的地址。

例子如下：

<a href="mailto:[email protected]">[email protected]</a>

参考书籍：［1］Terry Felke-Morris.学习HTML5［Ｍ］.第七版.北京：清华大学出版社，2017

雨凊

发布了35 篇原创文章 · 获赞 11 · 访问量 752

私信关注