HTML定义文本,列表

 HTML标签是由尖括号括起来的词,如<html>,<head>,<body>等。标签通常成对出现。一对中的第一个标签是开始标签,第二个标签是结束标签。也可以将开始标签称为起始标签,结束标签称为闭合标签。

 关于HTML文档的结构以及标签的意义可以参考:

HTML是什么

 我们着重介绍HTML中一些标签的用法。

1. 文本标签

1.1 段落标签<p>

<html>
<!-- html文档中可以不用头标签 -->
<body>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落元素由 p 标签定义</p>
</body>
</html>

 浏览器会自动地在段落的前后添加空行,段落标签可以不加结束标签,大多数浏览器可以正常显示出来,但是不建议这么做,因为不能提现段落标签的语义化。

 当显示页面时,浏览器会移除内容中多余的空格和空行(不仅是<p>标签的内容)。所有连续的空格或空行都会被算作一个空格。

1.2 标题标签<hx>

 标题(Heading)是通过<h1> ~ <h6> 等标签进行定义的,x代表标题的等级(大小)。<h1> 定义最大的标题,<h6> 定义最小的标题。

<html>
<body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
</body>
</html>

 浏览器会自动地在标题的前后添加空行。

 <hx>标签只用于标题,不要仅仅是为了产生粗体或大号的文本而使用标题,这会破坏标签的语义化,我们用CSS可以很容易的做到这一点。

1.3 强调标签<em>,<strong>

 <em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。

<html>
<body>
    <em>em标签</em>
    <br/><!-- 换行标签 -->
    <strong>strong标签</strong>
</body>
</html>

1.4 引用标签

 引用标签作用是给标签内的内容两侧加上引号,感觉这个操作很废是吧,其实不然,还是为了语义化,HTML所有标签共同维护的语义化。

  • <q> 用于短的引用

  • <blockquote>用于长引用

1.5 换行标签<br/>

 像在<p>,<hx>,<q>等标签内,文本的换行会被浏览器忽略,但是可以使用<br>进行换行,这是它唯一的作用。

1.6 分割线标签<hr/>

 <hr>可以产生一条分割线,它的样式可以通过CSS进行改变。

1.7 特殊字符:

 HTML提供了一些可以加在页面中的特殊字符,如下:

字符 显示结果
&nbsp; 空格
&reg; ® 已注册
&copy; © 版权
&trade; ™ 商标

2. address标签

 <address>标签,为网页加入地址信息,是标签包围的内容另起一行,并且首行缩进。在浏览器上显示的样式为斜体,可以使用css样式来修改<address>标签的默认样式。

 地址标签的唯一作用就是语义化。

3. code标签

  • <code>标签描述一行代码

  • <pre>预格式化文本,可以描述多行代码

 在<pre>标签中的文本会保留空格和换行符。

4. 列表标签

4.1 无序列表

<ul>标签定义无序列表,每行用<li>表示。

<ul>
<li>第一行</li>
<li>第二行</li>
</ul>

 效果:

  • 第一行
  • 第二行

4.2 有序列表

 <ol>标签定义有序列表,每行用<li>表示。

<ol>
<li>第一行</li>
<li>第二行</li>
</ol>

 效果:

  1. 第一行
  2. 第二行

4.3 自定义列表

 <dl>标签表示自定义列表, 每个自定义列表以 <dt> 开始。每个自定义列表的行以 <dd> 开始。

<dl>
<dt>
    <ol>
        <li>第一行</li>
        <li>第二行</li>
    </ol>
</dt>
<dt>

</dt>
    <ul>
        <li>第一行</li>
        <li>
            <ol>
                <li>第一行</li>
                <li>第二行</li>
            </ol>
        </li>
    </ul>
</di>

 显示效果:




  1. 第一行
  2. 第二行




  • 第一行


    1. 第一行
    2. 第二行


 自定义列表可以互相嵌套。

 可以通过CSS样式表对列表的显示进行修改。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章