首页 > 代码库 > CSS+HTML(二)------HTML标签(二)

CSS+HTML(二)------HTML标签(二)

上一篇简单的介绍了一下HTML的语法结构,基本的使用方法。今天就总结一下HTML中的众多标签。

1.<body></body>:"body" for body(个人认为如果能记住标签英文字母所代表的单词的中文意思更有助于我们记忆与使用)顾名思义,是网页的主体,在网页上所要展现的内容都要放在body中。

<body>    <h1>了不起的盖茨比</h1>    <p>1922年的春天,一个想要成名名叫<em>尼克•卡拉威</em>(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>        <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为<strong>"爵士乐时代"</strong>吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p></body>


2.<p></p>标签:"p" for paragraph就是段落的意思当你要为网页内容分段时,你可以将一段的内容包裹在其中。如上图,文字将被分成两段。

 

3.<hx><hx>标签:"h" for highlight表示页面中需要强调的部分,被它包裹的内容,都会被加粗显示,因此可以用作一段文章的标题;而"x"表示"强调的等级",x的值越高,强调的等级则越低。代码如下:

<body>       <h1>h1标题</h1>       <h2>h2标题</h2>       <h3>h3标题</h3>       <h4>h4标题</h4>       <h5>h5标题</h5>       <h6>h6标题</h6></body>

效果如下:(可以发现不仅起到了强调作用,<hx>标签还”自觉“地将标题另起一行。这也是它跟下面一个强调标签的不同之处了。)

4.<strong></strong>,<em></em>标签:"strong" for strong,"em" for emphasis两者都可以表示强调(与<hx>的区别在于<strong>,<em>不会另起一行),不过也是有所区别的。最直观的区别就是二者的强调形式,<strong>是加粗强调,<em>是斜体强调。查了一下网上的资料,发现<strong>和<emphasis>还有在语义上的区别:

  1. The em element represents stress emphasis of its contents. The placement of emphasis changes the meaning of the sentence.
  2. The strong element represents strong importance for its contents. Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.

大概的意思是说,em表示的是内容上的强调,被em所包裹的内容会改变句意;而strong用于强调内容的重要性,并不改变句子的意思。你理解了吗?反正我是没怎么理解,以后在实践中慢慢体会吧!还有据说strong是可以叠加的,但我试了一下,感觉没啥区别嘛!

代码如下:

<body>   <p><em>em的表现形式是斜体。</em></p>      <p><strong>strong的表现形式是加粗。</strong></p>      <p><strong><strong>strong可以叠加吗?</strong></strong></p></body>

效果如下:

5.<span></span>标签:span for "span"(?),表示为行内的元素设置独立的样式,也就是可以将某些内容设置成与其他不同的样式。

代码如下:

<style>span{    color:red;    font-size:20px;}</style></head><body>   <p><span>应用了span的样式!</span></p>   <p>没有使用span的样式</p>   </body>

注意:span要写在<style>中。


效果如下:

其实我发现,如果你把span换成一个自定义的标签如<m></m>也是可以起到相同的效果。

HTML的标签还有很多,所以很有整理总结的必要,但是一口吃不成一个胖子,每篇更新5个,加深印象与理解!

CSS+HTML(二)------HTML标签(二)