H5新特性之语义化标签

最新推荐文章于 2022-06-14 17:26:38 发布

劈里啪啦一顿敲

最新推荐文章于 2022-06-14 17:26:38 发布

阅读量379

点赞数 2

分类专栏： HTML与CSS

本文链接：https://blog.csdn.net/qq_40262483/article/details/104583247

版权

本文介绍了H5中的语义化标签，包括其作用，如提高开发效率，优化代码结构，便于搜索引擎优化，以及列举了常用的语义化结构标签，并通过案例进行了展示。

摘要由CSDN通过智能技术生成

什么是语义化标签

	语义化标签是就是把标签说的更通俗一点，更贴近人类的口语，有利于开发人员编写、检索代码，例如<nav>标签，他的英文单词含义就是头部导航.

语义化标签的作用

（1）提高开发人员开法效率，利于代码结构的优化、团队开发速度的加快，减少代码检索时间
（2）可方便其它设备以语义化的方式完成对页面的渲染
（3）有利于搜索引擎优化

常用的语义化结构标签

    （1）section    类似于div,section 更偏向划分区域
    
    （2）article    更偏向于 内容的展示
    
    （3）aside      （在一边的，在一旁的，侧边）
    
    （4）header     表示内容的头部、网页的头部、头部区域
    
    （5）footer     表示网页的底部、内容的底部、底部区域
    
    （6）nav         导航连接、导航区域
    
    （7）figure     表示一块独立的内容
    
    （8）figcaption  figure的标题（一般放在figure的第一位或者最后一位）
    
    （9）main       主体内容(IE不兼容)
    
    （10）hgroup
    
    （11）mark       高亮显示  默认北京为黄色（可以更改背景  内联元素）
    
    （12）time        放时间的
    
    （13）dialog      类似于微信的对话框  ( 默认display:none  默认定位  默认边框 )

案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
   
            margin:0;
            padding:0;
        }
        .box

最低0.47元/天解锁文章

劈里啪啦一顿敲

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
H5新特性之语义化标签

什么是语义化标签语义化标签是就是把标签说的更通俗一点，更贴近人类的口语，有利于开发人员编写、检索代码，例如<nav>标签，他的英文单词含义就是头部导航.语义化标签的作用（1）提高开发人员开法效率，利于代码结构的优化、团队开发速度的加快，减少代码检索时间（2）可方便其它设备以语义化的方式完成对页面的渲染（3）有利于搜索引擎优化常用的语义化结构标签（1）secti...
复制链接

扫一扫

专栏目录