本小节主要用来了解各种HTML标签,知道各种标签的含义。
下面通过一小段代码来了解各种标签的含义:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<style>
span{
color:blue;
}
</style>
</head>
<body>
<h1>了不起的盖茨比</h1>
<p>1922年的春天,一个想要成名名叫<em>尼克•卡拉威</em>(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为<strong>"爵士乐时代"</strong>吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
<p>暗淡轻黄体性柔,<br/>情疏迹远只香留。<br/>何须浅碧深红色,<br/>自是花中第一流。</p> <!-- <br>换行标签-->
<p> 哈哈哈哈哈哈哈哈</p> <!-- 空格表示方法-->
</body>
</html>
运用效果:
①<body>标签,网页上显示的内容都要放在此标签内。
②<p>段落标签,上文中用了两次段落标签,可以看到此文被分成了两段,段前段后留有空白。
③<hx>标题标签,x为1-6,分为6级,<h1>是最高级,字号最大,常用来显示网页的标题,<h6>字号最小,上文中的标题就用到了<h1>标题标签。
④<strong>、<em>强调标签,目的都是为了突出显示,但区别是<strong>标签是粗体显示,<em>标签斜体显示,效果见上文运行效果。
⑤<span>标签是没有语义的,它的作用就是为了设置单独的样式用的。上文将美国梦三个字添加<span>标签,设置了颜色为蓝色。
⑥<q>、<blockquote>标签,文本引用标签,两者区别在于前者是短文本引用,后者是长文本引用,当引用诗人的一句诗,或者名言警句时可以使用<q>标签,如果想引用一收拾可以使用<blockquote>标签,而且两个标签引用是不需要添加引号,自动添加。
⑦换行标签分行显示文本,使用换行标签是因为在HTML中是忽略空格跟回车的,你输入再多的空格也显示不出来,所以想要换行就要使用换行标签,同样空格表示方式在上文中均有使用,详情见注释。
⑧<address>标签,用来给网页加入地址信息,例:<address>文档编写:北京市西城区德外大街10号</address> 标签内的内容在网页上斜体显示,可更改。
⑨<code>标签,在展示时,如果需要引用一行代码,可以使用此标签。但如果想在文段中插入多行代码时,就需要用<pre>标签了。例:
<pre> <!--多行引用-->
var message="欢迎";
for(var i=1;i<=10;i++)
{
alert(message);
}
</pre>
<code>代码语言</code> <!--单行引用-->
这样一些HTML最基本的标签我们就了解认识了,后面我们将接触更深入的标签。