文章目录
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>
最低0.47元/天 解锁文章
8208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
