[JavaScript知识库] 第02章、HTML的元素（一）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 第02章、HTML的元素（一） -> 正文阅读

[JavaScript知识库]第02章、HTML的元素（一）

第二章、HTML的元素与属性（一）

本章将要介绍的内容是HTML的元素，HTML的元素总体来说包括：HTML标题，HTML段落，HTML注释，HTML引用，HTML链接，HTML图像，HTML表格，HTML列表，HTML块，由于内容较多所以分为两个章节，同时在介绍HTML的元素的同时还会穿插的介绍相关元素的属性，具体包括：HTML样式，HTML颜色和颜色名，HTML CSS的相关知识。

第一节、HTML标题

1、标题的种类

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。例如下面的案例：

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

2、注意的事项

注意： 浏览器会自动地在标题的前后添加空行。空行即 <br/> 或者<br>。
注意： 默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
注意： 请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

3、HTML水平线

<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
具体代码实例

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

显示的效果

This is an h6 title

4、HTML源代码查看

需要查看一个网页的源代码只需要单击右键，然后选择“查看源文件”或“查看页面源代码”，其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。

第二节、HTML段落

1、段落的定义

段落是通过 <p> 标签定义的。
代码样例：

<p>This is a paragraph</p>
<p>This is another paragraph</p>

显示效果

This is a paragraph

This is another paragraph

2、注意的事项

浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）
使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。不要着急，稍后的篇幅会学习到 HTML 列表。）
不要忘记结束标签，即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来，但这个不是一个好的习惯。

3、HTML拆行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br />标签：

<p>This is<br />a para<br />graph with breaks</p>

显示效果

This is
a para
graph with breaks

4、HTML空格的处理

对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

代码样例

<html>
    <body>

    <h6>春晓</h6>
    <p>
        春眠不觉晓，
          处处闻啼鸟。
            夜来风雨声，
              花落知多少。
    </p>
    <p>注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。</p>
    </body>
</html>

显示效果：

春晓

春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。

- 注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。

第三节、HTML样式

1、样式的概述

style 属性用于改变 HTML 元素的样式。
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
在这里的 HTML 教程中，我们将使用 style 属性向您讲解 HTML 样式。
使用样式的时候请使用下面的公式

<元素 style="具体样式名:样式">元素的内容</元素>

具体的实例请看后面的内容

2、样式实例（一）——背景颜色

background-color 属性为元素定义了背景颜色：

<html>
	<h2 style="background-color:pink">This is a heading</h2>
	<p style="background-color:lightblue">This is a paragraph.</p>
</html>

显示效果如下

This is a heading

This is a paragraph.

旧有的一个属性叫 bgcolor ，具有一定的局限性，只可以在 <body> 处使用，例如：

<body bgcolor="white">
	<p>This is a paragraph.</p>
<body>

3、样式实例（二）——字体、颜色和尺寸

font-family 定义文本的字体的字型（例如：宋体，楷体等等）
color 定义文本的字体的颜色
font-size定义字体的尺寸

4、样式实例（三）——文本对齐方式

text-align 属性规定了元素中文本的水平对齐方式：

<p style="text-align:left">The heading above is aligned to the left of this page.</p>
<p style="text-align:center">The heading above is aligned to the center of this page.</p>
<p style="text-align:right">The heading above is aligned to the right of this page.</p>

text-align 属性的值可以为：left、center 、right ，分别代表的是靠左、居中、靠右。
显示的效果如下：

The heading above is aligned to the left of this page.

The heading above is aligned to the center of this page.

The heading above is aligned to the right of this page.

旧有的一个属性叫 align ，具体的使用方法是：

<p align="center"> 文字将会居中显示 </p>

显示的效果如下：

文字将会居中显示

第四节、HTML引用

1、短的引用

HTML <q> 元素定义短的引用。浏览器通常会为 <q> 元素包围引号。

<p>众所周知：<q>HTML是一种超文本标记语言。</q></p>

请看下面的显示样例：“HTML是一种超文本标记语言。”这一部分是引用内容

众所周知：HTML是一种超文本标记语言。

2、长的引用

HTML <blockquote> 元素定义被引用的节。浏览器通常会对 <blockquote>元素进行缩进处理。
请看下面的代码样例：

<p>以下内容引用自 WWF 的网站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

请看下面的显示效果：

以下内容引用自 WWF 的网站：

五十年来，WWF 一直致力于保护自然界的未来。世界领先的环保组织，WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持。

3、其他的引用

标签	描述
<abbr>	定义缩写或首字母缩略语。
<address>	定义文档作者或拥有者的联系信息。
<bdo>	定义文本方向。
<blockquote>	定义从其他来源引用的节。
<dfn>	定义项目或缩略词的定义。
<q>	定义短的行内引用。
<cite>	定义著作的标题。

第五节、HTML注释

1、一般的注释

注释标签  用于在 HTML 插入注释。前者是注释的开头，后者是结尾。
```

```
注释：在开始标签中有一个惊叹号，但是结束标签中没有。浏览器不会显示注释，但是能够帮助记录 HTML 文档。我们可以利用注释在 HTML 中放置通知和提醒信息。

2、条件注释

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

条件注释定义只有 Internet Explorer 执行的 HTML 标签。

第六节、HTML颜色

1、颜色

颜色由红色、绿色、蓝色混合而成。
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。

这个表格给出了由三种颜色混合而成的具体效果：

Color	Color HEX	Color RGB
?	#000000	rgb(0,0,0)
?	#FF0000	rgb(255,0,0)
?	#00FF00	rgb(0,255,0)
?	#0000FF	rgb(0,0,255)
?	#FFFF00	rgb(255,255,0)
?	#00FFFF	rgb(0,255,255)
?	#FF00FF	rgb(255,0,255)
?	#C0C0C0	rgb(192,192,192)
?	#FFFFFF	rgb(255,255,255)

2、颜色名

大多数的浏览器都支持颜色名集合。
**提示：**仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的颜色，需要使用十六进制的颜色值。

3、Web安全色

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）。
我们不确定如今这么做的意义有多大，因为越来越多的计算机有能力处理数百万种颜色。
请看下面的颜色版

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF