Html 基础知识回顾

TIP

HTML : 超文本标记语言
XML : 可扩展标记语言

Web标砖三层组成:

结构(html)
表现(css)
行为(javascript)

排版标签

排版标签主要和css搭配使用

h标签标题标签块元素 h1 --> h6, 字体越来越小, 权重越来越低, 字体粗 --> 字体细

<h1></h1> 一级标题

<h2></h2> 二级标题

<h3></h3> 三级标题

<h4></h4> 四级标题

<h5></h5> 无级标题

<h6></h6> 六级标题

<p></p> 段落标签块元素, 有外边距
<div></div> 块元素,独占一行
<span></span> 行内元素

提示

<p>标签和 <h>标签(h1~h6)有一个可选属性align,可以用来设置被包含文本的对齐方式，可选值有：

left：设置标题文字左对齐（默认值）
center：设置标题文字居中对齐
right：设置标题文字右对齐

HTML中一般不建议使用h标签的align对齐属性，可使用CSS样式设置。

<br /> 换行标签
<hr /> 水平线标签

<br />标签虽然可以实现换行的效果，但并不能取代结构标签<h>、<p>等。 <hr />是单标签，在网页中输入一个<hr />，就添加了一条默认样式的水平线。此外通过为<hr />标签设置属性和属性值，可以更改水平线的样式

html

<hr 属性="属性值" />

<hr/>其常用的属性有。

属性名	含义	属性值
align	设置水平线的对齐方式	可选择left、right、center三种值，默认为center，居中对齐显示。
size	设置水平线的粗细	以像素为单位，默认为2像素。
color	设置水平线的颜色	可用颜色名称、十六进制#RGB、rgb(r,g,b)。
width	设置水平线的宽度	可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%。

注意

在实际工作中，并不赞成使用<hr />的所有外观属性，最好通过CSS样式进行设置。

文本格式标签

在网页中，有时需要为文字设置粗体、斜体或下划线等一些特殊显示的文本效果，为此HTML提供了专门的文本格式化标签，使文字以特殊的方式显示，常用的文本格式化标签如表1所示。表1常用文本格式化标签

标签	显示效果
`<strong></strong>` 或者 `<b></b>`	文字以粗体方式显示
`<em></em>` 或者 `<i></i>`	文字以斜体方式显示
`<ins></ins>` 或者 `<u></u>`	文字以加下划线方式显示
`<del></del>` 或者 `<s></s>`	文字以加删除线方式显示
`<pre></pre>`	被包裹的内容会保留原格式, 例如全角空格, 换行,空格等都会保留, 称与格式化文本

如上所示的文本格式化标签都能显示相同的文本效果，但<strong>标签、<ins>标签、<em>标签、<del>标签更符合HTML结构的语义化，所以在HTML5中建议使用这四个标签设置文本样式。

文本样式标签

文本样式标签可以设置一些文字效果（如字体、加粗、颜色），让网页中的文字样式变得更加丰富，其基本语法格式如下。

html

<font 属性="属性值">文本内容</font>

上述语法中<font>标签常用的属性有3个:

属性名	含义
face	设置文字的字体，例如微软雅黑、黑体、宋体等
size	设置文字的加粗，可以取1到7之间的整数值
color	设置文字的颜色

文本语义标签

语义性很强

文本语义标签主要用于向浏览器和开发者描述标签的意义，是一些供机器识别的标签，访问者只能看到显示样式的差异。有些文本语义标签可以突出文本内容的层次关系，方便搜索引擎搜索，甚至提高浏览器的解析速度。在HTML5中，文本语义标签有很多，下面将列举time标签、mark标签、 code标签、cite标签，简单介绍文本语义标签的基本用法。

<time></time> time标签用于定义时间或日期，可以代表24小时中的某一时间。time标签有两个属性

datetime：用于定义相应的时间或日期。取值为具体时间（例如：14:00）或具体日期（例如：2025-09-01），不定义该属性时，由文本的内容给定日期或时间。
pubdate：用于定义time标签中的文档（或article元素）发布日期。取值一般为“pubdate”。例如:

html

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2016-02-14">情人节</time> 有个约会。</p>

效果

我们在每天早上 9:00 开始营业。

我在情人节有个约会。

