|
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、列表，表格和表单： 一、列表 ① 无序列表（无序列表的各个列表项之间没有顺序级别之分，是并列的） <li> 列表项1 <li> <li> 列表项2 <li> <li> 列表项3 <li> </ul> ul里面只能装li，li里面放什么都可以 ②有序列表 <li> 中国 </li> <li> 英国 </li> <li> 俄罗斯 </li> ③自定义列表 <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 来调整位置，通常是负值。
| 
收藏
淘帖
踩
