黑马程序员技术交流社区
标题: 技术贴 [打印本页]
作者: 角色已恢复骄傲 时间: 2019-6-7 23:32
标题: 技术贴
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即可；
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |