Python学习笔记之html一周学习小结

1. h5基本结构

基本结构
HTML的文件后缀名为.html，下面是一个HTML文档的基本结构。

头部区域
HTML的头部区域 head 用于定义一些网页的初始化工作，例如网页的标题、文档的编码、载入JavaScript、CSS文件等…

其中title标签定义的网页标题显示在浏览器顶部窗口的标签栏，而 meta ~ description 定义的网页描述是不可见的，它用于告诉搜索引擎的爬虫机器人，当前页面主要的内容，适当的时候搜索引擎会给你相关词汇的搜索排名，类似的标签还有meta ~ keyword、meta ~ author。

主体区域
HTML的主体区域 body 是浏览器的视窗区域，在这个区域写入的任何内容，都会在浏览器中显示。

标签形式
每个以<>符号组成的元素成为一个HTML标签，其中由分为 单标签 和 双标签。

标签属性
标签的形式除了有单双之外，还包括了属性，通常是作为标签功能的补充。

代码注释

HTML用于注释标签是

2 .h5常用的标签

video 视频标签 支持的格式 mp4，ogg，webm
audio 音频标签 支持的格式 mp3，ogg，mav

块元素
独占一行【默认情况下竖着排列】，可以设置宽高。
对于块元素宽度不给，默认宽度与父元素相等【width:100%】,
高度若不给，默认情况下它的高度是由它的内容【子元素】来决定
h1~h6，p，ul，li，ol，dl，dt，dd，div，br，form
无序列表

有序列表

文本组合 （自定义列表）

行内元素
不独占一行【默认情况下横向排列】，设置不上宽高
对于行内元素，宽度与高度由其内容来决定的。
span，a（链接），(i，em 倾斜),(b,strong)粗体

行内块元素 （既可以设置宽高，又能显示在一排）
不但具有行内元素的特征【不独占一行】，还具有块元素的特征【可以设置宽高】
img，button，input
注意：对于行内块元素自身会带有一个缝隙，若想去除这个缝隙，可以将这个元素转为块元素
常见的行内块元素：img,button
元素类型转换： 将行内元素转为块元素
display: block;转为块元素
display: inline-block;转为行内块元素

3.浮动

有时候我需要将块元素进行横向排列，这种情况下我们可以给块元素添加浮动来实现此效果
float:left/right;
left:左浮动
right:右浮动
此属性给谁，谁进行浮动
当一排排不完的时候，它会自动排列到第二排。

高度塌陷：
当父元素没有给高度，而所有的子元素添加了浮动【子元素便不再占据自己原本的位置】
父元素无法获取子元素的高度，这时候父元素获取的高度为0，我们称之为高度塌陷。
解决：
1.给定父元素高度【不建议使用】
2.给父元素添加补丁【overflow:hidden】的补丁
3.给父元素添加一个空盒子，给空盒子设置[clear:both]清除浮动。

4. 定位

1》 相对定位 position：relative;
我们通常情况下将此定位作为包含块【容器】。
相对于自己原本的位置来进行定位的， 仍然占据自己原本的位置【不脱离文档流的】
2》绝对定位 position: absolute;
相对于具有定位属性的父元素来进行定位的，不占据自己原本的位置【脱离文档流】
3》固定定位 position:fixed;
相对于当前窗口来进行定位的，不占据自己原本的位置【脱离文档流】

注意：通常情况下，相对定位与绝对定位一起使用，一般情况下，若想让子元素在父元素中进行定位，我们首先给父元素添加相对定位，让父元素变成一个包含块，再给子元素添加
绝对定位，使子元素在父元素中进行定位。
(一般情况下，固定的导航或者广告栏我们可以使用固定定位。)
【它的位置不会随着页面内容的拖动发生变化的，它的位置只与当前窗口有关系】

5. 选择器

通配符 * 权重 0
标签选择器 1 h3{}
类选择器 10 .className{}
伪类选择器 10 xx:hover{}
id选择器 100 #idName{}
包含选择器 各个选择器权重之和 .box h3{}
群组选择器 等于各自的权重 .box,#pp,p{}
当样式出现冲突的时候，权重高的会将权重低的覆盖，
权重若相同，后写的会将前面写的覆盖

