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

把自己的学习笔记整理一下，今天是HTML5第一篇，明天是css3选择器，给自己提个醒！哈哈

新的页面结构以及宽松的语法规范，标签可以不用闭合，可以省略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之新增标签用途及应用场景的更多相关文章

html5常见新增标签
本文内容: header nav article footer section aside datalist 音频标签: audio 视频标签: video 插入媒体标签: embed 新增input ...
HTML5基础-新增标签+新增属性+布局案例
html5中常用的结构标签 article 文章 header 头部 nav 导航 section 区域 aside 侧边栏 hgroup 区块的相关信息 figure 定义一组内容及标题 figca ...
HTML5新增标签及具体用法
html5自从推广普及以来,迅速被各大浏览器支持.采用html5设计的网页逐渐成为网页设计的时尚.下面就温习下html5的新增标签. HTML 5 中的新特性包括了嵌入音频.视频和图形的功能,客户端数 ...
HTML5新增标签的汇总与详解
趁着一点闲暇时间,把HTML5的新增标签整理了一下,用了表格的形式展现,分别归纳了各标签的用法及属性分析.这样方便各位以后在运用HTML5标记遇到疑惑时,直接上来对照看下就明了了,希望对大家有帮助哦. ...
html 5 新增标签及简介
作为下一代Web技术的代表,HTML5概念在近些年尤其火热.据了解,HTML5受到垂青最直接的原因就是其跨平台性,除此之外,它不仅仅可以用于表示Web内容,还可能将Web带入一个广阔的生态平台. 下面 ...
HTML 语义化标签-新增标签介绍
HTML 基础知识版权声明:未经博主授权,内容严禁转载 ! HTML语义化标签概念如果没有语义化标签,上面这些 div 都是没有实际意义的,只是我们提供给浏览器的指令. 和语义化代码对比: 什 ...
HTML5 学习总结（一）——HTML5概要与新增标签
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...
HTML5 学习笔记（一）——HTML5概要与新增标签
目录一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
HTML5的文档结构和新增标签
一．HTML5 文档结构1.第一步:打开开发工具,打开指定文件夹:2.第二步:保存 index.html 文件到磁盘中,.html 是网页后缀:3.第三步:开始编写 HTML5 的基本格式.< ...

随机推荐

[hdu5136]Yue Fei's Battle 2014 亚洲区域赛广州赛区J题(dp)
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud 现场赛的时候由于有个地方有点小问题,没有成功AC,导致与金牌失之交臂. 由于今天下 ...
Qt 'void QWidget::show()' is inaccessible
今天在编写Qt窗体头文件时,尽然碰到了这样的报错,'void QWidget::show()' is inaccessible,'QWidget' is not an accessible base ...
rub、sass和compass的安装
长话短说,直接进入正题. [ruby安装] ruby下载网址:http://rubyinstaller.org/downloads/ 选择适合自己电脑的版本: 下载完成后直接双击安装,记得勾选加入环境 ...
C++之------运算符重载
① 什么是运算符重载? 何为C++的运算符重载呢? 其实就是运算符给它重新赋予新的含义或者多重含义.让它有另外一种新的功能. 为什么需要运算符重载? 面向对象中为了实现类的多态性,我们就引用了运算符 ...
Java 学习第三篇；面向对象
1:Java的常用包: 核心类在java 包中:扩展类在javax包中 java.lang 系统默认自动导入包含String Math System Thread等类 java.util 包含了工具 ...
Windows 7下可以使用的各个命令语句+C#打开
Windows 7下可以使用的各个命令语句: control.exe /name microsoft.folderoptions 启动资源管理器的文件夹属性选项卡 control.exe /n ...
大量客户反映wordpress的网站打开巨慢，经分析发现，这些网站大都使用了google的字体服务，由于最近google的服务已经被大陆屏蔽，所以wordpress的网站打开时，会卡在字体加载上。
一会你安装完wp,发现打开巨卡的话,看看这个帖子:http://bbs.myhostcn.com/thread-1026-1-1.html最近一段时间,大量客户反映wordpress的网站打开巨慢, ...
UESTC_韩爷的梦 2015 UESTC Training for Search Algorithm & String<Problem N>
N - 韩爷的梦 Time Limit: 200/100MS (Java/Others) Memory Limit: 1300/1300KB (Java/Others) Submit Stat ...
Jconsole: JAVA 监视和管理控制台简介
Jconsole: JAVA 监视和管理控制台简介 JDK中除了提供大量的命令行之外,还提供两个功能强大的可视化工具:JConsole和VisualVM. 之前对java的调试一直停留在右键-> ...
Linux MySql安装步骤
本文将以MySQL 5.5.47为例,以CentOS 6.5为平台,讲述MySQL数据库的安装和设置. 源码包方式安装 1.新建MySql用户和用户组 groupadd mysql useradd - ...

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

HTML5之新增标签用途及应用场景的更多相关文章

随机推荐

热门专题