HTML5之新增标签用途及应用场景

新的页面结构以及宽松的语法规范,标签可以不用闭合,可以省略head,body等标签

<!DOCTYPE HTML>
<meta charset="utf-8">
<title>无标题文档</title>
<h1>标题</h1>

语义化标签

<header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部

<hgroup></hgroup> 页面上的一个标题组合一个标题和一个子标题,或者标语的组合

<hgroup>
	<h1>主标题</h1>
	<h2>副标题</h2>
</hgroup>
<nav></nav> 导航 (包含链接的的一个列表)
<nav>
	<a href="#">链接</a>
	<a href="#">链接</a>
</nav>
<nav>
    <p><a href="#">链接</a></p>
    <p><a href="#">链接</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),其中的内容可以是友情链接、附属导航或广告单元等。

<figure> < figure > 用于对元素进行组合。一般用于图片或视频

<figcaption> <figcaption> figure的子元素 用于对figure的内容 进行说明

<figure>
    <img src="miaov.png"/>(注意没有alt,已经废弃)
    <figcaption> 图片描述</figcaption>
</figure>
<time></time>用来表现时间或日期

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<!--参数-->
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。 </p>
<datalist></datalist>选项列表。与 input 元素配合使用,来定义 input 可能的值。

<input type="text" list="valList" />  
<!--类似自动完成功能-->
<datalist id="valList">
     <option value="javascript">javascript</option>
     <option value="html">html</option>
     <option value="css">css</option>
</datalist>

<details></details>用于描述文档或文档某个部分的细节 该元素用于摘录引用等应该与页面的主要内容区分开的其他内容 Open 属性默认展开

< summary></summary> details 元素的标题

<details open>
    <summary>标题标题</summary>
    <p>附属信息或描述</p>
</details>
<dialog></dialog>定义一段对话

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

<mark></mark> 需要标记的词或句子(高亮显示)

<keygen>给表单添加一个公钥

<form action="http://www.baidu.com" method="get">
用户: <input type="text" name="usr_name" />
公钥: <keygen name="security" />
     <input type="submit" />
</form>
<progress><progress>定义进度条

<progress max="10" value="7">
    <span>76</span>%
</progress>

IE下的兼容

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

Html5shiv也是根据这个原理实现的

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
document.createElement("header");
document.createElement("section");
document.createElement("aside");
document.createElement("article");
document.createElement("footer");
document.createElement("leo");
</script>
<style>
header,section,aside,article,footer{ display:block;}
body{margin:0;}
header{height:100px;background:#9F0;}
section{ height:300px;}
aside{width:20%;height:300px;float:left;background:#CF0;}
article{width:80%;height:300px;float:left;background:#CC3;}
footer{height:100px;background:#F90;}
leo{height:100px;background:red;color:#fff; text-align:center; font-size:50px; }
</style>
</head>
<body>
<header>头部</header>
<section>
     <aside>左侧</aside>
    <article>主体</article>
</section>
<footer>底部</footer>
</body>
</html>

Forms

新的输入型控件

email : 电子邮箱文本框,跟普通的没什么区别
当输入不是邮箱的时候,验证通不过
移动端的键盘会有变化 tel : 电话号码

url : 网页的URL

search : 搜索引擎 chrome下输入文字后,会多出一个关闭的X

range : 特定范围内的数值选择器
           min、max、step( 步数 )

number : 只能包含数字的输入框

color : 颜色选择器

datetime : 显示完整日期

datetime-local : 显示完整日期,不含时区

time : 显示时间,不含时区

date : 显示日期

week : 显示周

month : 显示月

新的表单特性和函数

placeholder  :  输入框提示信息,占位符,对于密码类型的input,体验更好

<input type="password" required placeholder="请输入6-18位字符" />
autocomplete : 是否保存用户输入值 默认为on,关闭提示选择off

<input type="text" name="user" autocomplete="off"/>
autofocus : 指定表单获取输入焦点

<input type="text" name="user" autocomplete="off" autofocus />

list和datalist : 为输入框构造一个选择列表

list值为datalist标签的id

<input type="text" list="valList" />  
<!--类似自动完成功能-->
<datalist id="valList">
	<option value="javascript">javascript</option>
	<option value="html">html</option>
	<option value="css">css</option>
</datalist>
required : 此项必填,不能为空

<input type="password" required placeholder="请输入6-18位字符" />
Pattern : 正则验证 pattern="\d{1,5}“

<form action="http://www.baidu.com" method="get"> 
    <input type="text" pattern="\d{1,5}"/>
    <input type="submit" />
</form>
Formaction 在submit里定义提交地址

<form method="get"> 
    <input type="text" name="row1"/>
    <input type="text" name="row2"/>
    <input type="text" name="row3"/>
    <input type="submit" formaction="http://www.qq.com" value="保存草稿" />
    <input type="submit" formaction="http://www.sina.com.cn" value="发送"/>
</form>
表单验证

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload=function()
{
    var oText=document.getElementById("text");
    oText.addEventListener("invalid",fn1,false);
    function fn1(ev)
    {
        alert(oText.validity.valueMissing);// 当输入值为空的时候 返回true
        ev.preventDefault()
    }
}
</script>
</head>
<body>
<form method="get" id="form"> 
    <input type="text" name="row1" required id="text"/>
    <input type="submit" formaction="http://www.sina.com.cn" value="提交"/>
</form>
</body>
</html>



关键词: html5教程

网友留言(0条)

发表评论