190320你如何理解 HTML 语义化？
你如何理解 HTML 语义化？
- 概要
- HTML目标
- HTML实现原理
- HTML优点
- HTML缺点
- HTML演进趋势
- HTML解决的问题
- HTML技术规范
- HTML最佳实践
- HTML市场应用趋势
- 小结
概要
HTML 语义化，更符合 W3C统一的规范标准，是技术趋势。
没有样式时，浏览器的默认样式也能让页面结构很清晰。
对功能障碍用户友好。屏幕阅读器（如果访客有视觉障碍）会完全根据你的标记来“读”你的网页。
对其他非主流终端设备友好。例如机顶盒、PDA、各种移动终端。
对 SEO 友好。
起底 HTML
目标：
HTML 的诞生是为了描述超文本。描述超文本的方式有很多，比如：HTML、TGML、还有 markdown。超文本的用途也很多，例如：描述一个网页，或者描述一个 Word 文档等。做网页只是其中之一。HTML 最初设计时确实是为了做网页考虑的。但 HTML 不是做网页的唯一工具。
实现原理：
探索 HTML 是如何呈现、渲染还有它强大的功能时，你只是在探索你的浏览器的解码能力而已。具体 HTML 是如何实现在浏览器展示的，其实也就相当于是浏览器的解析过程具体如何的，这点放到浏览器和网络以及协议去讲。
HTML 的优点在于：
- a、网络标准统一。HTML5 本身是由 W3C 推荐出来的；
- b、多设备、跨平台。用 HTML5 的优点主要在于，这个技术可以进行跨平台的使用。比如你开发了一款 HTML5 的游戏，你可以很轻易地移植到 UC 的开放平台、Opera 的游戏中心、Facebook 应用平台，甚至可以通过封装的技术发放到 App Store 或 Google Play 上，所以它的跨平台性非常强大，这也是大多数人对 HTML5 有兴趣的主要原因 ；
- c、即时更新。通常平台的审核都需要七个工作日左右的时间，如果你发布之后发现问题怎么办?Web 方式就不存在这种问题；
- d、有利于搜索引擎优化，便于 SEO，Baidu，Google 都会优先收录静态页面，不仅收录的快还收录的全；
- e、加快页面打开浏览速度。静态页面无需连接数据库打开速度较动态页面有明显提高；
- f、减轻服务器负担，浏览网页无需调用系统数据库。
HTML 的缺点在于：
- a、安全：像之前 Firefox4 的 web socket 和透明代理的实现存在严重的安全问题，同时 web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料；
- b、完善性：许多特性各浏览器的支持程度也不一样；
- c、技术门槛：HTML5 简化开发者工作的同时代表了有许多新的属性和 API 需要开发者学习，像 web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战；
- d、性能：某些平台上的引擎问题导致 HTML5 性能低下。
- e、兼容性：只能支持到 IE9 及较新的浏览器。
演进趋势：
HTML 就是一门语言，中文全名叫做：“超文本标记语言”。超文本的意思就是不止文本，还可以包含图片，链接，音乐，甚至程序等非文字元素。
本质上来看，HTML 其实和我们日常交流使用的语言没什么两样，不同在于自然语言是用于人与人之间的交流，而 HTML 则是用于人与浏览器之间的交流。
要想让浏览器按照我们的意愿展示出我们期望的酷炫效果，我们就得学会用 HTML 语言来告诉浏览器，在页面的那个位置，放置一个什么控件。至于这个控件长啥样，具体有什么功能，则分别要 CSS 和 JavaScript 来实现。
CSS：层叠样式表，是用来表现 HTML 或 XML 等文件样式的计算机语言。
JavaScript：一种直译式脚本语言，用来给网页实现复杂的动态功能。
关于这两门语言的更多内容暂时不在这儿讨论。接着说 HTML。
HTML 发展到如今，只经历了了短短的十多年。它是在 1993 年首次发布，作为一种网上信息浏览传输的规范。
之后的几年又迅速发布了 2.0 版，再到 3.2 版和 4.0 版。直到 1999 年的 4.01 版成为一个标志性的版本。
在这高速发展的⼏年⾥，W3C 组织逐渐掌握了 html 规范的控制权。之后，HTML 经过了一个较为争议的过程，出现了一个分支，XHTML 和 HTML5。由于 XHTML 的不兼容性，造成众多浏览器厂家和开发者的反对：W3C 关闭了 XHTML 项目。
2006 年 W3C 重新接入其中，于 2008 年发布了 html5 的草案，提出了解决问题的办法和标准。于是各大浏览器厂商按耐不住开始升级浏览器以支持 html5，html 重新焕发出无穷无尽的生命力并在互联网的舞台上大放光彩。
可以说，html5 的出现和设计就是为了解决问题，它不是一个颠覆性的概念。相反，它的核心理念是保持一切新特性平滑过渡，以保证兼容性所以可以放心使用。同时它的更新非常具有实用性，它在所有可能的地方都努力进行了分离：让表现和内容分离，使得访问下更佳，降低了不必要的复杂度让代码更具有可读性，同时让文件不会过大导致页面加载变慢还化繁为简，有了新的简化的 doctype，新的简化的字符集声明，简单而强大的 html5API 还以浏览器原生功能替代了部分 js 代码，开发体验使用体验大大增强。
解决的实际问题：
诞生出来主要就是为了做网页的。但不仅仅可以做网页，还可以开发游戏之类的。
技术规范：
HTML 这门语言，主要是通过一个个被尖括号<>包裹的标签对内容进行标记，来告诉浏览器如何显示其中的内容。例如文字如何处理，画面如何安排，图片如何显示等。其中作为结束的标签在<>中有一个反斜杠/HTML 中的标签按照类别主要分为 12 大类，共 119 种，其中有 30 个是 HTML 5 中新推出的标签。我们来看看我们最常用的标签都有哪些吧
常见的 9 类标签。基础类，格式类，表单类，图像类，音频视频类，链接类，样式类，列表类，表格类。
HTML5 的新特性：新的 doctype 和新的字符集写法；新增语义元素-结构类，文本类；新增 Form 表单的表单元素，表单特性和函数；
掌握这些常用标签和新特性，就可以进行网页的开发。
最佳实践:
如果想尽可能的去用好 HTML，还是 w3cschool 上学习练习 HTML 语法，然后多做 demo。
除此之外，
- a、尽可能少的使用无语义的标签 div 和 span；
- b、需要强调的文本，可以包含在 strong 或者 em 标签中（浏览器预设样式，能用 CSS 指定就不用他们），strong 默认样式是加粗（不要用 b）、em 是斜体（不用 i）。
市场应用趋势：
主要还是开发者，用来开发网页，游戏或者移动应用等。
小结
用语义化的标签去编写代码，更符合 W3C 标准，是技术趋势。
- 有利于搜索引擎优化 SEO，
- 没有样式时，页面也能呈现出很好的内容结构、代码结构。
- 用户体验。对 title、alt 用于解释名词或解释图片信息、label 标签的活用等
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页。
- 便于团队开发和维护。语义化更具可读性，是下一步网页的重要动向，遵守 W3C 标准的团队都遵循这个标准，可以减少差异化。
参考
HTML 是什么？
HTML5 的优点与缺点？
简述 HTML 的优点和缺点
HTML5 的优点与缺点
html5 的优缺点
理解 HTML 语义化
190320你如何理解 HTML 语义化？相关推荐
- 如何理解 HTML 语义化
你是如何理解 HTML 语义化的?(面试) 在了解 HTML 语义化之前,先科普一下下面几个名词: 语义:是语言所蕴含的意义 (语言的含义).简单的说,符号是语言的载体,符号本身没有意义,只有赋予含义 ...
- 你是如何理解 HTML 语义化的？
面试题–你是如何理解 HTML 语义化的? 简单来说:就是用正确的标签做正确的事.比如: 头部:header 导航:nav 主体内容:main 标题:h1 ~ h6 段落:p 侧边栏:aside 页脚 ...
- 如何理解Web语义化
HTML是内容的载体. css样式只是定义表现,人可以直观的感受到,而机器无法理解. 语义化:词必达意.其目的:在不依赖样式的情况下,文档结构依旧清晰:且人.搜索引擎通过读取HTML元素便能更好地理解 ...
- 【semantic】如何理解 web 语义化？
http://www.zhihu.com/question/20455165 顾轶灵,百度前端工程师 http://Lync.in 什么是语义化?其实简单说来就是让机器可以读懂内容. 先 随便扯扯.对 ...
- 好程序员web前端分享：如何理解web语义化?
首先,在理解之前,我们需要先了解,什么是语义化.所谓语义化,简单来说,就是能够更清晰,更直观的理解语言所要表达的含义,所谓词必达意就是这个意思.那么在开发过程中的语义化指的是什么呢?就是能够让除了当事 ...
- [html] 你对标签语义化的理解是什么？
[html] 你对标签语义化的理解是什么? 标签语义化的初衷是让正确的标签做正确的事情,但对于人来说,标签的语义除了在 tag 上体现,还可以从 id, class 上体现出来.而每个人对于标签的理解 ...
- 深入浅出的web语义化理解
写目录 前言 一:什么是语义元素? 二:为什么要语义化? 三:常用的语义元素 四:文档结构标签 五:参考 前言 很多面试官会问: 谈谈你对 HTML5语义化标签的理解. 那么本篇博客可以对你理解HTM ...
- html语义化的理解是什么,html5语义化,html5的语义化的理解
家里有个熊孩子,经常会有一些意想不到的事情发生:回家的时候,他会笑呵呵冲过来,大声喊着臭爸爸;你让他把鞋穿上,他会提起鞋子往楼下扔在小孩的世界里,他虽然会说话,但不一定明白其中的意思,不能正确表达;同 ...
- 常见的html行级元素及语义,HTML入门之——结构，常用标签及其属性，再加上语义化...
一,HTML简介(来源HTML百度百科) HTML:超文本标记语言,是指能够包含链接,图片,程序,视频等非文字元素的页面 二,HTML,XML,XHTML之间有什么区别 HTML:超文本标记语言,语法 ...
最新文章
- 万事开头难!最新MyBatis程序配置教程(IDEA版)
- win7利用remote连接服务器，显示发生身份验证错误 要求的函数不受支持
- 第十三周项目二-动物这样叫(1)
- 窗函数-减少傅里叶变换泄漏
- 基础二(格式化字符串、运算符和编码)
- fastadmin弹框提示不起作用 confirm
- 学习MSCKF笔记——四元数基础
- Marketing Cloud extension field technical name
- Lambda 表达式详解~深入JVM实现原理
- SqlServer分区表概述（转载）
- 工具类与工具函数 —— fatal.h
- python 城市地图_使用底图获取城市地图的最佳方法？ - python
- protel99se中文pojie版-protel99se附安装步骤
- wpsa4排版_WPS2000如何快速排版
- linux+ARM学习路线
- 大学生心理健康调研报告
- python：类基础
- md文档转换为HTML文件
- 仅以此篇纪念负数取模
- 什么是服务器、云服务的优缺点是什么、为什么要使用云服务器？