前端学习笔记（一）：HTML+CSS基础

一、HTML文本标签

1. 基础标签

1. 需要有包裹的内容，用双标签，不需要包裹内容就可以完成的操作用单标签

2. 标签之间的关系只有父子关系和兄弟关系

3. 标题标签只有h1-h6，且大小依次递减，独占一行

4. 在段落标签“<p> </p>”里进行换行，只会在浏览器里面多一个空格，段落与段落之间默认存在空隙。

5. 换行<br>,水平线<hr>

6. 文本格式化标签，左右区别不大，只是右边更有强调性
   

7. 图片的属性，alt当图片加载不出来的时候显示的文本，title当鼠标悬停在图片上时加载的文本，图片的宽高属性工作中只用写一个，另一个会等比例缩放

8. 音频标签：audio，防止不兼容，建议多用MP3格式的
   

9. 视频标签：video，自动播放谷歌虽然支持，但需要在后面加上muted实现静音播放，支持格式有MP4 、WebM 、Ogg。

10. 超链接的target属性可以控制标签的跳转页面方式。
    

11. 项目中的首页用index.html表示

12. ul标签代表无序列表整体，ol代表有序列表整体，ol和ul里面中只允许包含li标签，li标签可以包含任意内容。去掉li前面的小圆点的css样式为 ul { list-style: none; }

13. 网页的底部导航中通常会使用自定义列表实现，dl标签中只允许包含dt/dd标签，自定义列表构成如下：
    

2. 表格标签

14. 表格的一般标签如下，表格的border属性用于设置表格边框的宽度，其属性值为数字，宽高在工作中在css中设置，一般不在html中设置：
    
    表格的标题和表头标签如下，注意caption标签书写在table标签内部，th标签书写在tr标签内部（用于替换td标签）：
    
15. 表格的结构标签如下，通常不会带来视觉上的影响（可省略），但是，会增加可读性以及浏览器的运行效率，表格结构标签内部用于包裹tr标签
    
16. 合并单元格时，先确定保留哪个单元格以及删除哪个单元格，然后在保留下来的单元格中进行跨行和跨列的合并，增加下述属性，注意：如果有结构标签的话，只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
    
    注意：不要把th和thead弄混，th是替换td的，实现表头效果，thead是另外加在标签外面，实现结构效果

3. 表单标签

17. input标签常用属性如下：radio单选框，checkbox多选框
    
18. input里面placeholder属性，值为文本框中提示用户输入的内容的文本，如果要设置该提示文本的样式，使用选中该input框使用input::placeholder{}即可
19. input单选框标签，实现单选功能，需设置相同的那么属性:
    
20. input系列标签实现多文件选择，增加multiple属性，无值。
21. input系列按钮标签，常用的属如下，注意，要想实现以上按钮功能，需要配合form标签使用，想修改按钮提示文字，使用value属性。
    
    上述图片的标签可以改为button，属性相同，**只不过input实现按钮默认值用value，而button直接放在双标签里面即可，**也能实现相应的功能，谷歌浏览器中button默认是提交按钮，input单标签，button双标签，工作中常用button，因为配合js方便。
22. 下拉菜单：标签组成：
    • select标签：下拉菜单的整体
    • option标签：下拉菜单的每一项
    注意：select下拉菜单的默认选中selected，而单选多选框的默认选择标签是checked
23. textarea文本域标签，具体属性工作中使用css设置，其可拖拽功能在实际中通过css禁用。
24. 实现点击文字也能实现相应的单多选选中效果的方法：
    • 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
    • 需要把label标签的for属性删除即可

4. 语义及字符标签

25. div span通常称为无语义的标签，下面是有语义的标签，简单了解，其主要在移动端网页开发使用（类似div，换行）：
26. 字符标签如下，常用的只有第一个，了解即可：

二、CSS（层叠样式表）标签

1. 基础样式标签

27. css写在style标签中，style标签一般写在head标签里面，title标签下面，注意：css的注释是/* */，而html的注释是 ，不相同。
28. css 样式引入方式：注意是link
    
29. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头可以重复。
30. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！一个标签上只能有一个id属性值，一个id选择器只能选中一个标签，虽然有时不会报错，但是id是配合js使用的，所以工作中不要重复。
31. 通配符选择器：* { css属性名：属性值； }，常用于去除标签默认的margin和padding.

2. 字体文本样式标签

