HTML学习笔记（2）：HTML标签

October 05, 2021 16191

基本标签

对于以下HTML的基本骨架：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

所包含的标签有html、head、body。

html标签

HTML标签，页面中最大的标签，作为文档的根标签。

支持的属性主要为lang，表示文档的语言，支持的值主要为”en”：英语；”zh-CN”：中文；……

head标签

文档的头部，一般在head标签中我们必须要设置的标签是title。

head标签里面，支持的页面配置有：字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等。

head标签中的常用标签有：

  • <title>：指定整个网页的标题，在浏览器最上方显示。
  • <base>：为页面上的所有链接规定默认地址或默认目标。
  • <meta>：提供有关页面的基本信息
  • <link>：定义文档与外部资源的关系。

base标签

base标签用于指定基础的路径。指定之后，所有的a链接都是以这个路径为基准。如：

1
<base href="/">

meta标签

meta表示“元”，即基本的配置项目。常见的几种meta标签如下：

（1）字符集 charset：

1
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

指定文档的编码方式，也可以简写为：

1
<meta charset="UTF-8">

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312等。

（2）视口viewport：

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width表示视口宽度等于屏幕宽度。视口的概念在学习web移动端时再深入了解。

（3）定义“关键词”：

定义一些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。如：

1
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

（4）定义“页面描述”：

只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。如：

1
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

（5）自动跳转：

1
<meta http-equiv="refresh" content="3;http://www.baidu.com">

这个meta标签的作用是3秒后跳转到百度主页。

link标签

最常用的是链接CSS样式表：

1
<link rel="stylesheet" type="text/css" href="*.css"/>

其中rel的取值有很多，可以链接多种类型的资源。

body标签

文档的主体：元素包含文档的所有内容，页面内容基本都是放到body里面的。

<body>标签的主要属性有：

  • bgcolor：设置整个网页的背景颜色。
  • background：设置整个网页的背景图片。
  • text：设置网页中的文本颜色。
  • leftmargin：网页的左边距。IE浏览器默认是8个像素。
  • topmargin：网页的上边距。
  • rightmargin：网页的右边距。
  • bottommargin：网页的下边距。
  • link：表示网页上的链接默认显示的颜色，
  • alink：表示鼠标点击链接但是还没有松开时的颜色。
  • vlink：表示点击完成之后链接显示的颜色。

排版标签

排版标签是用于控制页面元素排版的标签，主要有：

  • <hx>
  • <p>
  • <hr />
  • <br />
  • <div>
  • <span>
  • <center>
  • <pre>

hx标签

表示标题，其中x可从1~6中取值。

<h1>定义最大的标题，<h6>定义最小的标题。具有align属性。

p标签

p标签可以把 HTML 文档分割为若干段落。在网页中如果要把文字有条理地显示出来，离不开段落标签。就如同我们平常写文章一样，整个网页也可以分为若干个段落。

p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。比如标题h就不能放在里面。

HTML将所有的标签分为两种：

  • 文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）
  • 容器级标签：div、h、li、dt、dd。容器级标签里可以放置任何东西。

hr标签

hr标签为水平分隔线可以在视觉上将文档分隔成各个部分。在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。

其主要属性：

  • align=”属性值”：设定线条置放位置。属性值可选择：left right center。
  • size=”2” ：设定线条粗细。以像素为单位，内定为2。
  • width=”500”或width=”70%”：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。
  • color=”#0000FF”：设置线条颜色。
  • noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。

br标签

br标签为换行标签，使某段文本强制换行显示。

div和span标签

div和span是非常重要的标签，div的语义是division（分割）； span的语义就是span（范围、跨度）：

  • div标签：可以把标签中的内容分割为独立的区块。必须单独占据一行。
  • span标签：和div的作用一致，但不换行。

div和span的区别

  • <span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的，即<span>是内联的。
  • 如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。
  • div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。 div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。
  • span也是表达“小区域、小跨度”的标签，但只是一个文本级的标签。 就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