<mark></mark> 作用是高亮被包裹的字符, 例如: 高亮
<cite></cite> cite标签可以创建一个引用，用于对文档引用参考文献的说明，一旦在文档中使用了该标签，被标注的文档内容将以斜体的样式展示在页面中，以区别于段落中的其他字符。例如: 引用
<code></code> 标签是一个短语标签，用来定义计算机代码文本。

例如:

html

<code>一段电脑代码 print("Hello World")</code>

效果: 一段电脑代码 print("Hello World")

注意

我们并不反对使用这个标签，但是如果您只是为了达到某种视觉效果而使用这个标签的话，我们建议您使用 CSS ，这样可能会取得更丰富的效果。

特殊字符标签

浏览网页时常常会看到一些包含特殊字符的文本，如数学公式、版权信息等。那么如何在网页上显示这些包含特殊字符的文本呢？在HTML中为这些特殊字符准备了专门的替代代码

特殊字符	字符代码	实体编号	描述
<	`<`	`<`	小于号
>	`>`	`>`	大于号
≤	`≤`	`≤`	小于等于号
≥	`≥`	`≥`	大于等于号
&	`&`	`&`	和号
"	`"`	`"`	引号
'	`'`	`'`	单引号（英文、IE不支持）
“	`“`	``	左双引号
”	`”`	``	右双引号
‘	`‘`	``	左单引号
’	`’`	``	右单引号
©	`&copy`	`©`	版权
®	`®`	`®`	注册商标
™	`™`	`™` or ``	商标
¥	`¥`	`¥`	人民币
$	`&dollar;`	`$`	美元符号
‰	`&permil;`	`‰`	千分率
°	`°`		摄氏度
±	`±`		正负号
×	`×`		乘号
÷	`÷`		除号
²	`²`		平方（上标）
³	`³`		立方（上标）

图像标签

html

<img src="url" alt="" title="" />

属性:

超链接

html

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

在上面的语法中，<a>标签是一个行内元素，用于定义超链接，href和target为其常用属性，具体介绍如下：

href：用于指定链接目标的url地址，当为<a>标签应用href属性时，它就具有了超链接的功能。
target：用于指定链接页面的打开方式，其取值有 _self和_blank两种，, 其中self为默认值，意为在原窗口中打开, _blank为在新窗口中打开.

小技巧

若需要指定整个网页内的a标签的 target属性, 只需要在 html 的<head>标签之间写

html

<base target="_blank" /> 
或 
<base target="_self" />

锚点链接

如果网页内容较多，页面过长，浏览网页时就需要不断地拖动滚动条来查看所需要的内容，这样不仅效率较低，而且不方便操作。为了提高信息的检索速度，HTML语言提供了一种特殊的链接——锚点链接。通过创建锚点链接，用户能够直接跳到指定位置的内容。示例代码如下：

html

<ul>
  <li><a href="#one">福田繁雄</a></li>
  <li><a href="#two">西摩·切瓦斯特</a></li>
  <li><a href="#three">冈特·兰堡</a></li>
  <li><a href="#four">原研哉</a></li>
  <li><a href="#five">田中一光</a></li>
</ul>

然后在文章中需要定位的地方用ID进行绑定,例如:
....
<h2 id="one">福田繁雄</h2>
<p>.....</p>

代码运行示例 anchor

表格 table

最基本的表格标签包括<table></table>、<tr></tr>、<td></td> 三者缺一不可;

<table></table>：用于定义一个表格的开始与结束。在<table>标签内部，可以放置表格的标题、表格行和单元格等。
<tr></tr>：用于定义表格中的一行，必须嵌套在<table></table>标签中，在<table></table>中包含几对<tr></tr>，就表示该表格有几行。
<td></td>：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对<tr></tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。

提示

默认情况下，表格的边框为0，宽度和高度（自适应）靠表格里的内容来支撑。

1.`<table>`标签属性

表格标签包含了大量属性，虽然大部分属性都可以使用CSS进行替代，但是HTML语言中也为<table>标签提供了一系列的属性，用于控制表格的显示样式

下列为<table>标签的常用属性:

属性	描述	常用属性值
border	设置表格的边框（默认border="0"为无边框）	像素
cellspacing	设置单元格与单元格之间的空间	像素（默认为2像素）
cellpadding	设置单元格内容与单元格边缘之间的空间	像素（默认为1像素）
width	设置表格的宽度	像素
height	设置表格的高度	像素
align	设置表格在网页中的水平对齐方式	left、center、right
bgcolor	设置表格的背景颜色	预定义的颜色值、十六进制#RGB、rgb(r,g,b)
background	设置表格的背景图像	url地址