32. font-size,取值必须加上单位px，否则无效，谷歌浏览器默认文字大小是16px

33. font-weight控制字体的粗细，取值如为normal、bold（加粗），或者100-900，其中400正常，700加粗。

34. font-style：normal、italic（倾斜）

35. font-family：开发常用非衬线字体（ sans-serif）如： ‘‘font-family: 微软雅黑, 黑体, sans-serif;’’ 如果用户电脑没有安装微软雅黑, 就按黑体显示文字 如果电脑没有安装黑体, 就按任意一种非衬线字体系列显示。

36. 上述可以直接用font : style weight size/line-height family(注意：斜线就是斜线，不是或的意思，加行高时候，前面size不能省略)进行简写，属于复合属性，只能省略前两个，如果省略了相当于设置了默认值。

37. 属性后面的覆盖的前面的属性。

38. 在进行文本段落的操作，尤其是文本缩进，通常使用em单位，1em = 当前标签的font-size的大小，浏览器默认的字号大小是16px常用的文本样式如下：
    

39. 注意，text-align不仅可以使文本居中，还可以使以下元素居中：但是要特别注意：以下元素要给其父元素设置水平居中，如下img要水平居中要给包含img的div设置水平居中
    

40. text-decoration常用的属性如下：
    

41. 行高line-high不是字体的高度，其构成如下：取值：数字+px或者倍数（当前标签font-size的倍数）
    

42. 将【单行】文字垂直居中技巧: 设置行高属性值line-height = 外盒子自身高度属性值height，当然首先有一个能设置高度的盒子。

43. 浏览器可进行调试，**代码上有横线代表代码被覆盖未生效，代码前面有黄色感叹号代表该行的代码语法有问题。**除此之外，也可以直接在调试界面书写代码，观察效果，合适即可在源代码中修改。总结如下：
    

44. 颜色常用的书写方式如下，常用的是后两种：
    

45. 假如如果需要让div、p、h（大盒子）水平居中，添加代码 margin : 0 auto. margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度，可以用于设置版心

46. p标签之间默认的有一定的间隔，此时不用加换行，margin：0 auto让标签水平居中，text-align：center是让标签里的内容水平居中。两者作用不同。

3. 选择器进阶和背景

47. 父选择器 后代选择器 {} 用空格隔开
    父选择器 >子代选择器 {} 用大于号隔开
    选择器1，选择器2{} 并集选择器，用逗号隔开，
    选择器1选择器2 { css } 中间不隔开，选中页面中同时满足多个选择器的标签
    选择器：hover{css} 选中鼠标悬停在元素上的状态，设置样式，任何标签都可以设置
48. background-image：url（‘图片的路径’）url中可以省略引号，背景图片默认是在水平和垂直方向平铺的，如果想要设置平铺效果，使用background-repeat属性，其取值如下：当背景图和背景色都有的时候，图片在上
    
49. 背景位置的属性background-position：水平方向的位置 垂直方向的位置；用空格隔开，其取值如下：正数: 向右向下移动; 负数:向左向上移动，复数，设置背景框外的不显示，当两个属性都是center的时候，可以只写一个center。
    
50. 上述背景可以写为复合属性background：（不分先后顺序） 背景色 背景图 背景图平铺 背景图位置 ，注意背景图位置如果是英文单词可以颠倒顺序，测试背景图位置如果是数值 不能颠倒顺序
51. 工作中，重要的图片用img，装饰性的图片用背景图。

4. 元素的显示模式（行内、块、行内块）

52. 块级元素：如：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…
    （1）. 独占一行（一行只能显示一个），注意盒子是可以嵌套的，不要误解
    （2）. 宽度默认是父元素的宽度，高度默认由内容撑开
    （3）. 可以设置宽高
53. 行内元素：如：a、span 、b、u、i、s、strong、ins、em、del…
    （1）. 一行可以显示多个
    （2）. 宽度和高度默认由内容撑开
    （3）. 不可以设置宽高
54. 行内块元素：如： input、textarea、button、select……
    （1）. 一行可以显示多个
    （2）. 可以设置宽高
    特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline。
55. 元素的显示模式的转换如下：
    
56. 查找元素显示模式的方法如下：
    
57. 注意点：p标签中不要嵌套div、p、h等块级元素，a标签不能嵌套a标签
58. css继承性：控制文字的属性都能继承; 不是控制文字的都不能继承，
59. 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
    1. a标签的color会继承失效
       • 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
    2. h系列标签的font-size会继承失效
       • 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉
