您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

HTML 参考笔记

时间：12-14来源：作者：点击数：

HTML（Hyper Text Markup Langauge，超文本标记语言）是用来描述网页信息的一门标记语言。它使用由HTML标签、属性及文本内容组成的HTML元素来描述网页的内容和语义，一系列的HTML元素组成HTML文档（通常为 .html 格式），HTML文档在浏览器中显示为网页。

HTML标准的最新版本为HTML4.01，HTML5标准目前还未正式发布。

XHTML是使用XML重新定义的HTML，最新的版本为XHTML1.0。它与HTML4.01基本相同，不过在语法上更加严格：

文档必须包含根元素（<html>）
标签必须小写
不允许省略属性值
属性值必须使用 "" 包括
使用 id 代替 name 属性
元素必须被关闭（包括成对的标签和空标签）
元素必须正确嵌套

我们推荐使用XHTML的标准来编写HTML，这样，你的网页会有更完美的展现。

HTML未来的发展将逐渐脱离版本号，而发展成为一门动态发展的语言。即其内容随着时间不断丰富，并保持向前兼容的特性。

几个概念：

HTML是一门标记语言，不是编程语言
.html 文件称为HTML文档，显示在浏览器中后，才称之为网页

HTML基础

来看一个连接到 Google 的超链接：

<a href="http://www.cdsy.xyz/">城东书院</a>

这一个超链接就是一个 a 元素。其中的 <a> 和 </a> 为一对__标签__ ，href 为元素的__属性__，Google为元素的__内容__。

HTML元素

#HTML标签

HTML标签 指的是从 < 到 > 的一段文本，如 <a> </p> 等。

标签通常是成对存在的，如 <h4></h4> <div></div>，分别叫做 开始标签 和 结束标签 ，结束标签在 < 后比开始标签多一个 /；

有少部分标签不是成对的，如 <br /> <hr /> ，它们在 > 前加入 (空格)/ 代表标签的结束（注意： 要有一个空格），我们称这种不成对的标签为 空标签 或 空元素。

成对的标签内部（> 和 < 之间）可以包含文字，也可以包含其他HTML标签。这种在HTML标签中包含其他标签的方式称为__标签嵌套__。（空标签内部是无法包含或嵌套其他内容的）

正确的标签嵌套是使浏览器正确显示HTML文档内容的关键。

HTML 元素

HTML元素 指的是从开始标签到结束标签之间的全部内容（包括标签属性、文本和其他嵌套的标签），它是组成HTML文档（网页）的基本单位。

HTML 属性

属性用来描述HTML元素的额外信息。如 href 属性用来描述 a 元素连接到的文件或地址（URL），src 属性用来描述 img 元素的图像地址。

属性包括 属性名 和 属性值 两部分，中间以 = 连接。属性值要用 "" 包括。

<img src="image.png" width="300" height="200" />

属性要写在开始标签中，属性之间以及属性与标签文本之间要有一个空格。

HTML 注释

HTML注释通常用来在HTML文档中添加注释文本或用来屏蔽不需要显示的代码。

<!-- 注释内容 -->

注释由  组成，包含在其中的任何内容都将被浏览器忽略，而不会显示在网页中。

在代码中适当地添加注释，是一个良好的习惯。它可以帮助自己和其他人理解或记录代码的相关信息，有利于将来的修改和多人协作。

HTML代码的编写

书写规范

要编写出高质量的HTML代码，就需要遵守代码的书写规范。

HTML代码（包括标签及属性）通常使用小写字母编写
属性的值用引号包括
标签需要被关闭：成对的标签要有结束标签，空标签要有结束符
正确嵌套标签，遵循标签的嵌套规则
根据标签的嵌套顺序，合理缩进源代码文本

代码的编写技巧

编写代码时，有一些小技巧，可以帮助你提高效率，并减少出错：

使用专业的文本编辑器或IDE书写代码。它们一般会提供代码的 语法高亮、代码提示 和 自动完成 等功能
手写代码时，先写成对的 <> 、 () 或 ""，再往其中添加文本。这样可以防止丢失另一半括号或引号
成对的标签一次写完，如 <a></a>。这样可以防止丢失另一个标签

HTML标签

简单的 HTML 文档

标签是HTML文档的基本组成元素，我们先通过一个基本的HTML文档来认识一下标签的作用。

<!DOCTYPE html>
	<html>
		<head>
			<title>网页的标题</title>
		</head>
	<body>
		<p>一个段落</p>
	</body>
</html>

我们将这段代码复制并粘贴到记事本（或其他常用的文本编辑器中，MS Word之类的不可以），并保存为 index.html，然后双击打开（或在浏览器中选择打开该文件），一个类似的网页会呈现出来。

上面这段代码就是一个简单而完整的HTML文档，我们来深入了解一下：

<!DOCTYPE html> 标签声明了该HTML文档的文档类型为HTML5
<html></html> 标签是HTML文档的最底层标签，包含了文档的所有内容
<head></head> 代表了HTML文档的“头部”，这里描述了浏览器需要的一些信息，也可以定义一些需要从外部引入的文件（如 .css .js 文件）
<title></title> 定义了网页的标题，该信息会显示在浏览器的标题栏（或浏览器标签）以及收藏夹中
<body></body> 定义了网页的内容，也就是我们可以从浏览器中看到的内容

标签语义化

我们从上一节的例子中可以看出，每一个HTML标签都是有具体意义的英文单词。这种标签的 语义化 （Semantic），是HTML在制定的最初就一直遵守的规则，用来将文本等信息结构化，从而方便理解和使用。

块级元素与内联元素

完整的 HTML 标签列表

我们根据各标签的含义及用途，进行了如下的划分：

基本标签：

doctype

html

head

body

页面信息：

title

base

meta

style

script

资源关联：

link

script

注释：

结构相关：

br

hr

div address article aside blockquote details figcaption figure footer h* header menu nav p section summary

内容相关：

文本族：abbr bdi bdo del ins mark pre q rp rt ruby small span sub sup time

超链接和锚：a area map

多媒体： audio canvas embed img object param source track video

列表：dd dl dt li ol ul

表格：caption col colgroup table tbody td tfoot th thead tr

表单：button command datalist fieldset form input keygen label legend meter option optgroup output progress select textarea

框架：iframe

字符实体：其他：b dfn code em i kbd samp strong var