前端面试题-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和主页面共享链接池,而浏览器对相同域的链接有限制,所以会影响页面的并行加载). 解决 ...
随机推荐
- 安装开发环境vs2017+sql2016+tfs2017
安装开发环境vs2017+sql2016+tfs2017 编写人:左丘文 2019-7-16 近一年了,一直没空着手写点什么,跟大家交待下吧,去年一次机会,其实也不完全是去年,因此离开了我工作15年的 ...
- [LeetCode] 108. 将有序数组转换为二叉搜索树
题目链接 : https://leetcode-cn.com/problems/convert-sorted-array-to-binary-search-tree/ 题目描述: 将一个按照升序排列的 ...
- 解决intellij idea控制台中文乱码
乱码原因: 1.系统语言:英文 英文系统下遇到乱码问题,分析了程序执行参数如下: ps -ef | grep java 执行后得到如下的结果,省略了classpath: /System/Library ...
- k3 cloud在站点中新增用户
1.进去金蝶云企业平台: 网址:https://cloud.kingdee.com/pt/ 2.进入控制台页面,我的产品下面选择添加用户 去cloud平台新增并同步用户注册信息 3.去管理中心更新用户 ...
- 网络层ddos与应用层ddos区别
以去银行办业务举例: 网络层ddos是让去往银行的道路交通变得拥堵,无法使正真要去银行的人到达:常利用协议为网络层的,如tcp(利用三次握手的响应等待及电脑tcp连接数限制)等 应用层ddos则是在到 ...
- evpp心跳机制
client server xin good
- 64bit机器编译32bit汇编
sudo apt-get install gcc-multilib sudo apt-get install g++-multilib gcc -m32 -S a.c -o a.s gcc -m64 ...
- oracle汇编01
1: / define numeric label "1"one: / define symbolic label "one"/ ... assembler c ...
- flask项目中设置logo
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}&qu ...
- DevExpress 2019 .NET产品现已完全支持Visual Studio 2019
[DevExpress v18.2.8最新版免费下载] 我们非常高兴地跟宣布DevExpress .NET产品现已完全支持Visual Studio 2019.如果您是DevExpress忠实用户,可 ...