这篇文章的主要知识点

• 常见的语义标签
• 常用的表单类型
• 常用的表单属性
• H5的DOM扩展

常见的语义标签

timg.jpg

• 1. 起始语义化标签就是和div span 一样的元素 只不过有一定的语义
• 2. SEO 搜索引擎优化 让搜索引擎更好的分析你网页源码
• 3. 页面结构更清晰 阅读性更好
• 4. 不支持IE低版本浏览器 IE 6 7 8
• 5. IE不支持语义化标签 不认识的时候会当作一个行内元素去看待
• 6. 推荐大家使用插件：让HTML5的语义标签IE兼容的插件
• 7. 下载地址 https://github.com/aFarkas/html5shiv
• 8. 引入下载好的插件必须在页面头部
• 9. 但是 只在IE低版本浏览器去加载这个脚本
• 10. 为了提高网页的加载速度 按需加载
• 11. 条件注释 lt gt lte gte

<!--[if lt IE 9]>
    <h1>您的版本太低，请及时升级</h1>
<![endif]-->
<!--[if lt gte 9]>
    <h1>您的版本太低，请及时升级</h1>
<![endif]-->

常用的表单类型

• search <input type="search">
• email <input type="email">
• url <input type="url">
• number <input type="number">
• date <input type="date">

表单属性

常用表单属性

form

• autocomplete 设置整个表单是否开启自动完成 on|off
• novalidate 设置H5的表单校验是否工作 true 不工作 不加该属性代表校验

form表单属性

• action 提交地址
• 自动完成功能 autocomplete off|on 控制整个表单内的元素
• novalidate 忽略自身的H5方式的检验
• required H5的检验 必填校验
• 自动完成功能 autocomplete off|on
• form 管理表单进行提交

input:

• autocomplete 单独设置每个文本框的自动完成
• autofocus 设置当前文本域页面加载完了过后自动得到焦点
• placeholder 文本框占位符
• required 限制当前input为必须的
• form 属性是让表单外的表单元素也可以跟随表单一起提交

DOM扩展

获取元素

document.getElementsByClassName ('class'); 
//通过类名获取元素，以伪数组形式存在。

document.querySelector('selector');
//通过CSS选择器获取元素，符合匹配条件的第1个元素。

document.querySelectorAll('selector'); 
//通过CSS选择器获取元素，以伪数组形式存在。

类名操作

Node.classList.add('class'); 
//添加class

Node.classList.remove('class'); 
//移除class

Node.classList.toggle('class'); 
//切换class，有则移除，无则添加

Node.classList.contains('class'); 
//检测是否存在class

自定义属性

在HTML5中我们可以自定义属性，其格式如下data-*=""

<div id="demo" data-my-name="itcast" data-age="10">
<script>
/*
  Node.dataset是以对象形式存在的，当我们为同一个DOM节点指定了多个自定义属性时，
  Node.dataset则存储了所有的自定义属性的值。
  */
var demo = document.querySelector(反馈);
//获取
//注：当我们如下格式设置时，则需要以驼峰格式才能正确获取
var name = demo.dataset['myName'];
var age = demo.dataset['age'];
//设置
demo.dataset['name'] = 'web developer';
<script/>