html5新增的语义化标签极其作用
在html5中,新增了几个语义化标签:<article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>、<figure> 和<figcaption>等。
1.什么是HTML语义化?
通过标签判断内容语义,例如根据h1标签判断出内容是标题,根据<p>判断内容是段落、<input>标签是输入框等。
2.为什么要语义化?
1).去掉或样式丢失的时候能让页面呈现清晰的结构
2).方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页
3).有利于SEO
4).便于团队开发和维护,遵循W3C标准,可以减少差异化
3.如何确定你的标签是否语义良好?
去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性。
html5新增的语义化标签极其作用的更多相关文章
- Html5新增的语义化标签(部分)
2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...
- HTML新增的语义化标签及其作用
在html5中,新增了几个语义化标签:<article>.<section>.<aside>.<hgroup>. <header>,< ...
- HTML5学习之语义化标签(一)
一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
- HTML5学习之语义化标签
一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
- 从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- HTML5常用的语义化标签
快速查询 article | aside | nav | section | header | footer 架构预览 nav 定义导航链接的部分 在页脚显示一个站点的导航链接,如首页.服务信息页面. ...
- [HTML知识体系]语义化标签概论
1.什么是语义化 语义化(Semantic)在HTML5中被大量提起,就是语义化标签向浏览器和开发者展示了它所包裹内容的类型与意思,可是至今我看了好多代码,HTML5新增的语义化标签的使用率还是挺低的 ...
- 第二季第十一天 html5语义化标签 css透明度
span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...
- HTML5语义化标签重构页面
在HTML5未出现之前我们都用div+css来构建页面,比如<div id=”header”>,div的滥用,使得代码的可读性和可维护性很差,现在用本文来介绍一下用HTML5′干净的’语义 ...
随机推荐
- idea 插件的使用
idea 插件的使用 进阶篇(个人收集使用中的) 恭喜你,如果你已经看到这篇文章,证明在idear使用上已经初有小成!那么就要向着大神进发了! 下边就是大神之路! 插件的设置 在 IntelliJ I ...
- 使用 EasyExcel 写Excel数据(表头动态)
引入 jar 包 <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel&l ...
- selenium driver版本和Chrome浏览器版本对应关系
ChromeDriver v2.41 (2018-07-27) ---- Chrome v67-69ChromeDriver v2.40 (2018-06-07) ---- Chrome v66-68 ...
- Codeforces Round #596 (Div. 2, based on Technocup 2020 Elimination Round 2) B2. TV Subscriptions (Hard Version)
链接: https://codeforces.com/contest/1247/problem/B2 题意: The only difference between easy and hard ver ...
- E:last-child
E:last-child 语法: E:last-child { sRules } 说明: 匹配父元素的最后一个子元素E.大理石平台厂家大理石平台厂家 要使该属性生效,E元素必须是某个元素的子元素,E的 ...
- java新建excel文件导出(HSSFWorkbook)
public ActionForward exportExcel(ActionMapping mapping, ActionForm form, HttpServletRequest request, ...
- 为什么用到springboot?
- 为什么margin:0 auto不能用于inline-block元素
前言:今天一个实习生问我,为什么他对图片使用了margin:0 auto,但图片却没有居中,我让他换成对父元素使用text-align:center即可.为什么margin:0 auto对图片不起作用 ...
- 【概率论】4-1:随机变量的期望(The Expectation of a Random Variable Part II)
title: [概率论]4-1:随机变量的期望(The Expectation of a Random Variable Part II) categories: - Mathematic - Pro ...
- Win10配置Java环境变量
很多同学在学习Java入门的时候被Java环境变量搞的一头雾水,今天这篇文章拓薪教育就来说一下如何在win10下配置环境变量; 下载jdk安装包: 首先我们需要下载jdk的安装包,这里提供jdk的安装 ...