沉淀-初级html5（一）

最新推荐文章于 2022-07-10 03:21:15 发布

泠泠在路上

最新推荐文章于 2022-07-10 03:21:15 发布

阅读量431

点赞数

分类专栏： html基础文章标签： html5

本文链接：https://blog.csdn.net/u012396955/article/details/67110469

版权

html基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

HTML5与HTML4的区别

推出的理由及目标和语法的改变

推出的理由及目标：
解决web上存在的各种问题：
1.web浏览器兼容性很低，规范不统一，没有被标准化。
2.文档结构不够明确
3.web应用程序的功能受到了限制
世界知名浏览器厂商对html5的支持：微软的IE9及以上，google的chrome，苹果的safari，Opera的欧朋，Mozilla的火狐Firefox

语法的改变：
1.内容类型：text/html没啥变化
2.DOCTYPE声明：直接简短的<!DOCTYPE html>
3.制定字符编码：<meta charset="UTF-8">
4.可以省略标记的元素
5.具体boolean值的属性：disabled，checked，true，false
6.省略引号

新增的元素和废除的元素

新增的结构元素：
section【内容块】、article【与上下文不相关的独立内容（文章）】、aside【与article相关的辅助信息】、header【头部内容】、hgroup【整个页面结合内容块】、footer【页脚】、nav【导航链接】、figure【文章主体流一个独立的单元】

新增的其他元素：
video【视频】、audio【音频】、embed、mark、progress、meter、time、ruby、rt、rp、wbr、canvas【画布，图形】、command、details、datalist、datagrid、keygen、output、source、menu

新增的input元素的类型：
email【邮箱】、url【地址】、number【数字】、range【范围值】、Date Pickers【日期】

废除的元素：
1.能使用CSS替代的元素：basefont、big、center、font、s、tt、u等
2.不再使用frame框架 frameset frame no-frame，只支持iframe
3.只有部分浏览器支持的元素
4.其他被废除的元素

新增的属性和废除的属性

新增的属性：
1.表单相关的属性：form、formaction、formmethod、formenctype、formtarget、autofocus、required、labels、control、placeholder、indeterminate、image提交按钮的width和height、list、AutoComplete、pattern、selectionDirection

2.链接相关的属性

3.其他属性

废除的属性：

全局属性
1.contentEditable属性：微软开发，允许用户编辑元素中的内容，true和false指定是否可编辑，未指定的话，继承父元素的属性
2.designMode属性：指定整个页面是否可编辑，只能在JavaScript里被修改编辑，属性有on【页面可编辑】和off【页面不可编辑】
3.hidden属性：使元素不可见
4.spellcheck属性：针对input和textarea提供的，用于拼写检查
5.tabindex属性：控制按tab键对控件元素进行遍历，可指定顺序，默认只有input和链接可tab获取焦点

新增元素的使用方法

article元素：
1.article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。可以是一篇博客、报刊中的文章、论坛的帖子、用户评论或独立的插件，或其他任何独立的内容。

2.article元素是可以嵌套使用的。

3.article元素可以用来表示插件。
<article><h1>标题</h1><object><embed>插入的内容</embed></object></article>

aside元素：
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分。

nav元素：
nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的连接组放进nav元素即可。
nav元素应用场景：
1.传统导航条
2.侧边栏导航
3.页内导航
4.翻页导航

section元素：
section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。

time元素与微格式：

<time datetime="2017-03-28">2017-03-28</time>
<time datetime="2017-03-28T20:00">2017-03-28</time>
<time datetime="2017-03-28T20:00Z">2017-03-28</time>标准时间
<time datetime="2017-03-28T20:00+09:00">2017-03-28</time>时差

pubdate属性代表文章的发布日期：有2个time的情况下进行区分

header元素

header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但是也可以包含其他内容，例如数据表格、搜索表单或相关的logo图片。header可以出现多次。

footer元素
footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。

hgroup元素
hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组，譬如一个内容区块的标题及其元素算一组。标题较多的情况下，进行分组。

address元素
address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address应该不只用来呈现电子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息。

html5结构
1.显示编排内容区域块：明确的使用section等创建区域块。
2.隐示编排内容区域块：根据需求用h1~h6或hgroup进行布局。
3.标题分级：同级标题会出现新的区域块。
4.不同区域块使用相同标题
这里写图片描述

这里写图片描述

表单新增元素与属性

表单内元素的form属性
在HTML4中，表单内的从属元素必须书写在表单内部，而在HTML5中，可以把他们书写在页面的任何地方，然后为该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定表单了。
这里写图片描述

表单内元素的formaction属性
在HTML4中，一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，而在HTML5中可以为所有的提交按钮，增加不同的formaction属性，使单击不同的按钮时可以将表单提交到不同的页面。
这里写图片描述

表单内元素的formmethod属性
在HTML4中，一个表单内只能有一个action属性用来对表单内所有元素统一指定提交页面，所以每个表单内页只有一个method属性来统一指定提交方法。在HTML5中，可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法（post或get）。

