静态页面
静态页面由HTML、CSS和JS组成。
HTML
1.HTML结构
2.HTML标签
由上图图片可知,标签是有单标签何双标签的
常用的单标签有:hr、br、meta、input、img等
常用的双标签有:p、div、span、body、ul等
3.HTML常用的几种结构
第一种
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
第二种
第三种
<form action="跳转地址" method="post/get">
<input type="text" name="" id="">
<input type="radio" name="" id="">
<input type="checkbox">
</form>
<input type="file">
<input type="submit">
第四种
CSS
1.CSS命名
1)由字母、下划线、数字和$符号组成
2)数字不能作为开头
3)使用驼峰命名法
4)不能使用关键字保留字
2.CSS书写顺序
1)位置属性(position, top, right, z-index,display, float等)
2)大小(width, height, padding, margin)
3)文字系列(font, line-height, letter-spacing,color- text-align等)
4)背景(background, border等)
5)其他(animation, transition等)
3.选择器
选择器分为基础选择器和复合选择器。
基础选择器
1)标签选择器
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
2)类选择器
.类名 {
属性1: 属性值1;
...
}
3)id选择器
#id名 {
属性1: 属性值1;
...
}
4)通配符选择器
* {
属性1: 属性值1;
...
}
5)id 选择器和类选择器的区别
1.id选择器是以#开头,class选择器是以.开头
2.id选择器是唯一的,不能重复。
3.id 选择器和类选择器最大的不同在于使用次数上。
4.类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 JavaScript 搭配使用。
复合选择器
1)后代选择器
元素1 元素2 {
样式声明
}
2)子选择器
元素1 > 元素2 { 样式声明 }
3)并集选择器
元素1,元素2 { 样式声明 }
4)伪类选择器
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有己被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接(鼠标按下未弹起的链接)*/
4.优先级
!important>行内样式>ID选择器>类选择器|属性选择器|伪类选择器>元素选择器
行内样式权重1000
id权重100
属性选择器/class或者伪类权重10
元素,或者伪元素权重1
5.display
1)属性
display: none; -- 让标签消失
display: inline; -- 行内元素
display: block; -- 转换为块元素
display: inline-block; -- 转换为行内快元素
2)区别
块元素独占一行,可以设置width和height属性,也可以设置margin和padding属性
行内元素不会独占一行,设置width和height属性无效
js
获取的几种方式
1.document.getElementById()
2.document.getElementsByClassName()
3.document.getElementsByTagName()
4.document.querySelector()
5.document.querySelectorAll()