HTML_03_列表

最新推荐文章于 2024-11-17 17:34:07 发布

原创最新推荐文章于 2024-11-17 17:34:07 发布 · 655 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#HTML #TABLE

HTML/H5 专栏收录该内容

14 篇文章

订阅专栏

HTML 样式- CSS

CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，

它定义如何显示 HTML 元素，用于控制Web页面的外观。

通过使用CSS实现 页面的内容 与 表现形式 分离，极大提高了工作效率。

样式存储在样式表中，通常放在<head>部分或存储在 外部CSS文件中。

作为网页标准化设计的趋势，CSS取得了浏览器厂商的广泛支持，正越来越多的被应用到网页设计中去。

网页现在的新标准是W3C。目前的模式是html+css+javascript，

如何理解呢，就是:

html是网页的结构，

CSS是网页的样式，

javascript是行为。

结构就是盖房子先要把结构建出来，然后用CSS来装饰。

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.

下面看一个非常复杂的CSS(只是看看).

代码如下

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="30">
	<meta name="description" content="免费零基础教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作列表</title>
</head>
<body>

<div style="position:relative;"> 

  <div style="opacity:0.5;position:absolute;left:50px;top:-30px;width:300px;height:150px;background-color:#40B3DF">
  </div> 

  <div style="opacity:0.3;position:absolute;left:120px;top:20px;width:100px;height:200px;background-color:#8AC007">
  </div> 

  <div style="margin-top:30px;width:360px;height:130px;padding:20px;border-radius:10px;border:10px solid #EE872A;font-size:120%;"> 

      <h2>只有我不在的城市,龙与虎</h2> 

      <div style="letter-spacing:12px;font-size:15px;position:relative;left:25px;top:10px;">来自新世界,来自深渊</div> 

      <div style="color:#40B3DF;letter-spacing:12px;font-size:15px;position:relative;left:25px;top:20px;">未闻花名, 
            <span style="color:#ffffff;background-color:#B4009E;"> 轻音少女</span>
      </div> 

      <div style="color:#000000;letter-spacing:-1px;font-size:15px;position:relative;top:15px;">
      来自风平浪静的明天...
      </div> 

    </div>
</div>

</body>
</html>

效果如下

尝试一下 - 实例

HTML使用样式
本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="30">
	<meta name="description" content="免费零基础教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作列表</title>
	<style type="text/css">
		body{
			background-color: rgb(9,7,26);
		}
		h1{
			color: white;
		}
		p{
			color: rgb(113,112,127);
		}
	</style>
</head>
<body>
<h1>未闻花名</h1>
<p>我们仍未知道那年夏天所看见的花的名字</p>

</body>
</html>

效果如下:

本例演示如何使用样式属性做一个没有下划线的链接。
如何使用 style 属性制作一个没有下划线的链接。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="30">
	<meta name="description" content="免费零基础教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作列表</title>
</head>
<body>

点击观看<a style="text-decoration:none;" href="http://baidu.com/s?wd=anohana">未闻花名</a>1080P
</body>
</html>

效果如下:

链接到一个外部样式表
本例演示如何标签链接到一个外部样式表。

CSS代码如下:

beyondbasestyle.css

body{
	background-color: rgb(9,7,26);
}
h1{
	color: white;
}
p{
	color: rgb(113,112,127);
}

html36_.html代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="30">
	<meta name="description" content="免费零基础教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作列表</title>
	
	<link rel="stylesheet" type="text/css" href="beyondbasestyle.css">
</head>
<body>

<h1>未闻花名</h1>

<p>我们仍未知道那年夏天所见到的花的名字</p>

</body>
</html>

如何使用CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件.

在本站的HTML教程中我们使用了内联CSS样式来介绍实例，

这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。

使用内联样式的方法是在相关的标签中使用样式属性。

样式属性可以包含任何 CSS 属性。

以下实例显示出如何改变段落的颜色和左外边距。

   <p style="color:red;margin-left:80px;">This is a paragraph.</p> 
 

效果如下:

HTML样式实例 - 背景颜色

背景色属性（background-color）定义一个元素的背景颜色：

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="30">
	<meta name="description" content="免费零基础教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作列表</title>
</head>
<body style="background-color:rgb(9,7,26);">

<h1 style="background-color:white;">未闻花名</h1>

<p style="background-color:rgb(190,190,190);">我们仍未知道那年夏天所见到的花的名字</p>
</body>
</html>

效果如下:

