前端面试题-HTML结构语义化
一、HTML语义化的背景
HTML结构语义化,是近几年才提出来的,对比之前的 HTML 结构,大多是一堆没有语义的标签。用的最多的就是 DIV+CSS,为了改变这种现状,开发者们和官方提出了 HTML结构语义化的概念,并且在 HTML5 添加了很多语义化标签。
二、HTML语义化的概念
语义化是指根据内容的结构,选择合适的标签,便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析。
三、HTML语义化的必要
随着互联网的发展,WEB承载越来越多的信息(图片,音频,视频等),人们开始用机器来处理网络信息,就此诞生了搜索引擎。如次庞大及复杂的信息如何让搜索引擎处理和挖掘,所以让机器能够更好地读懂WEB上内容就变得越来越重要。
传统的Web由文档组成,W3C希望通过一组技术支撑 “数据的Web”,即 Web of Data,将Web看作一个存储和管理数据的大型分布式数据库。语义Web是构造这样的数据Web的重要一环,帮助人们创建数据并存储在Web上,创建相关的词汇表及数据的处理规则。
四、HTML语义化的作用
4.1 页面结构清晰
去掉或 CSS 样式丢失的时候,也能让页面呈现清晰的结构,增强页面的可读性。
4.2 支持更多设备
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以有意义的方式来渲染网页。
4.3 利于SEO优化
和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息,搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
4.4 便于团队开发和维护
在团队中大家都遵循W3C标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。
五、HTML语义化的方法
(1)根据文档上下文结构合理的选用最适合表达当前语义的标签;
(2)尽可少使用无语义的标签 <div> 和 <span>;
(3)不要使用带有样式的标签,比如:<b>
、 <u>
、 <font>
等,使用 CSS 设置;
(4)标题标签的使用应该根据重要性逐级递减,没有断层,并且一个页面只能有一个 <h1>;
(5)提高关键词密度,如图像的替代文本 alt,提示文本 title;
(6)正确使用内容容器,比如段落 <p>,列表 <ul>, <ol>, <li>, <dl>, <dt>, <dd>;
(7)需要强调的文本,可以使用 <strong>
或 <em>
标签(浏览器默认样式,能用 CSS 设置就不用), <strong>
默认样式是加粗(不用 <b>
),<em>
是斜体(不用 <i>
);
(8)表格注意使用,标题 <caption>,表头 <thead>,表格主体(正文)<tbody>,表注(页脚)<tfoot>。<tr> 定义表格行,<th> 定义表头,<td> 定义表格单元。
(9)表单域使用 <fieldset>标签,并且<legend> 标签为 <fieldset> 定义标题;
(10)每个 <input> 标签对应的说明文本都需要使用 <label> 标签,通过为 <input> 设置 id 属性,并且在 <lable> 标签中设置 for=id 使说明文本和对应的 <input> 关联。
前端面试题-HTML结构语义化的更多相关文章
- 前端面试题2016--HTML
本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的!不可能的!不可 ...
- 2016最全的web前端面试题及答案整理
面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engin ...
- 史上最全前端面试题(含答案)-A篇
HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所 ...
- 【重点--web前端面试题总结】
前端面试题总结 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScri ...
- 2010年腾讯前端面试题学习(jquery,html,css部分)
看了牛人写的回忆文章,里面有2010年腾讯的前端面试题,里面涉及到不少基础性的问题,js部分已学习,这是jquery,html和css部分,学习一下:) 原文地址:https://segmentfau ...
- web前端面试题库
web前端面试题及答案 1.常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera. (Q2) ...
- 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)
好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...
- 第136天:Web前端面试题总结(理论)
Web前端面试题总结 HTML+CSS理论知识 1.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服 ...
- 前端面试题总结(一)HTML篇
前端面试题总结(一)HTML篇 一.iframe的优缺点? 缺点: 1.会阻塞主页面的onload事件(iframe和主页面共享链接池,而浏览器对相同域的链接有限制,所以会影响页面的并行加载). 解决 ...
随机推荐
- [19/06/03-星期一] HTML基础_C/S与B/S的区别&标题标签(h1-h6)、段落标签(p)
一.C/S与B/S的区别 C/S(Client/Server):客户端/服务器 1)一般使用的软件都是C/S架构,比如QQ.360.office365: 2)C表示客户端,用户通过客户端来使用软件:S ...
- mysql定时任务/mysql作业
转自:https://www.jb51.net/article/138569.htm 详细参考:https://www.cnblogs.com/qlqwjy/p/7954175.html(事件& ...
- 工具使用--Tomcat
一.Tomcat 服务搭建 1.进入apache官网下载tomcat 8.在左手边的菜单区,选择download下的tomcat8 版本: PS:操作系统,文件类型 2.将zip文件下载,解压到本地: ...
- Two modules in a project cannot share the same content root报错解决方案
观察上方是否出现两个同样的项目,删除不需要的那个,我觉得是因为两个项目同时引用一个根目录文件导致的.
- WHY吃糖果 QDUOJ 二分嵌套
WHY吃糖果 QDUOJ 二分嵌套 原题链接 解题思路参考链接 题意 给出一个\(n*n\)的矩阵,每个格子的权值为\(i*i+j*j+i*j+100000*(i-j)\),求该矩阵中第m小的权值为多 ...
- HDU 3466 Proud Merchants 带有限制的01背包问题
HDU 3466 Proud Merchants 带有限制的01背包问题 题意 最近,伊萨去了一个古老的国家.在这么长的时间里,它是世界上最富有.最强大的王国.因此,即使他们的国家不再那么富有,这个国 ...
- pathlib模块替代os.path
pathlib模块替代os.path 在Python 3.4之前和路径相关操作函数都放在os模块里面,尤其是os.path这个子模块,可以说os.path模块非常常用.而在Python 3.4,标准库 ...
- 看完阮一峰的React教程后, 我写了一个TodoList
看完阮一峰的React教程后,就自己做了这个TodoList,自己慢慢琢磨效率差了点但是作为入门小练习还是不错的. 以下是效果图:我的源码:todolistUI:bootstrap 4 一.组件化 我 ...
- 数据库管理利器——Navicat Premium v12.1.25 下载和安装
目录 1. 按 2. 新功能 3. 安装 4. 激活 5. 下载地址 1. 按 Navicat Premium 是一套数据库管理工具,让你以单一程序同時连接到 MySQL.MariaDB.SQL Se ...
- 2019 Multi-University Training Contest 4 1008K-th Closest Distance(二分+主席树)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6621 题目大意:给一个数组,每次给 l ,r, p, k,问区间 [l, r] 的数与 p 的绝对值的 ...