6. 添加css样式的方式

内联样式 (耦合)
在标签内直接使用style属性，来给标签添加样式的这种方式我们称之为内联样式【不建议使用】
使用此方法添加的样式，不便于复用。
内部样式
在html页面中，通过style标签来添加样式的这种方式，我们称之为内部样式。
外部样式
在css文件夹中新建一个.css文件，并使用link标签将.css文件链接到html文件中的这种方式
我们称之为外部样式。

注意：当代码非常多的情况下，我们建议css与html分离来写，这样就使用外部样式，
若代码不是非常多，便于更改的情况下，也可以直接使用内部样式。
一个html页面可以链接多个css文件，也可以添加多个style标签。
权重：内联样式权重最高，内部样式与外部样式权重相同，出现冲突的取决于书写的先后顺序。

7. html与css语法对比

html的语法
<标签 属性1=“属性值1” 属性2=“属性值2”></标签>
html中的注释：

css的语法
选择器{
属性1:属性值1;
属性2:属性值2;
…
}
css中的注释
/* 注释 */

8. css中常用的属性

width：宽度
height：高度
line-height：行高 【当行高与高度相等的时候，单行文本可以自动垂直居中显示】
font-size：字体大小
font-weight：字体粗细
color：字体颜色
text-align:文本对齐方式 center：水平居中显示
text-decoration:文本装饰
（underline：下划线 none：去除文本装饰 linethrough：删除线 overline：顶线）
border：边框
参数一：边框的样式 参数二：边框的颜色 参数三：边框宽度
border：none 去除边框【所有的边框】
border-left，border-right，border-top，border-bottom
border-raduis:边框圆角
box-shadow:阴影
参数一：水平阴影的位置【必须给】 参数二：垂直阴影的位置【必须给】
参数三：高斯模块的距离【默认0】
参数四：阴影的宽度【默认0】
参数五：阴影的颜色以及透明度【默认黑色，不透明】
参数六：阴影的样式默认外阴影

transform：动画
旋转动画，单位deg
缩放动画，没有单位
平移动画，单位px/% 分为x轴与y轴的平移

overflow:溢出处理
hidden:超出范围的时候隐藏
scroll：显示滑动条
auto：自动显示滑动条【若显示范围没有超出显示内容，则不显示滑动条】

margin：外边距
取值1：上下左右
取值2：参数一上下 参数二左右
取值4： 上 右 下 左
当块元素指定宽度之后，给margin-left与margin-right取值为auto的情况下
则此块元素可以水平居中显示。

padding：内边距 （撑大内部）
与margin类似 （撑大外部）

margin和padding是在html中的盒模型的基础上出现的，margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。

margin可以有负数值，padding不允许负数值

盒子所占的实际宽度 = margin-left + margin-right + border-left + border-right
+padding-left+padding-right+width

background: 背景
参数一：背景颜色
参数二： 背景图片链接地址
参数三：背景图片的平铺方式 repeat平铺 no-repeat 不平铺 repeat-x水平平铺 repeat-y 垂直平铺
参数四：背景图片水平方向的位置 left/right/center/px/%
参数五：背景图片垂直方向的位置 top/bottom/center/px/%
background-color：背景颜色
background-image：背景图片的链接地址
background-repeat：背景图片的平铺方式
background-position：背景图片的位置

background-size: 背景图片的大小
参数一:宽度
参数二：高度
取值为cover： 覆盖 图片覆盖盒子【图片大盒子小】
取值为contain：包含 盒子包含图片【图片小盒子大】

Animation: 动画
/*参数一：绑定在keyframes上的名称
参数二：动画执行需要的时间
参数三：动画开始之前的延迟
参数四：动画执行的次数 infinite 循环执行
参数五：动画的运动曲线 默认ease
参数六：动画是否轮流反向执行
reverse反向执行
normal：正常执行
alternate：轮流反向播放
*/