center标签

center标签是内容居中标签。只要是在这个标签里面的内容，都会居于浏览器的中间。

但是在HTML5里面，center标签不建议使用，建议使用css布局来实现。

pre标签

pre标签是预定义标签，标签内的内容将保留标签内部所有的空白字符（空格、换行符），原封不动地输出结果（告诉浏览器不要忽略空格和空行）。

在真正排网页过程中，<pre>标签几乎不用。

字体标签

字体标签主要有： <font>、 <b>、 <u> 、<sup> 、<sub>。

font标签

font标签在新版中其实已经被废弃了。

可以通过该标签为文本设置字体，主要用到以下属性：

  • color=”红色”或color=”#ff00cc”或color=”new rgb(0,0,255)”：设置字体颜色。 设置方式：单词、#ff00cc、rgb(0,0,255)。
  • size：设置字体大小。 取值范围只能是1至7。取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，那就只能通过css样式来解决。
  • face=”微软雅黑”：设置字体类型。

如：

1
<font face="微软雅黑" color="#FF0000" size="10">文本</font>

该标签废弃的原因是我们更希望HTML用来控制内容而非样式，样式的控制应当由CSS来做。

其他字体标签

其他常用的设置字体的标签：

  • <b>和<strong>标签：粗体标签，其中<strong>标签在新版中已被弃用。
  • <u>标签：下划线标记。
  • <s>和<del>标签：删除线标记。
  • <i>和<em>：斜体标记。
  • <sup>标签：上标标签。
  • <sub>标签：下标标签。

功能标签

像页面组件一样提供一些特殊功能的标签，主要有：

  • 列表标签：<ul>、<ol>、<dl>
  • 表格标签：<table>
  • 框架标签及内嵌框架：<iframe>
  • 表单标签：<form>
  • 多媒体标签
  • 滚动字幕标签：<marquee>

列表标签

无序列表

无序列表<ul>，无序列表中的每一项是<li>。如：

1
2
3
4
5
<ul>
	<li>默认1</li>
	<li>默认2</li>
	<li>默认3</li>
</ul>

代码效果：

  • 默认1
  • 默认2
  • 默认3

注意：

  • li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
  • ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

属性值主要有type，它规定了项目符号，属性值可以选： disc（实心原点，默认），square（实心方点），circle（空心圆）。

该属性值可以用在ul中，这样将给无序列表设置统一的项目符号，也可以用在li中，这样将单独为每个项目设置项目符号。

无序列表是可以嵌套的，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul>
	<li><b>北京市</b>
		<ul>
			<li>海淀区</li>
			<li>朝阳区</li>
			<li>东城区</li>
		</ul>
	</li>
	<li><b>广州市</b>
		<ul>
			<li>天河区</li>
			<li>越秀区</li>
		</ul>
	</li>
</ul>

代码效果：

  • 北京市
    • 海淀区
    • 朝阳区
    • 东城区
  • 广州市
    • 天河区
    • 越秀区

有序列表

有序列表<ol>，里面的每一项是<li>，用法同无序列表。

有序列表与无序列表的区别是无序列表用项目符号标记一个项目，而有序列表将自动为项目编号。

有序列表的属性主要也是type，其值可以是：1（默认）、a、A、i、I，即编号的形式（数字、小写字母、大写字母、小写罗马数字、大写罗马数字），同时可结合start属性表示从几开始编号。

和无序列表一样，有序列表也是可以嵌套的。

定义列表

定义列表是<dl>标签，没有属性。dl的子元素只能是dt和dd。如：

在一个dl中，有若干条目dt，而dd是描述dt的。定义列表用法非常灵活，可以一个dt配很多dd，如：

1
2
3
4
5
6
7
8
9
<dl>
	<dt>北京</dt>
	<dd>国家首都，政治文化中心</dd>
	<dd>污染很严重，PM2.0天天报表</dd>
	<dt>上海</dt>
	<dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
	<dt>广州</dt>
	<dd>中国南大门，有珠江、小蛮腰</dd>
