html基础-3-语义化标签、块和行内元素

最新推荐文章于 2022-11-25 21:01:44 发布

Neptuneyut

最新推荐文章于 2022-11-25 21:01:44 发布

阅读量875

点赞数 2

分类专栏： Web前端文章标签： html

本文链接：https://blog.csdn.net/qq_42491125/article/details/105949212

版权

Web前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

文章目录

语义化标签
块和行内元素

语义化标签

html思想是通过不同标签的语义反映对应的功能，因此存在很多语义化标签，这里我们重点关注标签语义而不是样式，html负责结构，css负责样式，呈现的样式可以通过css随意更改

h1-h6：标题标签
标题一共6个级别，一级标题最重要，仅次于title，是搜索引擎主要解析的内容，一般1-3级比较常用，4-6级使用较少
标题h1-h6和段落标签p都属于块元素（block element），特点是都独占一行
除了块标签还有行内标签，例如strong、br、q、em等,分别表示加粗、换行、引用和斜体
header：常用于表示网页头部
main：网页主体，通常只有一个
footer：网页底部
navy：网页导航栏
aside：网页侧边栏
article：网页文章
section：上述不能表示的都可以义其代替
上述都属于html5新添的标签，若不想使用完全可以使用以下标签代替：
div：没有语义，块布局
span：没有语义，所有行内元素布局，尤其是文字
（实际上，目前大多数网页还是主要以div进行块布局，以span进行行内布局，虽然这不符合HTML5的语义化思想）
列表标签：
1.无序列表(常用)：<ul><li></li></ul>，有多少项目就有多少li，常用来显示菜单栏，例如腾讯新闻的菜单栏
2.有序列表:<ol><li></li></ol>，含有数字序列
3.自定义列表:
```
 <dl> definition list
 	<dt> definition title
  	<dd></dd> definition description
 	</dt>
 </dl>
```

列表可以相互嵌套，自动实现层级缩进

块和行内元素

块元素（block element）独立一行，负责页面布局，绝大多数标签都属于块元素，例如h1-h6,p,header,main,div等等
行内元素（inline element）不会换行，负责包裹字体，例如span,em,q等等
块元素可以包括行内元素和块元素本身，但是注意p中不要嵌套h1-h6;行内元素不要包含块元素
如果出现不规范语法，例如标签写在根标签之外，行内元素包含块元素，浏览器会自动补齐纠正，但是需要养成好习惯，尽量避免

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>测试</title>
    </head>
    <!--
    标题一共6个级别，一级标题最重要，仅次于title，一般1-3级比较常用，4-6级使用较少
    主要关注标签语义而不是样式，样式将在CSS中解析
    标题和段落标签都属于块元素（block element），都独占一行
    除了块标签还有行内标签，例如strong、br、quote等
    -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!--
    p标签是段落标签，不加p标签的话无论代码换多少行，网页都不会显示换行
    -->
    <p>我的区长爸爸</p>
    我的<strong>区长</strong>爸爸
    我的<strong>区长</strong><br>爸爸
    <p>子曰:<q>学而时习之，不亦乐乎</q></p>

    <!--
    块元素（block element）负责页面布局
    行内元素（inline element）负责包裹字体
    块元素几乎可以包含所有，而行内元素不能包含块元素
    如果出现不规范语法，例如标签写在根标签之外，行内元素包含块元素，浏览器会自动补齐纠正，但是需要养成好习惯，尽量避免。
    -->
    <!--
    列表
    1.无序列表：<ul><li></li></ul>，常用，例如浏览器的菜单栏
    2.有序列表:<ol><li></li></ol>，含有数字序列
    3.自定义列表:
        <dl> definition list
            <dt> definition title
                <dd></dd> definition description
            </dt>
        </dl>
    列表可以相互嵌套
    -->
    <ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>
    <dl>
        <dt>自定义列表标题</dt>
        <dd>自定义列表解释</dd>
    </dl>
    </body>
</html>