html结构和css样式.doc

认识网页结构-------兄弟关系（并列结构）----父子关系（嵌套结构）bug八阿哥908159007（qq） 1、切片工具 c 按住ctrl切换切片选择工具 A）、对网页的结构进行划分 a)、根据内容区域的功能----头部--banner --内容--底部 b）、一像素原则--对网页结构进行划分的时候必须精确到一个像素 c）、逐级划分---先整体--后局部--到细节 先上下---再左右---从外到里 B）、图像的局部获取 需要的图片用切片切出来，ctrl+shift+alt+s （存储为web所用格式）---jpg 文件名：英文；格式：仅限图像；切片：选中的切片 html=超文本标记语言---构成网页就有一些语义的单词 标记/标记 双标记 三要素：结构、样式、行为 文件的保存 1）、在你的存盘（d、e）新建一个文件夹--网页的站点 2）、在DW-新建html文件---title内容修改成网页的名称 3）、把html文件保存到文件夹中 （注）:网站首页的名称--必须为index.html 标记--html--标签--元素 1、html 整个网页文件 2、head 网页头部----除主体内容之外的信息 3、title 网页的主题 4、meta 声明一些标准--编码标准---utf-8 国际通用编码标准 5、body 网页的主体内容---psd效果里面内容都要写在body内部 6、div 用来做网页框架----盒子 A）、默认的宽度--默认的宽度为100%；窗口有多大，盒子宽度就有多宽 B）、高度为自适应---里面内容有多高，盒子就有多高~~ C）、独立成行---垂直显示 7、img 图片标记 img src=”图片的保存位置” / 单标记 8、h1-h6 标题标记一组标记 从最大到最小标题 A）、独立成行--垂直显示 B）、默认宽度为100%，默认高度也为自适应 C）、标题标记自带间距 D）、标题文字---自带加大加粗 9、p 段落标记--用于排版大篇文字 A）、自带间距 B）、独立成行--宽度为100%，高度为自适应 10、ul-li 作为父子关系 列表标记 ul li/li /ul A）、宽度为100%，高度为自适应，独立成行 B）、自带间距--自带填充 特殊符号 copy; shift+7= a 超链接标记a href=”连接指向地址”/a 文字加了a标记之后，默认字体颜色为蓝色，会有下划线 图片加了a标记之后，ie7、8、9、10，图片会出现一个border 在css添加img{border:none;} 块级标记 有默认的宽度，默认的宽度为100%，独立成行--垂直显示 Div,h1~h6,p,ul,li,form 行级标记 水平显示，没有默认的宽度（css定义是无效） Img,a，span,input,label,select,textarea 导航的结构ul-li-a 导航的样式：（1）等宽度，li{float:left;width:；}字体样式定义a里面 （2）等间距li{float:left;margin或者padding}；字体样式定义在a里面 span 万能标记 文件的路径：==文件保存的位置 绝对路径 网址-- 相对路径 相对一个文件夹，../回到上一级 后退一步 a 标记 href=”” target 设置是否新窗口的方式打开 文件 网址 Mailto:908159007@ 点击qq咨询 tencent://message/?uin=908159007Site= Target=”_blank” 新窗口方式打开 锚点链接---本页面内链接 要找到位置a name=”名称”/a 点击的a href=”#名称” form 表单 Input input type=”类型” value=”初始值” maxlength=”数字”maxlength最多字符数 类型：1）、text 输入框 2）、password 密码 3）、按钮 A）、button B）、submit 提交 C）、reset 重置 4）、radio 单选框input type=”radio” name=”名称”input type=”radio” name=”名称” 做单选必