早期背景色属性（background-color）是使用 bgcolor 属性定义。现已弃用!

HTML 样式实例 - 字体, 字体颜色，字体大小

我们可以使用font-family(字体),color(颜色) 和 font-size(字体大小)属性来定义字体的样式:

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="30">
	<meta name="description" content="免费零基础教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作列表</title>
</head>

<body>

<h2 style="font-family:verdana;">verdana是96年微软创造的字体</h2>

<p style="font-family:arial;color:#1782d2;font-size:20px;">Arial字体是无衬线体TrueType字型</p>

</body>
</html>

效果如下:

千万注意:

现在通常使用font-family(字体),color(颜色) 和 font-size(字体大小)属性来定义文本样式,

而再也不是使用<font>标签了,已弃用!!!

HTML 样式实例 - 文本对齐方式

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="30">
	<meta name="description" content="免费零基础教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作列表</title>

	<link rel="stylesheet" type="text/css" href="beyondbasestyle.css">
</head>

<body>
<h1 style="text-align:center;">未闻花名</h1>
<br/><br/>
<p style="text-align:center;">Copyright © 2018 Powered by beyond</p>
</body>
</html>

效果如下:

文本对齐属性 text-align取代了旧标签 <center> 。

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。

你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
	<style type="text/css">
		body{
			background-color: rgb(9,7,26);
		}
		h1{
			color: white;
		}
		p{
			color: rgb(113,112,127);
		}
	</style>
</head>

效果如下:

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。

使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。Cool~

    <head>
   
 <link rel="stylesheet" type="text/css" href="beyondbasestyle.css">
   
 </head>

HTML 样式标签

标签	描述
<style>	定义文本样式
<link>	定义资源引用地址

已弃用的标签和属性

在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。

这些标签将不支持新版本的HTML标签。

不建议使用的标签有: <font>, <center>, <strike>

不建议使用的属性: color 和 bgcolor.

附上一些CSS中不太重要的概念:

两列等高 和 三列等高 的几种方式， 等高布局 的优缺点。

如何 转换现有网页、设置新闻网页的样式、设置日历样式、设置菜单样式、创建打印样式多列布局 等。

《CSS禅意花园》

CSS Zen Garden(CSS禅意花园) 讨论了网站“CSS禅意花同”及其最基本的主题，包含正确的标记结构和灵活性规划等。

每章剖析“CSS禅意花园”收录的6件设计作品，这些作品围绕一个主要的设计概念展开，如文字的使用等。

通过探索36件设计作品面临的挑战和解决的问题，读者将洞悉主要的Web设计原则以及它们运用的CSS布局技巧，

理解CSS设计的精髓，恰当地处理图形和字体来创建界面优美、性能优良且具有强大生命力的网站。

讨论了核心的CSS技术，例如图像、链接、列表操纵、表单设计、数据表格设计以及纯CSS布局。

讨论招数、过滤器、bug和bug修复

始终贯彻 三层分离 的思想。使用html、css设计符合现代 web标准 的网页

对 属性、标记、标记属性 和实现做了深入的研究，在 浏览器支持和设计原则 等实际问题上也有独到的见解。你所需要的就是HTML 4.0的知识即可以为 网站布局和分页 创建 简明而且易于维护的脚本 ，同时兼具桌面系统的 美观性和可控性 。

基于标准的设计的核心思想,为你的网站最终确定一个合理的设计与开发方法。

创建一个访问快速、低成本维护和开发、更多用户的网站,帮助你用新技术使css布局适应多个浏览器,使网站内容更容易被搜索和访问到。

HTML 图像

使用 <img> 标签定义 HTML 页面中的图像。

<img> 标签有两个必需的属性：src 和 alt。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="30">
	<meta name="description" content="免费零基础教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作列表</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestyle.css">
</head>

<body>
<h1>未闻花名</h1>
<br/><br/>

<div style="text-align:center"><img border="0" alt="美国往事" width="300" height="298" src="http://localhost/static/images/jennifer.png">
</div>

<p>Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:

插入图像

上面的实例演示如何在网页中显示图像。

从不同的位置插入图片
还可以将其他文件夹或服务器的图片显示到网页中。

HTML 图像- 图像标签（<img>）和源属性（src）

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。

src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

    <img src="
    url" alt="
    beyond">

URL 指存储图像的位置。

如果名为 "beyond.gif" 的图像位于 localhost 的static文件夹下的 images 目录中，

