html代码编写教案.docxVIP

html/css一、网页结构分析切片工具切刀状态下按住ctrl键----切片选择工具删除切片– 选中切片 delete清除切片—视图清除切片1 网页结构分析–--逐级划分2 图片局部获取–-- 1px原则[新建文档]D:/case/responsiveDw—新建—xhtml1.0-transitional首页名称 index.html二、html标记（标签）1 html超文本标记语言2 head网页头部区（网页附属信息）3 body网页主体内容（浏览器窗口中显示的内容都在body内部）4 meta网页的编码（防止乱码）5 title网页的标题双标签：html/htmlhead/headbody/body单标签：meta /标签语法：标签名/标签名英文单词或英文单词缩写[标签关系]（1）父子关系（包含关系）（2）并列关系（兄弟关系）6 div盒子（搭建网页的结构）div/div[默认特性]宽度默认是100%（相对于父级盒）高度默认是零，随着内容自适应（内容有多高，盒就有多高）独占一行（div盒默认是垂直布局）[快捷键]Ctrl+shift+选中区域后移Ctrl+shift+选中区域前移7 style 样式盒子（在内部为样式）8 img前景图 --- 网页内容imgsrc=”图片的路径”/单标签前景图占位;前景图写在结构（body）中;前景图不会重复平铺;前景图片img一般外面会加一对div标签，img与div之间不要有空格或换行9 h系列标签 --网页标题h1/h1h6/h6级别由高到低，内容页一般h1只使用一次特征：具有div全部特征，自带字体大小加粗外间距快捷键：ctrl+n(1--6)使用h系列标签注意要体现标题级别10 p段落标签p段落文本/p特征：具有div全部特征，自带外间距快捷键:ctrl+shift+p11 无序列表ul---无序列表标签li ---列表项ulli/lili/li/ululli 具有div全部特征自带列表符外间距内填充ul{ list-style:none}清除ul自带的列表符12 a 超链接a href=”网址”文字或图片/a使用”#”作为网址占位符，代表当前网页自带蓝色和下划线，链接被点击后会变为紫色，标签自带样式无法通过父级盒来改变标签类型块级标签 : div ,h1-h6,p,ul,li, form特征：独立成行，宽度100%，可以设置宽高、有外间距;行级标签：a,img,input,select,textarea,span特征：不独立成行，宽度自适应，宽高不生效，有横向没有纵向外间距注意：Imginput select textarea内容 ---可以设宽高;导航的结构特点ul --- 导航的整体布局li --- 导航项（水平导航：float）a --- 导航链接（文字样式加到a上，链接区域扩大，需要转块）导航在设计时，要么宽度一致，要么留白一致13 br换行符br /单标签(快捷键:shift+enter)14 span万能标签行级标签，一段文字中的局部实现特殊效果15 form表单标签(所有表单控件都在form标签内部)16 input 输入框文本框type=”text”value=”初始值”密码框type=”password”单选框type=”radio”name=”编组名”多选框 type=”checkbox” name=”编组名”提交按钮 type=”submit” value=”按钮文字”重置按钮 type=”reset”value=”按钮文字”17 select下拉列表Option 列表项selectoption选项1/optionoption选项2/option/select18textarea文本域（多行文本）19 label 表单标注（绑定文字与控件）20nbsp; --- 空格copy; --- 版权符号yen; --- 人民币快捷方式：shift+7三、css样式(层叠样式表)内部样式在head标签内部，/head之前，应用style type=”text/css”样式/style外部样式新建css文件并且保存到网站目录;将网页中style中的内容全部剪切到css文件中，删除style标签对;关联网页与css文件(右键css样式附加样式表)1 width 宽度2 height 高度3 float浮动Left 左浮动 | right 右浮动（1）做水平布局的每个盒都要设浮动；（2）子盒做水平布局浮动后，父级盒需要给固定的高度；（3）浮动子盒宽度之和如果大于父级盒宽度，最后一个子盒会换行；（4）div盒浮动后，宽度会从100%变为自适应4 margin 外间距margin:0 auto; 0 – 上下外间距 auto--- 左右外间距让盒相