html_css笔记.doc

HTML一、 HTML有关知识点1. html介绍html是一种标记语言，主要的用途是开发网页，使用html可以展现文字、图片、视频、声音，html是我们web开发（网站开发）。2. html可以做什么 html可以编写静态网页 该静态网页可以包括文字、图像、动画、声音、表格、链接。从而构成一个个漂亮的网页3. Html发展历史1993标记语言第一版1995html2.01996html3.2w3c推荐标准2001xhml1. 1w3c推荐标准2000xhtml1.0w3c推荐标准1999html4.0.1w3c推荐标准2008html54. Html的基本结构html的基本结构5. 是标记（也叫元素），标记的一般格式：元素内容如果没有内容可以用：6. Html实体标记7. Html常用标记 html超链接l _blank 新的窗口l _self 本窗口l _parent 父窗口l _top整个浏览器窗口 html图像元素 html表格-用于说明行-用于说一小格 无序列表 有序列表 框架 表单元素文本框：密码框：单选框：复选框： checked是指默认选中的隐藏域：图片按钮： 文本域： wrap=off自动换行请在这里写 下拉菜单： size 是指显示大小-请选择- 上海 selected是指被选中 北京 #=rrggbb;这些是16进制的，红绿蓝(red-green-blue,RGB)值来表示 标尺线： 文字布局标记l ：表示一段#= left /center/right 图像： 会移动的文字 多媒体页面 背景音乐：CSS1. div元素是用来HTML文档内大块(block-level)的内容提供结构和背景元素。2. css是Cascading Style Sheets(层叠样式表单)的缩写。它是一种用来表现HTML或XML等文件样式的计算机语言3. div+css是网站标准的(或者称为“web标准”)中常用的术语之一，通常为了说明与HTML网页设计语言中的表格定位方式的区别，因为XHTML网站设计的标准中，不再使用表格定位，而是采用DIV+CSS的方式定位。我们可以这样简单的这样理解div+css:div是用于存放内容(文字，图片，元素)的容器。css是用于指定放在div中的内容的样式（大小，颜色，背景，位置）。4. div+css的好处是：l 内容和样式分离l 代码可以重复利用。5. 从上面使用的span元素，可以看出css的基本格式：元素可以是任意元素：属性名和属性值可以参考W3Cschool给出的文档6. 使用CSS的基本语法： 使用内部css: .sytlefont-size:20px;color:red;font weight:bold;font-style:itlic;引用内部css:注意：没有. 使用外部css:7. 使用滤镜：a:link imgfilter:gray;8. 四种选择器的用法：(1) 类选择器，又叫做class选择器：测试1新闻一新闻二新闻三新闻四/* .style是类选择器 */.stylefont-size:10px;font-weight:bold;color:#FF0000;类选择器的基本格式：.类选择器名属性名：属性值;(2) id选择器：基本语法格式：#id选择器名称：属性名：属性值;例如：#tyle2font-size:30px;ackground-color:green;在html文件中使用id选择器的格式是：(3) html选择器：html选择器的语法格式：html元素名称属性名：属性值;(4) 通配符选择器：*属性名：属性值；例如：*margin:0;padding:0;外边距：margin：上 右 下 左；/是按顺时针旋转的margin：10px 20px 30px 是代表上下外边距是10px,右外边距是20px,左边距是30px可以让所有的html元素的外边距和内边距都默认为0注意：当一个元素被id选择器，类选择器，html选择器修饰的时候，则优先级是：id选择器class选择器html选择器9. 选择器深入探讨：(四种选择器可以组合使用)(1) 父子选择器例如：#style span属性名：属性值;注意：子选择器标签必须是html可以识别的标记 可以有多层子选择器例如：#style span span属性名：属性值;(2) 一个标签既可以用class选择器，也可以用id选择器；但是id的选择器的优先级高于class选择器(3) 一个元素最多有一个id选择器，可以拥有多个class选择器10. 块元素和行内元素的概念：(1) 行内元素，又叫做内联元素：内联元素只能容纳文本或者内联元素，常见的内联元素有 (2) 块元素(block element):块元素一般都从新行开始，可以容纳文本，其他内联元素和其他块元素，即使内容不能占满遗憾，块元素也要把整行占满。常见的块元素有注意：块元素转换为行内元素：style=”display:inline” 行内元素转换为块内元素：style=”diplay:block”11. 标准流/非标准流：(1) 流：在网页设计中指的是元素(标签)的排列方式(2) 标准流：元素在网页中就像流水，排在前面的元素，内容前面出现；排在后面的元素，内容就后面出现。(3) 非标准流：当某个元素(标签)脱离了标准流的【比如因为相对定位】排列，我们统称为非标准流排列。12. 盒子模型：13. 浮动： 浮动是css中很重要的概念，必须掌握。浮动分为左浮动，右浮动，清除浮动。.stylebackground-color:#CC0066;width:150px;height:100px;border:1px;border-color:green;border-style:solid;float:left;/设置为左浮动清除浮动：如果不希望别的元素在某个元素的左边或者是右边，可以使用清除浮动的方法：clear:left; clear:left; clear:both;14. 定位基本概念：css定位(Positioning)属性允许你对元素进行定位。position属性值：(1) static(默认值)：元素框正常生成。块级元素生成一个矩形框，作为文档流/标准流的一部分。行内元素则会创建一个或多个行框，置于其父元素中。(2) relative(相对定位)：元素偏离某个距离。元素仍保持其未定位的形状，它原来所占的空间仍然保留，从这一角度，好像该元素仍然在文档流/标准流中一样测试1div1div2div3div4.stylebackground-color:#CC0066;width:150px;height:100px;border:1px;border-color:green;border-style:solid;float:left;#specialposition:relative;top:140px;left:50px;运行效果图：(3) absolute(绝对定位)：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流所占的空间会关闭，就好像原理不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。测试1div1div2div3div4.stylebackground-color:#CC0066;width:150px;height:100px;bo