《Div+Css页面布局基础课件》由会员分享，可在线阅读，更多相关《Div+Css页面布局基础课件（30页珍藏版）》请在金锄头文库上搜索。
1、HTML骨架示例 HTML语法 css的几种调用方式 Id和Class的区别 编写规范,DIV+Css,1,HTML骨架示例,1.1. 文档类型DOCTYPE 1.2. 指定文件兼容性模式META 1.3. title优化,文档的类型 DOCTYPE标签是单独出现的 说明： 文档类型，会使浏览器使用相应标准加载网页并显示 文档类型定义在HTML文档的第一行，在html标签之前 文档不定义DOCTYPE，浏览器将无法获知HTML或XHTML文档的类型， 因此会进入混乱模式。,1.1,引用网址：,web常用的文档类型： 手机网页访问的文档类型：,每页只有一个，放置内标签使用 表现最出色的关键字放置
2、在降序 确保网站品牌进入最后添加相关关键词 使用不超过70个字符，包括空格， 避免使用停用词 反映在页面的正文文本中使用的最重要的关键字 保持它独特的页面之间 避免重复内的的标记文本的确切的文本字符串,指定文件兼容性模式META,1.2,name 属性 类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：,http-equiv 属器将把名称/值对添加到发送给浏览器的内容头部：,要为你的网页指定文件模式，需要在你的网页中使用meta元素放入X-UA-Compatible http-equiv 标头。以下是指定为Emulate IE7 mode 兼容性之范例。,title优化,每页只有一个
3、，放置内标签使用 表现最出色的关键字放置在降序 确保网站品牌进入最后添加相关关键词 使用不超过70个字符，包括空格， 避免使用停用词 反映在页面的正文文本中使用的最重要的关键字 保持它独特的页面之间 避免重复内的的标记文本的确切的文本字符串,1.3,2,HTML语法,2.1. HTML标签 2.2. HTML属性 2.3. HTML元素 2.4. HTML注释,HTML标签,HTML标签是HTML语言中最基本的单位, HTML标签是HTML语言最重要的组成部分. 通常要用两个角括号括起来:. 都是闭合的(闭合就是标签的最后要有一个/,来标示结束.),但不一定是成对出现的,比如和一对标签.(是开
4、始标签,是结束标签,在开始和结束标签中可以有内容),比如就是单独的.(注意要在最后加上/,以标示其是独立的) 标签是大小写无关的,跟表示的意思是一样的.标准推荐使用小写.引用网址：,2.1,HTML属性,2.2,HTML元素,2.3,HTML注释,2.4,3,css的几种调用方式,3.1. 内联样式表（inline styles） 3.2. 嵌入样式表（embedded style sheets） 3.3. 外部样式表（linked style sheets）,嵌入样式表（embedded style sheets） 网页文档head加入style进行各种网页风格定义,3.2,内联样式表（in
5、line styles） ：直接设置style属性,3.1,外部样式表（linked style sheets） 编写test.css,3.3,4,Id和Class的区别,4.1. id和class的使用规范 4.2. 优先级问题 4.3. JS调用id,web标准中是不容许重复ID的,比如 div id=“top 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.,id和class的使用规范,4.1,属性的优先级问题 ID 的优先级要高于class,优先级问题,4.2,方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定
6、义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.,JS调用id,4.3,5,编写规范,5.1. 多重样式 5.2. 全局样式 5.3. 代码注释，层次清晰 5.4 整洁页面结构 5.5 样式命名,多重样式,4.1,全局样式,4.2,代码注释,4.3,页面结构层次,4.4,容器： container 页头部分： header /top 主导航： mainNav /navigation 菜单： Menu 子菜单： SubMenu /submenu 二级导航： subNav 左边栏或右边栏： columns /sidebar 页面主体：
7、Main 内容部分： Content / Wrapper 主要内容区域：contentMain 页脚部分： footer 标签： tag 提示信息： Message 小技巧： Tips 投票： Vote 友情连接： friendlink 标题： title 摘要： summary 搜索输入框： searchInput 搜索输出和搜索结果相似： searchOutput 搜索： search 搜索结果： searchResults 版权信息： copyright 商标： brand,加入我们： joinUs 合作伙伴： partner 服务： service 注册： regsiter 状态： s
8、tatus 产品： products 产品价格： productsPrices 产品描述： productsDescription 产品评论： productsReview 编辑评论： editorReview 最新产品： newsRelease 生产商： publisher 缩略图： screenshot 常见问题： faqs 关键词： keyword 博客： blog 论坛： forum 按钮：btn/button 滚动：scroll 点击：click /on 左中右：L/R/C 网站信息： siteinfo 法律声明： siteinfoLegal 信誉： siteinfoCredits,命名方式,4.5,Q&A，谢谢！,