2.`<tr>`标签属性

通过对<table>标签应用各种属性，可以控制表格的整体显示样式，但是制作网页时，有时需要表格中的某一行特殊显示，这时就可以为行标签<tr>定义属性

下列为<tr>标签的常用属性:

属性	描述	常用属性值
height	设置行高度	像素
align	设置一行内容的水平对齐方式	left、center、right
valign	设置一行内容的垂直对齐方式	top、middle、bottom
bgcolor	设置行背景颜色	预定义的颜色值、十六进制#RGB、rgb(r,g,b)
background	设置行背景图像	url地址

注意

在实际工作中均可用相应的CSS样式属性来替代<tr>标签的属性，这里了解即可。

3.`<td>`标签属性

通过对行标签<tr>应用属性，可以控制表格中一行内容的显示样式。但是，在网页制作过程中，想要对某一个单元格进行控制，就需要为单元格标签<td>定义属性

下列为<td>标签的常用属性:

属性名	含义	常用属性值
width	置单元格的宽度	像素
height	置单元格的高度	像素
align	置单元格内容的水平对齐方式	left、center、right
valign	置单元格内容的垂直对齐方式	top、middle、bottom
bgcolor	设置单元格的背景颜色	预定义的颜色值、十六进制#RGB、rgb(r,g,b)
background	设置单元格的背景图像	url地址
colspan	设置单元格横跨的列数（用于合并水平方向的单元格）	正整数
rowspan	设置单元格竖跨的行数（用于合并竖直方向的单元格）	正整数

注意

1、在<td>标签的属性中，重点掌握colspan和rolspan。其他的属性了解即可，不建议使用，这些属性均可用CSS样式属性替代。

2、当对某一个<td>标签应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。

3、当对某一个<td>标签应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。

4.`<th>`标签及其属性

应用表格时经常需要为表格设置表头，以使表格的格式更加清晰，方便查阅。表头一般位于表格的第一行或第一列，其文本加粗居中，如图1所示。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

下图为设置了表头的表格: table 可见表头的字体变粗了

提示

<th></th>标签与<td></td>标签的属性、用法完全相同，但是它们具有不同的语义。<th></th>用于定义表头单元格，其文本默认加粗居中显示，而<td></td>定义的为普通单元格，其文本为普通文本且水平左对齐显示。

5.表格的结构

<caption></caption> 表格标题, 写在<table></table>内

html

<table>
  <caption>学生信息表</caption>
  ....
</table>

<thead></thead>:用于定义表格的头部，必须位于<table></table>标签中，一般包含网页的logo和导航等头部信息。<thead>内必须有<tr>
<tfoot></tfoot>：用于定义表格的页脚，位于<table></table>标签中<thead></thead>标签之后，一般包含网页底部的企业信息等。
<tbody></tbody>：用于定义表格的主体，位于<table></table>标签中<tfoot></tfoot>标签之后，一般包含网页中除头部和底部之外的其他内容。

注意

一个表格只能定义一对<thead></thead>、一对<tfoot></tfoot>，但可以定义多对<tbody></tbody>，它们必须按<thead></thead>、<tfoot></tfoot>和<tbody></tbody>的顺序使用。之所以将<tfoot></tfoot>置于<tbody></tbody>之前，是为了使浏览器在收到全部数据之前即可显示页脚。

6.合并单元格

横向合并: colspan 跨列

纵向合并: rowspan 跨行

列表 ul ol dl

列表分为:

无序列表ul: 无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分,无序列表使用<ul>标签定义，内部可以嵌套多个<li>标签（<li>是列表项）

html

<ul>

  <li>列表项1</li>

  <li>列表项2</li>

  <li>列表项3</li>

......

</ul>

有序列表ol:有序列表是一种强调排列顺序的列表，使用<ol>标签定义，内部可以嵌套多个<li>标签。例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下：

html

<ol>

  <li>列表项1</li>

  <li>列表项2</li>

  <li>列表项3</li>

......

</ol>

定义列表dl: 定义列表与有序列表、无序列表父子搭配的不同，它包含了三个标签，即dl、dt、dd。定义有序列表的基本语法格式如下：

html

<dl>

<dt>名词1</dt>

  <dd>dd是名词1的描述信息1</dd>

  <dd>dd是名词1的描述信息2</dd>

  ...

  <dt>名词2</dt>

  <dd>dd是名词2的描述信息1</dd>

  <dd>dd是名词2的描述信息2</dd>

  ...

