html常用标签学习(案例一)
通过实例的形式介绍文中提到的标签的基础使用方法。
1.常用标签简介
标签名 | 说明 |
---|---|
标题标签:<h1></h1> | html提供6个等级的标题(h1到h6) |
段落标签:<p></p> | 在网页中把文字有条理的显示出来,离不开段落标签 |
水平线标签:<hr /> | 创建横跨网页的水平线 |
换行标签:<br /> | 希望某段文本强制换行显示 |
div标签: <div></div> | 用来布局,一行只能放一个 |
span标签: <span></span> | 用来布局,一行可以放多个 |
图像标签:<img src=“图片地址url”/> | 在网页中使用图像就需要使用图像标签 |
链接标签:<a href=“跳转链接地址” target=“跳转方式”/> | 在html中创建超链接 |
<strong><strong/> | 用来强调某些文本的重要性,文本会以加粗的形式显示 |
<del><del/> | 定义文档中已删除的文本 |
<em><em/> | 文字以斜体方式显示 |
<ins><ins/> | 文字以加下划线方式显示 |
2. 案例
下面用一个实例来观察上述标签的使用方法(各指令的详细使用方法可以参考w3cschool中有关html的文档)。
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>nba</title>
</head>
<body>
<h1>重排NBA现役10大单挑之王:字母哥仅排第5,榜首之人无视任何防守</h1>
<hr>
<h2>1、欧文</h2>
<img src="http://pic.rmb.bdstatic.com/4a402b6764d2dcc580b0332d9c8340054805.gif" alt="欧文">
<p>欧文可以说是现役球员中,<br />人球结合最好的球员,特别突破间的运球,变换多端经常让防守球员无迹可寻,不知道欧文下一步动作想要做什么,再加上出色的投射能力,关键时刻的大心脏,让欧文在一对一时很难被对手限制。</p>
<a href="https://www.baidu.com/link?url=OfhNMiwDLjBnnj3BUVXwrmIGcz9_TRREJoJkgPxSAx49SAx4nVYqzoIL9jRluEm6_TQUZxNgaaKDtwJOeEg5b2TGh3ZWmMHdLhX3k1ByMmqUjnSpEjSRYqxLN9HwvYAKxEYO4sAZD3tGJ3G3xdptUTPLz9VwyV63IeAzuHmQct8QHN7T4xCR5Rj6x8U0iadw&wd=&eqid=8f3dd53b00052197000000065d4107d7">欧文百度百科</a>
<h2>2、杜兰特</h2>
<img src="http://pics3.baidu.com/feed/dc54564e9258d1091ff7f9b88ef1f9ba6d814dd6.jpeg?token=67181ff8a748bd28eac25fd1fdc8ec18&s=4DE308C6C88824DCB6746D9A03001091" alt="杜兰特">
<p>在单挑中如何限制杜兰特,<br />这可能是每支球队的教练组和防守球员头疼的问题,虽然杜兰特没有字母哥那样顶级的进攻能力,但是他的投篮能力绝对是历史级别的存在,全场无死角的得分能力让他根本没有办法被限制,特别是2米11的身高加上超长的臂展,让杜兰特的干拔投篮可以无视任何对手的存在。</p>
<a href="https://baike.baidu.com/item/%E5%87%AF%E6%96%87%C2%B7%E6%9D%9C%E5%85%B0%E7%89%B9/3726277?fromtitle=%E6%9D%9C%E5%85%B0%E7%89%B9&fromid=3171153&fr=aladdin">杜兰特百度百科</a>
<hr>
<h3>布局标签:</h3>
<div>一行只能放一个</div>
<span>一行可以放多个</span><span>12345</span><span>67890</span>
<hr>
<h3>文本格式化标签:</h3>
<strong>123456</strong><br>
<del>123456</del><br>
<em>123456</em><br>
<ins>123456</ins>
</body>
</html>
网页中的效果:
总结
这里介绍的标签都是比较基础和常用的标签,写得不是很详细,对以上的标签想要详细了解的可以参考w3cschool中有关的文档。本文主要是通过实例的形式,介绍上述的提到标签的基本使用方法。