HTML5知识点总结

一、语义化

1.        语义化（语义标签）：nav（导航）、header（页眉）、footer（页脚）、section（区块）、article（文章）、aside（侧边栏）、progress（进度条）

2.        微数据：在如span、div的标签内添加属性，让机器（如搜索引擎）识别其含义，某些特定类型的信息。  itemscope itemtype itemprop

3.        WAI-ARIA：WebAccessibility Initiative-Accessible Rich Internet让残障人士能无障碍地访问网页上的动态内容。

二、表单

1.        输入类型：

      <form action=””>

          <fieldset>

              <legent>输入类型</legent>

              <label for=”demo”>

                                      email：<inputtype=”email” id=”demo”>

</lable>

<label for=””>

                                      email：<inputtype=”submit” value=”提交”>

</lable>

          </fieldset>

      </form>

类型

使用示例

含义

email

<input type=”email”>

输入邮箱格式

tel

<input type=”tel”>

输入手机号码

url

<input type=”url”>

输入url格式

number

<input type=”number”>

输入数字格式（step、min、max）

search

<input type=”search”>

搜索框（体现语义化）

range

<input type=”range”>

自由拖动滑块（value）

color

<input type=”color”>

拾色器

time

<input type=”time”>

小时：分钟

date

<input type-”date”>

年/月/日

datetime

<input type=”datetime”>

 

month

<input type=”month”>

 

week

<input type=”week”>

 

text

<input type=”text”>

 

password

<input type=”password>

 

radio

<input type=”radio”>

 

checkbox

<input type=”checkbox”>

 

file

<input type=”file”>

 

button

<input type=”button”>

 

submit

<input type=”submit”>

 

reset

<input type=”reset”>

 

2.        表单元素：

       <form action=””>

           <lable for=””>

               课程：<inputtype=”text” list=”course”>

           </lable>

           <datalist id=”course”>

                                      <optionvalue=”php”></option>

                                      <optionvalue=”python”></option>

                                      <optionvalue=”java”></option>

                                      <optionvalue=”javascript”></option>

           </datalist>

           <lable for=””>

               加密类型：<keygenname=”anquan”>

           </lable>

           <lable for=””>

               结果：<output>输出结果</output>

           </lable>

           <lable for=””>

               度量器：<meter></meter>

           </lable>

       </form>

元素

含义

<datalist>

数据列表

<keygen>

生成加密字符串

<output>

输出结果

<meter>

度量器（min、max、value、low、high）

3.        表单属性：

属性

用法

含义

placeholder

<input type=”text” placeholder=”请输入用户名”>

占位符

autofocus

<input type=”text” autofocus>

自动获得焦点

multiple

<input type=”file” multiple>

多文件上传

autocomplete

<input type=”text” autocomplete=”off”>

自动完成

form

<input type=”text” form=”某菜单ID”>

 

novalidate

<form novalidate></form>

关闭验证

required

<input type=”text” required>

必填项

pattern

<input type=”text” pattern=”\d”>

自定义验证

 

三、多媒体

1.        音频：<audio src=”./music/Seeyou Again.mp3”></audio>

          属性：autoplay自动播放

                                      controls是否显不默认播放控件

                                      loop循环播放

          解决兼容性：<audiocontrols>

                                                        <sourcesrc=”./music/See you Again.mp3”>

                                                        <sourcesrc=”./music/See you Again.wav”>

                                                        <sourcesrc=”./music/See you Again.ogg”>

                                                        浏览器不支持HTML5的音频播放

                                                 </audio>

2.        视频：<video src=”./video/movie.mp4”></audio>

          属性：autoplay自动播放

                                      controls是否显不默认播放控件

                                      loop循环播放

                                      width设置播放窗口宽度

                                      height设置播放窗口高度

          解决兼容性：<videocontrols>

                                                        <sourcesrc=”./video/movie.mp4”>

                                                        <sourcesrc=”./video/movie.ogg”>

                                                        <sourcesrc=”./music/See you Again.ogg”>

                                                        浏览器不支持HTML5的视频播放

                                                 </video>

                                     

四、DOM扩展

1.        获取元素：

1)        document.getElementsByClassName(“class”)通过类名获取元素，以类数组形式持有存在

2)        document.querySelectoer(“selector”)通过CSS选择器获取元素，符合匹配条件的第1个元素

3)        document.querySelectorAll(“selector”)通过CSS选择器获取元素，以类数组形式存在

2.        类名操作：

1)        Node.classList.add(“class”)添加class

2)        Node.classList.remove(“class”)移除class

3)        Node.classList.toggle(“class”)切换class，有则移除，无则添加

4)        Node.classList.contains(“class”)检测是否存在class

5)        Node指一个有效的DOM节点，是一个统称

3.        自定义属性：其格式如下data-*=””

1)        获取一个自定义属性：getAttribute(‘data-name’);

2)        设置一个自定义属性：setAttribute(‘data-demo’,’123’);

3)        HTML5提供了一个对象dataset，可以获取所有的自定义属性 Node.dataset,获取某一个自定义属性Node.dataset[‘name’]

eg：<div id=”demo” data-name=”itcast” data-age=”10” data-my-name=”itcast”>

         vardemo=document.querySelector(‘#demo’);

         读取demo.dataset[‘name’]或者demo.dataset[‘age’]或者demo.dataset[‘myName’]

设置demo.dataset[‘myName’]=’web developer’