</dl>

还可以拆开，让每一个dl里面只有一个dt和dd，这样子感觉条理更清晰：

1
2
3
4
5
6
7
8
9
10
11
12
13
<dl>
	<dt>北京</dt>
	<dd>国家首都，政治文化中心</dd>
	<dd>污染很严重，PM2.0天天报表</dd>
</dl>
<dl>
	<dt>上海</dt>
	<dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
</dl>
<dl>
	<dt>广州</dt>
	<dd>中国南大门，有珠江、小蛮腰</dd>
</dl>

dt、dd都是容器级标签，想放什么都可以。因此，用什么标签，不是根据样子来决定，而是语义（语义本质上是逻辑结构）。

表格标签

表格标签用<table>表示。 一个表格<table>是由每行<tr>组成的，每行是由每个单元格<td>组成的。因此说，一个表格是由行组成的，而行是由列（单元格）组成的。

表格标签虽然使用场景有限，但是其的属性非常多。

table的属性：

  • border：边框。像素为单位。
  • width：宽度。像素为单位。
  • height：高度。像素为单位。
  • bordercolor：表格的边框颜色。
  • align：表格的水平对齐方式。属性值可以填：left right center。 注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置。
  • cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。 注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir=”rtl”，那就指的是内容到右边那条线的距离。
  • cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0。
  • bgcolor=”#99cc66”：表格的背景颜色。
  • background=”路径src/…”：背景图片。 背景图片的优先级大于背景颜色。
  • bordercolorlight：表格的上、左边框，以及单元格的右、下边框的颜色。
  • bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色 这两个属性的目的是为了设置3D的效果。
  • dir：公有属性，单元格内容的排列方式(direction)。 可以 取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left） 既然说dir是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。

tr的属性：

  • dir：公有属性，设置这一行单元格内容的排列方式。可以取值：
    • ltr：从左到右（left to right，默认）
    • rtl：从右到左（right to left）
  • bgcolor：设置这一行的单元格的背景色。 注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
  • height：一行的高度。
  • align=”center”：一行的内容水平居中显示，取值：left、center、right。
  • valign=”center”：一行的内容垂直居中，取值：top、middle、bottom。
    td的属性：
  • align：内容的横向对齐方式。属性值有：left、right、center。如果想让每个单元格的内容都居中，这个属性太麻烦，可以用CSS来解决。
  • valign：内容的纵向对齐方式。属性值有：top、middle、bottom。
  • width：绝对值或者相对值(%)。
  • height：单元格的高度。
  • bgcolor：设置这个单元格的背景色。
  • background：设置这个单元格的背景图片。
  • colspan：横向合并。例如colspan=”2”表示当前单元格在水平方向上要占据两个单元格的位置。
  • rowspan：纵向合并。例如rowspan=”2”表示当前单元格在垂直方向上要占据两个单元格的位置。

此外还有<th>标签，即加粗的单元格，相当于<td> + <b>，属性同td标签。

capital标签：表格的标题，作为table标签的第一个子标签出现，属性align表示标题相对于表格的位置，属性取值可以是：left、center、right、top、bottom。

表格的<thead>标签、<tbody>标签、<tfoot>标签可有可无，即表格头、表格体、表格脚，这三部分的代码书写顺序不会影响显示顺序，可以打乱书写，但是显示时依然按照<thead>标签、<tbody>标签、<tfoot>标签的顺序来显示内容，并且三部分内容分批加载，如果没有使用这三个标签，则会等所有表格内容加载完了再一起显示。

框架标签

frameset和frame

frameset标签是框架集合，其中可以放置多个页面。frameset和body标签不能同时存在，只能使用其一，因为frameset可以包含多个页面，而body只能有一个页面。

