黑马程序员技术交流社区
标题: 前端5期技术贴 [打印本页]
作者: 973921325 时间: 2019-6-7 10:35
标题: 前端5期技术贴
html 1、网页的组成部分 文字、图片和超链接等元素构成，还包括了音频、视频等等；
2.Web标准的组成[size=18.6667px] Web标准不是一个标准是一系列的标准：
结构标准（html） ---- 搭建页面的结构
表现标准/样式标准（css）---- 页面样式的美化
行为标准（javascript）--- 实现页面的交互效果
3、html标签分类双标签：由开始标签<开始标签>和结束标签</结束标签>组成；
例如：<html></html> <body></body> <head></head>
常见的双标签div、span、p、h1-h6、b、strong、s、del、i、em、ins、u、a
单标签: 不需要包含内容，直接在开始标签最后面添加一个结束的符号/;
例如：<br />
<hr />
常见的单标签br、hr、img
4、Html标签的关系• 嵌套关系 --- 后代关系，嵌套关系可以多层嵌套不单是两层；
• 并列关系 --- 兄弟关系
5、sublime的使用技巧（重要） 新建文档 Ctrl+N
保存 Ctrl+S 保存文件名必须为.html；
放大缩小界面文字大小：按住Ctrl键，滚动鼠标滚轮或者Ctrl+加号变大，Ctrl+减号缩小；
生成页面骨架：01 – html:5 按下tab键 02 ！按tab键；
浏览页面效果：右键在浏览器中打开；
CSS
css文件，然后分别连接过来即可；
1.三种链接方式的使用总结行内样式表：书写方便，权重高。缺点：没有实现样式和结构相分离；
内部样式表：部分结构和样式的分离。缺点：没有彻底分离；
外部样式表：完全实现结构和样式分离，方便各个页面的使用。缺点：需要引入
2.文字控制属性文字颜色 colorColor取值a、直接写英文单词yellow，red等等
b、16进制表示#aabbcc或者#abc
c、rgb（）如rgb（0，0，0）
d、rgb（）如rgba（0,0,0,0.5）a为透明度
常用测试颜色16进制：黑色系列：#000； #333； #666； #999；
灰色系列：#ccc； #eee； #ddd； #dedede；
红色：#f00；
文字大小 font-size 文字字体 font-family3、文本线条装饰 text-decoration text-decoration:none;没有线
text-decoration：underline；下划线
4、background属性背景颜色background-color：background-color取值是具体的色值
background-color: #0ff;
背景图片background-image：background-image取值是url(图片路径)
background-image: url(img/03.jpeg);
背景平铺background-repeat：background-repeat
取值： 平铺：repeat 不平铺：no-repeat
X轴平铺：repeat-x Y轴平铺：repeat-y
图片定位background-position：background-position:X坐标（水平方向） Y坐标（垂直方向）；
方位名词取值：可以是纯数字+px也可以是方向英文（top/bottom/left/right）;
方位名词left和right只能控制水平方向（X轴）
方位名词top个bottom只能控制垂直方向（Y轴）
方位名词center可以同时控制水平和垂直的方向
注意：如果使用方向英文只写一个值另外一个值就默认居中，所以两个值建议都写；
5.边框border边框的综合写法边框的宽度：border-width:3px;
边框的样式：border-style:solid;
常用的线条样式：solid实线 dashed虚线 dotted点线
边框的颜色： border-color:red;
综合写法：border:边框宽度 边框样式 边框颜色；
设置不同方向的边框border-方向英文如果只写border表示四个方向的边框都有，也可以利用 “ – 方向英文”来设置不同方向的边框： 方向英文：left/right/top/bottom/center
border:3px solid #ccc; 四个边框都有
border-left:3px solid #ccc; 左边框
border-right:3px solid #ccc; 右边框
border-top:3px solid #ccc; 上边框
border-bottom:3px solid #ccc; 下边框
Css设置细线表格table,th,td{
border:1px #ccc solid;
border-collapse:collapse;
6、浮动：浮动布局的原理应用让元素脱离文档流，进行页面效果的布局；
作用：让多个盒子水平排列一行显示实现网页布局，盒子左右对齐，最早是用来实现文字环绕文字；
属性：float取值：left right none（不浮动默认就是） 浮动的特点浮：浮动之后的元素脱离了标准流；
漏：盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；
特1、浮动之后的盒子的显示模式会更改为行内块元素的特点；
2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐；
7.定位模式常见的定位模式分为：相对定位、绝对定位、固定定位
定位属性定位属性：position 取值不同实现的效果不同，如下：
静态定位：position:static;
相对定位：position:relative;
绝对定位：position:absolute;
固定定位：position:fixed;
7、display显示与隐藏（重点）• 隐藏：display:none; === 属于不占位隐藏
• 显示：display:block; 将隐藏的元素显示出来
visibility显示与隐藏• 占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
overflow溢出隐藏• overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；
• overflow:scroll; 显示横向和竖向的滚动条显示（不用）；
• overflow:auto;溢出滚动， 将超出固定宽高范围的内容以滚动条的形式显示（不用）；
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |