html5-语义化标签（一）

1.什么是语义化标签？

　　根据内容的结构化（内容化），选择合适标签

2.为什么要语义化

　　为了在没有css样式的情况下，页面也能很好的呈现出很好的内容结构、代码结构

　　方便其他设备的解析（屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页

有利开发团队的维护，语义化更具可读性，

3.写HTML代码时应该注意什么

　　尽可能少用无意义的div和span标签

　　在语义不明显的时候，既能使用div和p标签的时候，尽量用p，因为p标签在默认的情况下有上下边距，对兼容性有利

　　不要使用纯样式标签，如：b、font、u等，改用css设置

　　需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用css指定就不用他们）strong默认样式是加粗1（不要用b），em是斜体（不要用i）

　　引用借鉴（转发）http://www.cnblogs.com/freeyiyi1993/p/3615179.html

时间： 2024-08-06 01:04:45

html5-语义化标签（一）的相关文章

html5语义化标签使用规范

Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍性的信息如网站名称.logo或者导航栏nav. <header> <h1>html5语义化标签</h1> <nav> <h1>导航</h1> <ul> <li>章节标签</li> <li>标

一.什么是语义化标签?1.那么什么叫做语义化呢?说的通俗点就是:就是给div起个外号,比如,网页上的文章的标题就可以叫他标题,网页上的各个文章,就可以叫他文章. 2.为啥使用语义化标签?(1). 更容易被搜索引擎收录.(2). 更容易让屏幕阅读器读出网页内容.(3). 能够更好的体现页面的主题.(4).兼容性更好,支持更多的网络设备.二.常见语义化标签头部--header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍性的信息如网站名称.logo或者导航栏

html5语义化标签——回顾

html5 头部结构 <!doctype html> <meta charset=“utf-8”/> <header></header> 页眉主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合一个标题和一个子标题,或者标语的组合 <hgroup> <h1></h1> <h2></h2> </hgroup

HTML5语义化标签总结

1.语义化标签总结基础布局标签 <header></header> <nav></nav> <main></main> <aside></aside> <article></article> <footer></footer> 注意:IE8以后不兼容H5标签,如果需要兼容IE8一下的浏览器,则需要如下操作: 如果在sublime,或者WebStrom使用可是使

html5 语义化标签

html的标签语义化: 直观的认识标签的用途和属性的作用. 直观的语义化标签: 1.header<定义头部>2. nav<导航栏>3. article<文章>4. section<段>5. footer<尾部>6. aside<侧边栏>7. datalist<下拉列表/和文本框一起用> <!DOCTYPE html> <html> <head> <meta charset=&quo

好程序员web前端分享常见html5语义化标签

我们知道,创建结构清晰的页面可以建立良好的语义化基础,也降低了使用css的难度,下面总结了一些常用的语义化标签,有空慢慢更新,欢迎大家补充语义化HTML:用最恰当的HTML元素标记的内容. 优点:1 提升可访问性: 2 S-EO: 3 结构清晰,利于维护: (HTML5旧的行内元素都被归类为短语内容) 通用容器:div——块级通用容器:span——短语内容无语义容器. 如果语义不合适,也不要霸王硬上弓,=.. =老实的用div吧. < title></title>:简短.描

html5新增的语义化标签

1.什么是语义化标签? 那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如, 网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签. 文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等. 2.为啥使用语义化标签? 1. 更容易被搜索引擎收录. 2. 更容易让屏幕阅读器读出网页内容. 3. 能够更好的体现页面的主题 4.兼容性更好,支持更多的网络设备 3.html语义化标签 1):

HTML5之语义化标签

在HTML5之前采用HTML+CSS文档结构写法: ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航.页眉.页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航.内容区域) class选择器说明 class类选择器——可以应用于页面任意多个元素,非常适合标识内容类型或其他相似的条目. 代码: <body> <div id="header">...</div> <div id="nav">...

浅谈html语义化标签,Html5新增语义化标签

Html语义化标签,Html5新增语义化标签自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? 那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下我可以使用这个标签才合理)比如, 网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签. 文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用em标签表示强调等等. 2.为啥使用语义

html5中语义化标签以及兼容性处理方法

1.html5中新增的语义化标签: artical footer header nav section aside 2.在IE8和IE8以下浏览器不支持以上新增的语义化标签 3.解决方案方案1:在浏览器解析前动态创建标签元素,然后转成块级元素例如: document.createdElement("header") 方案2:通过引入html5shiv.js插件动态创建元素  <!-