60. 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果，后运行的代码重叠先运行的代码。

5. css布局一 (优先级、盒子模型)

61. css优先级公式：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important （选择器的选择范围越广，重要性越低，行内样式是直接在标签里写style=“1：2；3：4”，!important是直接在对应样式的后面加，如：color: green !important;）如果自己有样式，则无法继承父类的样式，因此此时给父类加!important无效。
62. 复合标签权重的比较方式：依次比较 (行内, id, 类, 标签) 如果前一级数字比较出来了，之后的统统不看。 注意字体继承权重最低，（是否继承看样式生效的文字是本级还是后代级，如果都是继承，看继承谁选的元素离我们作用的元素最近，谁生效 ）
63. 元素css谷歌调试无结果，说明选择器没选到，选择器选择失误
64. css上一行代码出错，下一行会受影响
65. 给div设置的宽高是内容的宽高，设置padding，border会撑大盒子，但是内容宽高不变，如果规定了盒子的大小，对于宽高的设置需要进行相关的加减操作,注意：盒子大小是所有宽度之和，不是内容大小
66. border: 粗细 线条样式 颜色 – 不分先后顺序 ，线条样式常用solid : 实线、dashed: 虚线、dotted : 点线，设置对应方向边的属性用border-“方位英文”,如border-left
67. 编写顺序规范：从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节
68. padding后跟的值的情况：都是从上开始，遇到没有看对面方向，可以padding-“方位英文”设置对应的方位。
    
69. css3增加代码box-sizing : border-box ;，可以在加padding和border不影响盒子的整体大小，成为内减模式，此时宽高的大小就是整个盒子的大小了
70. magin设置外边距，用法类似padding
71. 清除默认内外边距代码 * { margin: 0; padding: 0; }
72. 设置版心居中工作中用margin：0 auto； text-align: center;一般不用，因为设置居中效果需要给其父级添加
73. 外边距的合并问题：场景：垂直布局的块级元素，上下的margin会合并（水平不会这样 ）➢ 结果：最终两者距离为margin的最大值
74. 外边距的塌陷问题： ➢ 场景：互相嵌套的块级元素（如div里面包着div），子元素的 margin-top 会作用在父元素上，会导致父亲也跟着移动，坑爹现象
    ➢ 结果：导致父元素一起往下移动
    ➢ 解决方法：1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
    2. 给父元素设置overflow：hidden（常用）
    3. 转换成行内块元素
    4. 设置浮动
75. **给行内元素设置margin和padding时，水平方向的margin和padding布局中有效，但是垂直方向的margin和padding布局中无效！**解决可以去设置一下行高或转换一下元素的显示模式

6. css布局二 (伪类，浮动)

76. 伪类选择器的使用如下图所示，E代表被选择的标签：示例：li:nth-child(5){ }选中前五个li标签，如果是有一个类名，则该类类名的前几个元素，不要误写为父类
    
    上述括号里的n可以用公式表示，常用的如下，但是用公式的话n从0开始，不用公式是几就是几，注意选中的元素第一个就是第一个，没有第0个的说法，只是计算的时候n从0开始。
    
77. 找第一个li元素里面的第三个a，写法ul:first-child a:nth-child(3) {} 并集选择器用空格隔开
78. 伪元素：由 CSS 模拟出的标签效果，content属性必须添加, 否则伪元素不生效，content里面没有内容就写个空引号，伪元素默认是行内元素。如果设置宽高记得转换显示模式或者浮动 ::冒号前面那个就是父元素，用法如下：
    
79. 标准流：又称文档流，是指按照标签默认的样式进行排版，如块级元素就是独占一行，实际开发钟，不能只用标准流，需要结合其它的特性使用
80. 浏览器解析行内块或行内标签的时候, 如果标签换行书写会产生一个空格的距离
81. 浮动的特点：（1）. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置，相当于从地面飘到了空中，浮动的标签，顶对齐。
    （2）. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
    （3）. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
    （4）. 浮动元素有类似于行内块的显示效果
    ➢ 注意点：浮动的元素不能通过text-align:center或者margin:0 auto
82. 设计版心居中时注意给居中元素设置宽度
83. CSS书写顺序: 浏览器执行效率更高（虽然可能书写先后不同，但是可以想到那个，把其增加到对应位置）
    1. 浮动 / display
    2. 盒子模型: margin border padding 宽度高度背景色
    3. 文字样式
