一、目录引入
./同级(当前) ../上级目录 ../../上上级目录
二、标签种类:
1.块级标签(block):独占一行,宽高可设;
2.行内块标签(inline-block):不独占一行,宽高可设;
3.行内标签(inline):不独占一行,宽高不可设,由内容决定 br是行内标签。
三、三类标签之间的转换
1.块级标签转换为行内标签:display:inline;
2.行内标签转换为块级标签:display:block;
3.转换为行内块标签:display:inline-block;
四、图片标签:
单标签 < img src=”./img/t9.jpg” alt=”图片不存在” />
五、CSS样式、写法
1.行内样式(内联样式):<span style=“color:blue;”>文本</span>
2.内部样式:写在head标签里面,加上style标签,需要有选择器(选择给指点的标签加样式 结构:选择器+花括号+样式内容)
3.外部样式引入:<link rel=”stylesheet ” href=”css/style.css”>
六、input常用的八种类型
① intput类型(8)
1) <input type=”radio” name=””value=””/>单选
例:<lable for="sex">Math</lable>
<input tyoe="radio" name="" id="sex" /> (选中单选)
2) <input type=”checkbox”name=””value=‘’“>多选
3) <input type=”submit”name=””value=”提交”>
4) <input type=”button”name=””value=”按钮”>
5) <input type=”password”name=””value=””>密码
6) <input type=”text”name=””value=””>文本
7) <input type=”reset”name=””value=”清空”>
8) <input type=”hidden”name=”country”value=”China”>隐藏
② input标签中id、name、value的区别:
id唯一标识符,不允许有重复值;
name和id的功能是一样的,唯一不同的是name允许有重复的值;
value代表某个html标签的值 。如 value=“hello!” 你将看到网页中文本框的内容为“hello!”
七css常用标签
八、优先级
!importent>style(行内元素)>id>class>元素选择器(在这个基础上,考虑就近原则)
九、px和em区别
px特点:
px像素,相对长度单位,像素px相对显示屏分辨率而言。
em特点:
1.em的值并不是固定的;
2.em会继承父级元素字体大小。
十、相对定位 、绝对定位 、固定定位 的区别:
1. position:reletive; 相对定位:该元素相对于自己原有的位置,偏移一定的距离,相对的是它自己,同时还占据原来的位置;
2. position:absolute;绝对定位:相对的是父元素偏移一定距离,这个父元素需要设置position属性,绝对定位的元素相对于最近已定位祖先元素,绝对定位不占据原来位置;
3. position:fixed; 固定定位:相对于浏览器窗口。
十一、伪类、伪元素区别
1、 伪类:类,class是就是一个类,就类似于class这样,表示一个元素的状态,但是无须标识的分类;
2、伪元素:就是一个元素,类似p标签元素等,逻辑上存在,实际上是不存在的
十二、浮动含义
任何元素element都可以被浮动。且文本和行内的图像永远不会被浮动所覆盖。
十三、透明度区别
1.opacity:设置的透明度会被子元素继承,而切无法取消。
2.transparent:表示背景透明,不会被子元素继承。
例:一个div中写有大段文字,设div的backgroud-color为红色透明度0.5,代码background-color:rgba(190,19,13,0.5);刷新后的效果只是div背景色会变,其内容颜色不收影响。 但设div的opacity值为0.5;显示效果整个div(包括里面的文字内容)都变成透明度为50%。
3.display:none,设置该属性后,该对象会在页面上彻底消失。宽度、高度等属性都将“丢失”;
4.visibility:hidden,隐藏,视觉上看不见(完全透明),但它所占据空间的位置仍然存在。仍具有高度宽度等属性值。
例:
十三、下拉列表 select标签 option 元素位于 select 元素内部
<select>
<option>请选择</option>
<option>山西</option>
<option>上海</option>
<option>北京</option>
</select>