前端面试题-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和主页面共享链接池,而浏览器对相同域的链接有限制,所以会影响页面的并行加载). 解决 ...
随机推荐
- MySQL-快速入门(15)MySQL Replication,主从复制
1.何为主从复制. 从一个MySQL主服务器(master)将数据复制到另一台或多台MySQL从服务器(slaves)的过程,将主数据库的DDL和DML操作通过二进制日志传到复制服务器上,然后在从服务 ...
- APP登录时Token认证过程
1.App登录Token登录机制: 一般第一次安装App后,会让你进行注册后登录,而只要登录成功后,以后的每次启动App都是登录状态, 不需要每次启动时再登录.但有些App你若长期没有启动,它会提示你 ...
- 打印Java main参数
public class Main { public static void main(String args[]){ System.out.println("打印main方法中的输入参数, ...
- hihocoder 1636 : Pangu and Stones(区间dp)
Pangu and Stones 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 In Chinese mythology, Pangu is the first livi ...
- 利用CSS的translate属性或利用CSS实现图片居中的效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery之样式的类操作
方法:添加类addClass .删除类removeClass. 切换类toggleClass <style> div { width: 150px; height: 150px; b ...
- JS全选的操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- SpringMVC拦截器(资源和权限管理)
转自:https://www.cnblogs.com/downey/p/4928951.html 1.DispatcherServlet SpringMVC具有统一的入口DispatcherServl ...
- VS 2012 Unit Test
1,Open Tool->Custmoize 2,Create Unit Tests Move Down Run Test 3,Restart run VS 4,Create UnitTest ...
- ubuntu下安装3.6.5
1.下载python3.6.5安装包 地址:https://www.python.org/ftp/python/3.6.5/Python-3.6.5.tgz 解压:tar -xvzf Python-3 ...