84. 工作中主导航栏的要求，必须要li里面嵌套a标签方便浏览器进行解析，注意把a标签转换显示模式，便于扩大超链接的范围。
85. 易混点：text-decoration: none主要用来去除超链接的下划线。ul 里面 list-style: none;主要是去除列表前的小圆点
86. 受浮动影响的情况：父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置
87. 清除浮动的办法：
    ① 直接设置父元素高度：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块这种根据数据库的内容动态变化的情况。
    ② 额外标签法：（1）. 在父元素内容的最后添加一个块级元素，工作中规范设置类名为clearfix（2）. 给添加的块级元素设置 clear:both（用来清除左右两侧浮动的影响）缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
    ③单伪元素清除法：用css实现上述② 的功能，基本写法如下：补充写法是为了兼容性，注意此时在上述② 方法加入块级元素的父标签增加类名clearfix
    
    ④ 双伪元素清除法：写法及注释如下：
    .clearfix::before 作用: 解决外边距塌陷问题。外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置，详见74，也就是写好下面的标签，可以解决上述的问题：
    
    ⑤ 给父元素（类似于② 所指代的父元素）设置overflow : hidden

7. css布局（定位、装饰）

89. 定位步骤：（1）使用position属性，设置定位方式，取值如下，默认是static，标准流：
    
    （2）设置偏移值，偏移值设置分为两个方向，水平和垂直方向各选一个使用即可，选取的原则一般是就近原则 （离哪边近用哪个）对应属性及其值如下所示：
    

90. 工作中定位通常放在属性第一个位置，相对定位特点：需要配合方位属性实现移动，相对于自己原来位置进行移动，在页面中原来的还是占位置 →移动后该占一行还是占一行，没有脱标

91. 如果left和right都有, 以left为准; top和bottom都有以top 为准

92. 绝对定位: 先找已经定位的父级, 如果有这样的父级就以这个父级为参照物进行定位; 有父级, 但父级没有定位, 以浏览器窗口为参照为进行定位。特点：（1）. 脱标, 不占位 （2）. 改变标签的显示模式特点: 具体行内块特点(在一行共存, 宽高生效)

93. 子绝父相：（1） 父级是个广义的父级，可以是父级的父级，就近找定位的父级, 如果逐层查找不到这样的父级, 就以浏览器窗口为参照进行定位
    （2）定位的父级没有规定什么定位（绝对、相对、固定定位都行），但是工作中避免出现其他情况，最好相对定位，父级记得添加高度。

94. 绝对定位（只有绝对定位和固定定位的情况）的盒子不能使用左右margin：0 auto居中，但是margin的其他属性还是会生效的，要想实现居中效果如下（通常是相对于有定位的父盒子的居中效果，中间是逗号隔开的，否则就是浏览器窗口）：最后一行代码是笔记二的平面转换中。
    

95. 固定定位：（1）相对于浏览器进行定位移动，1. 需要配合方位属性实现移动
    （2）. 相对于浏览器可视区域进行移动
    （3）. 在页面中不占位置 → 已经脱标
    （4）.具备行内块特点

96. 不同布局方式元素的层级关系：标准流 < 浮动 < 定位，谁越大，谁在上。

97. 都有定位的情况下，（1）默认情况下, 定位的盒子 后来者居上 ,即代码执行的顺序
    （2）加 z-index:取值整数; 取值越大, 显示顺序越靠上, z-index的默认值是0。 注意: z-index必须配合定位才生效

98. 解决行内块或者行内元素的对齐问题（如图片和文字），用 vertical-align属性，取值如下：浏览器遇到行内和行内块标签当做文字处理, 默认文字是按基线对象。
    

99. 除了94提的居中效果，工作中可以不用定位，给父盒子设置line-height=height，然后给图片添加vertical-align: middle;实现垂直居中

100. 注意，上述的设置，只给行内或者行内块设置vertical-align，如果一个是行内块后面也是行内块，则两个都要设置，如果一个行内，另一个是块级（行内放在块里面），则只需给行内设计就行了，所以最后一种就是把所有的元素改为块级元素，也能避免这个问题。

101. 设置光标的属性以及值如下：
     

102. border-radius设置边框的圆角，4个值: 左上、 右上 、 右下 左下 – 从左上顺时针转一圈，其他情况类似padding。