那么其 URL 为http://localhost/static/images/beyond.gif

浏览器将图像显示在文档中图像标签出现的地方。

如果你将图像标签置于两个段落之间，

那么浏览器会首先显示第一个段落，然后显示图片，

最后显示第二段。

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

    <img src="beyond.gif" alt="BEYOND">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。

此时，浏览器将显示这个替代性的文本而不是图像。

为页面上的图像都加上替代性文本属性是个好习惯，这样有助于更好的显示信息，

并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 图像- 设置图像的高度与宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素:

    <img src="loli.jpg" alt="a cute girl" width="520" height="520">

提示: 指定图像的高度和宽度的一个很好的习惯。

如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。

如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

基本的注意事项 - 有用的提示：

注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。

加载图片是需要时间的，所以我们的建议是：慎用图片。

注意: 加载页面时，要注意插入页面图像的路径，

如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

HTML 图像标签

标签	描述
<img>	定义图像
<map>	定义图像地图
<area>	定义图像地图中的可点击区域

HTML 表格

HTML 表格实例:

id	anime name	actress
1	未闻花名	面码
2	龙与虎	逢坂大河
3	轻音少女	平泽唯
4	可塑性记忆	艾拉

在线实例

表格
这个例子演示如何在 HTML 文档中创建表格。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="10">
	<meta name="description" content="免费零基础教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作列表</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">
</head>

<body>

<p class="fontStyleNormal">
	表格从table标签开始,行是从tr标签开始,列是从td标签开始
</p>

<div>
	<table border="1">
		<tr>
			<td>未闻花名</td>
		</tr>
	</table>
	<br/>

	<table border="1">
		<tr>
			<td>67</td>
			<td>520</td>
			<td>1314</td>
		</tr>
	</table>
	<br/>

	<table border="1">
		<tr>
			<td>a1</td>
			<td>a2</td>
			<td>a3</td>
		</tr>

		<tr>
			<td>b1</td>
			<td>b2</td>
			<td>b3</td>
		</tr>
	</table>
</div>

<br/>
<p>Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

引用的beyondbasestylewhite.css如下:

@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One|Libre+Baskerville:400,400italic);


h1{
	color: white;
	text-align: center;
}
.fontStyleNormal{
	color: rgba(168,168,168,1);
	font-style: normal;
	text-align: center;
}
.divAlignCenter{
	text-align: center;
}

div{
	text-align: center;
}
table{
	margin:0px auto;
}
p{
	color: rgba(113,112,127,0.55);
	font-size: 18px;
	text-align: center;
	
	font-family: 'Libre Baskerville', sans-serif;
	font-style: italic;
}

a{
	color: rgba(113,112,127,1);
	font-style: normal;
}

效果如下:

HTML 表格

表格由<table>标签来定义。

每个表格均有若干行（由<tr> 标签定义），

每行被分割为若干单元格（由<td>标签定义）。

字母 td 指表格数据（table data），即数据单元格的内容。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格的基本结构：

<table>…</table>：定义表格

<th>…</th>：定义表格的标题栏（文字加粗）

<tr>…</tr>：定义表格的行

<td>…</td>：定义表格的列

表格实例

    <table border="1">
    
<tr>
    
<td>row 1, cell 1</td>
    
<td>row 1, cell 2</td>
    
</tr>
   
<tr>
    
<td>row 2, cell 1</td>
    
<td>row 2, cell 2</td>
    
</tr>
    
</table>

在浏览器显示如下：:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，

但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

    <table border="1">
    
<tr>
    
<td>Row 1, cell 1</td>
    
<td>Row 1, cell 2</td>
    
</tr>
    
</table>

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

表格的表头属性主要是一些公共属性，如：align、dir、width、height。

大多数浏览器会把表头显示为粗体居中的文本：

    <table border="1">
    
<tr>
    
<th>Header 1</th>
    
<th>Header 2</th>
    
</tr>
   
<tr>
    
<td>row 1, cell 1</td>
    
<td>row 1, cell 2</td>
    
</tr>
   
<tr>
    
<td>row 2, cell 1</td>
    
<td>row 2, cell 2</td>
    
</tr>
    
</table>

在浏览器显示如下：

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

HTML 表格标签

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题
<colgroup>	定义表格列的组
<col>	定义用于表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

HTML 列表

HTML 支持有序、无序和定义列表:

HTML 列表

    有序列表
        未闻花名
龙与虎
轻音少女
无序列表
        面码
