web前端自学教程笔记：HTML标签_前端学习之HTML基础

编辑：学到牛牛IT培训发布日期： 2021-12-28 13:36:51

1、与文本有关的标签

1.1 标题标签

h1~h6

h1最重要，权重最高，一个页面应该只有一个h1.

h标题之间不要断层。

1.2 段落

p(paragraph)

用于正文的段落，有默认的上下间距。

1.3 换行标签

br（break），这是一个单标记，表示段落内部强制换行，应该只用于段落内的换行。

1.4 水平线标签

hr 产生一条水平线用于分割内容区块

1.5 文本标签

**有语义化的标签**

- strong 强调内容，加粗

- em 强调语气，倾斜

- blockquote 定义一段引语，比如要引用某篇诗文或者文章片段

Markup

<blockquote>
　　　<pre>
　　　   你站在桥上看风景， 
　　　   看风景人在楼上看你。
　　　   明月装饰了你的窗子， 
　　　   你装饰了别人的梦。
　　　</pre>
</blockquote>

- cite 用来标明引言的，所谓引言，就是对一本书、一篇报告或其它出版的来源资料的引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。如：

Markup

<cite>《傲慢与偏见》</cite>
<p>——摘自<cite>《志摩的诗》</cite></p>

- q 引用一句话

Markup

<q>人的一生有一个半童年。一个童年在自己小时候，而半个童年在自己孩子的小时候。</q>——余光中

- del 在字符上带一条删除线。一般用于价格的打折，把原价划掉，下面出来一个新价格，ins标签表示更新后的文本。

Markup

<ins>现在仅售：2599元</ins>
<del>
    <span>2799</span>元
</del>

- sup 上标

Markup

a<sup>2</sup>+b<sup>2</sup>

- sub 下标

Markup

H<sub>2</sub>O

- code 程序代码

Markup

<code>
    var sum=0;
    for(var i=1;i<=100;i++){
        sum+=i;                    
    }    
</code>

- pre 预格式化。就是敲在源码里是什么格式，在页面上就显示什么格式。一般跟code配合使用。 display为block。

Markup

<pre>
    <code>
        var sum=0;
        for(var i=1;i<=100;i++){
            sum+=i;                    
        }    
    </code>
</pre>

- small 用于不重要的辅助文本，比如免责声明等。

**样式标签**

- b 加粗样式标签，无语义，避免用于强调内容。

- i 倾斜样式标签，无语义，现在常用来表示字体图标

Markup

- u 下划线样式标签

- s 删除线样式标签

**无语义无样式标签**

- span 在一段文本中，需要区分出一块文本。无语义，当文字没有什么语义的时候可以用。

1.6 特殊符号

为那些不容易通过键盘键入的符号提供了表达的方法。

输入法也有软键盘，可以输入多种特殊字符。

| 符号 | 含义 |

| --------- | ------------------------- |

| | 空格 |

| < | < 小于符号 less than |

| > | > 大于符号 great than |

| — | — 长破折号 |

| " | " 双引号 |

| ¥ | ¥ 人民币羊角符 |

| © | ©版权符号 |

| ® | ® 注册商标 |

| × | × 乘号 |

| ÷ | ÷ 除号 |

[全部符号资料](https://www.w3school.com.cn/tags/html_ref_entities.html)

2、表格

在web1.0时代，表格用于布局，在web2.0时代，网页重构的浪潮中，DIV+CSS布局代替了传统的表格布局，但是不代表表格无用。表格应该回归到它应该做的事情上，那就是用于排列二维数据。

2.1表格的应用案例

- 二维数据罗列

- [天天基金收益排行榜](http://fund.eastmoney.com/trade/gp.html)

- [东方财富](http://stock.eastmoney.com/)

- [2017年8月综艺节目收视率排行榜 ](https://www.zswxy.cn/articles/10160.html)

2.2 表格的基本结构

| 标签 | 说明 |

| ----- | ---- |

| table | 表格 |

|caption|标题|

|thead|表头（语义划分）|

|tbody|表身（语义划分）|

|tfoot|表尾（语义划分）|

|tr|行|

|th|表头单元格|

|td|表格单元格|

Markup

<table border="1" cellspacing="0" cellpadding="10">
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>表头单元格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>表体单元格</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>表尾单元格</td>
        </tr>
    </tfoot>
</table>