NEWS

新闻资讯

当前位置首页 > 新闻资讯 > 正文

HTML标签_前端学习之HTML基础

作者:菁瑞优智_小菁 时间:2021-06-29

1、与文本有关的标签

1.1 标题标签

h1~h6

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

h标题之间不要断层。

1.2 段落

p(paragraph)

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

1.3 换行标签

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

1.4 水平线标签

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

1.5 文本标签

**有语义化的标签**

- strong 强调内容,加粗

- em 强调语气,倾斜

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

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

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

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

- q 引用一句话

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

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

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

- sup 上标

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

- sub 下标

H<sub>2</sub>O

- code 程序代码

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

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

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

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

**样式标签**

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

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

<i class="iconfont icon-home"></i>

- 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|表格单元格|

<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>

2.3 单元格合并

- colspan

   - 合并列,colspan="2"

- rowspan

   - 合并行,rowspan="3"

2.4 表格的嵌套

曾经当内容比较复杂,利用单元格的合并也不能完成布局的时候,就要考虑表格的嵌套了。

表格嵌套后,嵌套表格内部的单元格就不受外部单元格的影响了。

3、标签的语义化

3.1 标签语义化的好处

- 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。(便于开发、便于浏览器解析、便于SEO优化)

- 用最合适的标签去描述结构和内容,而不是随便用一个标签去代替,看起来面子差不多就合适了。语义明确、结构清晰、层级分明的网页是HTML的精髓。

- 就算没有CSS样式也便于阅读(用户便于阅读)

- 增强用户体验

   - title

   - label

   - alt

- 有利于SEO优化

   - 和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

- 方便其他设备解析

   - (如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页

- 便于团队开发和维护

   - 遵循W3C标准的团队都遵循这个标准,可以减少差异化。

3.2 语义化要注意的细节

- 尽可能少的使用无语义的标签div和span;

- 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;

- 不要使用纯样式标签,如:b、font、u等,改用css设置。

- 文本根据重要性使用合适的标签,比如标题,段落等,表现出文本的层级。

- 需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);

- 图片尽量加上alt

- 对于不能显示完整的超链接加上title属性

- 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;

- 表单域要用fieldset标签包起来,并用legend标签说明表单的用途;

- 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。