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大力支持的语义化思想与规范】相关推荐

  1. html5语义化规范,html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部--header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

  2. html5语义化标签 加粗,html5标签 H5标签

    html> h5文本元素 1.文本元素 2.加粗文字 b 3.倾斜文字 i 4.删除文字 del 5.加粗文字2 strong 6.安全换行 wbr~~~ 7.强调 倾斜元素 em 8.删除线2 ...

  3. html5页面常用的代码,最全的 HTML5 知识汇总

    引言 HTML5 一直是非常热门的话题,因此此系列文章主要从一些基本功能开始讲起,逐步深入了解HTML5的新概念. 首先了解一些基本的术语和概念.SGML, HTML,XML三者之间的区别 Doc类型 ...

  4. 学习web前端要了解的HTML5知识有哪些?

    今天要跟大家分享的文章是关于学习web前端要了解的HTML5知识有哪些?随着智能手机.平板电脑等移动终端设备越来越普及,用户在移动端花的时间也越来越长.H5开始火热起来,以文字.图片.动画.声音等相结 ...

  5. HTML5该怎么学?HTML5入门知识汇总

    随着智能手机.平板电脑等移动终端设备越来越普及,用户在移动端花的时间也越来越长.H5开始火热起来,以文字.图片.动画.声音等相结合的自媒体出现,给用户带来了全新体验,技术本身带来的新奇感让人们心生向往 ...

  6. 【重构前端知识体系之HTML】讲讲对HTML5的一大特性——语义化的理解

    Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...

  7. 【资源】HTML5工具篇:10个营销人也能轻松使用的在线编辑平台

    一 3, 2015 in 资源 作者:Teeya 2014年,HTML5 页面作为营销界新宠儿,"多快好省"的杰出代表,其灵活性高.开发成本低且制作周期短的种种特性使其在移动营销领 ...

  8. HTML5 知识 整理

    HTML5 一.HTML5 简介 什么是 HTML5 ? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web ...

  9. 关于HTML的面试题-html5/css3篇

    1. html5 新增标签有哪些(或者新增的语义标签)? 2. HTML5 中有哪些新特性? 3. 视频有哪几种格式?这几种格式有什么区别? 4. 写出你知道的层级选择符(结构性伪类选择器) 5. 什 ...

  10. HTML5特别篇——代码规范(2)

    文章目录 导语 空格和等号 请避免一行代码过于冗长 空行与缩进 表格与列表 有关省略 和 那么是否可以省略 ? 元数据 结语 导语 上次我们介绍了一部分HTML5的代码规范,本篇文章将承接上文为大家介 ...

最新文章

  1. bzoj千题计划128:bzoj4552: [Tjoi2016Heoi2016]排序
  2. optee中的thread_vector_table线程向量表
  3. springboot 拦截器_Spring Boot入门系列(十)如何使用拦截器,一学就会!
  4. 从Kaggle HuBMAP 比赛中学习语义分割
  5. java 杭电1237简单计算器
  6. Java中的Bean是什么?
  7. ASP.NET长文章分页
  8. .net 移动端 web 上传图片_vue使用cropperjs实现移动端图片裁剪上传组件
  9. python列表嵌套字典取值_Python学习100天-Day03(字符串、列表、字典、元组)
  10. vue组件之间的数据共享
  11. 体验极好的临时邮箱,10分钟邮箱,极美观,速度特别快
  12. Fiddler抓包(Android app)
  13. linux 同步utc时间吗,中国时区utc在服务器上同步的办法
  14. js对象扁平化:Javascript对象进行扁平化处理
  15. AI崛起,阿里的科技孵化力|甲子光年
  16. linux zip压缩报错,Linux之zip压缩
  17. KITTI 相关信息汇总
  18. 考研复试面试四选二内容
  19. 最小堆的魅力!思路清晰求解「至少需要多少间会议室」
  20. idea万能快捷键(alt enter),你不知道的17个实用技巧!!!

热门文章

  1. 各种边缘检测算子特点比较(canny)
  2. GET POST 传值与接收案例
  3. Poj(2679),SPFA,邻接表(主流写法)
  4. 【VS开发】【图像处理】RGB Bayer Color分析
  5. Word插入公式中如何编辑 argmin
  6. keras 的层,中文
  7. ACL2021中的25个Transformers模型
  8. 【NLPCC 2021】 First Call For Papers
  9. 【Reformer】图解Reformer:一种高效的Transformer
  10. 02 linux常用命令