温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Web前端入门学习(2)——HTML常用标签

发布时间:2020-07-08 11:48:55 来源:网络 阅读:558 作者:小倩_小倩 栏目:开发技术

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.标题标签

  标题标签有h2~h7,如

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

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


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。

 

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI