03Web前端考点总结分析.doc
《03Web前端考点总结分析.doc》由会员分享,可在线阅读,更多相关《03Web前端考点总结分析.doc(18页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、.HTML 知识点一、功能用来制作静态网页,网页中的全部内容都是通过 Html 语言展现出来。使用场合:开发静态网页。二、思想一切功能都由标签实现,标签具有四要素。三、常用标签标签关键字 功能 常用属性设置字体,字号,颜色 face, color, size换行居中对齐设置标题级别H1 最大 h6 最小align插入水平线 size, width, align划分段落, align创建有序编号列表 type, start定义一个列表项定义无序符号列表 type插入图片 src,width,height,border, title,alt插入表格 border,width,height, bgc
2、olor,bordercolor, cellpadding,cellspacing创建一行创建一列 colspan, rowspan创建一列,元素居中,粗体设置表格的标题收集用户输入信息,并提交给服务器action, method创建文本框 name, valuereadonly, disabled创建密码框创建单选按钮 checked创建下拉列表框 name创建列表项 value, selected.创建复选框 checked创建文本区域 name,rows, cols创建隐藏控件创建提交按钮创建重置按钮超级链接,网页跳转 href, target指定快速的查询到该网页的关键字 /提供网页内
3、容的描述信息/指定文档类型和页面字符集四、案例1、诗篇2、学生课程表 3、注册页.CSS 知识点一、功能1、css 格式化页面中的各组成元素2、css 决定元素在页面的具体位置二、思想属性是 css 最小构成单元,每个属性都有特定功能,多个属性构成样式,由样式修饰 html 语言的标签。三、样式修饰标签1、style 属性html 标签添加 style 属性,属性值是多个 css 属性的组合。2、标签选择器样式名与标签关键字相同,根据名称相同自动关联。3、ID 选择器1样式名以 #开始;2 标签添加 id 属性与样式关联。4、类选择器1样式名以 . 开始;2 标签添加 class 属性与样式关
4、联。5、属性选择器标签名属性名=属性值,根据标签关键字和属性值自动关联。6、包含选择器1子样式名中间加 或空格分隔 (直接包含);2看最后一个子样式是什么选择器就如何关联标签。7、多个样式名同一样式体1样式名中间加逗号分隔;2根据样式类型决定如何与标签关联。8、多条件同时成立选择器.1多个子样式名紧挨着 2一个标签必须同时具备这多个条件才可以被该样式修饰9、各选择器使用场合1)如果想根据标签名用一个样式修饰所有同名标签时,用标签选择器;2)如果一个样式只想修饰唯一的一个标签时,用 id 选择器;3)如果一个样式想修饰多个任意标签时,用类选择器;4)尽量使用包含选择器。四、元素定位1、盒子模型通
5、过设置标签的内外边距从而改变元素的位置,没有脱离标准文档流。相关属性:marging-top:外上边距margin-right:外右边距margin-bottom:外下边距margin-left:外左边距margin:同时设置上右下左四个外边距 (顺时针)padding-top:内上边距padding-right:内右边距padding- bottom:内下边距padding-left:内左边距padding:同时设置上右下左四个内边距border-top:设置上边线的粗细,颜色,线型border-right:设置右边线的粗细 ,颜色,线型border-bottom:设置下边线的粗细 ,颜色,
6、线型border- left:设置左边线的粗细,颜色,线型border:同时设置四个边线的粗细,颜色,线型border-width:只设置 4 个边线的宽度(粗细) border-color:/只设置 4 个边框的边框颜色 border-style:只设置 4 个边框的边框线型.2、绝对定位有 2 套坐标系统:1)如果该元素所有父标签都没有设置相对定位,那么浏览器左上角为坐标原点,根据 left 与 top 值确定元素的位置。2)第一个设置相对定位的父标签左上角为坐标原点,根据 left 与 top 值确定元素的位置。脱离标准文档流相关属性:position: absolute;/表示绝对地址
7、定位,通过绝对定位,元素可以放置到页面上的任何位置。left:100px /绝对定位时表示与浏览器左边框距离。top:100px/绝对定位时表示与浏览器上边框距离。z-index: /在绝对定位层改变各元素层叠顺序 属性值是整数 越大越在上方。3、相对定位元素原位置(标准文档流的位置)左上角为坐标原点,根据 left 与 top 值改变位置。没有脱离标准文档流。相关属性position: relative;/表示相对地址定位,通过相对定位;元素可以放置到页面上的任何位置。left:100px /相对定位时表示与元素原始位置的左边距离。top:100px /相对定位时表示与元素原始位置的上边距离
8、。4、浮动定位把元素靠在在父容器左边或右边. 兄弟元素都设置浮动后成为一行,脱离标准文档.流。相关属性float : 设置浮动定位clear: 清除浮动定位的影响5、各定位方式使用场合1)靠左或靠右,兄弟标签一列变一行,文字环绕浮动定位。2)移动位移比较小,用盒子模型。3)移动位移比较大,父容器相对定位,子元素绝对定位。五、添加独立 css 文件 3 步骤1、创建子文件夹和 css 文件2、在 html 页面用标签导入独立 css 文件3、定义样式并修饰各 html 标签六、静态网页开发思想1、对网页元素通用属性进行设置。2、分析页面的组成,整个网页布局划分为多个矩形区域,在矩形区域内部又可以
9、划分子矩形区域,每个矩形区域都用标签实现。3、用 html 标签把实际元素放在标签中,再用 css 实现元素定位和格式化(对每个元素和 div),依次类推,搞定每个 div 区域。七、css 常用属性属性名 功能 属性值font-size 设置字号 1)像素 2)百分比color 设置字体颜色 1)英文单词 2)rgbfont-family 设置字体 宋体|黑体font-weight 设置文字粗体 normal、lightar、boldfont-style 设置字体斜体 normal、italicfont 设置字体所有属性 必须按顺序设置text-decoration 设置文本下划线格式 no
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 03 Web 前端 考点 总结 分析
限制150内