HTML5

概述:HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

文章目录

HTML5
前言
一、HTMl5中新的特性
二、HTML5的改进
三、HTML的优势
四、 HTMl中的语义元素
五、HTMl标签演绎
六、HTML中新增的DOM操作方式
七、 HTML5中自定义属性的操作
八、HTML5中的可编辑属性
九、 HTML5和HTML4的对比
十、HTML5中的语义化标签
十一、 HTML5中新增的输入类型
十二、 HTML5的表单属性
十三、HTML的表单验证
十四、新增了音视频元素
总结

前言

html+css基础知识整理。

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTMl5中新的特性

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

二、HTML5的改进

新元素
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用

三、HTML的优势

跨平台:PC和移动端全部都支持—提高用户体验

网页的功能扩展:不需要下载客户端或者插件就可以看视频,玩游戏,或者操作更加简单

降低成本:开发者针对不同的操作系统开发,都需要自己研究,现在不需要了,一次开发多次使用,可以直接封装非app—时间和资金成本全部降低—跨系统移植

搜索引擎优化:HTML5新增的标签，使搜索引擎更加容易抓取和索引网页，从而驱动网站获得更多的点击流量。

四、 HTMl中的语义元素

语义化标签:

标签	描述
header	定义了文档的头部区域
footer	定义 section 或 document 的页脚。
nav	定义导航链接的部分。
article	定义页面独立的内容区域。
aside	定义页面的侧边栏内容。
section	定义文档中的节（section、区段）。
hgroup	群组标题

语义化的好处:

让人更容易读懂（增加代码的可读性）
让机器更容易读懂（利于seo优化）
即使在没有css的情况下也能很好的展示页面结构

注意:

hgroup元素代表 网页 或 section 的标题进行组合，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合<hgroup><h1>HTML 5</h1><h2>这是一篇介绍HTML 5语义化标签和更简洁的结构</h2></hgroup>hgroup使用注意：如果只需要一个h1-h6标签就不用hgroup如果有连续多个h1-h6标签就用hgroup如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签

header 元素代表 网页 或 section 的页眉。通常包含h1-h6元素或hgroup<header><hgroup><h1>网站标题</h1><h2>网站副标题</h2></hgroup></header>header使用注意：可以是“网页”或任意“section”的头部部分没有个数限制。如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

 nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。<nav><ul><li>HTML 5</li><li>CSS3</li><li>JavaScript</li></ul></nav>nav使用注意：用在整个页面主要导航部分上，不合适就不要用nav元素；

 section元素代表文档中的 节 或 段，段可以是指一篇文章里按照主题的分段；节可以是指一个页面里的分组。<section><h1>section是啥？</h1><article><h2>关于section</h1><p>section的介绍</p><section><h3>关于其他</h3><p>关于其他section的介绍</p></section></article></section>section使用注意：section不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用div。article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用div

 article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容<article><h1>一篇文章</h1><p>文章内容..</p><footer><p><small>版权：html5jscss网所属，作者：damu</small></p></footer></article>article使用注意：独立文章：用article单独的模块：用section没有语义的：用div

aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。<article><p>内容</p><aside><h1>作者简介</h1><p>小北，前端一枚</p></aside></article>aside使用总结：aside在article内表示主要内容的附属信息，在article之外则可做侧边栏如果是广告，其他日志链接或者其他分类导航也可以用

 footer元素代表 网页 或 section 的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。∫    <footer>COPYRIGHT@damu</footer>footer使用注意：可以是 网页 或任意 section 的底部部分；没有个数限制，除了包裹的内容不一样，其他跟header类似。

五、HTMl标签演绎

<header><hgroup><h1>我是header</h1><h2>我是header的副标题</h2></hgroup></header><!-- /header --><section><header><hgroup><h1>我是content</h1><h2>我是content的副标题</h2></hgroup></header><!-- /header --></section><footer><header><hgroup><h1>我是footer</h1><h2>我是footer的副标题</h2></hgroup></header><!-- /header --></footer>

