A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 角色已恢复骄傲 初级黑马   /  2019-6-7 23:32  /  1017 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

1、网页的组成部分:
文字、图片和超链接等元素构成,还包括了音频、视频等等;
2、为什么要遵循web标准?
由于各个浏览器的内核不同,导致同一代码在经过不同浏览器渲染后生成的页面也有所不同。所以我们要遵循W3C组织制定的web标准让所有浏览器最终显示的效果完全一致。
3divspan
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里面可以嵌套多对的dtdd(实际工作中很少用);
3  一些图文混排效果可以用dl嵌套dtdd实现,dt放图片,dd放文字;
8Input表单属性(死记硬背)
1value 默认值,没有交互效果 --- value=请输入您的名字”/ 2placeholder占位符 html5的新属性,有交互效果 --- placeholder="请输入您的名字"
3name   给当前的数据起一个名字,让后台工作人员调用
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、标签显示模式(重点要理解)
实际开发的时候有的需要独占一行,有的需要一行放多个,所以把标签的显示模式分为以下三种:
     块级元素:自己独占一行;--- 代表标签 divh标签
     行内元素:一行可以共存多个;--- 代表标签  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即可;

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马