frameset将页面分栏从而可以嵌入多个页面，分栏通过属性rows和cols来实现，其属性值为一个字符串，其中包含了若干由逗号分隔的值，表示分栏的尺寸，尺寸可以绝对表示（整数）也可以相对表示（百分数），如rows=”200,*“、rows=”30%,*“，其中*表示最后一栏占据屏幕剩余的尺寸。

可以将页面水平分栏后将某一栏再垂直分栏，只需要嵌套frameset即可，将frameset中直接放置页面的位置放置frame标签，需要继续分栏的位置嵌套frameset标签继续分栏即可。

frame标签代表一个框架，可以放置一个页面，主要有以下属性：

  • scrolling=”no”：是否需要滚动条。默认值是true。
  • noresize：不可以改变框架大小。默认情况下，单个框架的边界是可以拖动的，这样的话，框架大小就不固定了。如果用了这个属性值，框架大小将固定。
  • bordercolor=”#00FF00”：给框架的边框定义颜色。这个属性在框架集合<frameset>中同样适用。 颜色这个属性在IE浏览器中生效，但是在google浏览器中无效。
  • frameborder=”0”或frameborder=”1”：隐藏或显示边框（框架线）。
  • name：给框架起一个名字。

使用name属性给框架起名字将可以使用a标签的target字段，使链接在该框架中打开。

iframe标签

内嵌框架用<iframe>表示，嵌入在一个页面上的框架，只有部分浏览器支持，使用需注意。<iframe>是<body>的子标签。其主要属性有：

  • src=”subframe/the_second.html”：内嵌的那个页面。
  • width=800：宽度。
  • height=150：高度。
  • scrolling=”no”：是否需要滚动条。默认值是true。
  • name=”mainFrame”：窗口名称。公有属性。

从其名称也可以看出，这个标签是内联的，不是块级标签。

表单标签

表单标签用<form>表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。

其主要属性：

  • name：表单的名称，用于JS来操作或控制表单时使用。
  • id：表单的名称，用于JS来操作或控制表单时使用。
  • action：指定表单数据的处理程序，一般是PHP，如：action=”login.php”。
  • method：表单数据的提交方式，一般取值：get（默认）和post。
  • enctype：表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。该属性只能在POST方式下使用。

input标签

输入标签（文本框），作为form的子标签使用，用于接收用户输入。

其主要属性：

  • type=”属性值”：文本类型。属性值可以是：
    • text（默认）：文本输入。
    • password：密码类型。
    • radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是名字）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
    • checkbox：多选按钮，name 属性值相同的按钮作为一组进行选择。
    • checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签设置为type=”radio”或者type=checkbox时，可以用这个属性。属性值也是checked，可以省略。
    • hidden：隐藏框，在表单中包含不希望用户看见的信息。
    • button：普通按钮，结合js代码进行使用。
    • submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
    • reset：重置按钮，清空当前表单的内容，并设置为最初的默认值
    • image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
    • file：文件选择框。 提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
  • value=”内容”：文本框里的默认内容（已经被填好了的）。
  • size=”50”：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。 注意size属性值的单位不是像素哦。
  • readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。 用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
  • disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。

select标签

下拉列表标签。

<select>标签里面的每一项用<option>表示。select标签和ul、ol、dl一样，都是组标签。

<select>标签的属性主要有：

  • multiple：可以对下拉列表中的选项进行多选。属性值为 multiple，也可以没有属性值。也就是说，既可以写成 multiple=””，也可以写成multiple=”multiple”。
  • size=”3”：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。

<option>标签的属性主要有：

  • selected：预选中。没有属性值。

textarea标签

多行文本输入框。主要属性有：

  • rows=”4”：指定文本区域的行数。
  • cols=”20”：指定文本区域的列数。
  • readonly：只读。

要注意该输入框内的默认值不是通过value属性指定的，它是一对标签，它的默认显示的文本是标签内的文本，如：

1
2
3
<form>
	<textarea name="txtInfo" rows="4" cols="20">多行文本框</textarea>
