码迷,mamicode.com
首页 > Web开发 > 详细

[04]HTML基础之块级标签

时间:2020-06-01 21:01:44      阅读:91      评论:0      收藏:0      [点我收藏+]

标签:out   多少   int   div   标准化   title   电子工程   pre   重要   

1. <p>标签

表示段落,多个空白符会合并成一个;<pre>标签表示预文本段落,所有空白符都不合并。

//临江仙诗句
<p>滚滚长江东逝水,浪花淘尽英雄,是非成败转头空。
青山依旧在,几度夕阳红。</p>
<pre>白发渔樵江渚上,惯看秋月春风,一壶浊酒喜相逢。
古今多少事,都付笑谈中。</pre>

2. <ul>标签

表示无序列表,表现为每个子项前都有圆点;<ol>标签表示有序列表,表现为每个子项前都有序号;<li>标签表示列表的子项目。

//无序列表
<ul> 导航:
    <li>首页</li>
    <li>分类</li>
</ul>
//有序列表
<ol> 目录:
    <li>第一章:灵感</li>
    <li>第二章:创作</li>
</ol>

3. <dl>标签

表示定义列表;<dt>标签表示定义列表的标题;<dd>标签表示定义列表的数据。

<dl>
    <dt>IEC</dt>
    <dd>国际电工委员会(International Electrotechnical Commission)成立于1906
    年,它是世界上成立最早的国际性电工标准化机构,负责有关电气工程和电子工程领域中
    的国际标准化工作。 </dd>
</dl>

4. <header>标签

语义标签,表示文档的头部;<main>标签表示文档的主体;<footer>标签表示文档的页脚。前面三个标签与<div>标签效果一致,但重在语义的强调上面。

//可以放置网站logo及导航链接
<header> 网站logo 导航链接 </header>
//可以放置文章内容或评论
<main> 文章标题 文章内容 </main>
//可以放置联系信息或版权信息
<footer> 版权信息 备案信息 </footer>

5. <article>标签

语义标签,表示重要的独立内容,例如某段文章的内容;<aside>标签表示不那么重要的偏旁内容,例如文章的分类标签,作者信息等。

<h1>断章节选</h1>
<article>你站在桥上看风景,看风景的人在桥上看你;明月装饰了你的梦,你装饰了别人的
梦。</article>
<aside>作者:卞之琳,祖籍南京市溧水区,现当代诗人、文学评论家、翻译家。</aside>

6. <hgroup>标签

语义标签,表示标题的分组;<h1>标签表示一级标题;<h2>标签表示二级标题;<h3>标签表示三级标题;<h4>标签表示四级标题;<h5>标签表示五级标题;<h6>标签表示六级标题。

<hgroup>
    <h1>宇宙历史</h1>
    <h2>世界历史</h2>
    <h3>亚洲历史</h3>
    <h4>中国历史</h4>
    <h5>唐朝历史</h5>
    <h6>安史之乱</h6>
</hgroup>

7. <address>标签

语义标签,表示文档作者的联系信息,表现为略微倾斜的字体,一般放在<footer>标签里面。

<address>联系站长:<a href="mailto:contact@juetan.cn">绝弹</a> </adress>

8. <nav>标签

语义标签,表示导航内容,与<ol><ul>标签相比,强调语义的作用。

<nav>
    <a href="/">首页</a>
    <a href="/about">关于</a>
</nav>

英语单词

p:段落(paragraph的缩写)
pre: 预定义(predefined的缩写)
header: 头部
main:主要
footer:脚部
article:文章
aside:旁白
h:大字标题(headline的缩写)
group:分组
adress:地址
nav:导航(navigation的缩写)
ul:无序列表(unorder list的缩写)
ol: 有序列表(order list的缩写)
li:列表项目(list item的缩写)
dl:定义列表(defined list的缩写)
dt:定义列表标题(defined title的缩写)
dd:定义列表数据(defined data的缩写)
nav: 导航(navigator的缩写)

[04]HTML基础之块级标签

标签:out   多少   int   div   标准化   title   电子工程   pre   重要   

原文地址:https://www.cnblogs.com/juetan/p/13027143.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!