H5前端开发学习笔记

4、Html推出了部分替代标签，分别是：strong=b、ins=u、em=i、del=s。strong定义重要性强调的文字；ins定义插入的文字；em（emphasized）定义强调的意义，但重要性弱于strong；del定义被删除的文字

5、CSS中常见的文字属性，如果属性值是中文，一定要用单引号或双引号

样式：font-style

粗细：font-weight，单词取值，数字取值

大小：font-size

字体：font-family。可以设置备选方案，如：‘“乱字”，“宋体”’格式，如果中英文混合录入，则在前面设置英文字体，后面设置中文字体，如‘arial，“微软雅黑”’格式，一定要英文在前，中文在后

字体属性可以一次性赋值，格式：slyle weight size family，如：font: italic bold 10px “宋体”，每个值间加空格，但size和family不能省略，并且size必须在前面，family必须在后面

6、CSS中常见的文本属性。decoration代表装饰线，align代表水平对齐，indent代表缩进，常用单位为em，代表字符

7、CSS中的颜色属性。直接命名，如red；rgb()，rgba()，#（16进制），#（16进制的缩写），在前端开发中，不建议大面积使用黑色，因为亮度太高，刺眼，建议使用深灰色，rgba中的a代表透明度

8、id选择器和类选择器，id选择器前面一定要加“#”号，命名时只允许使用字母、数字和下划线，且不能以数字开头，不能是标签的名称；不建议使用id，因为js中会使用；类选择器前面一定要加“.”，是专门给标签设置样式的，每个标签可以同时绑定多个类，格式如：class=”类1 类2 ……”，不能写成：class=”类1” class=”类2”，要巧用多个类的方式，从而减少重复代码量，把一些公共的样式写进类里，这样可以让代码的冗余量降低

9、后代选择器，格式：标签1 标签2{属性:值;}，类名和标签名称可以结合使用，如：.class p{}

10、子元素选择器，标签的直接子元素，格式：标签1>标签2{}，只到直接下级，不会到下下一级，一定要>符号连接，不能有空格，可以用类和标签混合，可以无限向下

11、后代选择器相对泛一些，子元素选择器定位比较精准

12、交集选择器。标签.选择器1选择器2{}，选择器与选择器间没有连接符号，如：p.one1{}，可以是标签、类混合

13、并集选择器。给所有选择器选择的标签设置属性，格式：选择器1,选择器2{}

14、兄弟选择器。通用兄弟选择器和相邻兄弟选择器，相邻兄弟（必须是紧跟的）选择器的格式：选择器1+选择器2{}；通用兄弟（只要是在后面的）选择器的格式：选择器1~选择器2{}

15、序选择器。同级别的第几个、同类型的第几个，同级别时不区分类型，同类型可以选中同级别中同类型的

16、属性选择器。[attribute]、[Attribute=value]，常用于输入信息input标签，可以分别定义属性取值中包含的字符，如开头、结尾、包含等

开头：[attribute^=value]

结尾：[attribute$=value]

包含：[attribute*=value]

17、通配符选择器，*{}，因为需要遍历所有标签，会影响访问效率，所以不建议使用

18、只有color、font、text、line这些属性才可以继承，a标签的文字颜色和下划线不能继承， h标签的文字大小不能继承。通常用于设置共性信息，格式为：body{}

19、层叠性就是CSS处理冲突的能力，当设置的属性相同时，原则上以后一个为准，只有在多个选择器选中同一个标签，且设置了相同属性时，才会发生层叠效应

CSS的全称：cascading stylesheet

20、优先级。当多个选择器选中同一个标签并且设置了相同的属性时，如何层叠由优先级来确定。优先级判断的三种方式：

是否是直接选中？间接选中就是继承性，越近优先级越高

是否是相同的选择器？起近优先级越高

不同类型选择器同时直接选中标签，按选择器的优先级id>类>通配符>继承>浏览器默认

21、优先级的important，用于提升某个直接选中标签的选择器中的某个属性的优先级，可以将指定的属性的优先级提供为最高，但只能用于直接选中的选择器，格式：!important，注意：通配符选中的标签也是直接选中

22、优先级的权重。当多个选择器混合在一起使用时，可以通过权重来判断谁的优先级更高。规则：先计算选择器中有多少个id，id最多的权重最高；如果id个数一样，再看类名，依次类推，当全部一样时，谁在后面就听谁的。记住：是数个数，权重只有在选择器直接选中标签时才需要计算权重

23、div主要作用是完成网页的布局，配合css使用；span用于配合css修改网页中的局部信息，div会单独占一行，而span不会单独占一行；div是一个容器级别的标签，而span是一个文本级别的标签

24、容器级标签和文本级标签的区别。容器级中可以嵌套其它所有标签，而文本中只能嵌套文字、超链接和图片

容器级的有div\h\ul\ol……

文本级的有span\strong\em……

哪些是文本级，哪些是容器级，不用特别记忆，在开发中，基本上都是嵌套在div\ul\li\dl\dt\dd中

25、css元素的显示模式。css把元素分成块级和行内元素、行内块级元素三种，块级元素会狂占一行，行内元素不会独占一行

所有的容器级标签都是块级元素

除了p之外和文本级标签都是行内元素

块级和行内的区别：独占和不独占；块级如果未设定宽度就会与父元素一样宽，如果块级设置了宽高，按设置值显示；行内如果没有宽度，则与内容等宽，是不能设置宽高的

行业块级元素：为了能够既不独占一行又能设置宽高，就出现了行内块级元素，如img

26、显示模式的任意转换。不换行：display:inline；块：block；行内块：inline-block

27、背景属性的缩写：background:颜色 图片 平铺方式 关联方式 定位方式;背景的任意一个取值都可以省略，bg+，快捷键