六、HTML中新增的DOM操作方式

1.获取元素的方式:

document.querySelector("选择器");单个的

document.querySelectorAll("选择器");多个的

divObj.classList 返回的是一个存放了所有类样式名字的数组
.add()添加类样式
.remove()删除类样式
.toggle()切换类样式
.contains()是否包含某个类样式

七、 HTML5中自定义属性的操作

<div id="dv" name="小黑" data-des="真黑啊" data-sex="男"></div>

//HTML5中新增加了一个关于自定义属性的数据集:dataset--统一写法,方便操作
对象.dataset---->获取的是所有自定义属性的数组
添加自定义属性: 对象.dataset.属性名字="值";
获取自定义属性: 对象.dataset.属性名;
注意自定义属性名字如果是多个单词组合该如何添加?(驼峰命名法即可)
对象.dataset.myFace="值";最终在html标签上就可以看到:data-my-face="值";
可以使用键值的方式来设置自定义属性:
对象.dataset["属性名字"]="值";

八、HTML5中的可编辑属性

<div contenteditable="true">可以编辑
</div>
页面中的div可以直接进行编辑

九、 HTML5和HTML4的对比

1.写法不同:

!   直接tab键---->页面中h5的html标签内容全部导入
html:4s 直接tab键--->页面中h4严格版的标签内容全部导入
还有其他的写法:html:4t等等----不介绍了

2.要求不同:

HTML5的写法比较随意,怎么写浏览器都认识
HTML4(严格)的写法,必须要严格的写
验证的网址
https://validator.w3.org/check

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title>
</head>
<body>
<img src="" alt="">
</body>
</html>HTML4的写法(严格的模式)

3.DOCTYPE和浏览器渲染模式

DOCTYPE和浏览器渲染模式DOCTYPE，或者称为 Document Type Declaration（文档类型声明，缩写 DTD）通常情况下，DOCTYPE 位于一个 HTML 文档的最前面的位置，位于根元素 HTML 的起始标签之前。因为浏览器必须在解析 HTML 文档正文之前就确定当前文档的类型，以决定其需要采用的渲染模式，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析

到目前为止，各浏览器主要包含了三种模式。在 HTML5 草案中，更加明确的规定了模式的定义：

传统名称	HTML5草案名	document.compatMode返回值
standards mode(strict mode)	no-quirks mode	CSS1Compat
almost standards mode	limited-quirks mode	CSS1Compat
quirks mode	quirks mode	BackCompat

document.compatModedocument.compatMode 属性最初由微软在 IE 中创造出来，这是一个只读的属性，返回一个字符串，只可能存在两种返回值：BackCompat：标准兼容模式未开启（怪异模式）CSS1Compat：标准兼容模式已开启（标准模式）
在现代主流浏览器中，其实怪异模式的渲染和标准与几乎标准间没有太大的差别（ie9+ 谷歌 火狐 ...）ie5.5之前都是ie自己的渲染模式，怪异模式ie6才开始慢慢支持标准，标准模式，在ie6 中怪异和标准模式的区别最大ie7 8 9都是基于标准模式升级的，他们理论上存在怪异模式HTML5提供的<DOCTYPE html>是标准模式，向后兼容的,等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的 标准解析渲染页面一个不含任何 DOCTYPE 的网页将会以 怪异(quirks) 模式渲染。

总结:写页面都要加<!DOCTYPE>

5.根元素

H4中的根元素:可以继续用,H5中省略的

xmlns:这是XHTML1.0的东西，
它的意思是在这个页面上的元素都位于http://www.w3.org/1999/xhtml这个命名空间内
但是HTML5中的每个元素都具有这个命名空间，不需要在页面上再显示指出

6.head元素:

