HTML5语义化元素

最新推荐文章于 2024-06-02 09:58:03 发布

pxy_Shineyo

最新推荐文章于 2024-06-02 09:58:03 发布

阅读量739

点赞数

分类专栏： HTML 5 文章标签： html5 html 标签结构阅读

本文链接：https://blog.csdn.net/PXYStyle/article/details/50669544

版权

HTML 5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在HTML 5对HTML 4所做的各种修改中，一个比较重大的修改就是为了使文档结构更加清晰明确，容易阅读，增加了许多新的结构元素。

<header></header>

页眉主要用于页面的头部的信息介绍，也可用于板块头部

<hgroup></hgroup>

页面上的一个标题组合一个标题和一个子标题，或者标语的组合

<hgroup>
语义化标签
<h1>HTML5语义化标签</h1>
 <h2></h2>
</hgroup>
<nav></nav> 导航 （包含链接的的一个列表）
<nav>
<a href=“#”>链接</a>
<a href=“#”>链接</a>
</nav>
<nav> <p><a href=“#”>HTML 5</a></p>
<p><a href=“#”>HTML 5</a></p>    </nav>
<nav>
 <h2>妙味精品课程</h2>
 <ul>
 <li><a href=“#”>javascript</a></li>
 <li><a href=“#”>html+css</a></li>  
  </ul>
</nav>
<footer></footer>页脚  页面的底部 或者 版块底部
<section> <section> 页面上的版块 用于划分页面上的不同区域,或者划分文章里不同的节
<article></ article > 用来在页面中表示一套结构完整且独立的内容部分 可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等。

<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分

aside 的内容应该与 article 的内容相关。被包含在article标签中作为主要内容的附属信息部分，其中的内容以是与当前文章有关的引用、词汇列表等。
在article之外使用，作为页面或站点全局的附属信息部分；
最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

<details></details>用于描述文档或文档某个部分的细节 该元素用于摘录引用等 应该与页面的主要内容区分开的其他内容 Open 属性默认展开
< summary></summary> details 元素的标题
<details>
 <summary>HTML 5</summary>
 <p>HTML 5，新的web时代</p>
 </details>
<dialog></dialog>定义一段对话

<dialog>  
<dt>老师</dt>  
<dd>2+2 等于？</dd>  
<dt>学生</dt>  
<dd>4</dd>  
<dt>老师</dt>  
<dd>答对了！</dd>
</dialog>

<progress>
<progress>定义进度条 <progress max="100" value="76">         
<span>76</span>%    </progress>

IE下的兼容
标签针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们方法如下：在页面的头部加下：

<script> document.createElement(“header”);
 document.createElement(“nav”);
 document.createElement(“footer”); …… </script>

样式 HTML5语义化标签在IE6-8下，我们用js创建出来之后，他是不会有任何默认样式的甚至是 display，所以在样式表里要对这些标签定义一下它默认的display

Forms
新的输入型控件
email : 电子邮箱文本框，跟普通的没什么区别当输入不是邮箱的时候，验证通不过移动端的键盘会有变化
tel : 电话号码
url : 网页的UR
L search : 搜索引擎 chrome下输入文字后，会多出一个关闭的
X range : 特定范围内的数值选择器 min、max、step( 步数 )
例子 : 用JS来显示当前数值

新的输入型控件_2
number : 只能包含数字的输入框
color : 颜色选择器
datetime : 显示完整日期
datetime-local : 显示完整日期，不含时区
time : 显示时间，不含时区
date : 显示日期
week : 显示周
month : 显示月
新的表单特性和函数
placeholder : 输入框提示信息例子 : 微博的密码框提示
autocomplete : 是否保存用户输入值默认为on，关闭提示选择
off autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表 list值为datalist标签的
id required : 此项必填，不能为空
Pattern : 正则验证 pattern=”\d{1,5}“ Formaction 在submit里定义提交地址

表单验证
validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false
oText.addEventListener(“invalid”,fn1,false);
ev.preventDefault()
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow：验证的range最大值
stepMismatch: 验证range 的当前值是否符合min、max及step的规则
customError 不符合自定义验证
setCustomValidity(); 自定义验证

这里只列出了一些基本元素，更多详细内容还需查看W3C的有关文档。