HTML+CSS基础笔记第三篇

1.新的表单属性：

2.HTML5获取元素的新方法：document.getElementsByClassName()，通过元素的class属性名获取一个伪数组。document.querySelector();通过css选择器获取元素（css选择器：即标签选择器、id选择器、类选择器、子代选择器、后代选择器），获取到的是该选择器的第一个标签。一般用于选取后代标签。document.querySelectorAll();获取所有的选择器放到一个伪数组里。

3.类名操作

 4.自定义属性。可以在标签中添加以data-开头的自定义属性。可以在js中获取到标签后通过setAttribute设置属性（有这个属性就设置值，没有这个属性就添加这个属性并设置值）

5.HTML5定义了一个对象：dataset，可以获取标签中的所有属性值。在HTML页面中属性名可以有短线，但在js获取后都被浏览器自动转换为驼峰命名法，反之通过js指定的属性会被自动转换为-（短线）。

6.网页调试。在浏览器按f12进入开发者工具，左半部分是HTML，右半部分是css，在调试工具左上角有一个小箭头，可以用它来在页面视图中选取控件以找到相应代码的位置。还可以在右边提示框中找到出错代码的行数。可以Ctrl+滚轮调节开发工具代码字体的大小。

7.伪类选择器。类选择器是点加类名。伪类选择器是冒号加类名。一般有如下四中伪类选择器：

          ：link 未点击的链接

          ：visited 已点击的链接

          ：hover  鼠标覆盖时的链接

          ：active 选定的链接

这四个顺序是固定的不能随便乱调，否则效果显示不出来

8.结构伪类选择器：是输入css3的特定选择器，可能存在兼容问题。：nth-child(n)。n可以是具体的数字标识第几个子元素（从零开始计算），也可以是even odd等标识所有元素中的奇数或偶数元素。还可以用公式作为参数进行选择。比如2n表示选择所有偶数标签，2n+1选择奇数标签，3n，4n等以此类推。

9.目标伪类选择器：：target{

}，一般与锚链接配合使用，当点击链接跳转至目标地方时，目标的相应style会变化为target定义的相关样式。

10.颜色半透明：color:rgba(r,g,b,a);a取值为0-1，表示透明度

11.文字阴影：text-shadow:1px,1px,1px,rgba(0,0,0,0.5).第一个参数表示水平阴影宽度，第二个参数表示垂直阴影高度，第三个参数表示阴影柔和度（即棱角分明还是模糊边界），第四个参数表示阴影的透明颜色。前两个参数必须，后两个参数可以使用默认值。

12.行内块标签属于特殊标签，比如td input img 虽然是行级标签，但可以设置宽高。这些叫做行内块标签。

13.复合选择器之交集选择器：由标签选择器加类选择器组成。例如p.class 表示选择所有p标签中类是class的标签。

14.复合选择器之并集选择器：如果两个标签的样式有相同之处，通过逗号将两个选择器连接起来。使他们有共同的样式。

15.伪元素选择器：：first-letter，：：first-line；：：section（鼠标单击后拖动区域样式选择）