03 Web前端知识点总结.docVIP

HTML知识点 、功能 二、思想 切功能都由标签实现标签具有四要素 三、常用标H1最大 h6最小 align <hr /> 插入水平线 size, width, align <p> </p> 划分段落, align <ol > </ol> 创建有序编号列表 type, start <li> </li> 定义一个列表项 <ul > </ul> 定义无序符号列表 type <img /> 插入图片 src,width,height,border, title,alt <table></table> 插入表格 border,width,height, bgcolor,bordercolor, cellpadding,cellspacing <tr></tr> 创建一行 <td></td> 创建一列 colspan, rowspan <th></th> 创建一列，元素，粗体/> 创建提交按钮 <input type="reset"/> 创建重置按钮 <a > </a> 超级链接,网页跳转 href, target <meta name="keywords" content="淘宝网"/> 指定快速的查询到该网页的关键字 <meta name= "description" content= "淘宝网-亚洲最大/> //提供网页内容的描述信息 <meta http-equiv="content-type" content="text/html; charset=utf-8"/> //指定文档类型和页面字符集 四、案例 1 2、学生课程表 3、注册页 CSS知识点 、功能 2、css决定元素在页面的具体位置 二、 属性是css最小构成单元，每个属性都有特定功能，多个属性构成样式，由样式修饰html语言的标签。 三、样式修饰标签 1 html标签添加style属性，属性值是多个css属性的组合。 2、标签选择器 样式名与标签关键字相同，根据名称相同自动关联。 3、ID选择器 1>样式名以#开始；2>标签添加id属性与样式关联。 4、类选择器 1>样式名以 . 开始；2>标签添加class属性与样式关联。 5、属性选择器 标签名[属性名=属性值]，根据标签关键字和属性值自动关联。 6、包含选择器 1>子样式名中间加>或空格分隔 (>直接包含)； 2>看最后一个子样式是什么选择器就如何关联标签。 7、多个样式名同一样式体 1>样式名中间加逗号分隔； 2>根据样式类型决定如何与标签关联。 8、多条件同时成立选择器 1>多个子样式名紧挨着 2>一个标签必须同时具备这多个条件才可以被该样式修饰 9、各选择器使用场合 1)如果想根据标签名用一个样式修饰所有同名标签时，用标签选择器； 2)如果一个样式只想修饰唯一的一个标签时，用id选择器； 3)如果一个样式想修饰多个任意标签时，用类选择器； 4)尽量使用包含选择器。 四、元素定位 1 2、绝对定位 有2套坐标系统： 1)如果该元素所有父标签都没有设置相对定位，那么浏览器左上角为坐标原点，根据left与top值确定元素的位置。 2)第一个设置相对定位的父标签左上角为坐标原点，根据left与top值确定元素的位置。 脱离标准文档流 相关属性： position: absolute; //表示绝对地址定位,通过绝对定位,元素可以放置到页面上的任何位置。 left:100px //绝对定位时表示与浏览器左边框距离。 top:100px //绝对定位时表示与浏览器上边框距离。 z-index: //在绝对定位层改变各元素层叠顺序 属性值是整数 越大越在上方。 3、相对定位 元素原位置(标准文档流的位置)左上角为坐标原点，根据left与top值改变位置。没有脱离标准文档流。 相关属性 position: relative; //表示相对地址定位,通过相对定位；元素可以放置到页面上的任何位置。 left:100px //相对定位时表示与元素原始位置的左边距离。 top:100px //相对定位时表示与元素原始位置的上边距离。 4、浮动定位 把元素靠在在父容器左边或右边. 兄弟元素都设置浮动后成为一行，脱离标准文档流。 相关属性 float : 设置浮动定位 clear: 清除浮动定位的影响 5、各定位方式使用场合 1)靠左或靠右，兄弟标签一列变一行，文字环绕——浮动定位。 2)移动位移比较小，用盒子模型。 3)移动位移比较大，父容器相对定位，子元素绝对定位。 五、添加独立css文件 1、创建子文件夹和css文件 2、在html页面用<link>标签导入独立css文件 3、定义样式并修饰各html标