html精讲标签全读

1．标题标签

从h1~h6逐渐变小。
特点：加粗且加黑显示，独占一行，每行与其他行之间有间距。
属性：align表示取值left（默认）/right/center。

2．水平线标签

---

属性：color表示颜色。
size表示粗细。
width表示长度。

3．段落标签

特点：有段前、段后间距，独占一行。

4．换行
换行操作的格式为

document.write(1 + "<br / >
document.write(2);

5．字体标签

必须结合属性使用。
格式：<font属性=值>字体内容
属性：color表示字体的颜色，可以使用英文单词或者十六进制。
size表示字体大小。
face表示设置字体。

6．注释

格式：<！–注释–>。一般的IDE快捷键为Ctrl+/。

7．加粗

加粗操作的格式为
var strTime= " "+ strHour+ “:”+ strMinutes+ “:”+ strSeconds+ "
";

8．倾斜

倾斜操作的格式为

• webkit- transform: rotate( - 20deg);
• moz- transform: rotate( - 20deg);
  transform: rotate(- 20deg);

3.1.4 图片标签

HTML页面可以引入一张图片，当有此需求时，需要使用img标
签。
标签的属性有以下几种。

（1）src（访问的图片的路径）。

路径分为相对路径和绝对路径。
相对路径：指定相对于当前文件的资源文件位置。
当前目录：直接写文件名称（文件名称包括后缀名）。
上一级目录：…/文件名称（若返回多级，则加多个“…/”）。
下一级目标：目录名称/文件名称。
绝对路径：指定从盘符到资源文件的完整路径。绝对路径和相对路
径的区别就是绝对路径的最左边有一个反斜杠“/”。

（2）width：设置图片的宽度。

（3）height：设置图片的高度。

一般情况下需要设置图片的width和height，防止布局杂乱。

（4）alt：当图片无法正常显示时给出提示信息，它的显示效果与

浏览器有关。

（5）title：鼠标指针移动到图片上时显示的提示信息。

3.1.5 超链接标签

在HTML网页中，经常会有这样的需求：用户单击某一段文字，就
产生了页面跳转。这样的功能一般都是用超链接实现的，

这是一个关于a标签
首先介绍a标签的href属性，可以给a标签的href属性设置一个具体的
网页地址或者某个资源的地址（包括zip压缩文件、图片、音乐MP3、电
影MP4）。如果设置href=“www.baidu.com”，那么当用户单击这个超链
接时，页面就会跳转到百度网站。如果链接的地址是一个压缩包，那么
当用户单击这个超链接时，浏览器就会默认下载对应的资源。如果链接
的地址是一个音乐文件或者电影文件，浏览器则开始播放音乐或者电
影。因此，a标签的用处是非常大的。还需要注意的是，当a标签的作用
是为了让用户在单击后跳转页面，那么究竟是从当前页面开始跳转，还
是重新命令浏览器打开一个新的页面，然后在新的页面上跳转呢？可以
给a标签设置一个target属性。如果target="_blank"，则表示命令浏览器打
开一个新的页面，在新的页面上跳转。如果不写target属性，则默认是
从当前页面进行跳转。

3.1.6 table标签

HTML的table标签可以实现类似于Excel绘制单元格的功能。例如：

1．表格标签的格式

表格标签的格式如下所示

2．表格的属性

（1）table标签的属性如下。
border表示表格边框。
width表示表格宽度。
height表示表格高度。
align表示水平方向的对齐方式。
bgcolor表示背景色。
cellspacing表示单元格与单元格之间的间距。
cellpadding表示单元格与内容的填充

（2）tr标签的属性如下。
bgcolor表示背景色。
align表示本行文本对齐方式。
height表示行高。
（3）td标签上的属性与tr类似。

3．单元格合并技术

在td标签上使用下列属性即可实现单元格合并。
跨列：colspan=“值”。
跨行：rowspan=“值”。

利用这些table标签，以及行合并、列合并的技巧，可以实现各种各
样的网页布局，其实，在早期的网页开发中，table标签除了用来显示一
些列表数据外，还可以用来布局。

3.1.7 表单元素

相信你在浏览网页的时候，经常会看到一些表单。比如，当你注册
某一个网站的会员时，就需要填写一个表单，该表单里面有很多输入
框，需要你在对应的输入框内填写自己的用户名、密码、邮箱等信息，
还有一些表单元素是单选按钮、下拉框、复选框。正是由于表单的存
在，使得网页和用户之间产生了一些交互元素。
关于form表单标签的介绍如下。
描述：表单标签用来在HTML页面中创建一个表单，表单标
签在浏览器上没有任何显示。如果数据需要提交到服务器，则负责搜集
数据的标签必须存放在表单标签中。
属性：
（1）action属性：请求路径，确定表单提交到服务器的地址（路
径）。
（2）method属性：请求方式，常用取值为GET、POST。
① GET：默认值。
特点：提交的数据追加在请求路径上。例如：/1.html？
username=jack&password=1234，数据格式为key/value对，追加是使
用“？”连接的，之后每一对数据之间都使用“&”连接。
因为请求路径的长度有限，所以GET方式提交的请求数据有限定。
因为要在地址栏中显示数据，所以数据的安全性不高。
② POST。
特点：提交的数据不在请求路径上追加（即不显示在地址栏中），
数据的安全性更好，提交的数据无大小限定。
下面介绍可以在form表单中出现的HTML元素（标签）

1．输入域标签input

标签一般用于获取用户输入信息，如果type属性值不同，则
标签的展现形式和搜集的信息也不同，它是在页面中常用的标签。
（1）type属性。
text：单行文本框，用户可以在其中输入文本，默认宽度为20个字
符。
password：密码框，在该控件中输入的内容不会明文显示，以黑圆
点显示。
radio：单选按钮，表示一组互斥选项按钮中的一个。当一个按钮被
选中时，该组中之前选中的按钮会变为非选中状态。
submit：“提交”按钮，该按钮会把表单数据发送到服务器。一般不
写name属性，否则会将“提交”两个字提交到服务器。
因为不同项目注册所需要的字段不同，需要完成的案例中没有覆盖
所有表单元素，所以以下标签的使用也需要掌握。
checkbox：复选框，用法与radio基本一致，在一组复选框中可以选
择任意多个选项。
file：文件上传组件，提供“浏览”按钮，可以选择需要上传的文
件。
hidden：隐藏域，数据会发送给服务器，页面不进行显示。
reset：“重置”按钮，将表单恢复到初始状态。
image：图形“提交”按钮，通过src给按钮设置图片。
button：普通按钮，通常结合JavaScript实现动作效果。
（2）name属性：元素名。如果需要将表单数据提交到服务器，则
必须提供name属性值，服务器将通过该属性值获取提交的数据。
（3）value属性：设置input标签的默认值。submit按钮和reset按钮

的value用来为设置按钮显示文字。
（4）size：元素的大小。
（5）checked：设置单选按钮或者复选框被选中。
（6）readonly：设置元素只读，不能输入。
（7）disabled：是否可用；添加该属性后，元素不可用。
（8）maxlength：允许输入的最大长度。

2．下拉框标签

作用：展现下拉列表，可以进行单选或者多选；需要结合子标签

指定每一个列表项。其中，标签的属性如下。 （1）name：用于确定将数据发送给服务器时的参数名称。 （2）multiple：若不写该属性，则默认是单选；若取值为multiple， 则表示多选。 （3）size：多选时，可见选项的数目。 （4）子标签：下拉列表中的每一个选项，属性如下。 ① selected：勾选当前列表项。 ② value：发送给服务器端的选项值。 ### 3．文本域标签 多行文本框，可以输入任意多的文本信息，属性如下。 （1）cols：文本域的列数。 （2）rows：文本域的行数。 接下来用form表单和table标签结合的方式完成一个简单的登录页面。