|
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;溢出滚动， 将超出固定宽高范围的内容以滚动条的形式显示（不用）；
| 
收藏
淘帖
踩