</dl>

注意：

1、<dl>、<dt>、<dd>三个标签之间不允许出现其他标签。

2、<dl>标签必须与<dt>标签相邻。

CSS控制列表样式

1. list-style-type属性

在CSS中，list-style-type属性用于控制列表项显示符号的类型，其取值有多种，它们的显示效果各不相同，具体如表1所示。

注意：由于各个浏览器对list-style-type属性的解析不同。因此，在实际网页制作过程中不推荐使用list-style-type属性。

2. list-style-image属性

一些常规的列表项显示符号并不能满足网页制作的需求，为此CSS提供了list-style-image属性，其取值为图像的url。使用list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观。

示例代码如下：

html

<head>
  <style type="text/css">
    ul { 
      list-style-image:url(1.png);
    }
  </style>
</head>

<body>
  <h2>栗子功效</h2>
  <ul>
    <li>抗衰老</li>
    <li>益气健脾</li>
    <li>预防骨质疏松</li>
  </ul>
</body>

运行效果。 list-style-image

通过图可以看出，列表项目图像和列表项没有对齐，这是因为list-style-image属性对列表项目图像的控制能力不强。因此，实际工作中不建议使用list-style-image属性，常通过为<li>设置背景图像的方式实现列表项目图像。

3. list-style-position属性

设置列表项目符号时，有时需要控制列表项目符号的位置，即列表项目符号相对于列表项内容的位置。在CSS中，list-style-position属性用于控制列表项目符号的位置，其取值有inside和outside两种，对它们的解释如下：

inside：列表项目符号位于列表文本以内。
outside：列表项目符号位于列表文本以外（默认值）。

示例代码如下：

html

<style type="text/css">
  .in {
    list-style-position:inside;
  }  
 .out {
    list-style-psition:outside;
  } 
  li {
    border:1px solid #CCC;
  }
</style>

运行示例代码，效果如图

list-style-position

可以看出，第一个无序列表的列表项目符号位于列表文本以内，第二个无序列表的列表项目符号位于列表文本以外。

4. list-style属性

在CSS中列表样式也是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-style中。使用list-style属性综合设置列表样式的语法格式如下：

html

list-style:列表项目符号 列表项目符号的位置 列表项目图像;

使用复合属性list-style时，通常按上面语法格式中的顺序书写，各个样式之间以空格隔开，不需要的样式可以省略。示例代码如下：

html

<style type="text/css">
  ul {
    list-style:circle inside;
  }
  .one {
    list-style: outside url(1.png);
  }
</style>

运行示例:

list-style

值得一提的是，在实际网页制作过程中，为了更高效地控制列表项显示符号，通常将list-style的属性值定义为none，然后通过为<li>设置背景图像的方式实现不同的列表项目符号。示例代码如下：

html

<style type="text/css">
  dd{
    list-style:none;   /*清除列表的默认样式*/
    height:26px;
    line-height:26px;
    background:url(2.png) no-repeat left center; /*为li设置背景图像 */
    padding-left:25px;
  } 
</style>

运行示例 list-style-2

通过图看出，每个列表项前都添加了列表项目图像。如果需要调整列表项目图像只需更改标签的背景属性即可。

Html 基础知识回顾 ​

标签 ​

排版标签 ​

文本格式标签 ​

文本样式标签 ​

文本语义标签 ​

特殊字符标签 ​

图像标签 ​

超链接 ​

锚点链接 ​

表格 table ​

1.<table>标签属性 ​

2.<tr>标签属性 ​

3.<td>标签属性 ​

4.<th>标签及其属性 ​

5.表格的结构 ​

6.合并单元格 ​

列表 ul ol dl ​

CSS控制列表样式 ​

1. list-style-type属性 ​

2. list-style-image属性 ​

3. list-style-position属性 ​

4. list-style属性 ​

Html 基础知识回顾

标签

排版标签

文本格式标签

文本样式标签

文本语义标签

特殊字符标签

图像标签

超链接

锚点链接

表格 table

1.`<table>`标签属性

2.`<tr>`标签属性

3.`<td>`标签属性

4.`<th>`标签及其属性

5.表格的结构

6.合并单元格

列表 ul ol dl

CSS控制列表样式

1. list-style-type属性

2. list-style-image属性

3. list-style-position属性

4. list-style属性