用语义化标签去写你的HTML,兼容IE6,7,8

简介:

 HTML5增加了更多语义化的标签,如header,footer,nav……让我们在页面编写的时候,不需要再用下面这种方法去布局了:

< div  class="header">这是头部</ div >
< div  class="content">这是中间内容区</ div >
< div  class="footer">这是底部</ div >

  而可以用这样的方式去布局:

< header >这是头部</ header >
< content >这是中间内容区</ content >
< footer >这是底部</ footer >

  但是IE不向前支持,所以我们想让它支持IE6,7,8需要在js和css里增加一点小代码,如下:

document.createElement( "header" );
document.createElement( "content" );
document.createElement( "footer" );

  css:

header,content,footer{ display : block }

  以上的意思就是自定义一个标签为header并将其设为块状显示,下面附上完整代码吧:

<! DOCTYPE  html>
< html >
< head >
< meta  charset="utf-8">
< title >用语义化标签去写你的HTML,兼容IE6,7,8</ title >
< style >
*{margin:0;padding:0;}
header,content,footer{display:block}
header{width:600px;height:150px;line-height:150px;border:1px solid #000;margin:10px auto;text-align:center;font-size:24px}
content{width:600px;height:250px;line-height:250px;border:1px solid #000;margin:10px auto;text-align:center;font-size:24px}
footer{width:600px;height:150px;line-height:150px;border:1px solid #000;margin:10px auto;text-align:center;font-size:24px}
</ style >
< script  type="text/javascript">
document.createElement("header");
document.createElement("content");
document.createElement("footer");
</ script >
</ head >
 
< body >
< header >这是头部</ header >
< content >这是中间内容区</ content >
< footer >这是底部</ footer >
</ body >
</ html >

  接着说些无关的吧,为什么要语义化去写html呢?

  首先,代码易于阅读,当别人看你代码的时候,一眼就能明白;其次,有利于SEO,搜索引擎的爬虫很大程度上会忽略用于表现的标记,而只注重语义标记。

  所以,赶快开始用语义化标签去写你的HTML吧,何况这也不难,对吧?

  附1:

2011051600523386.jpg




   本文转自胡尐睿丶博客园博客,原文链接:http://www.cnblogs.com/hooray/archive/2011/05/07/2039953.html,如需转载请自行联系原作者


相关文章
|
12天前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
|
12天前
HTML_表单标签
HTML_表单标签
17 0
|
4天前
|
iOS开发
iOS中如何显示后台返回的带有html标签的富文本字符串
iOS中如何显示后台返回的带有html标签的富文本字符串
6 0
|
12天前
|
前端开发 JavaScript 数据安全/隐私保护
【HTML】基本标签介绍(下)
【HTML】基本标签介绍(下)
18 3
|
12天前
|
机器学习/深度学习 前端开发 JavaScript
【HTML】基本标签介绍(上)
【HTML】基本标签介绍
17 1
|
12天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
12天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
12天前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
|
12天前
|
搜索推荐 UED 开发者
【专栏:HTML 基础篇】HTML 语义化:提升网页的可访问性
【4月更文挑战第30天】HTML语义化是构建高质量网页的关键,它通过使用有意义的标签提升网页可访问性、SEO和代码可读性。语义化标签如`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;article&gt;`等有助于内容理解与团队协作。合理应用标题、列表和导航结构,同时注意避免过度使用和保持一致性。屏幕阅读器、键盘导航和辅助技术的兼容性是语义化对可访问性的重要影响。通过掌握和应用HTML语义化,我们可以优化用户体验,为数字世界贡献力量。
|
12天前
|
前端开发 数据安全/隐私保护
Day-1 HTML基本标签和CSS常用样式
Day-1 HTML基本标签和CSS常用样式