HTML 1、Web标注构成 结构:HTML 表现:CSS 行为:JS 2、HTML语言语法骨架格式: <head> <title>Document</title> </head> <body> </body> </html> 3、无语义化标签: <div></div> 块级元素,独占一行 <span></span> 行内元素,独占一行 有语义化标签: <h1>…..<h6> 标题标签 <p></p>段落标签 <hr />水平线标签 <br />换行标签 文本格式化标签(右边的语义更加强烈): <b></b> <strong></strong> 文字粗体显示 <i></i> <em></em> 文字斜体显示 <s></s> <del></del> 文字加删除线显示 <u></u> <ins></ins> 文字加下划线显示 4、图像标签: ① <img src=“图像url”/> ② 当图片找不到时,<img src=“图像 url” alt=“提示文本”/> 图像不能显示时替换文本。 ③ 鼠标悬停时显示的内容:<img src=“图像url” title=“文字”/> ④ 设置图像的宽度:<img src=“图像url” width=“数值”> ⑤ 设置图像的宽度:<img src=“图像url” height=“数值”> ⑥ 设置图像边框的宽度:<img src=“图像url” border=“数值”> 5、链接标签: <a href=“跳转目标”>文本或图像</a> (例: <a href=“http://www.baidu.com”>百度</a> 如果当时没有确定链接目标时,通常将href属性定义为“#”,即href=“#”,表示该链接暂时为一个空链接。 target=“目标窗口弹出方式”,blank为在新窗口中打开方式。(例:<a href=“http://www.baidu.com” target=“_blank”>百度</a>) 锚点定位:1、使用<a href=“#ID”>链接文本</a>创建链接文本。 2、使用相应的ID名标注跳转目标的位置。 base标签:base可以设置整体链接的打开状态 <head> <base target=“_blank”/> </head> 特殊字符: 空格 < 小于号 > 大于号 注释标签: <! - - 注释语句 - -> html:ctrl+? css:ctrl+shift+? 6、相对路径: ① 图像文件和HTML文件位于同一个文件夹,只需输入图像文件名称即可。如 <img src=“图像.jpg”/> ② 图像文件位于HTML文件的下一级文件夹,输入文件夹名和文件名之间用 / 隔开,如<img src=“文件/图像.jpg”/> ③ 图像文件位于HTML文件的上一级文件夹,在文件名之前加入../ ,如果是上两级,则需要使用 ../../ ,如<img src=“../图像.jpg”/> 绝对路径:<img src=“文件右击属性+图像名称.jpg”/> (不推荐使用) 7、列表,表格和表单: 一、列表 ① 无序列表(无序列表的各个列表项之间没有顺序级别之分,是并列的) 如:<ul> <li> 列表项1 <li> <li> 列表项2 <li> <li> 列表项3 <li> </ul> ul里面只能装li,li里面放什么都可以 ②有序列表 如:<ol> <li> 中国 </li> <li> 英国 </li> <li> 俄罗斯 </li> ③自定义列表 如:<dl> <dt> 名词 </dt> <dd> 名词解释1 </dd> <dd> 名词解释2 </dd> </dl> 二、表格 <table> <caption></caption> <th></th> <tr></tr> <td></td> <tr></tr> <td></td> <tr></tr> <td></td> </table> 表格居中: align:“center” cellspacing=“” 单元格与单元格之间的距离 cellpadding=“” 单元格内容与单元格边框之间的距离 表格合并: colspan 跨列合并 rowspan 跨行合并 三、表单 男女性别只能选一个的情况 <input type=“radio”name=“sex”/> 多选的情况 <input type=“checkbox”name=“”/> 预先选定的情况 <input type=“radio”name=“sex”checked=checked /> 表单:表单控件、表单域、提示文本。 type:“button” 普通按钮 type:“reset” 重置按钮 type:“submit” 提交按钮 type:“file” 文件按钮(上传文件) 下拉栏(实际中一般用js做,这个不常用): <select> <option> 1990年 </option> <option> 1991年 </option> <option> 1992年 </option> </select> <input type=“text”placeholder(占位字符)=“文本”> <form action=“” method=“get/post”> 用户名:<input type=“text” name=“username”> 密码:<input type=“password” name=“psaaword”> <input type=“submit”> CSS 1、字体 ① font-size 字体大小 ② font-family 字体类型 ③ font-weight 字体粗细(400=normal,700=bold) ④ font-style 字体风格 (normal,italic) ② font连写顺序:{font:font-style font-weight font-size font-family;} ③ text-indent 首行缩进 单位为em。 ④ 换行:word-wrap;break-word 2、复合选择器 ① 后代选择器:.nav li (选择所有的子孙后代) ② 子代选择器:.nav li (选择子儿子,第一级别的儿子) ③ 并集选择器:.nav, .footer (如果偶遇相同的样式,集体声明,逗号隔开) ④ 交集选择器:p.nav (既是又是的关系,这个是p标签,而且他的类名是nav) ⑤ 链接伪类选择器: a:hover(鼠标经过链接时的状态) a:link(未访问过的链接) a:visited(已访问过的链接) a:active (当我们点击的时候,按下鼠标不松开) 3、显示模式 行内元素: ① 一行显示多个 ② 不能设置宽度和高度 ③ 默认的大小是内容的大小 ④ span,a,u,b,i,strong ⑤ 文本级元素 块级元素:① 一行只能放一个标签 ② 可以设置宽度和高度 ③ 宽度默认是容器(父级宽度)的100% ④ div,p,ul,ol,dl,table,li ⑤ 容器级元素 行内块元素: ① 一行可以放多个 ② 可以设置宽度和高度 ③ 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙 ④ 默认宽度就是它本身内容的宽度 ⑤ img input td 4、三大特性 层叠性 如果样式冲突,我们采取就近原则。 继承性 子级不指定,有一些样式会继承父亲的样式。(text- font- line- color,a标签什么都不继承) 优先级 ① 不同选择器,级别执行不一样 ② 通配符选择器或者继承 权重(0,0,0,0) ③ 标签选择器 权重(0,0,0,1) ④ 类选择器或伪类(a:hover) 权重(0,0,1,0) ⑤ id选择器 权重(0,1,0,0) ⑥ 行内样式表 权重(1,0,0,0) ⑦ !important 权重最高 5、盒子的内外边距 ① 盒子的实际大小:内容的宽度和高度+内边距(padding)+边框(border) ②padding:内边距,指内容与边框之间的距离。Padding连写顺序为上右下左。 padding: apx bpx cpx; 上内边距为apx,左右内边距为bpx,下内边距为cpx。 padding: apx bpx; 上下内边距为apx,左右内边距为bpx。 ③margin:外边距,指盒子与盒子之间的距离。 margin 上下左右外边距值参照padding。 ④让块级盒子居中对齐: 必须有宽度(如果没有宽度,这个块就成了通栏盒子);左右外边距设置为auto。 通常写法:margin:auto;margin:0 auto 6、插入图片和背景图片的区别 ① 插入图片,用的比较多的是产品展示类,移动位置靠盒模型,padding和margin。 ② 背景图片,一般用于小图标背景或者超大背景图片。移动位置靠background-position:x坐标,y坐标。background-attachment:scroll/fixed (背景图片固定) 7、嵌套块元素垂直外边距的合并问题(塌陷) 解决办法:① 可以为父元素定义上边框(border-top); ② 可以为父元素定义上内边距(padding-top); ③ 可以为父元素添加overflow:hidden; 8、盒子模型稳定性 width > padding > margin 1、 margin会有外边距合并,还有IE6下面margin加倍的bug,最后使用。 2、 padding会影响盒子大小,其次使用 3、 width没有问题 9、清除浮动的方法 ① 额外标签法:在浮动元素末尾添加一个空标签,<div class=“clear”></div>,在style里添加 .clear{clear:both;} ② 父级元素添加overflow属性,overflow:hidden; ③ 使用after伪元素清除浮动 .clearfix::after { content:“”; display: block; height: 0; visibility: hidden; clear: both; } /* ie6\7专门清除浮动的样式/ .clearfix { *zoom: 1; } class=“clearfix” ④ 清除浮动之父级添加双伪元素 .clearfix:before, .clearfix:after { content:“”; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; } 10、定位 定义:将盒子定在某一个位置,自由的漂浮在其他盒子上面。 标准流在最底层(海底),浮动的盒子在中间层(海面),定位的盒子在最上面层(天空)。 定位=定位模式+边偏移 静态定位:static 相对定位:relative 绝对定位:absolute 固定定位:fixed ① 静态定位:静态定位按照标准流特性摆放位置,它没有边偏移。 静态定位在布局时我们几乎不用。 ② 相对定位:相对定位是元素相对于它原来在标准流中的位置来说的。 原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它。 ③绝对定位:绝对定位是以带有定位(相对、绝对、固定)的父级元素来移动位置,如果父级元素都没有定位,则以浏览器文档为准移动位置。 ④固定定位:固定定位是绝对定位的一种特殊方式。 完全脱标——完全不占位置 只认浏览器的可视窗口——浏览器可视窗口+边偏移属性来设置元素的位置。 跟父元素没有任何关系,不随滚动条滚动 ⑤子绝父相:子级是绝对定位,父级要用相对定位。 ⑥在使用绝对定位时,要想子盒子水平居中。 1、left:50% 让盒子左侧移动到父级元素的水平中心位置。margin-left: -子盒子的一半,让盒子向左移动自身宽度的一半。 2、transform:translate(-50%,-50%) 3、全部为0,top=0,left=0,bottom=0,right=0,margin=0 ⑦鼠标样式: default 小白(默认) pointer 小手 move 移动 text 文本 not-allowed 禁止 ⑧溢出的文字省略号显示 1、white-space:nowrap; 强制在一行内显示文本 2、overflow:hidden 溢出隐藏 3、text-overflow:ellipsis 文字溢出部分转换成省略号 ⑨精灵图 使用background-position 来调整位置,通常是负值。
|