学习日志

HTML5常用的元素和属性

新增的常用元素

文档结构元素

header、footer、article、section、figure、figcaption、hgroup、nav（和div的用法一样）

文本格式化元素

dbi 是Bi-direcctional Isolation的缩写，不常用

mark 用于定义高亮文本，显示效果是加上一个黄色背景

time 用于显示被标注的内容是日期或者时间，它采用的是24小时

页面增强元素

meter 用于表示一个已知最大值和最小值的计数器

progress 用于表示一个进度条，常用于下载进度、加载进度等显示任务进度场景

多媒体元素

audio 定义声音

video定义视频

HTML 5的通用属性

contenteditable属性：

规定元素内容是否可编辑，属性设置为true为可编辑，false为不可编辑

designMode属性：

相当于一个全局的contenteditable属性，designMode属性设置为no，则页面所有支持ntenteditable属性都可以为可编辑状态，否则为off默认。

hidden属性：

案例：

    <button id="btn" onclick="show()">显示</button>
    <div id="target" hidden="ture">
          哈哈
    </div>

    <script>
        function show(){
            var target=document.getElementById('target')
            target.hidden=!target.hidden;
            var btn=document.getElementById('btn')
            if(target.hidden){
                btn.innerHTML="显示"
            }else{
                btn.innerHTML='隐藏'
            }
        }
    </script>

spellcheck属性：

该属性支持true、false两个属性，如果为true，浏览器对用户输入的文本内容执行输入检查，如果检查不通过，那么浏览器会对拼错的单词进行提示。

HTML5表单相关元素和属性

表单控件

type="text"单行文本输入框

type="password"密码输入框

type="hidden"隐藏框

type="radio"单选框

type="checkbox"复选框

type="file"文件框

type="image"图像域

type="submit"提交按钮

type="reset"重置按钮

type="button"按钮

表单控件

元素用来对其他表单控件元素进行说明，主要用于单击元素生成的标签，浏览器会自动将焦点转移到与标签相关的表单控件上

表单控件

select

option

optgroup

button

textarea

HTML5表单新增元素

input新增功能类型

color类型

datetime类型

datetime-local类型

date类型

month类型

week类型

email类型

range类型

number类型

search类型

tel类型

url类型

新增表单控件output

用于表示计算或者用户操作的结果，可以更加明确地显示其他表单控件的值。

表单控件新增的属性

formaction属性 针对submit类型的按钮，将内容可以交到不同的acton

formmethod属性 和formaction属性一致，该属性的值只能是get或者post

formenctype属性 使用场景和formaction属性相同可以实现不同的submit类型按钮用不同的enctype提交。

formtarget属性 同上

placeholder属性 主要用在文本框

autocomplete属性 为了完成表单的快速输入，浏览器一般提供了自动补全功能

list属性 为文本框指定一个可用的选项列表

pattern属性 用于验证表单输入的内容。pattern属性的值为正则表达式。

novalidate属性 当表单提交时不对其进行验证

required属性 规定必须在提交字段之前填写的输入字段

css3新增选择器

兄弟选择器

是第一个元素之后，所有的元素2都会被选择，且这些元素和第一个元素拥有同一个父元素，两个元素之间不一定要相邻。

属性选择器

E[attribute^=value] 用于选取带有以指定开头的属性值的元素

E[attribute$=value]用于选取带有以指定结尾的属性值的元素

E[attribute*=value] 用于选择包含指定元素，位置不限，单词不限

E[attribute|=value] 为独立单词，后面可跟连字符

伪类选择器

:root 选择文档的根元素，在HTML中永远是元素

:last-child 向元素添加样式，且该元素是它的父元素的最后一个子元素

:nth-child(n) 该元素是它父元素的第n个子元素

:nth-last-child(n) 该元素是它的父元素的倒数第n个子元素

:only-child 该元素是它的父元素的唯一子元素

:first-of-type 该元素是同级同类型元素中第一个元素

:last-of-type 该元素是同级同类型元素中最后一个元素

:nth-of-type(n) 该元素是同级同类型元素中的第n个元素

:nth-last-of-type(n) 该元素是同级同类型元素中倒数的第n个元素

:only-of-type 该元素是同级同类型元素中唯一元素

:empty 向没有子元素（包括文本内容）的元素添加样式

:enabled 向当前处于可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式

:disabled 向当前处于不可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式

:checked 向当前处于选中状态的元素添加样式

:not(selector) 向不是selector 元素的元素添加样式

:target 向正在访问的锚点目标元素添加样式

::selection 向用户当前选取内容所在的元素添加样式

今日所感

多多练习哈调试，体会细节的差别。