逢坂大河
平泽唯

   

在线实例

无序列表
本例演示无序列表。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="10">
	<meta name="description" content="免费零基础教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作列表</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">
</head>

<body>
	<p class="fontStyleNormal" style="text-align:left">动漫神作列表</p>	
	<ul>
		<li>未闻花名</li>
		<li>龙与虎</li>
		<li>石头门</li>
		<li>食梦者</li>
		<li>来自深渊</li>
		<li>来自新世界</li>
	</ul>
<p style="text-align:left">Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:

有序列表
本例演示有序列表。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="10">
	<meta name="description" content="免费零基础教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作列表</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">
</head>

<body>
	<p class="fontStyleNormal" style="text-align:left">动漫神作列表</p>	
	<ol start="0">
		<li>未闻花名</li>
		<li>龙与虎</li>
		<li>石头门</li>
		<li>食梦者</li>
		<li>来自深渊</li>
		<li>来自新世界</li>
	</ol>
<p style="text-align:left">Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表适合成员之间无级别顺序关系的情况。

无序列表使用 <ul> 标签：

     <ul>
    
 <li>未闻花名</li>
    
 <li>龙与虎</li>
    
 </ul>

浏览器显示如下：

未闻花名
龙与虎

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。

每个列表项始于 <li> 标签。

有序列表适合各项目之间存在顺序关系的情况。

列表项项使用数字来标记。

     <ol start="1">
    
 <li>未闻花名</li>
    
 <li>龙与虎</li>
    
 </ol>

浏览器中显示如下：

未闻花名
龙与虎

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。

每个自定义列表项以 <dt> 开始。

每个自定义列表项的定义以 <dd> 开始。

自定义列表中的 一个术语名 可以对应 多重定义

或者多个术语名对应同一个定义，

如果只有术语名 或者 只有定义 也是可行的，

也就是说 <dt> 与 <dd> 的数量不限、对应关系不限。

     <dl>
    
 <dt>未闻花名</dt>
    
 <dd>- 我们仍未知道那年夏天所见到的花的名字</dd>
    
 <dt>龙与虎</dt>
    
 <dd>- 逢坂大河与高须龙儿</dd>
   
     <dt>石头门</dt>
    
     <dd>- 穿越时间线去找妳</dd>
    
 </dl>

浏览器显示如下:

注意事项 - 有用提示

提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

HTML 列表标签

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<dl>	定义列表
<dt>	自定义列表项目
<dd>	定义自定义列表的描述

HTML <div> 和<span>

HTML 可以通过 <div> 和 <span> 将元素组合起来。

HTML 区块元素

大多数 HTML 元素被定义为块级元素 或 内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

HTML <div> 元素

<div> 标签可以把文档分割为独立的、不同的部分。

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。

除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对 大的内容块 设置样式属性。

<div> 元素的另一个常见的用途是文档布局。

它取代了古老的使用表格定义布局的老式方法。

使用古老的 <table> 元素进行文档布局不是表格的正确用法。

<table> 元素的作用是显示表格化的数据。

HTML <span> 与元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 分组标签

标签	描述
<div>	定义了文档的区域，块级 (block-level)
<span>	用来组合文档中的行内元素，内联元素(inline)

附录:

HTML 参考手册- (HTML5 标准)

按字母顺序排列

New : HTML5新标签

