【学习笔记】一、HTML5基础与新特性

1.HTML5的3个主要原理

        a.不破坏Web

                向下兼容，在不破坏之前效果的基础上增加新的内容

        b.修补牛蹄子路(cowpath)

                对一些要用到，但是实际并不轻松的操作进行简化，方便使用

        c.实用至上

2.HTML5使用了新的HTML元素，让文档更加易读，检索信息更快更准确

3.原本的DIV标签是无语义标签，H5中用了语义标签替换，不过div仍可以使用

<article>	表述一个完整的、自成一体的文章，包括标题、作者、正文
<header>	表示页眉部分
<footer>	表示页脚部分
<nav>	导航
<aside>	除文章之外内容（广告）
<mark>	标注突出（发光底纹）
<del>	删除线
<ins>	下划线

4.语义标签的意义是什么？

        a.<div>仍然是web设计必备元素

        b.<div>它本身不反应与页面相关的任何信息，不利于搜索机器人的搜索

        c.使用语义标签，虽然页面效果是相同的，但是可以明确表达区块的意图，能够让搜索机器人迅速找到页面内容

5.在H5中，form表单获得了增强

        a.表单结构相对松散

        b.丰富的input

        c.增强表单属性

效果名称简述	使用实例
自动获取焦点autofocus属性	<input type=“text id="a" name="a" autofocus/>
placeholder 属性（字段预期值的提示信息)	<input type="text" placeholder="提示信息" />
滑动块输入range 在form里的oninput事件：当input里的value值发生变化时的事件，让output输出当前range的值，并且随滑块变动而改变 （form一定要写，oninput才能起作用，而且一般写表单一开始就是直接先写form）	<form action="" οninput="a1.value = a2.value" > <input type="range" value="1"   min="0" max="100" step="10" name="a2" /> <output  name="a1" value=""></output> </form>
数字输入框number	<input type="number" min="0" max="100" step="10" />
可输入下拉框提示datalist(inputl list属性和datalist id必须保持相同)   (lable是option中文字下方的备注提示)	<input list="abc"/> <datalist id="abc"> <option value="湖北" label="2022-01-09"></option> <option value="湖南" ></option> </datalist>
date日期	<input type="date"/>
datetime日期输入框(不带时区)	<input type="datetime"/>
datetime-local日期(带时区的)	<input type="datetime-local"/>
<month>月份输入	<input type="month"/>
week周输入	<input type="week" />
color颜色输入	<input type="color"/>
required判断必填项(type内的属性根据情况更换)	<input type="text" required>