2014V20101 HTML5入门.pptx

HTML5 内容概要 HTML5发展史 网站的基本组成 网页制作与开发的基本流程 网站布局 走进HTML5 狭义的HTML5 广义的HTML5 HTML5的技术概括 HTML5行业 HTML5是什么？ HTML5的历程 网站的基本组成 网站基本组成 相应职位 网页开发流程 如何开发一个网页？ 布局的基本知识 Table布局模式 DIV+CSS的布局发展 不同布局的基本辨析 布局用标签 div 何为CSS CSS（cascading Style Sheet 的缩写），可译为层叠样式表或级联样式表，是一组格式设置规则，用于控制 web 页面的外观。 CSS CSS思索 课程安排 没有CSS的网页是什么样子的？ 根据对页面的分析，CSS是为了什么而诞生的？ 在进行代码实现和学习后，能够总结出CSS具有的特点（优势） CSS引入方式 CSS 的引入方式 标签内书写 直接在标签里面加 style 样式 客户需求 维护人员更新，满足客户的变态需求…… CSS 的引入方式 外部引入 在head部分加入link标签，引入外部css文件。 head 头部引入 在head部分加入style标签，在style标签内部书写样式。 CSS引入方式 CSS引入方式 不同引入方式的优势和劣势 CSS重置 CSS reset CSS选择器语法 CSS 基础语法 选择器｛属性：值；属性：值；｝ 选择器通常是需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成，每个属性有一个值。 属性和值用冒号分开，分号结束 CSS选择器的分类 CSS 常用选择器 ID选择器 类名选择器 标签名选择器 从选择范围和精准度的角度进行比较 考虑哪种属性是可以设置的 ID选择器 ID 选择器语法 页面中不能有同名的 ID # 后跟 ID 名 类选择器语法 可以有相同的类名 . 后跟类名 标签名选择器 标签名选择器语法 直接使用标签名作为选择器 CSS自身属性 CSS自身属性：盒模型 width ——宽 height ——高 margin ——外边距 padding ——内边距 border ——边框 外边距及内边距的使用范围、缩写方式、特殊用法 CSS自身属性 CSS背景颜色 background - color background-color: red | #ffffff | #fcc | rgb | rgba； 显示属性 float: none | left | right ; float 先浮后动（水槽原理） 所有的元素都可以浮动 具有float属性的元素在父标签中是不占空间的 float能解决标签之间有间隙的问题 操作实战 多块浮动布局 有间距的浮动布局 谢　谢