语义化标签:你认为用什么标签最能描述这块内容,觉得这样表述更有意义,那么就可以使用这个标签。

现在的浏览器对CSS支持都挺完善的(不包括CSS3),讲究的是结构与表现相分离,结构与行为相分离,一个WEB页面,结构是最主要的,结构相当于一栋房子的墙,标签是一块块砖,砖摆得有序,摆得整治齐,墙才牢固,所以说标签语义化很重要,HTML每个标签都有自己的语义:

DIV:一个层,层里面可以嵌很多东西,例如:文本,图片,现在大部分页面的布局框架是用DIV布的,但是尽量少用,一个是为了语义化,一个是为了以后维护方便,别一打开页面源代码,全是DIV。

段落:P,段落内的文字会自动换行,不需要用<br />去换行了,段落与段落之间间距也很容易设。

标题:h1,h2,h3,h4,h5,h6 优化级是越来越低,对搜索引擎有加权重作用,有许多企业网站的LOGO外面就用h1标签的。

列表:ul,ol,li ul是无序(文字)列表,很多网站导航是用列表。

定义列表:dl,dt,dd,类似于字典中的那种效果。

删除:del,删除,也有属性来表明删除的原因cite和删除时间datetime。

数据:table,tr,td(虽然现在不常用,但是他们还是为数据而生的)。

abbr和acronym:abbr是简写形式,acronym是各个单词的缩写形式。

title和alt:

  1. alt是有字数限制,titile没有
  2. title是给元素添加额外的说明信息,不是必须的
  3. alt是替换文本,如果图片不存在或未下载下来,或那些不支持图片的设备来说,该文本会替换图片显示在页面中

以前布局都是table布局,多层嵌套,维护麻烦,添加和删除非常不方便,结构混乱,对搜索引擎非常不利,所以现在提倡语义化的结构:

  1. 去掉样式和样式不存在的时候能够展示出一个清晰的结构
  2. 屏幕阅读器会根据页面的标签来读页面内容,如果页面没有一个好的结构的话设备就会一个字一个字的读
  3. PAD,手机(对CSS支持比较弱)等设备会以某种有意义的方式来演染页面,观看设备的作用就是以符合自身的条件来渲染页面
  4. 搜索引擎的爬虫会根据标签来分析上下文和捕获关键字,将页面收录到搜索引擎中
  5. 团队的开发效率,大家都按照标准,会减少很多的冲突和差异性,后期的维护也很方便

HTML标签的使用要注意语义化的更多相关文章

  1. HTML5语义化标签

    在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...

  2. HTML5学习之语义化标签(一)

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  3. 从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. HTML5学习之语义化标签

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  5. 第二季第十一天 html5语义化标签 css透明度

    span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...

  6. web标签语义化的理解_web语义化是什么意思

    web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解.语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究 ...

  7. HTML语义化之常见模块

    用合理的HTML标记以及特有的属性去格式化文档内容. 浏览器会根据标签的语义给定一个默认的样式. 判断网页标签语义是否良好的一个简单方法就是:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读 ...

  8. 快速理解web语义化

    什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...

  9. 前端面试题-HTML结构语义化

    一.HTML语义化的背景 HTML结构语义化,是近几年才提出来的,对比之前的 HTML 结构,大多是一堆没有语义的标签.用的最多的就是 DIV+CSS,为了改变这种现状,开发者们和官方提出了 HTML ...

随机推荐

  1. .NET向WebService传值为decimal、double、int、DateTime等非string类型属性时,服务器端接收不到数据的问题

    最近在做CRM项目时,使用C#调用SAP PI发布的WebService服务时遇到的问题: 向WebService传值为decimal.double.int.DateTime等非string类型数据时 ...

  2. mysql指定id默认第一

    有个需求 家庭创建人要默认排第一,刚开始用加入家庭的时间排序可以  好简单, 后来加了一个需求 家庭创建人可以转移,结果按时间排序就不行了,又不想去写循环重新排序 就各种百度, 等于就是指定ID排最后 ...

  3. Linux下MySQL安装及配置

    Linux下MySQL安装及配置 安装MySQL Ubuntu系统中,直接使用apt install的方式去安装MySQL的服务端和客户端,MySQL的客户端必须安装,否则无法通过命令连接并操作MyS ...

  4. python scrapy实战糗事百科保存到json文件里

    编写qsbk_spider.py爬虫文件 # -*- coding: utf-8 -*- import scrapy from qsbk.items import QsbkItem from scra ...

  5. keil5的安装及问题

    win8+keil 注意,在进行破解的时候首先要打开一个工程,而且keil要用管理员的身份进行运行, 才可以破解完成 发现打开之后,出现这样的错误. 原因是因为在创建工程的时候在下图中点了是,要点否才 ...

  6. [BZOJ2120]数颜色(莫队算法)

    Description 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜 ...

  7. scala初体验-02

    上一节,我们讲了scala的安装的即一些初步方法,今天,我们来介绍一下scala里面的一些基本操作 1.对于map的的编写,这个是广泛用于Array里面的 val arr = Array(1,2,3, ...

  8. SSM框架的简单搭建

    转:https://blog.csdn.net/zhshulin/article/details/37956105 Spring+SpringMVC+MyBatis spring       : 4. ...

  9. 集合源码分析之 HashSet

    一 知识准备 HashSet 是Set接口的实现类,Set存在的最大意义区别于List就是,Set中存放的元素不能够重复,就是不能够有两个相同的元素存放在Set中,那么怎样的两个元素才算是相同的,这里 ...

  10. java程序——随机数求和

    设计思路:用随机算法随机生成10个数(0~100),循环填充一个数组,然后在循环中显示数组内容,接着用一个循环计算数组元素的和,将结果也显示在消息框中. 流程图: 源代码: package test; ...