HTML常用标签学习(案例一)

html常用标签学习(案例一)

通过实例的形式介绍文中提到的标签的基础使用方法。

1.常用标签简介

标签名 说明
标题标签:

html提供6个等级的标题(h1到h6)
段落标签:

在网页中把文字有条理的显示出来,离不开段落标签
水平线标签:
创建横跨网页的水平线
换行标签:
希望某段文本强制换行显示
div标签:
用来布局,一行只能放一个
span标签: 用来布局,一行可以放多个
图像标签: 在网页中使用图像就需要使用图像标签
链接标签: 在html中创建超链接
用来强调某些文本的重要性,文本会以加粗的形式显示
定义文档中已删除的文本
文字以斜体方式显示
文字以加下划线方式显示

2. 案例

下面用一个实例来观察上述标签的使用方法(各指令的详细使用方法可以参考w3cschool中有关html的文档)。
代码如下:


<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>nbatitle>
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>12345span><span>67890span>
	<hr>
	<h3>文本格式化标签:h3>
	<strong>123456strong><br>
	<del>123456del><br>
	<em>123456em><br>
	<ins>123456ins>
body>
html>

网页中的效果:
HTML常用标签学习(案例一)_第1张图片
HTML常用标签学习(案例一)_第2张图片

总结

这里介绍的标签都是比较基础和常用的标签,写得不是很详细,对以上的标签想要详细了解的可以参考w3cschool中有关的文档。本文主要是通过实例的形式,介绍上述的提到标签的基本使用方法。

你可能感兴趣的:(html学习)