第85天:HTML5语义化标签
一、语义标签
语义标签对于我们并不陌生,如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更有意义的语义标签,更有利于搜索引擎或辅助设备理解HTML页面内容。
传统的做法我们或许通过增加类名如class="header"、class="footer",使HTML页面具有语义性,但是不具有通用性。
HTML5则是通过新增语义标签的形式来解决这个问题,例如<header></header>、<footer></footer>等,这样就可以使其具有通用性。
此学习目的为了解增加语义标签的目的,以及各语义标签所表达的意义,在网页布局中能够合理使用标签。
传统网页布局:
<!-- 头部 -->
<div class="header">
<ul class="nav"></ul>
</div>
<!-- 主体部分 -->
<div class="main">
<!-- 文章 -->
<div class="article"></div>
<!-- 侧边栏 -->
<div class="aside"></div>
</div>
<!-- 底部 -->
<div class="footer"></div>
H5 经典网页布局:
<!-- 头部 -->
<header>
<ul class="nav"></ul>
</header>
<!-- 主体部分 -->
<div class="main">
<!-- 文章 -->
<article></article>
<!-- 侧边栏 -->
<aside></aside>
</div>
<!-- 底部 -->
<footer></footer>
二、常用新语义标签
<nav> 表示导航
<header> 表示页眉
<footer> 表示页脚
<section> 表示区块
<article> 表示文章 如文章、评论、帖子、博客
<aside> 表示侧边栏 如文章的侧栏
<figure> 表示媒介内容分组 与 ul > li 做个比较
<mark> 表示标记 (带用“UI”,不怎么用)
<progress> 表示进度 (带用“UI”,不怎么用)
<time> 表示日期
本质上新语义标签与<div>、<span>没有区别,只是其具有表意性,使用时除了在HTML结构上需要注意外,其它和普通标签的使用无任何差别,可以理解成<div class="nav"> 相当于 <nav>。不要好奇,它只是一个标签!
尽量避免全局使用header、footer、aside等语义标签。
最新文章
- 【Win 10 应用开发】在App所在的进程中执行后台任务
- javascript中字符串的比较规则
- 蓝牙协议中的SBC编码
- 第3月30天 UIImage imageWithContentsOfFile卡顿 Can&#39;t add self as subview MPMoviePlayerControlle rcrash
- 关于ibatis中mysql的@变量问题作用域、污染问题
- CANVAS 水波动态背景
- Jenkins进阶系列之——01使用email-ext替换Jenkins的默认邮件通知
- poj 3468 成段增减
- C++字符串(String)
- npm常用命令->;nodejs
- WordPress RokIntroScroller插件‘thumb.php’多个安全漏洞
- .Net缓存
- 遍历hashMap对效率的影响
- 11) 十分钟学会android--Intent消息处理与传递详解
- git 本地代码冲突解决,强制更新
- 【ES6】=>;含义
- You Only Look Once: Unified, Real-Time Object Detection(翻译)
- 高级 Java 必须突破的 10 个知识点!
- EA Data Modeling 显示别名设置
- Jquery操作属性
热门文章
- 20155305 2016-2017-2 《Java程序设计》实验三 敏捷开发与XP实践
- 2017-2018-1 20155307 《信息安全系统设计基础》第十周课上未完成补充以及课下IPC作业
- 对PostgreSQL数据库的hstore类型建立GisT索引的实验
- 【Todo】找出共同好友 &; Spark &; Hadoop面试题
- MYSQL--慢查询,卡死等处理
- RHCE-EXAM 模拟题目
- Base64编码后通过Url传值
- 记录阿里云ECS(Centos7.4)安装mysql 8.0.X服务
- const与readonly常量
- 经典教程|10 分钟速成 Python3