课程day11&12

HTML5的新标签与新特征：

增加了新的语义化标签：header , nav（导航）, main , aside , article , footer ;

新的表单控件，比如 email、url、search

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

全是div的布局：不利于网站对访客的易用性，不利于搜索引擎或者爬虫软件建立索引，不便于后期的代码维护

屏幕的高度（vh）/宽度（vw）：100vh是不算滚动条的整个网页的高度，100vw同理
使用calc()函数计算不同部件的高和宽，
如果使用100%的高度，则父元素的高度必须是100%，高度会继承。

header：一般作为页眉，放一些导航信息；

main：网页主题；

nav：也是头部元素，与header区别是在main内；

section：页面的内容模块

aside：一般用作侧边栏

article：一般是用来包裹正文

footer：页脚，备注

video/audio：一些属性：controls：出现控制菜单； autoplay：自动播放（仅限部分浏览器）；loop：循环播放； muted：自动屏蔽声音；标签中写的文字将在无法播放时替代该组件

旧的HTML会在html标签内加入版本号version，在外部链接上加入字符集；

废除的一些HTML5的元素（但是仍可以使用）：table的属性:border bgcolor cellpadding width

canvas：属性contentEditable规定是否允许用户编辑图形 ；hidden隐藏，本质上就是display:hidden；

css高级选择器：

（基础选择器在这里）

直接上例子：

div p:first-of-type   { }选择div下面的每一个第一个p元素

div p:last-of-type   { }选择div下面的每一个最后一个p元素

div p:only-of-type   { }选择div中唯一的p元素

p:first-child    { }p是其父元素的第一个元素

p:last-child    { }p是其父元素的最后一个元素

p:nth-child(1)    { }父元素下的第1个元素(前面有其他标签的元素会打乱位置）

p:nth-of-type(1)   { }父元素下的第1个元素(不会打乱）

p::before   { }元素p之前，不换行，无空格

p::after   { }元素p之后，不换行，无空格

email：会自动验证输入信息是否有@符号<input type="email" name="">

url：自动验证是否有http://或者https://<input type="url" name="">

color：提交时地址栏传送的%+8位是转义后的颜色值<input type="color" name="">

search：用于搜索引擎语义化表示搜索框<input type="search" name="">

伪类选择器：

例如   :hover   :selected   ::selection

选择处于当前条件下的标签

关于css的优先级：

!important >内联样式  > id > class|属性选择器|伪类 > tag > *

等级是可以叠加的，前一项的量级比后一项的量级大一倍

如果有“ ， ”，增加不了权重，同级还是就近原则