01-黑马web前段开发-基础

一、基础认知

1.标签之间的关系可以分为以下几种:

• 父子关系（嵌套关系）

2. 标签有以下类型标签：

1.排版标签

• 标题标签

• 文本格式化标签

• 换行标签

• 水平线标签

2.文本格式化标签

3. 媒体标签

• 图片标签

• 路径

• 音频标签

• 视频标签

4.链接标签

5. 列表标签

• 有序列表

• 无序列表

• 自定义列表

6. 表格标签

7. 表单标签

• input系列标签

• button按钮标签

• select下拉菜单标签

• textarea文本域标签

• label标签

8. 没有语义化标签

• div和span：工作中常用

9. 语义化标签

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
sectino	网页区块
article	网页文章

10. 常见字符实体

显示结果	描述	实体名称
	空格	&nbsp；
<	小于号	&lt；
>	大于号	&gt；
&	和号	&amp；
“”	引号	&quot；
‘	撇号	&apos；（IE不支持）
￥	元	&yen；
¢	分	&cent；
£	镑	&pound；
€	欧元	&euro；
©	版权	&copy；

---

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

1. CSS引入方式

• 内嵌式：CSS写在style标签中；

  提示：style标签虽然可以写在任意位置，但是通常约定写在head标签中。

• 外联式：CSS写在一个单独的.css文件中；

  提示：需要通过link标签在网页中引入

• 行内式：CSS写在标签的style属性中；

  提示：通常配合js使用；

2. CSS基础选择器

1. 标签选择器

   结构：标签名{css属性名：属性值;}

2. 类选择器

   结构：.类名{css属性名：属性值;}

   注意点：

   • 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）

   • 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

   • 一个标签可以同时有多个类名，类名之间以空格隔开

   • 类名可以重复，一个类选择器可以同时选中多个标签

3. id选择器

   结构：#id属性值{css属性名：属性值}

   注意点：

   • 所有标签上都有id属性

   • id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！

   • 一个标签上只能有一个id属性值

   • 一个id选择器只能选中一个标签

4. 通配符选择器

   结构：*{css属性名：属性值}

3. 字体和文本样式

1. 字体样式

   1. 字体大小：font-size

   2. 字体粗细：font-weight：normal/bold/100~900的数字（400正常、700加粗）

   3. 字体样式：font-style：normal/italic(倾斜)

   4. 字体类型：font-family： 具体字体1,具体字体2,…,字体系列

   5. 字体类型：font属性连写；一般顺序：style weight size family;

2. 文本样式

   1. 文本缩进：text-indent:N+em

   2. 文本水平对齐方式：text-align:center/left/right

   3. 文本修饰：text-decoration：underline/line-through/overline/none;

3. line-height行高；

   取值：数字+px/倍数（当前标签font-size的倍数）

   应用：

   1. 让单行文本垂直居中可以设置line-height：文字父元素高度

   2. 网页精准布局时，会设置line-height:1；可以取消上下间距

   注意：

   1. 如果设置了行高和font连写，注意覆盖问题

   2. font:style weight size/line-height family;

4. 拓展：

   1. 标签水平居中方法总结 margin:0 auto;

      • 如果需要让div、p、h（大盒子）水平居中，直接给当前元素本身设置即可

      • margin：0 auto；一般针对固定宽度的何止，如果大盒子没有设置宽度，此时默认会占满父元素的宽度；

4.CSS选择器进阶

1. 后代选择器：空格

   作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素

   选择器语法：选择器1 选择器2｛css｝

2. 子代选择器：>

   作用:根据HTML标签的嵌套关系，选择父元素 子代中 满足条件的元素

   选择器语法：选择器1>选择器2｛css｝

3. 并集选择器：,

   作用：同时选择多组标签、设置相同的样式

   选择器语法：选择器1，选择器2｛css｝

4. 交集选择器：紧挨着

   作用：选中页面中 同时满足 多个选择器的标签

   选择器语法：选择器1选择器2 { css }

5. hover伪类选择器

   作用：选中鼠标悬停在元素上的状态，设置样式

   选择器语法：选择器:hover { css }

   作用点：伪类选择器选中的元素的某种状态；

总结：

选择器	作用	格式	示例
后代选择器	找后代	选择器之间通过空格分隔	.father .son{css}
子代选择器	找儿子	选择器之间通过>分隔	.father>.son{css}
并集选择器	找到多类元素	选择器之间通过，分隔	div,p,span{css}
交集选择器	找到同时满足多个选择器的元素	选择器之间紧挨着	p.red{css}
hover伪类选择器	选中鼠标悬停在元素上的状态	:hover	a:hover{css}

（day4）的ppt

5.背景相关属性

1. 背景颜色

2. 背景图片

3. 背景平铺

4. 背景位置

5. 背景相关属性连写

6.元素显示模式

1. 块级元素

2. 行内元素

3. 行内块元素

4. 元素显示模式转换

7.CSS特性

1. 继承性

2. 层叠性

3. 优先级

   特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式；

   优先级公式：

   • 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

   注意点：

   • ！important写在属性值的后面，分号的前面；

   • ！important不能提升继承的优先级，只要是继承优先级最低！

   • 实际开发中不建议使用！important

8.盒子模型

1. 边距（border）

2. 内边距（padding)

   注意：

   • 设置widht和height是内容的宽高；

   • 设置border会撑大盒子

   • 设置padding会撑大盒子

   不会撑大盒子的特殊情况（块级元素）：

   • 如果自盒子没有设置宽度，此时宽度默认是父盒子的宽度；

   • 此时给自盒子设置左右的padding或者左右的border，此时不会撑大盒子；（因为你已经是最大了）

3. 外边距（margin）

4. 盒子模型自动内减

   操作：给盒子设置属性 box-sizing:border-box;即可；

   优点：浏览器会总计算多余大小，自动在内容中减去；

5. 外边距折叠现象

   • 合并现象

   • 塌陷现象

     场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上

     结果：导致父元素一起往下移动

     解决方法：

     1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）

     2. 给父元素设置overflow：hidden

     3. 转换成行内块元素

     4. 设置浮动

6. 行内元素的margin和padding无效情况

   场景：给行内元素设置margin和padding时；

   结果：

   1. 水平方向的margin和padding布局中有效！

   2. 垂直方向的margin和padding布局中无效！