MIME类型:每当浏览器请求一个页面时，web服务器会在发送实际页面内容之前，先发送一些头信息。浏览器需要这些信息来决定如何解析随后的页面内容。最重要的是Content-Type比如: Content-Type:text/htmltext/html:即这个页面的"内容类型",或者称为MIME类型。这个头信息将唯一确定某个资源的本质是什么也决定了它应该如何被呈现。图片也有自己的MIME类型     jpg:image/jpeg   png:image/pngjs也有自己的MIME类型，css也有自己的MIME类型，任何资源都有自己的MIME类型，整个web都依靠MIME类型来运作<meta charset="UTF-8">:告诉浏览器你应该使用哪种编码来解析网页

十、HTML5中的语义化标签

meter:度量衡。仅用于已知最大和最小值的度量。(默认值,最小是0,最大是1)

<meter value="15" min="10" max="20" low="13" high="18"></meter>
low最低值:如果是13那么就是属于最低值了,颜色为黄色
high最高值:如果是18那么就是属于最高值了,颜色位黄色
optimum:最佳值(这个值需要在low和high之间才可以是绿色)

progress:进度条

<progress max="10" value="20"></progress>
<progress max="10"></progress>自动走

datalist列表标签,首先datalist需要有个id值,然后在上面使用input标签,里面的list属性就是datalist的id值

<input id="inp" list="dt" placeholder="请选择喜欢的城市">
<datalist id="dt"><option value="北京"><option value="天津"><option value="上海"><option value="重庆">
</datalist>
下面的方式可以设置placeholder的文字颜色
input::-webkit-input-placeholder{color:red;}

details:文档的细节标签

<details open><summary>张无忌</summary><summary>张三丰</summary><summary>张天涯</summary>
</details>
open设置内容是否展开

ruby 注释（中文注音或字符）

<ruby>鬻<rt>yu</rt></ruby> 就是加个拼音

mark:标记标签

<p>曾经我也是个很<mark>纯洁</mark>的男人</p>

十一、 HTML5中新增的输入类型

<form>email: <input type="email" name="email" value=""/><br/>url:<input type="url" name="url" value=""/><br/>tel:<input type="tel" name="tel" value=""/><br/><!--没效果,移动端才有-->search:<input type="search" name="search" value=""/><br/><!--有搜索效果-->range:<input type="range" name="range" min="10" max="20" step="2"><br><!--每次走几步--><input type="submit" id="sm" value="提交"/>
</form>

  <input type="number" ><br/><!--只能输入数字--><input type="color" ><br/><!--选颜色--><input type="date" ><br/><!--日期--><input type="datetime-local" ><br/><!--日期加时分秒--><input type="time" ><br/><!--时间--><input type="week" ><br/><!--周--><input type="month" ><br/><!--月-->

十二、 HTML5的表单属性

<form><input type="text" placeholder="请输入"><br/><input type="text" autofocus><br/><!--获取光标--><input type="text" required><br/><!--必填的--><input type="text"pattern="\d{3}"><br/><!--正则表达式--><input type="submit" id="sm" value="提交">
</form><form action="http://www.baidu.com"><input type="submit" value="提交1"><br/><input type="submit" value="提交2" formaction="http://www.nodejs.org"><br/>
</form>

十三、HTML的表单验证