103. border-radius取百分比的话有用的只能到50%

104. 占位隐藏 visibility: hidden;不占位隐藏： display: none;

105. 鼠标悬停时，如果对a标签下的某个标签变化 ，则：hover后面再空格，加上标签的名字。

106. opacity让某元素整体（包括内容）一起变透明
     0~1之间的数字，越大越不透明

107. border-collapse：collapse；让相邻表格边框进行合并，得到细线边框效果，注意这个属性只能加给table标签

108. css画三角形： （1）. 书写一个盒子（2）. 盒子添加四个方向的border, 颜色设置不同（ 3）. 保留其中一个方向的border, 其他方向颜色 是transparent

109. 链接属性选择器总结如下：
     

110. 选中元素获取焦点时状态，焦点伪类选择器 选择器：focus{ }

111. 属性选择器，通过元素上的HTML属性来选择元素，常用于选择 input 标签，语法如下：
     

8. 精灵图、背景图缩放、盒子阴影、过渡

112. 精灵图优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
113. 使用精灵图的步骤（常配合定位和伪元素使用）:
     
114. background-size：宽度 高度，设置背景图片的大小，取值如下：使用之前最好先加上background-repeat: no-repeat;其中第四个保证宽或高和盒子尺寸完全相同 ,可能会导致图片显示不全，常用contain属性，因为通常布局的时候都给好了盒子的大小。注意百分比相对于当前盒子的大小
     
115. 属性名：box-shadow 给盒子添加阴影效果，取值下如下：
     
116. 过渡：让元素的样式慢慢的变化，哪个元素产生过渡效果给哪个加，注意transition是加到默认状态下的，如果加给hover那么返回则没效果，常配合hover使用，增强网页交互体验，属性名：transition，取值如下：默认状态 和 hover状态样式不同，才能有过渡
     

9. 项目前置知识、书写规范

117. 网站由多个风格统一的网页组成的
118. SEO（Search Engine Optimization）：搜索引擎优化，作用：让网站在搜索引擎上的排名靠前，三大标签如下：
     
     对应网站的例子如下，一般内容由其它工作人员已经给出：
     
119. 给网页设置浏览器标题栏的icon小图标的方法如下：一般放在head里面，title下面
     
120. 书写项目规范:通常直接将icon图标放到根目录下。
     通常base.css是放一些清除默认样式的代码，通常大多一样**，注意，引入css样式表的link书写顺序应与下面图片的相同。遵循代码执行的顺序**
     
121. 项目书写的时候首先你要书写好你项目的版心的位置，通常精灵图加在需要添加位置的span标签里面，但是注意给span转为行内块显示模式。
122. 在书写代码时候一行显示首选浮动，而不是转换显示模式
123. 书写网站logo的优化，h1>a,里面写上网站名字，然后给a设置背景图片，并把字体font-size设置为0，即可
124. 导航就是ul里面套li，给li设置浮动，剩下就设置margin之类
125. input初始情况下是有边框，这些在base样式中都会清除
126. 绝对定位后的元素本身就具备了行内块元素的特点，因此不需要再加display转换开发模式
127. 注意版心要和设计稿的相同哦，有可能页脚或者页头的版心是不一样的，如果不和设计稿相同，后面再量尺寸可能会出问题。
128. 如果行内块和行内文字无法通过vertical-align或行高line-height对齐, 则用定位
129. 关于不是版心的颜色设计问题，注意先写一个大盒子然后再写一个版心的盒子，然后分开写样式
130. 过程中把边框的solid写成了soild然后代码黄色感叹号，被划掉，找错找了好久，注意！！
131. 精灵图的小图片用::before或者::after伪元素加会方便很多
132. 如果浮动的元素没有从我们想要的那个位置开始，观察其与上述那个地方对齐，一般是因为之前设置浮动的元素宽高过大导致占位了
133. Margin和padding的总结：margin是用来隔开元素与元素之间的间距，padding是用来隔开元素和内容的间距。margin用来布局分开元素使得元素互不相干。padding用于元素和内容之间的间隔，让内容与包裹元素之间存在一段距离。
134. 背景图background-position有时会产生2中冲突: 改变图片在盒子里面的位置; 改变精灵图的位置，这个时候就直接选中在网页调试面板找到合适的位置即可。（这种情况一般是需求中不能把盒子设置的和精灵图大小一样大的时候）