1、网页的组成部分: 文字、图片和超链接等元素构成,还包括了音频、视频等等; 2、为什么要遵循web标准? 由于各个浏览器的内核不同,导致同一代码在经过不同浏览器渲染后生成的页面也有所不同。所以我们要遵循W3C组织制定的web标准让所有浏览器最终显示的效果完全一致。 3、div和span div标签布局标签,主要是布局用的大标签,也是主要标签; 特点:没有语义,独占一行; span标签布局标签,不用来做主要布局,一般放特殊效果的文字或者小图标; 特点:没有语义,一行共存多个; 4、锚点定位 作用:实现页面内部的跳转 分两步实现锚点链接: 第一步:找目标,想要跳转到的位置添加id=”id名称” 第二步:设置锚点按钮,超链接a, <a href=”#id名称”>跳转到目标</a> 5、表格的结构: 一对table标签嵌套tr标签,tr标签嵌套td标签; table表示表格整体,tr表示行,td表示单元格(列); 6、单元格的合并 跨行合并:rowspan=“合并单元格的个数” 跨列合并:colspan=“合并单元格的个数” 注意:合并单元格的顺序:先上后下,先左后右; 7、自定义列表的使用技巧: (1) 一个dl嵌套一个dt和多个dd,相当于中国的一词多义; (2)一个dl里面可以嵌套多对的dt和dd(实际工作中很少用); (3) 一些图文混排效果可以用dl嵌套dt和dd实现,dt放图片,dd放文字; 8、Input表单属性(死记硬背) (1)value 默认值,没有交互效果 --- value=”请输入您的名字”/ (2)placeholder占位符 html5的新属性,有交互效果 --- placeholder="请输入您的名字" (3)name 给当前的数据起一个名字,让后台工作人员调用 9、使用外部链接的步骤 (1)新建:.css格式的css文件,直接书写选择器以及css样式; (2)引用:利用link标签引入新建的css文件,要配合link的三个属性 rel关系,type文件类型 (可以省略),href文件路径; 10、外部链接的好处 一个css样式可以共享,如果两个页面的标签样式完全一致,就可以使用同一个css文件,然后分别连接过来即可; 11、通配符选择器* 一个*表示选中所有标签,匹配页面的所有标签,降低页面得到响应时间,不建议使用; *{ margin:0; padding:0; } 以上代码表示清空所有的默认边距; 13、字体的综合写法 font复合属性 注意:使用font的综合书写的时候一定要按照顺序书写,属性之间用空格隔开,如果没有的属性可以省略不写,文字大小和字体是必须要书写的,否则不生效; 14、链接的伪类四种状态: a:link 未访问的链接(访问前) a:visited 已访问的链接(访问后) a:hover 鼠标移动到连接上(鼠标经过) a:active 选定的链接(按下鼠标的时候) 15、标签显示模式(重点要理解) 实际开发的时候有的需要独占一行,有的需要一行放多个,所以把标签的显示模式分为以下三种: 块级元素:自己独占一行;--- 代表标签 div、h标签 行内元素:一行可以共存多个;--- 代表标签 span 、a 行内块元素:一行可以共存多个; --- 代表标签 img 、 input 16、精确取值 background-position:X坐标(水平方向) Y坐标(垂直方向)取值如果去精确单位,第一个是X轴的值,第二个是Y轴的值,如果只写了一个值就表示X轴,Y轴默认为center; 17、盒子撑大问题 问题:如果盒子有固定的宽高的情况下,添加了边框和内边距,盒子的实际大小会变大; 解决方案:添加了多少就减去多少; ----- 加多少减多 注意:如果在样式内设置了padding,但是又设置了padding-left/padding-right或者padding-top/padding-bottom,那么就根据css的层叠性去更改相应的值; 18、属性border-radius 属性值 一个值:四个角都是一样的弧度 border-radius:30px; 两个值: border-radius: 左上右下 右上左下; ---- border-radius: 20px 60px; 三个值: border-radius: 左上 右上左下 右下; ---- border-radius: 20px 60px 100px; 四个值: border-radius: 左上右上 右下 左下; ---- border-radius: 20px 60px 80px 10px; 正圆:如果想要得到正圆我们必须是一个正方形,然后设置border-radius: 50%; 胶囊形状:首先是一个长方形,然后设置border-radius的取值为长方形高度一半; 19、左右布局 方法1:一个固定宽高的父级盒子(高度不一定固定)嵌套了左右两个子级盒子,第一个子级盒子左浮动flaot:left;,第二个盒子右浮动float:right; 方法2::一个固定宽高的父级盒子(高度不一定固定)嵌套了左右两个子级盒子,第一个子级盒子左浮动flaot:left;,第二个盒子左浮动float:left;,如果两个盒子之间有距离就直接给第一个盒子添加margin-left即可;
|