</form>

要注意的是，标签内的文本不像其他的HTML代码一样会忽略/合并空白符，标签内文本包含的空白符（包括换行）都会原封不动作为文本框的内容。

fieldset标签

该标签用于表单语义化，将部分表单内容整合进一个域中，同时用legend标签标记域的标题，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form>
	<fieldset>
		<legend>账号信息</legend>
		姓名：<input value="大森" ><br>
		密码：<input type="password" value="pwd"><br>
	</fieldset>
	<fieldset>
		<legend>其他信息</legend>
		性别：<input type="radio" name="gender" value="male" checked="">男
			  <input type="radio" name="gender" value="female" >女<br>
		爱好：<input type="checkbox" name="love" value="eat">吃饭
			  <input type="checkbox" name="love" value="sleep">睡觉
			  <input type="checkbox" name="love" value="bat">打豆豆
	</fieldset>
</form>

代码效果：

账号信息 姓名：
密码：
其他信息 性别：男 女
爱好：吃饭 睡觉 打豆豆

label标签

作为选框的说明文字。

如果我们这样写选框：

1
2
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女

代码效果：
男
女

我们只有通过点击文本前的小圆点才能选中项目，点击“男”和“女”的文本是选不中选项的，也就是选框和它的文字说明在语义上不是一体的。

如果使用label标签：

1
2
<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>

代码效果：

通过label标签的for属性和选框的id绑定，就可以点击说明文本“男”和“女”来选中选项了。

实际上，任何表单元素都可以绑定label，只是在单选框、多选框这里更常用。

多媒体标签

多媒体包含：音频、视频、Flash。网页上的多媒体大多都是Flash格式的。 .wmv、.dat、.mob、.rmvb等视频格式，在网页上不能直接播放，需要安装第三方的插件才可以播放。

bgsound标签

为页面添加背景音乐。成对标签。

其属性：

  • src=”音乐文件的路径”
  • loop=”-1”：属性值代表播放次数，-1代表循环播放。

要注意兼容性问题，某些浏览器无法播放。

embed标签

播放多媒体文件（音频、视频等），主要应用Netscape浏览器，它不是W3C规范。成对标签。

视频格式可以支持 mp4、wav等，但不是所有视频格式都支持。

该标签播放多媒体通过flash来实现，主要属性：

  • src=”多媒体文件的路径”。
  • loop=”-1”：属性值代表播放次数，-1代表循环播放。
  • autostart=”false”：打开网页时，禁止自动播放。默认值是true。
  • volume=”100”：设置默认的音量大小，可能不起作用。
  • width：指Flash文件的宽度。
  • height：指Flash文件的高度。
  • quality：指Flash的播放质量，质量有高有低 hight low。
  • pluginspage：如果指定的Flash插件不存在，则从pluginspage指定的地方进行下载。
  • type：指定Flash的文件格式类型。
  • wmode：指Flash的背景是否可以透明，取值：transparent是透明的。

object标签

播放多媒体文件（音频、视频等），主要应用IE浏览器，它是W3C规范。

其主要属性：

  • classid：指定Flash插件的ID号，一般存在于注册表中。
  • codebase：如果Flash插件不存在，则从codebase指定的地址下载。

object标签中嵌套<param>标签，主要作用是设置具体的详细参数。

在网页中插入Flash时，为了同时兼容多种浏览器，需要将<object>标签和<embed>标签标记一起使用，但使用的顺序是：<object>中嵌套<embed>标记。如：

1
2
3
4
5
6
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="778" height="202">
  <param name="movie" value="images/banner.swf">
  <param name="quality" value="high">
  <param name="wmode" value="transparent">
  <embed src="images/banner.swf" width="778" height="202" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>

由于flash已经接近淘汰，HTML5几乎能够完全代替该标签的功能，越来越少人使用object标签，因此不过多关注了。

滚动字幕标签

即marquee标签，如果在这个标签里设置了内容，那么，打开网页时，内容会像弹幕一样自动移动。

