HTML5 — 知识篇总结《II》【HTML5大力支持的语义化思想与规范】
HTML—知识篇总结《II》
文章目录
- HTML—知识篇总结《II》
- 一丶 什么是语义化?
- 二丶 重要理论
- 三丶 为什么需要语义化
- 四丶 为什么我们需要知道并且一定要了解语义化
一丶 什么是语义化?
【1】每一个HTML元素都有具体的含义,比如:
a 超链接
p 段落
h 标题
【2】所有元素与展示效果无关,元素展示到页面中的效果,应该由CSS决定
我拿两张图举个例子:
那么肯定会有同学问了:为什么默认情况下h1就会加大加粗呢?
这是因为浏览器带有默认的CSS样式,所以每个元素有一些默认样式。
所以说,一个效果的展示,跟她的元素是没有任何关系的,也就是说不管它是大是小,是粗是斜,他是什么元素的就是什么元素的,更不会因为展示效果改变它原有的元素名称!
二丶 重要理论
选择什么元素,取决于内容的含义,而不是显示出的效果,不要去想它显示什么样子的,记住!!!
三丶 为什么需要语义化
【1】为了搜索引擎优化(SEO)
搜索引擎:百度、搜搜、Bing、Google
让我们浏览器的搜索引擎更好的理解我们想要表达的意思,那么计算机需要的理解就是靠我们【语义化的代码规范】
每隔一段时间,搜索引擎会从整个互联网中,抓取页面源代码
【2】语义化做得好的好处
搜索引擎会认为语义化做得好的网站,它就比较有好感,那么就会把这些网页放在靠前一点的位置展示给人们!
【3】让浏览器的内部插件功能得到更好的实现,增加用户的体验
比如说:现在的浏览器都有阅读模式、语音模式。那么我们使用语义化的去编写代码的话,就会让浏览器更好的理解我们的源代码,感觉它更加友好,使得插件的功能可以完全支持并且实现!
如果我们在看一篇小说,那么当我们点击阅读模式以后,它就会为我们屏蔽掉所有标题栏和广告,只显示标题与正文。像 h、p 这种元素,阅读模式都会将其内容显示出来,但是像 div 这种没有特殊语义的元素,有些浏览器的内核处理就会将它们的内容忽视掉,就不会展示,就是这个道理!
四丶 为什么我们需要知道并且一定要了解语义化
【1】
因为这在我们后面学习一些元素,还有一些属性的时候,会讲到一些过时的不推荐使用了,会对我们有着更深刻的理解。
【2】
在过去的HTML中有些元素和样式纯粹是为了考虑样式的,而在H5中元素跟样式是分离开的。!
##所以终上所述,我们一定要了解透 语义化 的概念
HTML5 — 知识篇总结《II》【HTML5大力支持的语义化思想与规范】相关推荐
- html5语义化规范,html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部--header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
- html5语义化标签 加粗,html5标签 H5标签
html> h5文本元素 1.文本元素 2.加粗文字 b 3.倾斜文字 i 4.删除文字 del 5.加粗文字2 strong 6.安全换行 wbr~~~ 7.强调 倾斜元素 em 8.删除线2 ...
- html5页面常用的代码,最全的 HTML5 知识汇总
引言 HTML5 一直是非常热门的话题,因此此系列文章主要从一些基本功能开始讲起,逐步深入了解HTML5的新概念. 首先了解一些基本的术语和概念.SGML, HTML,XML三者之间的区别 Doc类型 ...
- 学习web前端要了解的HTML5知识有哪些?
今天要跟大家分享的文章是关于学习web前端要了解的HTML5知识有哪些?随着智能手机.平板电脑等移动终端设备越来越普及,用户在移动端花的时间也越来越长.H5开始火热起来,以文字.图片.动画.声音等相结 ...
- HTML5该怎么学?HTML5入门知识汇总
随着智能手机.平板电脑等移动终端设备越来越普及,用户在移动端花的时间也越来越长.H5开始火热起来,以文字.图片.动画.声音等相结合的自媒体出现,给用户带来了全新体验,技术本身带来的新奇感让人们心生向往 ...
- 【重构前端知识体系之HTML】讲讲对HTML5的一大特性——语义化的理解
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...
- 【资源】HTML5工具篇:10个营销人也能轻松使用的在线编辑平台
一 3, 2015 in 资源 作者:Teeya 2014年,HTML5 页面作为营销界新宠儿,"多快好省"的杰出代表,其灵活性高.开发成本低且制作周期短的种种特性使其在移动营销领 ...
- HTML5 知识 整理
HTML5 一.HTML5 简介 什么是 HTML5 ? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web ...
- 关于HTML的面试题-html5/css3篇
1. html5 新增标签有哪些(或者新增的语义标签)? 2. HTML5 中有哪些新特性? 3. 视频有哪几种格式?这几种格式有什么区别? 4. 写出你知道的层级选择符(结构性伪类选择器) 5. 什 ...
- HTML5特别篇——代码规范(2)
文章目录 导语 空格和等号 请避免一行代码过于冗长 空行与缩进 表格与列表 有关省略 和 那么是否可以省略 ? 元数据 结语 导语 上次我们介绍了一部分HTML5的代码规范,本篇文章将承接上文为大家介 ...
最新文章
- bzoj千题计划128:bzoj4552: [Tjoi2016Heoi2016]排序
- optee中的thread_vector_table线程向量表
- springboot 拦截器_Spring Boot入门系列(十)如何使用拦截器,一学就会!
- 从Kaggle HuBMAP 比赛中学习语义分割
- java 杭电1237简单计算器
- Java中的Bean是什么?
- ASP.NET长文章分页
- .net 移动端 web 上传图片_vue使用cropperjs实现移动端图片裁剪上传组件
- python列表嵌套字典取值_Python学习100天-Day03(字符串、列表、字典、元组)
- vue组件之间的数据共享
- 体验极好的临时邮箱,10分钟邮箱,极美观,速度特别快
- Fiddler抓包(Android app)
- linux 同步utc时间吗,中国时区utc在服务器上同步的办法
- js对象扁平化:Javascript对象进行扁平化处理
- AI崛起,阿里的科技孵化力|甲子光年
- linux zip压缩报错,Linux之zip压缩
- KITTI 相关信息汇总
- 考研复试面试四选二内容
- 最小堆的魅力!思路清晰求解「至少需要多少间会议室」
- idea万能快捷键(alt enter),你不知道的17个实用技巧!!!