HTML 元素

TML 文档由 HTML 元素定义。

HTML 元素

开始标签 *	元素内容	结束标签 *
<p>	这是一个段落	</p>
<a href="default.htm">	这是一个链接	</a>
<br>

*开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

注释: 您将在本教程的下一章中学习更多有关属性的内容。

嵌套的 HTML 元素

<p大多数 html="" 元素可以嵌套（可以包含其他="" 元素）。<="" p="">

HTML 文档由嵌套的 HTML 元素构成。

HTML 文档实例

<!DOCTYPE html>

<html>

<body>

这是第一个段落。

</body>

</html>

以上实例包含了三个 HTML 元素。

HTML 实例解析

 元素:

这是第一个段落。

这个 元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签 以及一个结束标签 .

元素内容是: This is my first paragraph.

<body> 元素:

<body>

这是第一个段落。

</body>

The <body> 元素定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。

元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

<html>

<body>

这是第一个段落。

</body>

</html>

The <html> 元素定义了整个 HTML 文档。

这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.

元素内容是另一个 HTML 元素（body 元素）。

不要忘记结束标签

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

这是一个段落

以上实例在浏览器中也能正常显示，因为关闭标签是可选的。

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

就是没有关闭标签的空元素（ 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 ，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 在所有浏览器中都是有效的，但使用 其实是更长远的保障。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感： 等同于 。许多网站都使用大写的 HTML 标签。

W3CSchool 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

TML标签

基本标签

HTML页面中内容是由HTML标签组织起来的，如页面中的文本、图像、Flash视频文件等都是通过HTML标签合理地显示在页面的各个位置。

1 标题标签<h1>～<h6>

标题标签表示一段文字的标题（主题），并且支持多层次的内容结构。HTNL.共提供了6级标题，分别为<h1>～<h6>，并赋予了标题一定的外观，所有标题字体加粗，其中山<h1>字号最大，<h6>字号最小.

2.图像标签<img>

在网页中常用的图像格式有4种，即JPG、GIF、BMP.PNG，其中使用比较多的是JPG、GIF和PNG，大多数浏览器都可以显示这些图像。

显示图像的语法：

< img src="ur1" alt="文本" width="x" height="y"/>

在语法中：

a、SrC属性：表示显示图像的地址。

b、alt属性：指定图像的替代文本，当图像无法显示时（如图片路径错误或网速太慢等）替代显示的文本，这样，即使图像无法显示，用户还可以看到网页丢失的信息，所以为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好地显示信息，并且对于那些使用纯文本浏览器的人来说是非常有帮助的。

c、width属性：表示图像宽度.

d、height属性：表示图像高度。

3.段落标签

顾名思义，段落标签表示将一段文字组成一系列段落内容，这样做的目的是内容应用某些格式和布局，使各个段落的逻辑更清晰明了。在HTML文档中，段落通过标签定义。段落标签表示段落的开始，表示段落的结束。

4.换行标签

在希望不产生一个新段落的情况下进行换行，则使用 标签。 是一个空的HTML标签，由于关闭标签没有任何意义，因此它没有结束标签。

注意：

使用和 的结果一样，在XHTML以及未来的HTML版本中，根据W3C规范，不允许使用没有结束标签的HTML元素，因此使用 页面更规范，有更长远的保障。

5.水平线标签<hr/>

水平线标签表示一条水平线，注意该标签与 标签一样，没有结束标签，直接使用<hr/>表示标签的开始和结束。

使用以上讲解的基本标签，就可以进行网页内容排版了。

着岗位竞争的越来越激烈，而设计师掌握的技能要求也越多，设计师不光只会设计，而且也要懂（会）代码（会手写代码更会加金的），所以我们要做一位懂代码设计师，还好Jason在大学学过代码，毕业也做过一段时间的设计+前端，我将我在代码方面的知识总结分享给大家，赶紧往下看吧

基础认识

html语句是由标签+属性构成的

html 标签由开始标签和结束标签组成，开始标签是被括号包围的元素名，结束标签是被括号包围的斜杠和元素名，但某些 html 元素没有结束标签，比如 、<img>，这类标签称为单标签。

属性的语法

1、写在标签的<>内，而且在标签代码之后，如

2、属性名=""(一定得是英文的引号，不能是中文的引号。其实不用引号对于它的显示没有影响，但加上引号为标准做法)

如 align="center" align为属性名 center left right是属性值

3、有的标签没有任何属性（ ），有的标签虽然有属性，但可以不加上也不影响它的使用(),但有的标签则是必须与属性连用方能正常显示(<a></a>)

网页的基本结构

<html>

</html>

html，head，body 是html代码必不可少的三大标签，其中

html标签：用于定义html文件的标签，这个标签意味着这个文件是一个html文件

head标签：里面的内容不能再浏览器中直接呈现，但它会用后台运作的方式为html页面提供种种功能

body标签：里面出现的内容会在浏览器中得到直接呈现，供读者浏览

必须要记住的标签和属性

放在<head></head>之间的

<title> </title>

<title> </title>标签定义html文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。

<meta>标签

用来标记搜索引擎在搜索你的页面时所取出的关键词。

用来标记文档的作者。

用来标记你的页面的解码方式。

用来自动刷新网页

放在<body></body>之间的

与文字相关的标签

文字标题

<h#> ... </h#>

#=1, 2, 3, 4, 5, 6

段(paragraph)

空白占位符

换行

文字的分区显示

<div align=#> ... </div> (#=left, center, right)

显示斜体文本效果。

呈现粗体文本效果。

<big> 呈现大号字体效果。

呈现小号字体效果。

无序列表

无序列表是由<ul>和<li>元素定义的:

<ul>

<li>sports</li>

<li> drink </li>

<li> friends </li>

</ul>

<ul>和<li>中均可加入type属性，type的属性值有：disc(圆)、circle（圆圈）、square（方块）

有序列表 start 值为数字

有序列表由<ol>和<li>定义:

<ol>

<li>sports</li>

<li> drink</li>

<li> friends</li>

</ol>

....................................................................

我的微信公众号：UI严选 —越努力，越幸运

在线咨询

上一篇：初识HTML5（二）
下一篇：前端开发中常见的浏览器兼容性问题及解决方案大汇总

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 元素

您的项目需求