其主要属性：

  • direction=”right”：移动的目标方向。属性值可以是：left（从右向左移动，默认值）、right（从左向右移动）、up（从下向上移动）、down（从上向下移动）。
  • behavior=”slide”：行为方式。属性值可以是：slide（只移动一次）、scroll（循环移动，默认值）、alternate（循环移动）。 alternate和scroll属性值都是循环移动，区别在于：假设在direction=”right”的情况下，behavior=”scroll”表示不断重复从左到右，behavior=”alternate”表示从左到右之后再从右到左回来，再重复。
  • scrollamount=”30”：移动的速度。
  • loop=”3”: 循环多少圈。负值表示无限循环。
  • scrolldelay=”1000”：移动一次休息多长时间。单位是毫秒。

例子：

1
<marquee direction="right" scrollamount="30" scrolldelay="1000">这是一条滚动字幕！！！</marquee>

代码效果：
这是一条滚动字幕！！！

其他标签

其他常用的标签主要有超链接和图片。

超链接标签

外部链接

外部链接如：

1
2
<a href="02页面.html">点击进入另外一个文件</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

作用是链接到另一个路径，点击超链接文本跳转到指定路径。

锚链接

锚链接如：

1
<a href="#top">回到顶部</a>

为页面元素指定name属性，使用锚链接可以跳转到页面的指定位置。

邮件链接

邮件链接如：

1
<a href="mailto:xxx@163.com">点击进入我的邮箱</a>

点击之后，会弹出outlook，实际较少使用邮件链接。

属性

超链接有以下主要属性：

  • href：目标URL
  • title：悬停文本。
  • name：主要用于设置一个锚点的名称。
  • target：告诉浏览器用什么方式来打开目标页面。

其中target属性有以下几个值：

  • _self：在同一个网页中显示（默认值）。
  • _blank：在新的窗口中打开。
  • _parent：在父窗口中显示
  • _top：在顶级窗口中显示

图片标签

图片标签即img标签，是一个单标签，如：

1
<img src="图片URL" />

能够插入的图片类型有jpg(jpeg)、gif、png、bmp等。

img标签的常用属性有：

  • width：图像的宽度。
  • height：图像的高度。
  • alt：当图片不可用（无法显示）的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思，代表替换资源。
  • title：提示性文本。鼠标悬停时出现的文本。
  • align：图片和文字混排时的对齐方式。属性取值可以是：bottom（默认）、center、top、left、right。
    • align=””：图片和文字底端对齐。
    • align=”center”：图片和文字水平方向上居中对齐。
    • align=”top”：图片与文字顶端对齐。
    • align=”left”：图片在文字的左边。
    • align=”right”：图片在文字的右边。

废弃标签

HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。因此被废弃的标签，都是这些的样式标签。比如font标签、水平线标签<hr />、换行标签<br />。

网页中99.9999%需要换行的时候，是因为另起了一个段落，所以要用p，而不要用<br />。不到万不得已，不要用br标签。

标准的div+css页面，只会用到种类很少的标签，如：div、p、h1、span、a、img、ul、ol、dl、input。关于样式的一切都交给CSS来控制。

转义字符

HTML中定义的转义字符：

  • &nbsp;：空格 （non-breaking spacing，不断打空格）。
  • &lt;：小于号<。
  • &gt;：大于号>。
  • &amp;：符号&。
  • &quot;：双引号。
  • &apos;：单引号。
  • &copy;：版权©。
  • &trade;：商标™。
  • &yen;：人民币￥。
  • &deg;：度°。
  • &plusmn;：正负号±。
  • &times;：乘号×。
  • &divide;：除号÷。
  • &sup;：上标x，x可以为1、2、3。
  • &#32464;：Unicode字符，#32464是汉字“绐”的Unicode编码。


* 你好，我是大森。如果文章内容帮到了你，你可通过下方付款二维码支持作者 *