html+css初识（第二节）
2018-05-22 本文已影响0人
freeflys
本小节主要用来了解各种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>
运用效果：
example1.png
①<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最基本的标签我们就了解认识了，后面我们将接触更深入的标签。
