一、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结构语义化的更多相关文章

  1. 前端面试题2016--HTML

    本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的!不可能的!不可 ...

  2. 2016最全的web前端面试题及答案整理

    面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engin ...

  3. 史上最全前端面试题(含答案)-A篇

    HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所 ...

  4. 【重点--web前端面试题总结】

    前端面试题总结 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScri ...

  5. 2010年腾讯前端面试题学习(jquery,html,css部分)

    看了牛人写的回忆文章,里面有2010年腾讯的前端面试题,里面涉及到不少基础性的问题,js部分已学习,这是jquery,html和css部分,学习一下:) 原文地址:https://segmentfau ...

  6. web前端面试题库

    web前端面试题及答案   1.常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera.    (Q2) ...

  7. 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)

    好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...

  8. 第136天:Web前端面试题总结(理论)

    Web前端面试题总结 HTML+CSS理论知识 1.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服 ...

  9. 前端面试题总结(一)HTML篇

    前端面试题总结(一)HTML篇 一.iframe的优缺点? 缺点: 1.会阻塞主页面的onload事件(iframe和主页面共享链接池,而浏览器对相同域的链接有限制,所以会影响页面的并行加载). 解决 ...

随机推荐

  1. MySQL-快速入门(15)MySQL Replication,主从复制

    1.何为主从复制. 从一个MySQL主服务器(master)将数据复制到另一台或多台MySQL从服务器(slaves)的过程,将主数据库的DDL和DML操作通过二进制日志传到复制服务器上,然后在从服务 ...

  2. APP登录时Token认证过程

    1.App登录Token登录机制: 一般第一次安装App后,会让你进行注册后登录,而只要登录成功后,以后的每次启动App都是登录状态, 不需要每次启动时再登录.但有些App你若长期没有启动,它会提示你 ...

  3. 打印Java main参数

    public class Main { public static void main(String args[]){ System.out.println("打印main方法中的输入参数, ...

  4. hihocoder 1636 : Pangu and Stones(区间dp)

    Pangu and Stones 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 In Chinese mythology, Pangu is the first livi ...

  5. 利用CSS的translate属性或利用CSS实现图片居中的效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery之样式的类操作

    方法:添加类addClass    .删除类removeClass. 切换类toggleClass <style> div { width: 150px; height: 150px; b ...

  7. JS全选的操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. SpringMVC拦截器(资源和权限管理)

    转自:https://www.cnblogs.com/downey/p/4928951.html 1.DispatcherServlet SpringMVC具有统一的入口DispatcherServl ...

  9. VS 2012 Unit Test

    1,Open Tool->Custmoize 2,Create Unit Tests Move Down Run Test 3,Restart run VS 4,Create UnitTest ...

  10. 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 ...