说一说你对HTML5语义化的理解
本题地址:https://github.com/YvetteLau/Step-By-Step/issues/8
语义化意味着顾名思义,HTML5的语义化指的是合理使用语义化的标签来创建页面结构,如header,footer,nav,从标签上即可以直观的知道这个标签的作用,而不是滥用div。
语义化的优点有:
- 代码结构清晰,易于阅读,利于开发和维护
- 提高用于体验,在样式加载失败时,页面结构清晰
- 方便其他设备解析(如屏幕阅读器)根据语义渲染网页。
- 有利于搜索引擎优化(SEO),搜索引擎爬虫会根据不同的标签来赋予不同的权重
语义化标签主要有:
- title:主要用于页面的头部的信息介绍
- header:定义文档的页眉
- nav:主要用于页面导航
- main:规定文档的主要内容。对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。
- article:独立的自包含内容
- h1~h6:定义标题
- ul: 用来定义无序列表
- ol: 用来定义有序列表
- address:定义文档或文章的作者/拥有者的联系信息。
- canvas:用于绘制图像
- dialog:定义一个对话框、确认框或窗口
- aside:定义其所处内容之外的内容。
<aside>
的内容可用作文章的侧栏。 - section:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
- figure:规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
- details:描述文档或者文档某一部分细节
- mark:义带有记号的文本。
语义化应用
例如使用可视化标签,构建下面的页面结构:
转载于https://www.jianshu.com/p/605386179154
说一说你对HTML5语义化的理解的更多相关文章
- html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
- Html5语义化标签详解及其兼容性处理
<header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合 一个 ...
- HTML5语义化元素
语义化元素:有意义的元素. 对语义化的理解: 正确的标签做正确的事情: HTML5语义化元素让页面内容结构化清晰: 便于开发人员阅读,理解,维护: 搜索引擎爬虫可以依赖语义化元素来确定上下文和每个关键 ...
- html5语义化标签——回顾
html5 头部结构 <!doctype html> <meta charset=“utf-8”/> <header></header> 页眉 ...
- 第二季第十一天 html5语义化标签 css透明度
span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...
- 【重构前端知识体系之HTML】讲讲对HTML5的一大特性——语义化的理解
[重构前端知识体系之HTML]讲讲对HTML5的一大特性--语义化的理解 引言 在讲什么是语义化之前,先看看语义化的背景. 在之前的文章中提到HTML最重要的特性,那就是标签.但是项目一大,标签多的看 ...
- 对 HTML 语义化的理解
简述一下你对 HTML 语义化的理解? 用正确的标签做正确的事情. html 语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析; 即使在没有样式 CSS 情况下也以一种文档格式显示,并 ...
- HTML5语义化标签
在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...
- 让HTML5语义化标签兼容IE浏览器
解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位) <script> var html5 ...
随机推荐
- 《Java开发手册》
一. 编程规约 (一) 命名风格 [强制]抽象类命名使用Abstract或Base开头:异常类命名使用Exception 结尾:测试类 命名以它要测试的类的名称开始,以Test结尾. [强制]POJO ...
- mariadb(第二章)增删改 MariaDB 数据类型
MariaDB 数据类型 MariaDB数据类型可以分为数字,日期和时间以及字符串值. 使用数据类型的原则:够用就行, 尽量使用范围小的,而不用大的 常用的数据类型 整数:int, bit 小数:de ...
- 安卓的一些UI美化框架的使用
目录 一.前言 二.Android-Bootstrap 三.Sweet Alert Dialog 四.ExplosionField 一.前言 在这里记录一些用到过的觉得还算不错的UI第三方开源美化框架 ...
- sqlalchemy一对一关系映射
#encoding: utf-8 from sqlalchemy import create_engine,Column,Integer,String,Float,func,and_,or_,Text ...
- 【Spring 基础】通过注解注入Bean
原课程:通过注解注入Bean 注入bean知识点思维导图 Spring 4.x推荐使用基于构造器的方式进行bean注入7.4.1 Dependency Injection spring为什么推荐使用构 ...
- Solve the Equation
Solve a given equation and return the value of x in the form of string "x=#value". The equ ...
- 【转贴】bat脚本基础教程
bat脚本基础教程 https://www.cnblogs.com/linyfeng/p/8072002.html 自己动手太少了. bat脚本就是DOS批处理脚本,就是将一系列DOS命令按照一定顺序 ...
- (5.5)mysql高可用系列——MySQL半同步复制(实践)
关键词,mysql半同步复制 [0]实验环境 操作系统:CentOS linux 7.5 数据库版本:5.7.24 数据库架构:主从复制,主库用于生产,从库用于数据容灾和主库备机,采用默认传统的异步复 ...
- Storm提交Topology报错:Found multiple defaults.yaml resources.
Storm提交Topology运行方式分为本地和集群运行两种,其中集群运行需要将程序打包并把jar包复制到集群,通过以下方式执行: bin/storm jar /opt/run/storm-demo- ...
- vc_redist x64 或者x86下载地址
https://support.microsoft.com/en-us/help/2977003/the-latest-supported-visual-c-downloads 微软的东西,果然还是人 ...