|
HTML&CSS 总结 1. html的基本格式 <html> <head> <title> </title> </head> <body> </body> </html> 2. html标签的语法规则 <标签名 属性1=”属性值1” 属性2=”属性值2”>标签所指定的内容</标签名> 3. 超链接标签 <a href=”要跳转的地方” ></a> 功能：页面跳转。 提问：如果想让一张图片(picture1.jpg)可以实现超连接，该如何写？ <a href=””><img src=”picture1.jpg” /></a> 4. 表格的语法 <table> <tr> <td> 小表格 </td> <td>内容</td> </tr> </table> 注意：表格的内容必须写在td里面 5. 表格的常用属性 a) Table:border=数字(边框) bordercolor=边框颜色 bgcolor=背景颜色 cellspacing=数字（单元格之间的距离） cellpadding=数字（内容与表格边框之间的距离）height=“固定数字|百分比%”高度 width=“固定数字|百分比%”宽度 b) Tr: bgcolor=背景颜色 height=“固定数字|百分比%”高度 width=“固定数字|百分比%”宽度 bordercolor c) Td: bgcolor=背景颜色 height=“固定数字|百分比%”高度 width=“固定数字|百分比%”宽度 colspan=数字（合并列） rowspan=数字（合并行）bordercolor 提问：图片居中，边框的粗细、颜色如何设置？ Border-width Border-color 6. 表单 a) 功能：提交数据到服务器 b) 语法：<form ></form> c) 表单元素 1.input标签 i. 文本<input type=text /> ii. 密码<input type=password /> iii. 单选<input type=radio name=”名字一样” /> iv. 多选<input type=checkbox /> v. 按钮<input type=button /> 提交<input type=submit /> 重置<input type=reset> 属性：文本：size=文本长度 maxlength=可输入最大字符 选择：checked默认选中项 按钮：value=按钮上面显示的文字 2．下拉框标签：语法，属性 <select multiple（可以多选） size=可以看到选项的个数> <option selected（默认被选中的项）>内容</option> </select> 7. CSS层叠样式表 功能：丰富内容，减少代码量 写法：地方（3种） 1. 行内：直接在标签里加属性style=”属性:属性值;…” 2. 内嵌：在head标签内写：<style type=”text/css”> 选择器{属性:属性值;…} </style> 分3种基本选择器：html选择器、class类选择器（.类名）、id选择器（#id名）唯一 3. 外部：单独的创建一个.css文件，然后在要使用的页面加入引用代码，有2种写法 记住一种： 在head里面加入标签<link rel=”stylesheet” type=”text/css” href=”样式表文件名.css”> 注意：如果样式表出现冲突 优先 行内 再使用 内嵌 最后 使用外部 提问：使用DIV+CSS布局和Table布局的优缺点？ 8. 伪类（选择器） a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ 9. DIV（盒子模型） 作用：代替table表格来排版 写法：<div>内容（可以嵌套div）</div> 用法：设置宽度和高度，可以结合position属性来定位 常用属性： 1． border：盒子的厚度 2． margin：盒子与盒子的距离 3． padding：盒子里面装的东西与盒子的距离。 4． height、width：高、宽 5． background：盒子颜色、图案 6． float：盒子的位子left、right 10. 通过Dreamweaver创建模板 作用：实现相同的网站风格，减少代码量，提高开发网站的效率 如何创建并使用模板 1． 创建：文件à新建à常规àHTML模板à创建 2． 保存：保存到自己的网站，注意：正确的路径是网站下面会出现一个Templates文件夹，里面存放模板文件（.dwt） 3． 编写：和编写普通页面一样，排版，把网站相同风格的内容写进去。不同的内容就要创建一个可编辑区域（鼠标放到要创建的编辑区域à右键选择 模板à新建可编辑区域） 4． 基于模板创建页面：文件à新建à模板à选择要使用的模板创建 11. Dreamweaver相关知识点 A．通过Dreamweaver创建网站：站点à新建站点à高级à本地信息 给站点取名，给站点设置路径 注意：站点路径不要有中文 B．熟悉Dreamweaver的常用工具，要知道如何把我们前面学过的基本标签输出来 重点是通过表格对页面进行排版 C．在Dreamweaver中使用超链接（相对地址和绝对地址） 12. CSS的常用属性 border:1px solid #000000; /*边框的3个常用属性*/ width; height; /*设置宽度和高度*/ text-align /*设置内容左右居中*/ line-height /*调整内容上下居中*/ float /*浮动(做水平超链接时必须用到浮动)*/ margin /*设置盒子外部距离*/ padding /*设置盒子内部距离*/ position /*定位，后面要与left top一起用*/ color:#000000; /*设置文本颜色*/ background-color:#000000; /*设置背景颜色*/ font-size:14px; /*设置字体大小*/ text-decoration /*设置超链接有无下划线，一般用underline或者none*/ list-style-type:none; /*设置超链接的样式（无圆点）*/
| 
|手机版|小黑屋|架构师
( 鲁ICP备14021824号-2 )|网站地图
发表于 2014-11-9 10:42:19
发表于 2014-11-10 13:27:37
