页面的构成
-
HTML – 超文本标记语言
定义页面中有哪些内容
html是由一个一个的标签组成的
<标签名> --开始标签</标签名> --结束标签
head 页面的各种配置信息 body 所有用眼睛能看见的部分 标签的分类 块元素 : 该元素自己会占满整行,设置了高度和宽度都有效,如果不设置宽度 则默认宽度为100% 如果不设置高度则默认高度随内容填充 如 div ul li p 等等 行元素 : 该元素自己不会占满整行,设置了高度和宽度都无效,高度和宽度只会随内容填充 span b i 行内块 : 该元素自己不会占满整行,设置了高度和宽度也都有效,如果不设置都随内容填充 input img
定义H5页面 <!doctype html>
最外层标签 -
CSS
CSS选择器
id 选择器
以#(井号)开头 匹配标签的ID值
类 选择器
以.(点)开头 匹配标签的class值
元素选择器
以标签名直接命名 匹配名字相同的标签
* 匹配页面中所以的标签
优先级 内联样式>id选择器>class选择器>元素选择器
为html设定样式
(1) 背景色
background:#ff0000
(2) 宽度 width:数值 px %
(3) 高度 height:数值 px %
(4) 标签转换
display: block 将元素转换成块元素
inline 将元素转换成行元素
inline-block 将元素转换成行内块
none 将元素隐藏并脱离文档流
(5) 隐藏元素不脱离文档流
visibility:hidden
(6) 背景图
background : url(‘图片的路径’)
(7) 外边距
margin-top 上外边距
margin-left 左外边距
margin-right 右外边距
margin-bottom 下外边距
margin:
1个值 上下左右外边距相同
2个值 上下 左右
4个值 上 右 下 左
(8) 定位
left
top
right
bottom
要想使上面4个属性生效,必须加position:absolute(绝对位置)
加了position:absolute的标签 必须设置父标签为position:relative
3.JS
脚本语言 用来控制html 改变样式 动态规划html