html5 头部结构  　　<!doctype html>   　　<meta charset=“utf-8”/>

　　<header></header> 页眉

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

　　<hgroup></hgroup> 页面上的一个标题组合

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

　　　　　　<hgroup>

　　　　　　　　<h1></h1>

　　　　　　　　<h2></h2>

　　　　　　</hgroup>

　　<nav></nav>  导航 （包含链接的的一个列表）（包含链接的的一个列表）

　　　　　　<nav>

　　　　　　　　<p><a href=“#”>妙味课堂</a></p>

　　　　　　　　<p><a href=“#”>妙味课堂</a></p>

　　　　</nav>

　　<footer></footer>页脚  页面的底部 或者 版块底部

　　<section> <section> 页面上的版块

　　　　用于划分页面上的不同区域,或者划分文章里不同的节

　　<article></ article > 用来在页面中表示一套结构完整且独立的内容部分

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

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

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

　　　　<figure>

　　　　　　<img src=“miaov.png”/>(注意没有alt)

　　　　　　<figcaption> html5语义化标签</figcaption>

　　 </figure>

　　<time></time>用来表现时间或日期

　　　　<p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>参数

　　　　<p> 我在 <time datetime="2017-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>

　　　　　　<summary>元素标题</summary>

　　　　　　<p>内容</p>

　　　　</details>

　　<dialog></dialog>定义一段对话

　　　　<dialog>

　　　　　　<dt>老师</dt>

　　　　　　<dd>2+2 等于？</dd>

　　　　　　<dt>学生</dt>

　　　　　　<dd>4</dd>

　　　　　　<dt>老师</dt>

　　　　　　<dd>答对了！</dd>

　　　　</dialog>

　　<address></address> 定义文章 或页面作者的详细联系信息

　　<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="100" value="76">

　　<span>76</span>%

　　 </progress>

forms

　　新的输入型控件

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

　　　　tel   :   电话号码

　　　　url   :   网页的URL

　　　　search  :  搜索引擎

　　　　chrome下输入文字后，会多出一个关闭的X

　　　　range  :  特定范围内的数值选择器

　　　　min、max、step( 步数 )

新的输入型控件

　　　　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(); 自定义验证

表单验证

　　Invalid事件  :  验证反馈 input.addEventListener('invalid',fn,false)

　　　　阻止默认验证：ev.preventDefault()

　　　　formnovalidate属性  :  关闭验证

　　　　　　

　　　　　　demo 下载 https://github.com/ningmengxs/html5.git

html5语义化标签——回顾的更多相关文章

  1. html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

  2. Html5语义化标签详解及其兼容性处理

    <header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合 一个 ...

  3. 第二季第十一天 html5语义化标签 css透明度

    span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...

  4. HTML5语义化标签

    在HTML5中最基础也是比较好理解的也就是语义化标签了,,顾名思义语义化也就是可以直接读懂的标签~,这样我们在项目开发过程中不但自己不会因为5花8门的标签命名而伤脑筋,跟同事对接项目也会节约很多时间~ ...

  5. 让HTML5语义化标签兼容IE浏览器

    解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位) <script> var html5 ...

  6. html5语义化标签总结二

    HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...

  7. 转html5语义化标签总结一

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  8. HTML5语义化标签重构页面

    在HTML5未出现之前我们都用div+css来构建页面,比如<div id=”header”>,div的滥用,使得代码的可读性和可维护性很差,现在用本文来介绍一下用HTML5′干净的’语义 ...

  9. HTML5语义化标签总结

    1.语义化标签总结 基础布局标签 <header></header> <nav></nav> <main></main> < ...

随机推荐

  1. 02.for循环

    语法: for(表达式1;表达式2;表达式3) { 循环体; } 练习1: namespace _02.for循环的练习01 { class Program { static void Main(st ...

  2. glyphicons-halflings-regular.woff2 文件 404

    搜索了下,果然是因为mine没有配置的原因. http://stackoverflow.com/questions/32300578/how-to-remove-error-about-glyphic ...

  3. poi学习

    需要节点  <dependency>  <groupId>org.apache.poi</groupId>  <artifactId>poi</a ...

  4. OPENCV VS设置

    OPENCV VS设置 第一步 工程->工具->选项->VC++目录 第二步 这两项放到系统path下 D:\OpenCV2.4.3\VS\bin\Debug;D:\OpenCV2. ...

  5. AE常用代码（标注要素、AE中画带箭头的线、如何获得投影坐标、参考坐标、投影方式、FeatureCount注意事项）

    手上的电脑已经用了将近三年了,想入手一台Surface Pro,所以计划着把电脑上的资料整理下,部分资料打算发到博客上来,资料有同事.也有自己的.也有来自网络的,来源途径太多,也没法详细注明,请见谅! ...

  6. java 理解有符号数和无符号数

    转至:http://jinguo.iteye.com/blog/212049 理解有符号数和无符号数负数在计算机中如何表示呢? 这一点,你可能听过两种不同的回答. 一种是教科书,它会告诉你:计算机用“ ...

  7. sql字段合并与分组聚合

    http://blog.csdn.net/cuixianlong/article/details/74024846 1 字段合并 原始数据如下:表名为Employee ID FirstName Las ...

  8. Python学习笔记之发展史、简介以及特点

    Python发展史 Python 是由 Guido van Rossum 在八十年代末和九十年代初,在荷兰国家数学和计算机科学研究所设计出来的. Python 本身也是由诸多其他语言发展而来的,这包括 ...

  9. IFrame安全问题解决办法（跨框架脚本(XFS)漏洞）

    最近项目要交付了,对方安全测试的时候检测出高危险漏洞,由于刚参加工作不久,经验不足,未涉及过此方面的东西.经过一番查询和探索,最终解决了这个问题,记录一下. 发现的漏洞为缺少跨框架脚本保护.跨框架脚本 ...

  10. （二）svn服务端安装配置

    两种服务端安装包 官方安装包 官方网站:http://subversion.apache.org/ 下载:http://subversion.apache.org/download.cgi 官方提供的 ...