学习前端，html和css是必不可少的，经过一周的学习，我对前端有了更加深刻的认识，学到了许多小妙招，下文是我的一些学习笔记
那么我们废话不多说，这就开始分享吧！！！有不足的地方希望大佬可以指正
我将进行两部分介绍，html核心知识和css基础知识
- > HTML核心
- > CSS基础
HTML核心
HTML的基础知识
在HTML中，注释使用如下格式书写:<!-- 注释内容-->
HTML元素其他叫法:标签、标记
元素=起始标记(begin tag)+结束标记(end tag) +元素内容+元素属性
属性=属性名+属性值
属性的分类:
局部属性:某些元素特有的属性 全局属性:所有元素通用
空元素
有些元素没有结束标记，这样的元素叫做空元素 ，空元素的两种写法:
<meta charset="UTF-8">
<meta charset="UTF-8"/>
元素的嵌套
元素不能相互嵌套
父元素、子元素、祖先元素、后代元素、兄弟元素(拥有同一个父元素的两个元素)
标准的文档结构
HTML:页面、HTML文档
文档声明<!DOCTYPE html>。HTML文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5
不写文档声明，将导致浏览器进入怪异渲染模式。
根元素html
根元素，一个页面最多只能有一个，并且该元素是所有其他元素的父元素或祖先元素 HTML5版本中没有强制要求书写该元素
lang属性
language，全局属性，表示该元素内部使用的文字使是使用哪一种自然语言书写而成的。
head元素
文档头，文档头内部的内容，不会显示到页面上文档的元数据:附加信息
body元素
文档体，页面上所有要参与显示的元素，都应该放置到文档体中
语义化
什么是语义化
每一个HTML元素都有具体的含义
a元素:超链接
p元素:段落
h1元素:一级标题
注意：
所有元素与展示效果无关
元素展示到页面中的效果，应该有CSS决定
因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式
了解到html中最重要的就是元素，下面是我对元素的一些认识
元素分类
a元素：超链接
文本元素：h；p；span；pre；实体字符
图片元素：img
多媒体元素：video；audio
列表元素：无序列表用ul+li；有序列表用ol+li；定义列表
容器元素：div元素；语义化容器元素
1.文本元素
h：标题
p：段落
span：没有语义，仅用于设置样式
pre：预格式化文本元素，该元素通常用于在页面中显示一下代码
实体字符：通常用于在页面中显示一些特殊的符号
2.图片元素
img：空元素
与map元素连用（注意衡量坐标时，需要使用专业的衡量工具ps，pxcook）
与figure元素连用
3.多媒体元素
video元素（视频）
controls :控制控件的显示，取值只能为controls
布尔属性:某些属性，只有两种状态:1.不写 2.取值为属性名这种属性叫做布尔属性，在html5中可以不用书写属性值
autoplay :布尔属性，自动播放
muted :布尔属性，静音播放
loop:布尔属性，循环播放
audio元素（音频）
和视频完全一致兼容性
旧版本的浏览器不支持这两个元素
不同的浏览器支持的音视频格式可能不一致，
通常视频:MP4、webm 音频:MP3
4.列表元素
有序列表用ol+li
无序列表用ul+li
常用于制作菜单或者 新闻
定义列表
通常用于一些术语的定义
dl : definition list
dt: definition title术语标题
dd : definition description 术语描述
5. 容器元素
（1）div元素
没有语义
（2）语义化容器元素
header:通常用于表示页头，也可以用于表示文章的头部
footer : 通常用于表示页脚，也可以用于表示文章的微博
article :通常用于表示文章内容
section:通常用于表示文章的章节
adide:通常用于表示附加信息(侧边栏)元素包含关系
CSS基础
为网页源加样式
## 术语解释
```css
h1{
color:red;
background-color:lightblue;
text-align: center;
}
```
CsS规则 = 选择器 + 声明块
选择器:选中元素(大括号之前的元素)
p*3>lorem 生成三行随机数
### 选择器分类
选择器:选中元素
1. ID选择器:选中的是对应id值的元素
用#+id名引用
2. 元素选择器
直接用元素名
3. 类选择器
类选择器与其属性有关，与元素名无关，一个元素可以同时应用两个选择器
### 声明块
出现在大括号中
声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式
## CSS代码书写位置
1. 内部样式表
style在head里面,样式规则直接写在style中
2. 内联样式表,元素样式表
直接书写在元素的style属性中
3. 外部样式表[推荐]
将样式书写到独立的css文件中
在head里书写link元素，再用路径打开css文件
推荐原因
1) 外部样式可以解决多页面样式重复的问题,修改时也方便
2) 有利于浏览器缓存，从而提高页面响应速度
3) 有利于代码分离 (HTML和CSS) ，更容易阅读和维护
常见样式声明
样式声明要牢记！！！
1. color
元素内部的文字颜色
**预设值**:定义好的单词
**三原色，色值**:光学三原色 (红、绿、蓝)，每个颜色可以使用-255之间的数字来表达,色值
```
rgb表示法:用三个0-255之间的数字来表示一个颜色
rb(8，255，8)
hex(16进制)表示法
#红绿蓝
``
淘宝红: #ff4408，#f40
黑色:#886888，#888
白色: #ffffff，#fff
红: #ff0000，#f00
绿:#00ff00,#00f
紫:#f0f
青:#0ff
黄:#ff0
灰色:#ccc
2. background-color
元素背景颜色
3. font-size
元素内部文字的尺寸大小
1) px:像素，绝对单位，简单的理解为文字的高度占多少个像素
2) em:相对单位，相对于父元素的字体大小每个元素必须有字体大小，
如果没有声明，则直接使用父元素的字体大小，如果没有父元素 (html)则使用基准字号。
> user agent，UA，用户代理 (浏览器)
4. font-weight
文字粗细程度，可以取值数字，可以取值为预设值
>strong 默认加粗，表示重要
预设值
normal-400
bold-700
5. font-family
文字类型
必须用户计算机中存在的字体才会有效
使用多个字体，以适用各种字体环境
sans-serif，非衬线宇体（没有找到对应字体时，会用他）
6. font-style
字体样式，通常用它设置斜体
> i元素，em元素，默认样式，是倾斜字体;
实际使用中，通常用i表示一个图标 (icon)
7.text-decoration
文本修饰，给文本加线
>a素
用text-decoration删除超链接下的下划线
>de1元素: 错误的内容
>s元素:过期的内容
8. text-indent
首行文本缩进、
9. line-height
每行文本的高度，该值越大，每行文本的距离越大。
设置行高为容器的高度，可以让单行文本重直居中(像素)
行高可以设置为纯数字，表示相对于当前元素的字体大小（多行时）
10. width
宽度
11. height
高度
12. letter-space
文字间隙
13. text-align
元素内部文字的水平排列方式 right，left，center
选择器
帮助你精准的选中你想要的元素
## 简单选择器
1. ID选择器
2. 元素选择器
3. 类选择器
4. 通配符选择器
*，会选中所以元素
5. 属性选择器
根据属性名和属性值选中元素
*=b 只要属性中有b就好 各个字母之间不用有空格
~=b 属性中的字母之间必须有空格，要不然选不中
$= 只要是以等号后面的东西结束就好
6. 伪类选择器
选中某些元素的某种状态
1) link: 超链接未访问时的状态
2) visited: 超链接访问过后的状态
)
3) hover: 鼠标悬停时状态
4) active: 激活状态，鼠标按下状态
书写格式 元素：伪类选择器{内容}
(love hate 爱恨法则)
7. 伪元素选择器
before
after
可以用其生成书名号，使用时要用两个：：，在before和after里会生成一个新的子元素content
## 选择器的组合
1. 并且（直接一个选择器接一个选择器写就好）
2. 元素与后代元素之间用空格隔开 (.abc .bcd{内容}) 选择器之间用空格
3. 元素>子元素 >后面必须是其前面的子元素，否则就选不中
4. 相邻兄弟元素 +
5. 选中元素后面的所以兄弟元素 ~
##选择器的并列
多个选择器，用逗号分隔，但执行时是每个元素分开执行的
层叠
声明冲突: 同一个样式，多次应用到同一个元素
层叠:解决声明冲突的过程，浏览器自动处理(权重计算)
## 1. 比较重要性
重要性从高到底:
>作者样式表开发者书写的样式
1) 作者样式表中的 !important 样式
2) 作者样式表中的普通样式
3) 浏览器默认样式表中的样式
( 在样式后面加一个!important，其重要性会变为最高的)
## 2. 比较特殊性
看选择器
总体规则：选择器选中的范围越窄，越特殊
具体规则:通过选择器，计算出一个4位数(x x x x)
注意这4个数是逢255进一
1. 千位:如果是内联样式，记1，否则记0（内联样式可以不写选择器）
2. 百位:等于选择器中所有id选择器的数量
3. 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
4. 个位:等于选择器中所有元素选择器、伪元素选择器的数量
>（属性选择器用.访问；id选择器用#访问）
## 3. 比较源次序
代码书写靠后的胜出
## 应用
1. 重置样式表
书写一些作者样式，覆盖浏览器的默认样式
重置样式表来覆盖浏览器的默认样式
常见的重置样式表:normalize.css、reset.css、meyer.css
2. 爱恨法则
link > visited > hover > active
继承
子元素会继承父元素的某些CSS属性
通常，跟文字内容相关的属性都能被继承
背景颜色，宽，高不可以被继承
属性值的计算过程
一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件:该元素的所有CSS属性必须有值
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程
1. 确定声明值
2. 层叠冲突
3. 使用继承
4. 使用默认值
元素有声明
元素没声明
可以使用 inherit 对某个属性实行强制继承父元素的值
特殊的两个CSS取值:
-inherit：手动（强制）继承，将父元素的值取出应用到该元素
-initial：初始值，将该属性设置为默认值
盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型
1. 行盒，display等于inline的元素
2. 块盒，display等于block的元素
行盒在页面中不换行、块盒独占一行
display默认值为inlinc
浏览器默认样式表设置的块盒: 容器元素、h1~h6、p
常见的行盒: span、a、img、video、audio
## 盒子的组成部分
无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是:
1. 内容content
width、height，设置的是盒子内容的宽高
内容部分通常叫做这个盒子的**内容盒 content-box**
2. 填充(内边距) padding
距离大小用多少px，表示
盒子边到盒子内容的距离
padding-lcft、padding-right、padding-top、padding-bottom
padding:简写属性
padding:上 右 下 左(书写顺序)
若上下大小一样，左右大小一样则可以只写两个数据大小
若上下左右都一样则可以只写一个数据大小
填充区+内容区 **填充盒padding-box**
3. 边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式:border-stylc
边框宽度: border-width
边框颜色: border-color
边框样式默认为none 即没有边框
若四个边框都是一样的样式则可以简写为border：宽度，样式，颜色
边框+填充区+内容区 =**边框盒 border-box**
4. 外边距margin
边框到其他盒子的距离
margin-top、margin-left、margin-right、margin-bottom
速写属性margin:上 右 下 左(书写顺序)
模型应用
## 改变宽高范围
默认情况下，width 和 height 设置的是内容盒宽高
>页面重构师: 将psd文件 (设计稿) 制作为静态页面
衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒
如何将width和height置为边框盒
1. 精确计算
2. Css3:通过 box-sizing 修改
## 改变背景覆盖范围
默认情况下，背景覆盖边框盒
可以通过 background-clip 进行修改
## 溢出处理
overflow，控制内容溢出边框盒后的处理方式，
默认情况下，溢出边框的内容也会显示
（overflow：auto 可以自动调节滚动条的出现与消失，需要时再出现）
## 断词规则
默认情况下是中文文字之间截断，英文单词之间截断
word-brak，会影响文字在什么位置被截断换行
normal: 普通。CJK（中日韩）字符(文字位置截断)，非CJK字符 (单词位置截断)
break-a11: 截断所有。所有字符都在文字处截断（单词内部会进行截断，但中文不影响）
keep-al1: 保持所有。所有文字都在单词之间截断（英文不影响，但中文若一串文字没有空格就会认为是一个文字不截断）
## 空白处理
white-space: nowrap
该代码只能处理单行文本，多行文本需要用JS处理
white-space: nowrap;/*不换行*/
overflow: hidden;/*隐藏多余的文本*/
text-overflow: ellipsis;/*将隐藏的文本用点代替*/
行盒的盒模型
常见的行盒: 包含具体内容的元素
span,em,i,img,video,audio, strong
## 块盒与行盒的区别
块盒每个盒之间是分开的，且文字结束块盒大小不结束
行盒下一个盒子头部接着上一个盒子的尾巴，且文字结束盒子大小结束
## 显著特点
1. 盒子沿着内容沿伸
2. 行盒不能设置宽高
调整行盒的宽高，应该使用字体大小、行高、字体类型间接调整
3. 内边距(填充区)
水平方向有效,会推动内容移动
重直方向仅会影响背景，不会实际占据空间，及内容不会移动，只是边框在动
4. 边框
水平方向有效,会推动内容移动
重直方向仅会影响背景，不会实际占据空间，及内容不会移动，只是边框在动
5. 外边框
水平方向有效,会推动内容移动
重直方向仅会影响背景，不会实际占据空间，及内容不会移动，只是边框在动
## 行块盒
display: inline-block 的盒子
1. 不独占一行
2. 盒模型中所有尺寸都有效
行块盒通常用来做网页的分页
## 空白折叠
空白折叠，发生在行盒（包括行块盒）内部 或 行盒（行块盒）之间
不可以被修改使其消失
## 可替换元素 和 非可替换元素
大部分元素，页面上显示的结果，取决于元素内容，称为**非可替换元素**
少部分元素，页面上显示的结果，取决于元素属性，称为**可替换元素**
可替换元素: img、video、audio
绝大部分可替换元素均为行盒
可替换元素类似于行块盒，盒模型中所有尺寸都有效
例如： 图片是行盒但是可以改变其宽高
以上就是我这一周的学习啦！！！
我们同一时间同一地点下周不见不散！！！
987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
