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

语义化标签

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>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值