当前位置:网站首页>H5语义化标签
H5语义化标签
2022-07-29 05:10:00 【冰眸js】
HTML5新增的语义化标签主要有:
<article>、<section>、<nav>、<aside>、<header>、<footer>、<time>等等...
优点:
为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构比<div>标签有更加丰富的含义,方便开发与维护
1.header 与hgroup
放在页面或布局的顶部,一般放置导航栏或标题
一个文档中可以包含一对或者一对以上的<header>标签。
标签的位置是次要的,不一定非要显示在页面的上方,我们可以为任何需要的区块标签添加<header>元素,例如下面将要讲解的<article>、<section>等标签。
2.nav
表示页面的导航,也可以在<header>标签中使用,还可以显示在侧边栏中。一个页面之中可以有多个<nav>标签。
为了方便搜索引擎解析,最好是将主要的链接放在nav中。
3.aside
所包含的内容不是页面的主要内容、具有独立性,是对页面的补充。
<aside>一般使用在页面、文章的侧边栏、广告、友情链接等区域
4.footer
一般被放置在页面或者页面中某个区块的底部,包含版权信息、联系方式等信息。一个页面也可以有多个footer
5.article
<article>元素应该使用在相对比较独立、完整的的内容区块,所以我们可以在一篇博客、一个论坛帖子、一篇新闻报道或者一个用户评论中使用<article>元素。article可以互相嵌套。
边栏推荐
- AD常用快捷键
- 365 day challenge leetcode 1000 questions - day 041 two point search completion anniversary + nth magic number + online election
- ClickHouse学习(二)ClickHouse单机安装
- With cloud simulation platform, Shichuang technology supports the upgrading of "China smart manufacturing"
- 文件结尾
- 全局components组件注册
- eggjs 创建应用知识点
- Helm chart for Kubernetes
- Alibaba cloud and Dingjie software released the cloud digital factory solution to realize the localized deployment of cloud MES system
- PyQt5:第一章第1节:使用Qt组件创建一个用户界面-介绍
猜你喜欢

Clickhouse learning (IV) SQL operation

Best practices of JD cloud Distributed Link Tracking in financial scenarios

Application of Huffman tree and Huffman coding in file compression

Alibaba cloud Zhang Xintao: heterogeneous computing provides surging power for the digital economy

B - identify floating point constant problems

365 day challenge leetcode 1000 questions - day 040 design jump table + avoid flooding + find the latest grouping with size M + color ball with reduced sales value

【剑指offer】— 详解库函数atoi以及模拟实现atoi函数

Longest string without duplicate characters

Day 2

C语言 一级指针
随机推荐
Cryengine Technology
Helm chart for Kubernetes
Alibaba cloud architect details nine trends in the game industry
浅谈范式
Live broadcast preview | how to improve enterprise immunity through "intelligent edge security"?
Abstract classes and interfaces
科班同学真的了解未来的职业规划吗?
B - 识别浮点常量问题
C语言文件操作
存储类别
Best practices for elastic computing in the game industry
C语言 N皇后问题
省市区三级联动(简单又完美)
365 day challenge leetcode 1000 questions - day 037 elements and the maximum side length of squares less than or equal to the threshold + the number of subsequences that meet the conditions
shell基本操作(下)
【C语言系列】—深度解剖数据在内存中的存储(二)-浮点型
About local variables
Complete ecological map of R & D Efficiency & selection of Devops tools
Bubble sort c language
365 day challenge leetcode 1000 questions - day 040 design jump table + avoid flooding + find the latest grouping with size M + color ball with reduced sales value