您的位置：首页 > Web前端

Web前端入门学习（2）——HTML常用标签

2016-10-19 16:40 916 查看

HTML标签1.a标签
a标签是一个超链接标签，用于从一个页面链接到另一个页面。在《Web前端入门学习（1）》有提到过 4个伪类，分别是a:link、a:visited、a:hover、a:active。

a:link代表的是未访问过的链接，当访问者首次打开网页未点击链接时，所表现的形式；
a:visited代表的是访问过的链接，相对于link，是访问者点击了连接后，所表现的形式；
a:hover代表的是当鼠标经过链接上面时所表现的形式，鼠标经过后，链接会有所变化；
a:active代表的是当用户点击链接的那一刻，所表现的形式。

注意：这4个伪类的使用，有一个先后顺序，并不是随便写就可以的。这里规定，a:hover必须写在a:link、a:visited后面，而a:active必须写在a:hover后面。

href属性用于规定链接的目标URL，即链接地址。如

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="http://cherry360.blog.51cto.com/">小倩加油站
</body>
</html>

链接打开方式默认是在本窗口打开，如果想在新窗口打开链接，可以加个target属性。如

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="http://cherry360.blog.51cto.com/" target="_blank">小倩加油站
</body>
</html>

2.span标签
span标签是用于对文档中的行内元素进行组合，该标签没有固定的格式表现。当对它应用CSS样式时，才会产生视觉上的变化。如果不对<span>应用样式，那么该元素中的文本与其他文本不会有任何视觉上的差异。<span>标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

3.标题标签
标题标签有h1~h6,如

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<h7>我不再是标题，而是浏览器默认字体~~</h7>
</body>
</html>

注意：当超出h6之后，标题标签不存在，字体显示跟所打开的浏览器默认字体一致了。

4.列表标签
a.有序列表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol><!-- 有序列表 -->
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
</body>
</html>

b.无序列表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul><!-- 无序列表 -->
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
</body>
</html>

c.自定义列表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<dl><!-- 自定义列表 -->
<dt>定义列表标题</dt>
<dd>定义列表项</dd>
<dd>定义列表项</dd>
<dd>定义列表项</dd>
</dl>
</body>
</html>

5.其他常用标签：

段落标签p：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>我是段落</p>
</body>
</html>

重要文本strong：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<strong>加强（页面展示为粗体）</strong>
</body>
</html>

强调文本em：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<em>强调（页面展示为斜体）</em>
</body>
</html>

这里只列出常用的几个标签，实际上还有很多标签，详见：http://www.runoob.com/tags/html-reference.html

6.HTML5新增标签
header:定义文档或文档的一部分区域的页眉。
nav:定义导航链接。
section:定义文档某个区域。
footer:定义文档或文档的一部分区域的页脚。
article:定义独立内容。内容本身必须有意义而且是独立于文档的其他部分。
aside:定义<aritcle>标签外的内容，内容与附近的内容有关。
time:定义公历时间或日期。
mark:定义带有记号的文本，为了突出显示文本。
img（跟a链接一样，是一个单标签）:定义HTML页面的图像，有两个必要属性:src和alt。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 标签 HTML

相关文章推荐

新的分享

章节导航