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:轮流反向播放
*/