html5 语义化标签

html的标签语义化:

直观的认识标签的用途和属性的作用。

直观的语义化标签:

1.header<定义头部>
2. nav<导航栏>
3. article<文章>
4. section<段>
5. footer<尾部>
6. aside<侧边栏>
7. datalist<下拉列表/和文本框一起用>

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf8">
    <title>HTML5</title>
    <link rel="stylesheet" href="html5.css">
</head>
<header>
    <h1>Title</h1>
    <h2>Subtitle</h2>
</header>
<aside>
    <nav>
        <h2>Nav1</h2>
        <ul>
            <li>Link1</li>
            <li>Link2</li>
        </ul>
    </nav>
    <nav>
        <h2>Nav2</h2>
        <ul>
            <li>Link3</li>
            <li>Link4</li>
        </ul>
    </nav>
</aside>
<article>     <header>
        <hgroup>
            <h1>HTML5 is beautiful</h1>
            <h2>Semantic, Natural, Simple and Useful</h2>
        </hgroup>
    </header>
    <section>
        <h2>Semantic</h2>
        <p>HTML5 is Semantic.</p>
    </section>
    <section>
        <h2>Natural</h2>
        <p>HTML5 is Natural.</p>
    </section>
</atricle>
<footer>
    <a href="http://www.w3.org/TR" mce_href="http://www.w3.org/TR">W3C</a>
</footer>
</html>   

新特性

HTML5 中的一些有趣的新特性:

1.用于绘画的 canvas 元素

2.用于媒介回放的 video 和 audio 元素

3.对本地离线存储的更好的支持

4.新的特殊内容元素, article、footer、header、nav、section

5.新的表单控件, calendar、date、time、email、url、search

时间: 2024-12-26 20:16:18

html5 语义化标签的相关文章

html5语义化标签使用规范

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

HTML5语义化标签

一.什么是语义化标签?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使用 可是使

好程序员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插件动态创建元素 <!-- 小于等于 ie 8 才进行引包, 用于兼容 html5 语义化标签 --> <!-