HTML标签和属性+CSS样式.doc

第一章 HTML基本标签（一）一、HTML文件的基本结构1.HTML 超文本标签语言2.基本结构标题正文主题3.标签（1）网页标题（2）摘要信息Charset字符集编码：gb2312：简体中文ISO-885901：纯英文big5：繁体utf-8：国际通用的字符编码（3）块级标签1）基本块级标签n 标题：n 段落：n 水平线：2)布局块级标签n 有序列表：n 无序列表：n 定义列表：n 表格：n 表单：n 分区：（4）行级标签常用图片格式：.jpg .gif .bmp .png1） 图像标签：2） 范围标签：3） 换行标签：4.W3C标准W3C是指万维网联盟（World Wide Wed ）1)W3C提倡的Wed页结构A.内容（结构）和表现（样式）分离B.HTML内容结构要求语义化2）XHTML 1.0的基本规范A.标签名和属性名称必须小写；B.HTML标签必须关闭；C.属性值必须用引号括起来；D.标签必须正确嵌套；E.必须添加文档类型声明。第二章 HTML基本标签（二）和表单一、超链接标签1.基本语法：链接文本或图像 _blank 在新窗口打开_self 在自身窗口打开框架窗口名 在指定的框架窗口打开_parent 在父框架集中打开_top 在顶级窗口即整个浏览器打开2.超链接的三类应用场合页面间的链接：AB A页面里写锚链接：A甲A乙或B乙 同页：A页面里写甲位置： A页面乙位置：不同页：A页面里写甲位置： B页面乙位置：功能性连接：电子邮件，QQ等 3.注释和特殊符号（1）注释：空格  大于号 >小于号 <引号 "版权符号 ©（2）特殊符号：4.表单（1）语法：action 不填为当前页；method：get 安全性低 post 安全性高（2）表单元素：1)文本框：2)密码框：3)按钮： （图片提交按钮）4)单选按钮：5)复选框：6)文本域：7)下拉列表框：8)多行文本域：9)隐藏域：10）只读和禁用：readonly，disabled。11）表单结构：用户信息表单元素 12）关联表单元素（说明表单控件）：说明文字表单元素第三章 表格的应用和布局1.表格的基本结构 （1）单元格：表格的最小单位（2）行：单元格横向排列 同行的高度由该行高度最大的决定（3）列：单元格纵向排列 同列的宽度由该列宽度最大的决定 cellspacing：单元格之间的间距 cellpadding：单元格边框与其内容之间的间距 align：单元格中内容的对其方式 （left左对齐,right右对齐,center居中对齐）2.跨列跨行（1）跨列：colspan=”所跨列数”（2）跨行：rowspan=”所跨行数”3.表格布局（1）图文布局1分析并确定表格的行列数2写出表格3确定合并单元格位于几行几列并跨了几行几列4增加colspan及rowspan属性（2）表单布局1需要多少列，要结合表单的数据信息。2各列的宽度是多少，要看输入的字符有多少，取字符个数最多的为宽度。3特殊元素的跨行跨列数。根据需要显示的位置，合并行或者列第四章 CSS样式表1.CSS（Cascading Style Sheets）层叠样式表优势：实现内容和样式的分离，利于团队开发。 实现样式复用，提高开发效率 实现页面的精确控制 更利于搜索引擎的搜索2.标签，可以把HTML文档分割为独立的不同的部分，像个容器。（独占一行）3.CSS的基本语法结构：选择器属性:属性值;4.选择器 （1）标签选择器：标签名属性:属性值; （2）类选择器： 类名属性:属性值; （3）ID选择器：ID属性:属性值; （4）并集选择器：标签名,类名,ID属性:属性值; （5）后代选择器：ul li a属性:属性值;5.（强调）标签：显示为斜体6.引入CSS的方式 （1）行内式： （2）内部：在title标签之后，在head之内 （3）外部：1）导入式： 2）链接式：inport”style.css”;7.优先级：（1）ID类标签（2）行内内部外部（链接导入）第五章 CSS属性1.文本属性属性名含义color颜色（前景色，字体颜色）line-height行高text-align文本对齐方式letter-spacing字符间距text-decorationunderline下划线、none无、overline上划线、line-through删除线、blink、inheritwhite-space处理空白，nowrap(不换行)2.字体属性属性名含义font缩写形式：风格 粗细 大小 字体font-family字体font-size大小font-weight粗细font-style风格：normal正常、italic斜体3.背景属性属性名含义background缩写形式：颜色 url(图片路径) 平铺方式 初始位置（左右 上下）background-color颜色background-image图片background-repeat平铺方式：repeat-x水平 repeat-y垂直 no-repeat不平铺background-position初始位置：左右（-向左 +向右） 上下（-向上 +向下）4.列表属性属性名含义list-style缩写形式：type position image list-style image列表项标志list-style - position列表项的位置list-style type列表项标志的类型：disc黑圆点circle空心圆 square 黑方块5.盒子模型（1）外边距属性名含义margin缩写形式：上 右 下 左margin top上外边距margin - right右外边距margin bottom下外边距margin-left左外边距（2）边框属性名含义属性名含义border缩写形式：上 右 下 左bordertop上边框border - right右边框borderbottom下边框border -left左边框bordercolor边框颜色borderwidth边框粗细：bold加粗borderstyle边框风格：none无 solid实线 dashed 虚线（3）内边距属性名含义padding缩写形式：上 右 下 左paddingtop上内边距padding- right右内边距paddingbottom下内边距padding-left左内边距paddingcolor边框颜色paddingwidth边框粗细：bold加粗paddingstyle边框风格：none无 solid实线 dashed 虚线（4）盒子模型总尺寸=border+padding+margin+内容尺寸（宽度或高度）6.浮动：float:值;left左浮动,right右浮动,none不浮动7.定位属性：（1）position:值; absolute绝对定位 relative相对定位（2）z-index:2;只对绝对定位，堆叠次序8.其他属性