1-2 html标签 语义化标签是啥意思？ 标签的列举和介绍 文本格式化标签 结构格式化标签 内容标签 header、nav； strong、em；p、a

目录

1. 标签概览

2.使用语义化标签？

2. 结构语义化标签

2.1. header

2.2 nav导航栏

2.3 main

2.4. aside

2.5. article

2.6. section

2.7. footer

2.8. 标题标签：

3. 文本格式化标签

3.1 a标签

3.2 文本格式化标签【推荐】【语义强】：

3.3 文本格式化标签【不常用，作用无差别】：

3.4 sup上标标签：

3.5 small

3.6mark

4. 内容语义化标签：

4.1. 列表

4.2. 段落标签

4.3 图片标签：

4.4. 表格标签

5. HTML语法标签

5.1. html的声明标签

5.2. meta标签

5.3. title标签

 5.4. 中文/英文 网页定义

---

1. 标签概览

结构化标签	文本格式化标签	内容标签
h1~h6 header nav main section article footer	a strong em ins del small cite mark	ul ol li dl、dt、dd p img

2. 语义化标签？

什么是语义化标签？

        一句话解释，标签本身就传递了一定含义。

举例解释：

        比如说，strong标签，strong是强壮的意思，引申为字体加粗【表示重要】。而p标签本身就是段落标签【paragraph】,用来装大段文本。

好处：

• 能够呈现很好的结构和外观。比如h1~h6系列的标签，能够让文字加粗并且方法。使用p标签，能够自带内间距。使用strong标签，能够加粗文本。
• 有利于搜索引擎的收录。爬虫爬取信息，会依赖关键字来确定权重，语义化越明显，爬虫获取信息越直接。比如h1标签就会直接突出文本的重要性。
• 对用户体验很好。比如strong【加粗】、em【倾斜】等直接格式化文本。
• 有利于团队化协作。能够让团队成员一眼看出你这里的内容是什么。比如header标签，就是用来显示文章的头部，logo、主导航、搜索链接。
• 有利于其它设备解析。比如移动设备，盲人阅读器，屏幕阅读器。

2. 结构语义化标签

2.1. header

网站logo、主导航、全站链接

<header>
        <ul>
            <li>
                <a href="#">
                    <img src="" alt="">
                </a>
            </li>
        </ul>
</header>

2.2 nav导航栏

导航链接部分

<nav>
        <a href="#">HOME</a>
        <a href="#">first</a>
        <a href="#">second</a>
        <a href="#">third</a>
</nav>

2.3 main

定义页面的主要内容，或者主要功能

一个页面只能写一次

     <main>
        定义主要功能
    </main>

2.4. aside

用于文章的侧栏

   <aside>
        <ul>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </aside>

2.5. article

来自外部的一篇新闻或者文本

里面还可以有header、section、footer等

<article>
        <header></header>
        <section></section>
        <main></main>
        <footer></footer>
</article>

2.6. section

页面分节

<section></section>

2.7. footer

底部模块

<footer></footer>

备注：上面的六个标签都是块级元素，都可以当成div来使用。

2.8. 标题标签：

    <h1>1</h1>
    <h2>2</h2>
    <h3>3</h3>
    <h4>4</h4>
    <h5>5</h5>
    <h6>6</h6>    

文字会有默认的加粗效果。字体也会有对应的大小

从h1~h6，文字的大小逐渐递减。

h1元素具有最高等级，h6具有最低的等级

3. 文本格式化标签

3.1 a标签

加空链接：

 <a href="#"></a>

外部网址：

<a href="www.baidu.com"></a>

内部地址：

 <a href="index1.html"></a>

可以是同名文件夹下的地址，还可以是一个文件，用于下载

<a href="index.word"></a>

锚点链接：

<a href="#good">11234</a>
<p>111</p>
<p>111</p>
<p>111</p>
<p id="good">33333</p>

只要a标签的herf里面的#后面的值good和p标签的id值good一致，点击a标签就可以实现跳转

3.2 文本格式化标签【推荐】【语义强】：

作用	标签
加粗	<strong></strong>
下划	<ins></ins>
倾斜	<em></em>
删除	<del></del>

3.3 文本格式化标签【不常用，作用无差别】：

标签作用	标签
加粗	<b></b>
下划	<u></u>
倾斜	<i></i>  <cite></cite>
删除	<s></s>

3.4 sup上标标签：

一般公式会用，【比如π的平方，可以用这个标签】

 π<sup>2</sup>

3.5 small

小字号标签,能让文字变小

<small>123</small>

大字号标签<big></big>已经被弃用，无效了

3.6mark

字体黄色高亮显示

<mark>123</mark>

4. 内容语义化标签：

4.1. 列表

无序列表

   <ul>
        <li>
            <a href=""></a>
        </li>
        <li>
            <a href=""></a>
        </li>
    </ul>

ul标签的亲儿子只能是小li

小li里面可以包裹任何信息，甚至再包裹一个ul

有序列表

    <ol>
        <li>
        </li>
    </ol>

ol和ul相似，但是ol生成的列表前面有序号

自定义列表

   <dl>
        <dt>爱好</dt>
        <dd>吃饭</dd>
        <dd>睡觉</dd>
        <dd>打豆豆</dd>
        <dd>跑步</dd>
    </dl>

dl里面只能有dt和dd

一个dt下面跟着好多个dd（小弟）

备注：ul、li、ol、dl、dt、dd都是块级元素，一行显示

4.2. 段落标签

<p></p>

作用：含义就是段落，表示大段的文字

4.3 图片标签：

 <img src="" alt="" title="">

特点：单标签

src：图片的地址

alt： 图片未显示的时候，出现的信息

title：鼠标经过图片的时候，显示的提示内容

4.4. 表格标签

    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>班级</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
    </table>

table: 表示大的表格

thead和tbody：thead里面表示的是表格的标题，tbody是表格的正文，tfoot是表格结尾部分，一般添加备注。都是结构标签，没有特殊作用，就是让结构更加清晰。

th：表头的标题,有加粗效果

tr: 表示一行

td: 表示一个单元格

table添加属性：

<table cellspacing="0" border="2" cellpadding="50">
</table>

cellspacing: 单元格之间的距离
border：单元格边框的宽度

cellpadding: 文字到单元格的距离

单元格的合并：

   <table cellspacing="0" border="2" cellpadding="50">
        <thead>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">2</td>
                <td colspan="3">2</td>
                <!-- <td>2</td> -->
            </tr>
            <tr>
                <td>4</td>
                <td>4</td>
                <!-- <td>5</td>这个要删除，是多出来的 -->
            </tr>
        </tbody>
    </table>

注意要点：

1. 如果合并列，记得写colspan的单元格不能是最后一列 ；合并行，写rowspan的单元格不能是最后一行

2. 合并以后，有多出来的单元格，记得删除对应。删除谁？看哪里有文字被挤出来就删谁

---

5. HTML语法标签

5.1. html的声明标签

<!DOCTYPE html>

为了声明这是html文件

不是html的 内部标签

5.2. meta标签

<meta charset="UTF-8">

设置编码格式为"UTF-8",防止乱码,写在head标签里面

5.3. title标签

<title>Document</title>

定义文档标题

 5.4. 中文/英文 网页定义

<html lang="en">
<html lang="zh-cn">

告诉搜索引擎，我是中文/英文网页

页面越规范越容易被收录

写在head标签外面

参考资料：html语义化标签_越努力，越幸运！-CSDN博客_html语义化标签

结尾：

学习id： 201903090124-5

现在是大三学生，学习到了前后端交互的mysql阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。