html5笔记1 入门

最新推荐文章于 2022-08-17 09:54:17 发布

漂流的猪

最新推荐文章于 2022-08-17 09:54:17 发布

阅读量814

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/dancelonely/article/details/10081121

版权

html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、www.caniuse.com - 按照浏览器的版本提供详尽的HTML5功能支持情况
www.html5test.com - 直接显示用户浏览器对html5规范的支持情况
modernizr — 一个js库，检测浏览器是否支持某些特性的工具

2、新的DOCTYPE和meta

<!DOCTYPE>：位于<html>标签之前，告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型，分别是严格版本（strict）、过度版本（Transitional）和基于框架的HTML（Frameset）文档。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

首先说明了根元素是html，它在公共标识符被定义为"-//W3C//DTD XHTML 1.0 Strict//EN"的DTD中进行了定义。浏览器将明白如何寻找匹配此公共标识符的DTD，如果找不到，就会使用公共标识符后面的URL作为寻找DTD的位置。
HTML4规定了三种文档类型：strict、Transitional和Frameset。strick保证干净的标记，免于表现层的混乱；Transitional包含W3C期望移入样式表的元素和属性；Frameset用于带有框架的文档。

<meta>：提供有关页面的元信息，比如针对搜索引擎的描述和一些关键词。
name：提供名称/值对中的名称。 ——> <meta name="keywords" content="HTML,ASP,PHP,SQL">
http-equiv：指示服务器在发送实际的文档前先在要传送给浏览器的MIME文档头部包含名称/值对。content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。 ——> <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />。包含的值为：content-type、expires、refresh、set-cookie。
scheme：用于指定要用来翻译属性值的方案。

xmlns属性：可以再文档中定义多个可供选择的命名空间。该属性可以放置在任何元素的开始标签中，功能类似于URL，浏览器会将此命名空间用于该属性所在元素内的所有内容。

<html xmlns="http://www.w3.org/1999/xhtml">

这个就是使整个文档都符合XML规范，将会作用到整个html中。
----------------html对上面的改进---------------
<!DOCTYPE html>
<meta charset="utf-8">
-------------------------------------------------------
html5的DOCTYPE会触发浏览器以标准兼容模式显示页面，浏览器会根据DOCTYPE来识别使用哪种模式，以及使用什么规则来验证页面。

3、新的元素
html5新元素根据类型划分为7大类：
。内嵌：向文档中添加其他类型的内容，如video
。流：在文档和应用的body中使用的元素
。标题：段落标题，如p、h1
。交互：与用户交互的内容，如button。textarea
。元数据：一般出现在页面的head中，设置页面其他部分的表现和行为，如script、style
。短语：文本和文本标记元素
。片段：用于定义页面片段的元素

section：web页面中的一块区域
article：独立的文章区域
aside：相关内容或者引文
header：标记头部区域的内容
footer：标记脚部区域的内容
nav：导航类辅助内容

新的selectors方法，做到了更精确的方式来指定希望获取的元素，不必再用标准DOM的方式循环遍历，更好的跟踪用户的操作。
querySelector()：根据指定的选择规则，返回在页面中找到的第一个匹配元素。
querySelectorAll()：根据指定规则返回页面中所有匹配的元素。
可以在参数中指定多个选择规则。新的选择方法不仅可以选择html上的元素，还可以根据css来取得元素。

var hovered = document.querySelector("td:hover");   // 根据css来取得元素，或者是【标签:属性】
var s = document.querySelector("#hoverResult");   //css html
var r = document.querySelector("table tr");  //直接检索html标签
var t = document.querySelector("button#findHover");  //css html

window.JSON：json在html5中是作为应用内部数据交换的事实标准，典型的函数方法： parse()-将字符串序列化成DOM对象； stringify()-将DOM对象转换成字符串

事件处理：addEventLister() 和 dispatchEvent()

var btn1Obj = document.getElementById("btn1");    
//object.attachEvent(event,function);  //此方法同addEventLister类似，但是在Mozilla中不支持。标准的还是addEventLister
btn1Obj.attachEvent("onclick",method1);   
btn1Obj.attachEvent("onclick",method2);   
btn1Obj.attachEvent("onclick",method3);