HTML与CSS基础总结
一. 认识WEB
网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等
1.浏览器的分类和内核
五大常见浏览器介绍：
- IE （edge）（Trident） 👉 (blink)
- 火狐（firefox）（Gecko）
- 谷歌（chrome）（blink）
- 苹果（safari）（webkit）
- 欧朋（Opera）（blink 早期：presto ）
浏览器的内核相当于汽车的发动机，是最核心的存在,它负责将代码转换成用户眼中的界面
2.图解web标准
- 添加入了
JS
二. HTML基础
1.文档类型<!DOCTYPE>
作用: 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
2.页面语言lang
<html lang="en"> 指定html 语言种类
最常见的2个：
en定义语言为英语zh-CN定义语言为中文
3. 字符集
<meta charset="UTF-8" />
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。
- gb2312 简单中文 包括6763个汉字 GUO BIAO
- BIG5 繁体中文 港澳台等用
- GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
- UTF-8则基本包含全世界所有国家需要用到的字符
- 这句代码非常关键， 是必须要写的，否则可能引起乱码的情况
作用: 这句话是让 html 文件是以 UTF-8 编码保存的, 浏览器根据编码去解码对应的html内容
4.标签语义化
- 一个需求可以用不同的标签来完成，那么这之间有什么区别呢？
- 一个是标签语义强，起强调作用。一个是没有语义，没有强调作用 语义好的网页更受SEO的喜欢，在搜索引擎里面的排名会更靠前
SEO优化 ===> 在输入关键字的时候，搜索引擎会罗列很多很多的网页出来，而用户基本习惯都是点前面的网页，不会去点后面的网页，所以如果网页在搜索引擎中的排名更加靠前，那么自然而然会带来更多的用户点击访问。
如何优化（了解）：
1.花钱买关键字 见效快，花钱多
2.让页面更加规范，语义更加明确（在合适的地方使用合适的标签）
作用: 根据标签的语义，在合适的地方给一个最为合理的标签，让结构更清晰。
5.锚点定位
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：
<!--1.使用<a href="#id名">链接文本</a>点击,锚点到对应的位置 -->
<a href="#two"> 点击进行锚点跳转 </a>
<!-- 2.使用相应的id名标注跳转目标的位置 -->
<h3 id="two">锚点目标</h3>
6.base 标签
<base target="_blank" />
**总结： **
- base 可以设置整体链接的打开状态
- base 写到 <head> </head> 之间
- 把所有的连接 都默认添加 target="_blank"
7.特殊符号
一些特殊的符号，我们再html 里面很难或者 不方便直接 使用， 我们此时可以使用下面的替代代码
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| × | 乘号 | × |
| ¥ | 元（yen） | ¥ |
| © | 版权（copyright） | © |
| ™ | 商标 | ™ |
| ® | 注册商标 | ® |
三. CSS选择器
1.三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
2.CSS基础选择器
①标签选择器
②类选择器
③id选择器
④通配符选择器
基础选择器总结
| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p { color：red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 不推荐使用 | * {color: red;} |
3.font字体
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 我们通常用的单位是px 像素，一定要跟上单位 |
| font-family | 字体 | 实际工作中按照团队约定来写字体 |
| font-weight | 字体粗细 | 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位 |
| font-style | 字体样式 | 记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal |
| font | 字体连写 | 1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现 |
4.CSS外观属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| color | 颜色 | 我们通常用 十六进制 比如 而且是简写形式 #fff |
| line-height | 行高 | 控制行与行之间的距离 |
| text-align | 水平对齐 | 可以设定文字水平的对齐方式 |
| text-indent | 首行缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent: 2em; |
| text-decoration | 文本修饰 | 记住 添加 下划线 underline 取消下划线 none |
5.链接伪类选择器
- a:link /* 未访问的链接 */
- a:visited /* 已访问的链接 */
- a:hover /* 鼠标移动到链接上 */
- a:active /* 选定的链接 */
6.复合选择器总结
①后代选择器
②子元素选择器
③交集选择器
④并集选择器
复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是**>** .nav>p |
| 交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
| 相邻元素选择器 | 选择相邻兄弟元素的下一个元素 | 相邻兄弟后的下一个元素 | 较少 | ul+h2 |
| 同辈元素选择器 | 选择相邻兄弟的所有元素 | 相邻兄弟的所有元素 | 较少 | prev~sibings |
| 链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
7.背景总结
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | x和y坐标 |
| background-attachment | 背景附着 | fixed(背景固定) |
| 背景简写 | 书写更简单 | 背景颜色,背景图片地址,背景平铺,背景滚动,背景位置 |
| 背景色半透明 | 背景颜色半透明 | background:rgba-(0,0,0,0.3);后面必须是4个值 |
四. CSS的三大特性
CSS有三个非常重要的三个特性：层叠性、继承性、优先级
1.层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠) 另一个冲突的样式, 层叠行主要解决冲突的问题
- 层叠性原则：
- 样式冲突, 遵循的原则就是就近原则, 哪个样式离结构进, 就执行哪个样式
- 样式不冲突, 不会层叠
2.继承性
CSS中的继承：子标签会继承父标签的某些样式, 如文本颜色和字号。
简单的理解就是：子承父业
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性
- 子元素可以继承父元素的样式( text- ,font- , line- 这些元素的开头可以继承,以及color属性)
行高的继承性
body {
font:12px/1.5 Microsoft YaHei;
}
- 如果子元素没有设置行高，则会继承父元素的行高为1.5
- 此时子元素的行高是：当前元素文字大小 * 1.5
- body行高 1.5 这样最大的优势就是里面子元素可以根据自己文字大小自动调整行高
3.优先级
| 选择器 | 选择器权重 |
|---|---|
| 继承 或者 * | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式style="" | 1，0，0，0 |
| !important 重要的 | 无穷大 |
如果盒子里的图片大于盒子宽高, 那么设置图片的宽为100%
五. CSS布局问题与边框阴影样式
1.外边距合并
1.1相邻元素垂直外边距的合并
- 当上下相邻的两个块元素(兄弟关系)相遇时,如果上面元素有下边距margin-bottom
- 下面的元素有上外边距margin-top，则他们呢的垂直间距不是margin-bottom与margin-top之和。
- 取两个值中的较大者这种现象被称为,相邻块元素垂直外边距的合并（也称外边距塌陷）
- 解决方案：尽量只给一个盒子添加margin值。
1.2 嵌套块元素垂直外边距的合并（塌陷）
- 对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距
- 父元素和子元素的上外边距和发生合并
- 合并后的外边距为: 取两者外边距较大者
解决方案：
①、可以为父元素定义上边框 ②、可以为外父元素定义上内边距 ③、可以为父元素添加 overflow:hidden
2.圆角边框
在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。
border-radius属性用于设置元素的外边框圆角
语法：
border-radius:length;
- 参数可以为数值或百分比
- 如果是正方形,想要按设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写50%
- 如果是个矩形，设置高度的一般就可以做
- 该属性是一个简写属性，可以跟四个值，分别是左上角、右上角、右下角、左下角
- 分开写：border-top-left-radius、border-top-right-radius·····
3.盒子阴影和文字阴影
①.盒子阴影
在CSS3中,新增了盒子阴影,这样我们的盒子就可以添加阴影。
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 10px 10px 14px rgba(0,0,0,.3)
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值 |
| v-shadow | 必需。垂直阴影的位置。允许负值 |
| blur | 可选。阴影的尺寸,虚影 |
| color | 可选。阴影的颜色 |
| inset | 可选。将外部阴影改为内部阴影,不常用! |
注意：
- 默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效
- 盒子阴影不占用空间，不会影响其他盒子排列
②文字阴影
在CSS3中,我们可以使用text-shadow属性应用于文本
语法:
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值 |
| v-shadow | 必需。垂直阴影的位置。允许负值 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色 |
