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;溢出滚动, 将超出固定宽高范围的内容以滚动条的形式显示(不用);
|