表单内元素的formenctype属性
在HTML4中，表单元素具有一个enctype属性，该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。在HTML5中，可以使用formenctype属性对表单元素分别指定不同的编码方式( 1.text/plain【表单内的空格转换为+号，但不对表单内的特殊字符进行编码】，2.mutipart/form-data【不对字符进行编码，必须使用在文件上传控件表单】，3.application/x-www-form-urlencoded【表单数据转为字符】)。

表单内元素的formtarget属性
在HTML4中，表单元素具有一个target属性，该属性用于指定在何处打开表单提交后所需要加载的页面。
在HTML5中，可以对多个提交按钮分别使用formtarget属性（1._blank【在新的浏览器页面打开】2._self【在相同框架的frame页面打开】3._parent【在当前父frame页面打开】4._top【在当前窗口打开】5.framename【在指定框架中打开】）来指定提交后在何处打开所需加载的页面。

表单内元素的autofocus属性
为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。

表单内元素的required属性
在HTML5中新增的required属性可以应用在大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。

表单内元素的labels属性
在HTML5中，为所有可使用标签的表单元素、button、select元素等，定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。
这里写图片描述

标签的control属性
在HTML5中，可以在标签内部放置一个表单元素，并且通过该标签的control属性来访问该表单元素。
这里写图片描述

文本框的placeholder属性
placeholder是指当文本框处于未输入状态是显示的输入提示。当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示文字。

复选框的indeterminate属性
对于复选框checkbox元素来说，过去只是选取与非选取这两种状态。在HTML5中，可以在javascript脚本代码中对该元素使用indeterminate属性，以说明复选框处于“尚未明确是否选取”状态。

image提交按钮的height属性与width属性
针对类型为image的input元素，HTML5新增了两个属性，height、width分别用来指定图片按钮的高度和宽度。

文本框的list属性
在HTML5中，为单行文本框增加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是HTML5中新增的元素，该元素类似于选择框，但是当用户想要设定的值不在选择列表之内时，允许自行输入。datalist元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。
这里写图片描述

文本框的autocomplete属性
帮助输入所用的自动完成功能，是一个既节省输入时间又十分方便的功能。在HTML5之前，因为谁都可以看见输入的值，所有在安全方面存在缺陷，只要使用AutoComplete属性，安全性方面也可以得到很好的控制。有on/off/不填写三种值。

文本框的pattern属性
在HTML5中，对input元素使用pattern属性，并且将属性值设为某个格式的正则表达式，在提交时会针对这些进行检查，检查其内容是否符合给定格式。当输入的内容不符合给定格式时，则不允许提交，同时在浏览器中显示信息提示文字，提示输入的内容必须符合给定的格式。例：<input pattern="[A-Z]{5}">

文本框的SelectionDirection属性
这对input元素与textarea元素，HTML5增加了SelectionDirection属性。当用户在这两个元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正向选取文字时，改属性值为“forward”，当用户反向选取文字时，该属性值为“backward”。当用户没有选取任何文本时，该属性值为“forward”。

HTML5改良的input元素

url类型、email类型、date类型、time类型、datetime类型、datatime-local类型、month类型、week类型、number类型、range类型、search类型、Tel类型、color类型

例：<input type="url">

增加的input元素
output元素
例：

<script>
function value_change(){
var number=document.getElementById("range").value;
document.getElementById("output").value=number;
}
</script>
<form id="testform">
<input id="range" type="range" min="0" max="100" step="5" value="10" onchange="value_change()">
<output id="output">10</output>
</form>

表单验证

<script>
function check(){
var email=document.getElementById("email");
if(email.value==""){
alert("请输入email");
return false;
}else if(!email.checkValidity()){
alert("请输入正确的email地址");
return false;
}
}
</script>
<form id="testform" onsubmit="check()" nobalidate="true">
<label for="">Email</label>
<input name="email" type="email" id="email">
<br/>
<input type="submit">
<input>
</form>

HTML5增强的页面元素

progress元素

<script>
function btn(){
var i=0;
function thread_one(){
if(i<100){
i++;
updateprogress(i);
}
}
setInterval(thread_one,100);
}
function updateprogress(newValue){
var progressBar=document.getElementById("p");
progressBar.value=newValue;
progressBar.getElementsByTagName("span")[0].textContent=newValue;
}
</script>
<p>完成的百分比<progress id="p" max="100" background-color="green"><span>0</span>%</progress></p>
<input type="button" onclick="btn()" value="点击">

meter元素
规定范围内的数值量，例如磁盘空间使用量，占票选比例等

<meter value="40" min="0" max="100" low="10" high="90" optimum="80"></meter>

泠泠在路上

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
沉淀-初级html5（一）

HTML5与HTML4的区别推出的理由及目标和语法的改变推出的理由及目标：解决web上存在的各种问题： 1.web浏览器兼容性很低，规范不统一，没有被标准化。 2.文档结构不够明确 3.web应用程序的功能受到了限制世界知名浏览器厂商对html5的支持：微软的IE9及以上，google的chrome，苹果的safari，Opera的欧朋，Mozilla的火狐Firefox语法的改变：
复制链接

扫一扫