（Div.box$*5一种快捷方式）

如果在开发中，图片希望被搜索引擎搜索到，则用插入方式，否则，建议使用背景方式

28、css精灵图是一种图像合成技术，可以减少请求的次数，降低服务器的压力，需要配合背景图片和定位方式使用

29、外边距：

*{padding: 0px; marging: 0px;}

30、如果外面的盒子不想和里面嵌套的盒子在修改marging时，上边框不会发生变化，则只需要在外面的大盒子上加一个边框属性，如果开发中，需要控制嵌套关系盒子之间的距离，尽量采用padding，原则上，marging不是用来控制父子关系的，主要是控制兄弟关系间的间隙的

31、在父子关系的盒子间，可以用marging: 0px auto来使得里面的盒子在外面的盒子中水平居中，但对垂直方向无效

32、为了更好地控制盒子的位置，计算盒子的高宽，所以，在编写代码前，应全部清除其默认的格式，清除的代码，可以参见保存在html目录下的示范文件

33、webstorm的快捷键一览表

1. ctrl + shift + n: 打开工程中的文件，目的是打开当前工程下任意目录的文件。

2. ctrl + j: 输出模板

3. ctrl + b: 跳到变量申明处

4. ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)

5. ctrl + []: 匹配 {}[]

6. ctrl + F12: 可以显示当前文件的结构

7. ctrl + x: 剪切(删除)行，不选中，直接剪切整个行，如果选中部分内容则剪切选中的内容

8. alt + left/right:标签切换

9. ctrl + r: 替换

10. ctrl + shift + up: 行移动

11. shift + alt + up: 块移动(if(){},while(){}语句块的移动)

12. ctrl + d: 行复制

13. ctrl + shift + ]/[: 选中块代码

14. ctrl + / : 单行注释

15. ctrl + shift + / : 块注释

16. ctrl + shift + i : 显示当前CSS选择器或者JS函数的详细信息

17. ctrl + '-/+': 可以折叠项目中的任何代码块，它不是选中折叠，而是自动识别折叠。

18. ctrl + '.': 折叠选中的代码的代码。

19. shift + esc: 当前激活的任意小窗口最小化，也可以是alt+数字键，数字在小窗口有显示。

20. alt + '7': 显示当前的函数结构。

21.多种快捷写法示例：

div.box$*5

div.box1>p{我是内容}*3

div.box1>p{我是内容}*3+h1{我是标题}*3

Div.box$*2>p{我是内容}*3+h1{我是标题}*3

21. 如果是*.html页面，则在文件名下的导航栏某DOM结构上右键，可以全选当前DOM结构。

34、行高。行高与盒子的高度不是同一个概念，不要混为一谈。行高是指内容的高度，而盒子的高度是指整个标签的高度。line-height，文字在行高中是默认垂直居中的，通常把盒子的高度与文字高度设置成一样，这样就会自动垂直居中。在前端开发时，文字水平方向的padding常常以左边为主，不管右边

36、常见的三种排版方式：标准（文档流、普通流）流、浮动流、定位流

标准流（浏览器默认方式）

37、相同方向的浮动元，先浮动的在前，后浮动的在后；不同方向的浮动元，左浮动会找左浮动，右浮动会找右浮动；浮动元素浮动后的位置，由浮动元素浮动前在标准充中的位置来确定。浮动元素具有自动贴靠的特性，在父元素宽度不够时，最后一个浮动元素会一直向父元素左边贴，浮动元素的字围现象

38、浮动元素的高度问题，浮动元素会撑起父元素的高度。清除浮动方式：一是给前面的元素添加高度，但这种方式在实际开发中不建议使用，尽量不给盒子设置高度；二是clear属性，给后面的元素添加这个属性。当给某个元素添加clear属性时，其margin会失效，所以，使用时也要注意；三是设置父元素的边框，但后面的子元素的margin要大于前一个元素的高度，由于给父元素加边框的可能性不常见，所以这种方式也不常用；四是隔墙法。外墙法，就是在前后两个盒子中间再加一个块级元素，并且设置clear属性。外墙法可以让后一个盒子使用margin，但不能让第一个盒子使用margin-bottom，出现这个情况时，最常用的办法是直接添加中间那个盒子的高度；内墙法就是把一个盒子添加到第一个盒子所有子元素的最后，也设置一个clear both属性，这样margin就不会受到影响。内墙法与外墙法的主要区别：内墙法会撑起第一个盒子的高度，但外墙法不能撑起第一个盒子的高度。在实际开发中，隔墙法都不常用；

这才是推荐的方法，叫做伪元素选择器。伪元素可以找到相应的元素，在其前面和后面添加子元素，直接在css中设置，格式如下：

div::before/after{

Content:“内容”;

Weight;

Height;

Backgroungd-color;

Display:block;

Visibility:hidden;如果不想这个伪元素显示出来（隐藏），则高度设为0，这个属性必须设置

Clear:both;一定要写上这个属性

……

}

这种方式，在低版本浏览器中不适用，要在使用伪元素盒子中加上：div{*zoom:1;}

还有一种方式，也是推荐的，就是在第一个盒子里，加一个属性：

Overfloat:hidden; 这种方式最简单，这种效果对于清除浮动和内墙法一样，同样，这种方式在低版本浏览器中无效，加上div{*zoom:1;}。这个属性还可以让多于盒子的内容不超出盒子范围显示

Overfloat:hidden;还可以解决嵌套盒子在为第二个盒子设置margin-top时会把第一个盒子的上边框同时拉下的问题，在第一个盒子中设置这个属性，就可以了

本文来源：https://www.2haoxitong.net/k/doc/03ab2b71a55177232f60ddccda38376baf1fe0c9.html