为验证的表单添加一个事件invalid,该事件在验证失败的时候会触发
<form action=""><input id="test" type="text" required><input type="submit" value="提交" id="sm" />
</form>
<script type="text/javascript">window.onload=function () {var input = document.querySelector("#test");  input.addEventListener("invalid",function () {console.log("失败了");console.log(this.validity);});};
</script>
以下所有的都是不符合才返回truebadInput: false
customError: false 不符合自定义验证
patternMismatch: false  正则不匹配   <input id="test" type="text" pattern="\d{3}" required>
rangeOverflow: false  验证最大值
rangeUnderflow: false 验证最小值
stepMismatch: false  当前值验证range 值是否符合min,max及step的规则
tooLong: false   超过maxlength的最大范围
tooShort: false
typeMismatch: false   类型不匹配<input id="test" type="email" required>
valid: false
valueMissing: true  验证失败了  <input id="test" type="test" required>这个是自定义验证的:该方法是通过要验证的表单元素.出来的
有参数就是不能通过验证,没有参数就是通过验证
setCustomValidity("写了内容")不会通过验证
setCustomValidity("")通过验证<form action=""><input type="text" id="txt"><input type="submit" value="提交" id="sm" />
</form>
<script type="text/javascript">window.onload=function () {var input = document.getElementById("txt");var submit=document.getElementById("sm");submit.onclick=function () {if(input.value==="帅"){input.setCustomValidity("敏感词");}else{input.setCustomValidity("");//验证通过}};};
</script>下面的操作就可以显示 验证不通过的效果了<form action=""><input type="text" id="txt"><input type="submit" value="提交" id="sm" />
</form>
<script type="text/javascript">window.onload=function () {var input = document.getElementById("txt");var submit=document.getElementById("sm");submit.onclick=function () {if(input.value==="帅"){input.setCustomValidity("敏感词");}else{input.setCustomValidity("");//验证通过}};input.addEventListener("invalid",function () {console.log(this.validity);});};
</script>

十四、新增了音视频元素

音频
- ```
<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
```
- audio之间可以插入不支持时的文本
- audio元素之间可插入多个source元素，且source元素可以链接不同音频文件，浏览器将使用第一个资源文件
- 属性
  - src【音频文件的url】、loop【循环】、autoplay【一上来就播放、谷歌禁用加muted就可以了】、preload、poster【网速慢先显示图片】
  - controls供添加播放、暂停和音量控件。
- 支持MP3、Ogg、Wav格式的
视频
- ```
<video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
```
- video元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度【audio不支持】
- video标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
- video元素支持多个元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
- 属性上面那几个都有
- 支持MP4、WebM、Ogg

总结

HTML5就是HTML4的一个升级(加入了新的语义化标签和语义化的属性及新的表单控件)

HTML5的基础知识整理相关推荐

Web前端基础知识整理
1. 前端基础知识文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述特点: 扩展名为.xml 内容区分大小写标签要成对出现,形成容器,只能有一个标签按正确 ...
python常用变量名_python基础知识整理
Python Python开发 Python语言 python基础知识整理序言:本文简单介绍python基础知识的一些重要知识点,用于总结复习,每个知识点的具体用法会在后面的博客中一一补充程序: 一 ...
计算机二级c语基础知识,计算机二级C语基础知识整理.doc
计算机二级C语基础知识整理 1.1 算法算法:是一组有穷指令集,是解题方案的准确而完整的描述.通俗地说,算法就是计算机解题的过程.算法不等于程序,也不等于计算方法,程序的编制不可能优于算法的设计. ...
使用Aspose.Cells的基础知识整理
使用Aspose.Cells的基础知识整理转自 http://www.cnblogs.com/kenblove/archive/2009/01/07/1371104.html 这两天用Aspose. ...
前端基础知识整理汇总（中）
前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...
前端基础知识整理汇总（上）
前端基础知识整理汇总(上) HTML页面的生命周期 HTML页面的生命周期有以下三个重要事件: 1.DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是 ...
centos7创建asm磁盘_Oracle ASM 磁盘组基础知识整理（收藏版）
为什么要写这么一篇基础知识呢?还是有那么一点点原因的,不是胡编乱造还真是有真实存在的事件的,前两周里因一套生产环境数据库磁盘不足无法对其进行表空间扩容,需要向存储岗申请存储资源,当存储岗划好资源加完存 ...
Kali Linux渗透基础知识整理（四）：维持访问
Kali Linux渗透基础知识整理系列文章回顾维持访问在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...
矩阵论（零）：线性代数基础知识整理（1）——逆矩阵、（广义）初等变换、满秩分解
矩阵论专栏:专栏(文章按照顺序排序) 线性代数是矩阵论的先修课程,本篇博客整理线性代数的基础理论知识,为矩阵论的学习做准备.限于篇幅,梳理的重点将在定理和结论上(只给出部分必要的定义),对最基础的概念 ...

HTML5的基础知识整理