标签	描述
<!--...-->	-->√定义注释
<!DOCTYPE>	-->√定义文档类型
<a>	-->√定义超文本链接
<abbr>	-->√定义缩写
<acronym>	定义只取首字母的缩写，不支持HTML5 ???Excuse Me???
<address>	定义文档作者或拥有者的联系信息
<applet>	定义嵌入的 applet。HTML5中不支持使用。
<area>	-->√定义图像映射内部的区域
<article>New	定义一个文章区域
<aside>New	定义页面的侧边栏内容
<audio>New	-->√定义音频内容
<b>	-->√定义文本粗体
<base>	-->√定义页面中所有链接的默认地址或默认目标。
<basefont>	定义页面中文本的默认字体、颜色或尺寸。HTML5不支持使用。
<bdi>New	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo>	-->√定义文字方向, 例如:从右往左,就是 dir="rtl"
<big>	定义大号文本，HTML5不支持使用。
<blockquote>	-->√定义长的引用
<body>	-->√定义文档的主体
<br>	-->√定义换行
<button>	定义一个点击按钮
<canvas>New	定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<caption>	-->√定义表格标题
<center>	定义居中文本。HTML5不支持使用。
<cite>	-->√定义引用(citation)
<code>	-->√定义计算机代码文本
<col>	-->√定义表格中一个或多个列的属性值
<colgroup>	定义表格中供格式化的列组
<command>New	定义命令按钮，比如单选按钮、复选框或按钮
<datalist>New	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<dd>	-->√定义定义列表中项目的描述
<del>	-->√定义被删除文本 (删除线效果)
<details>New	用于描述文档或文档某个部分的细节
<dfn>	定义定义项目
<dialog>New	定义对话框，比如提示框
<dir>	定义目录列表。HTML5不支持使用。
<div>	-->√定义文档中的节
<dl>	-->√定义列表详情
<dt>	-->√定义列表中的项目
<em>	-->√定义强调文本
<embed>New	定义嵌入的内容，比如插件。
<fieldset>	定义围绕表单中元素的边框
<figcaption>New	定义<figure> 元素的标题
<figure>New	规定独立的流内容（图像、图表、照片、代码等等）。
<font>	定义文字的字体、尺寸和颜色。HTML5不支持使用。
<footer>New	定义 section 或 document 的页脚。
<form>	-->√定义了HTML文档的表单
<frame>	-->√定义框架集的窗口或框架
<frameset>	-->√定义框架集
<h1> to <h6>	-->√定义 HTML 标题
<head>	-->√定义关于文档的信息
<header>New	定义了文档的头部区域
<hr>	-->√定义水平线
<html>	-->√定义 HTML 文档
<i>	-->√定义斜体字
<iframe>	-->√定义内联框架
<img>	-->√定义图像
<input>	-->√定义输入控件
<ins>	-->√定义被插入文本 (下划线效果)
<kbd>	-->√定义键盘文本
<keygen>New	规定用于表单的密钥对生成器字段。
<label>	定义 input 元素的标注
<legend>	定义 fieldset 元素的标题。
<li>	-->√定义列表的项目
<link>	-->√定义文档与外部资源的关系
<map>	-->√定义图像映射
<mark>New	定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
<menu>	定义菜单列表。HTML5不支持使用。
<meta>	-->√定义关于 HTML 文档的元信息。
<meter>New	定义度量衡。仅用于已知最大和最小值的度量。
<nav>New	定义导航链接的部分
<noframes>	定义针对不支持框架的用户的替代内容。HTML5不支持
<noscript>	-->√定义针对不支持客户端脚本的用户的替代内容。
<object>	定义内嵌对象
<ol>	-->√定义有序列表。
<optgroup>	定义选择列表中相关选项的组合。
<option>	-->√定义选择列表中的选项。
<output>New	定义不同类型的输出，比如脚本的输出。
<p>	-->√定义段落。
<param>	定义对象的参数。
<pre>	-->√定义预格式文本。
<progress>New	定义运行中的进度（进程）。
<q>	-->√定义短的引用。
<rp>New	<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
<rt>New	<rt> 标签定义字符（中文注音或字符）的解释或发音。
<ruby>New	<ruby> 标签定义 ruby 注释（中文注音或字符）。
<s>	不赞成使用。定义加删除线的文本。
<samp>	-->√定义计算机代码样本。
<script>	-->√定义客户端脚本。
<section>New	<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<select>	定义选择列表（下拉列表）。
<small>	-->√定义小号文本。
<source>New	<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<span>	定义文档中的节。
<strike>	HTML5不支持，不赞成使用。定义加删除线文本。
<strong>	-->√定义强调文本。
<style>	-->√定义文档的样式信息。
<sub>	-->√定义下标文本。
<summary>New	<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
<sup>	-->√定义上标文本。
<table>	-->√定义表格。
<tbody>	定义表格中的主体内容。
<td>	-->√定义表格中的单元。
<textarea>	-->√定义多行的文本输入控件。
<tfoot>	定义表格中的表注内容（脚注）。
<th>	-->√定义表格中的表头单元格。
<thead>	定义表格中的表头内容。
<time>New	定义日期或时间，或者两者。
<title>	-->√定义文档的标题。
<tr>	-->√定义表格中的行。
<track>New	<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
<tt>	定义打字机文本。
<u>	不赞成使用。定义下划线文本。
<ul>	-->√定义无序列表。
<var>	定义文本的变量部分。
<video>New	<video> 标签定义视频，比如电影片段或其他视频流。
<wbr>New	规定在文本中的何处适合添加换行符。