H5--01新增的语义化标签、form表单标签属性的增强
一、名词解读
1.什么叫语义化？简单的理解就是：见名知意，不仅让电脑能够很好的解析，而且更重要的是让人也可以读懂。
2.什么是H5?简单的解释是html5是html4.0的升级版；实质是结构Html5、样式css3、行为API都有所增强。H5并不仅仅只是做为HTML标签语言的一个新版本，更重要的是它制定了web应用开发的一系列标准，成为第一个将web作为应用开发平台的HTML语言。
3.Html4与Html5的区别：
最大的区别在于表头：相对于Html4来说Html5更加的简洁
Html4: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Html5: <!DOCTYPE html>4.由于html5增加了新的标签、css样式、jsAPI，可能有些浏览器的版本不支持，解决谦容性问题需要引入html5shiv.min.js的js文件。
<!--[if lt ie 9]>
<script src="html5shiv.min.js"></script>
<![endif]-->二、新增的语义标签
<nav>表示导航
<header>表示页眉，也就网页的头部
<footer>表示页脚，网页的底部
<section>表示区块，建议用在内部有标题的区块
<article>表示文章、内容、评论、帖子、博客等
<aside>表示侧边栏，如文章的侧栏
<address>表示联系人信息的区块
<hgroup>表示对网页或区段的标题进行组合
<******>表示给表单添加一个公钥
<menu>菜单列表
<audio>表示音频内容
<video>表示视频
<source>表示定义媒体资源
<output>用于不同类型的输出
<figure>是一种元素的组合，带有可选择性。用来表示页面上一块独立的内容。
<figcaption>元素表示figure元素的标题，它属于figure元素。figcation元素必须写在figure元素的内部，可以写在figure元素内的其它从属元素前面或后面。figure元素内最多只允许放置一个figcation元素。
<time>时间元素（datetime属性主要是用来说明这个时间格式，不显示）
日期与时间之间需要用T文字分隔，T表示时间；<time datetime="2010-11-13T22:30">我们相聚是晚上十点半</time>
时间加上Z文字表示给机器编码时使用UTC时间标准；<time datetime="2010-11-13T20:00Z">我们相聚是晚上八点</time>
加上+时差，表示向机器编码另一地区时间，如果是编码本地时间，则不需要添加时差<time datetime="2010-11-13T20:00+09：00">我相聚是晚上八点</time>
pubdate属性；是一个可选的boolean值,代表确定的时间
<!--只被谷歌火狐浏览器显示;相当于是点击展示的标志-->
<details >
<!--summary是给要点击的内容起个名字，发生点击事件-->
<summary>
muzidigbig的博客网址
</summary>
<!--显示的内容-->
<p>
https://blog.csdn.net/muzidigbig
</p>
</details>
<mark>元素默认背景颜色为黄色；可通过修改背景颜色来改变它的颜色。
<progress> 标签定义运行中的进度（进程、进度条等）。
注意：value和max的值必须都大于0；但value的值要小于或等于max的值
<meter value="50" max="100"></meter>加强版<ol>；html5中多了start和reversed属性
HTML5 Input 类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--解决h5在IE9以下的兼容性问题-->
<!--[if lte ie 9]>
<scrijs高级 src="html5shiv.js"></script>
<![endif]-->
</head>
<body>
<form action="#" id="iform" method="get" >
<!--html5提供的表单自带简单的校验(不合法有提示)，但不影响提交-->
<p>
<!--autofocus:网页加载时自动获取焦点-->
<label for="email">邮箱：</label><input type="email" id="email" autofocus>
</p>
<p>
<!--required规定输入域不能为空,点击提交后自动校验并有提示-->
<label for="url">URL：</label><input type="url" id="url" required >
</p>
<p>
<!--number数字类型；step设置倍数-->
<label for="num">NUM：</label><input type="number" id="num" step="10" placeholder="1" >
</p>
<p>
<label for="file">上传文件：</label><input type="file" id="file" >
</p>
<p>
<label for="col">颜色：</label><input type="color" id="col" >
</p>
<p>
<label for="sea">搜索：</label><input type="search" id="sea" >
</p>
<p>
<label for="tel">电话：</label><input type="tel" id="tel" >
</p>
<p>
<label for="time">time时间：</label><input type="time" id="time" >
</p>
<p>
<label for="date">date日期：</label><input type="date" id="date" >
</p>
<p>
<label for="month">年/月：</label><input type="month" id="month" >
</p>
<p>
<label for="dt-local">日期+时间：</label><input type="datetime-local" id="dt-local" >
</p>
<p>
<label for="week">week：</label><input type="week" id="week" >
</p>
<p>
<label for="dt">datetime：</label><input type="datetime" id="dt" required>
</p>
<p>
<label for="rg">range范围(滑动条)：</label><input type="range" id="rg" >
</p>
<p>
<!--正则；邮箱校验;pattern=''正则表达式；tabindex="number"规定元素的 tab 键控制次序（1 是第一个）-->
<label for="ema">邮箱检验</label><input type="text" pattern="(^(\d{3,4}-)?\d{7,8})$|^(13|15|18|14)\d{9}$" id="ema" name="email" placeholder="aaa@qq.com" required="" tabindex="2" >
</p>
<p>
<!--放在id='iform'表单内无需定义form=''属性-->
<input type="submit" form="iform" value="提交">
</p>
</form>
<p>
<!--提交表单submit放在form表单外body的任意地方；通过sub中的form=''与上面个form表单中定义的id进行联系，这是提交的表单为id='iform'的表单-->
<input type="submit" form="iform" value="提交">
</p>
</body>
</html>新增input属性
|
新增input属性
multiple 多选 min, max 和 step 最小、最大和设置number类型的倍数 <fieldset> 标签定义和用法fieldset 元素可将表单内的相关元素分组。 <fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。<fieldset> 标签没有必需的或唯一的属性。 当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。 disabled 属性规定应该禁用 input 元素。 标准属性：<legend> 标签定义和用法<legend> 标签为 <fieldset>、<figure> 以及 <details> 元素定义标题。 HTML 4.01 与 HTML 5 之间的差异在 HTML 4.01 中， <legend> 仅用于 <fieldset> 元素。 在 HTML 5 中， <legend> 标签应用于 <fieldset>、<figure> 以及 <details> 元素。 在 HTML 5 中，不支持 align 属性。请使用 CSS 代替。 HTML 5 <label> 标签定义和用法<label> 标签定义控件的标注。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 定义和用法<label> 标签定义控件的标注。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 |
|||||||||||||
multiple 多选
min, max 和 step 最小、最大和设置number类型的倍数
<fieldset> 标签
定义和用法
fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。<fieldset> 标签没有必需的或唯一的属性。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
disabled 属性规定应该禁用 input 元素。
标准属性：
class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title<legend> 标签
定义和用法
<legend> 标签为 <fieldset>、<figure> 以及 <details> 元素定义标题。
HTML 4.01 与 HTML 5 之间的差异
在 HTML 4.01 中， <legend> 仅用于 <fieldset> 元素。
在 HTML 5 中， <legend> 标签应用于 <fieldset>、<figure> 以及 <details> 元素。
在 HTML 5 中，不支持 align 属性。请使用 CSS 代替。
HTML 5 <label> 标签
定义和用法
<label> 标签定义控件的标注。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
定义和用法
<label> 标签定义控件的标注。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
datalist 表单下拉元素
若有不足请多多指教！希望给您带来帮助！
上一篇： HTML5基础笔记_2
下一篇： Apache反向代理Tomcat
推荐阅读
-
HTML5新增的语义化标签解析
-
html5新增的语义标签和表单验证功能
-
1. 实例演示Ement常用语法 2. 实例演示元素四类属性 3. 实例演示布局标签,并分析div+class与 html5语义化标签的优缺点
-
Ement常用语法、元素四类属性、布局标签、div+class与 html5语义化标签的优缺点
-
1. 实例演示Ement常用语法 2. 实例演示元素四类属性 3. 实例演示布局标签,并分析div+class与 html5语义化标签的优缺点
-
HTML5新增加的标签和表单新增属性的代码实例
-
Ement常用语法、元素四类属性、布局标签、div+class与 html5语义化标签的优缺点
-
H5--01新增的语义化标签、form表单标签属性的增强
-
语义化你的HTML标签和属性
-
HTML5新增的语义化标签解析