web标准页面布局应用(二)
web的标准
web的标准随着Web技术的不断发展，标准已经成为了设计和开发优质网站的基础。
Web标准主要包括三个方面：结构标准、表现标准和行为标准。
它们是Web技术发展的重要标志，为网站开发提供了规范和方向。
下面来一步步详细阐述这三个方面的内容，以及它们之间的联系。
一、结构标准结构标准主要规定Web页面的结构和组织方式，它们通常使用HTML或XML来实现。
HTML是一种用于创建Web页面的标记语言，它定义了页面中各个部分的语义和功能。
在结构标准中，设计人员需要遵循一些基本准则，包括：1.避免混合使用不同的标记语言，如HTML和CSS。
2.使用正确的标记元素来组织页面内容，例如标头、段落、列表等。
3.避免使用表格来布局页面，应该使用CSS来控制页面的样式和布局。
4.确保HTML文档结构的正确性，以确保浏览器可以正确地解析网站内容。
二、表现标准表现标准主要规定Web页面的外观和风格，通常使用CSS来实现。
CSS是一种样式表语言，它与HTML结合使用，可以实现页面的外观、样式和布局。
在表现标准中，设计人员需要遵循一些基本准则，包括：1.使用CSS集中控制页面的外观和布局，避免在HTML标记中使用样式属性。
2.避免使用表格来布局，使用CSS来控制页面的布局，可以实现更灵活的布局效果。
3.使用语义化的标签来定义页面的内容，可以更好地支持搜索引擎优化和无障碍访问。
三、行为标准行为标准主要规定Web页面的交互行为，通常使用JavaScript 来实现。
JavaScript是一种基于对象的脚本语言，可以实现页面动态效果、表单验证和交互等功能。
在行为标准中，设计人员需要遵循一些基本准则，包括：1.使用JavaScript来实现页面的交互和动态效果。
2.避免在HTML标记中使用JavaScript脚本，应该将JavaScript 代码单独存放在一个外部JS文件中。
3.遵循JavaScript开发的最佳实践，如为变量和函数使用有意义的名称，注重代码的结构和可读性，以及避免使用全局变量等。
WEB端设计规范
作用：媒体查询可以实现响应式设计，使网页在不同设备上都能获得良好 的用户体验。
常见用法：媒体查询常用于设置不同屏幕宽度下的布局和样式，例如在小 屏幕设备上隐藏侧边栏或调整字体大小。
响应式布局
定义：根据不同设备的屏幕大小和分辨率，自适应调整网页布局和样式，提供最佳的用户体验。 实现方式：使用媒体查询、弹性布局、流式布局等技术，使网页在不同设备上都能良好展示。 优点：提高用户体验，满足用户在不同设备上的浏览需求，提高网站兼容性和SEO优化。 注意事项：避免过多的媒体查询和样式重写，保持简洁的代码结构和良好的可维护性。
动态调整
适配移动端
响应式设计：根据不同设备的屏幕大小和分辨率，自动调整网页布局和样式，确保良好 的用户体验。
媒体查询：使用CSS媒体查询技术，针对不同屏幕尺寸应用不同的样式，实现页面布局 的适配。
流式布局：采用百分比宽度代替固定宽度，使页面元素能够自适应屏幕大小，方便用户浏览。
弹性图片：使用相对单位（如百分比）设置图片宽度，使图片能够随着屏幕大小变化而 自适应。
字体选择：选用易读且简洁的 字体，避免过于花哨或奇特的 字体
一致性
设计语言的一致性：确保网站或应用的整体设计风格、色彩、字体等元素的一致性，为 用户提供清晰、统一的视觉体验。
导航和布局的一致性：保持导航菜单的位置、样式和功能的一致性，方便用户快速找到 所需内容。同时，确保页面布局的一致性，使内容呈现更加有序、易于理解。
字体与字号
字体：常用的字体有宋体、黑体、楷体等，根据设计风格和内容选择合适的字体 字号：根据页面布局和内容层级选择合适的字号，确保可读性和层次感 字体颜色：选择与背景色对比度适中、易于阅读的字体颜色 字体样式：根据设计风格和内容需求选择常规、粗体、斜体等字体样式
Web标准详解
Web标准详解不是某⼀个标准，⽽是⼀系列标准的集合。
⽹页主要由三部分组成：结构（Structure）、表现（Presentation）和⾏为（Behavior）。
结构标准：相当于⼈的⾝体。
html就是⽤来制作⽹页的。
表现标准：相当于⼈的⾐服。
css就是对⽹页进⾏美化的。
⾏为标准：相当于⼈的动作。
JS就是让⽹页动起来，具有⽣命⼒的。
1、Web标准的三个规范(1)结构(Structure)①HTMLHTML英语意思是：Hypertext Marked Language，即超⽂本标记语⾔,使⽤HTML语⾔描述的⽂件，需要通过WWW浏览器显⽰出效果。
是⼀种最为基础的语⾔。
所谓超⽂本，因为它可以加⼊图⽚、声⾳、动画、影视等内容，因为它可以从⼀个⽂件跳转到另⼀个⽂件，与世界各地主机的⽂件连接。
所谓标记，就是它采⽤了⼀系列的指令符号来控制输出的效果，这些指令符号⽤“<标签名字属性>”来表⽰。
②XHTMLXHTML是HTML向XML的过渡语⾔，删除了部分表现层的标签，标准要求提⾼，有严谨的结构，所有标签必须关闭。
如果是单独不成对的标签，在标签最后加⼀个"/"来关闭它。
③XMLXML（eXtensible Markup Language）即可扩展标记语⾔，最初设计的⽬的是弥补HTML的不⾜，以强⼤的扩展性满⾜⽹络信息发布的需要，后来逐渐⽤于⽹络数据的转换和描述。
XML是⼀种简单的数据存储语⾔，使⽤⼀系列简单的标记描述数据，⽽这些标记可以⽤⽅便的⽅式建⽴，虽然XML占⽤的空间⽐⼆进制数据要占⽤更多的空间，但XML极其简单易于掌握和使⽤。
(2)表现(Behaivor)表现标准语⾔主要包括CSS（Cascading Style Sheets）层叠式样式表，通过CSS样式表，W3C创建CSS标准的⽬的是以CSS取代HTML表格式布局、帧和其他表现的语⾔，通过CSS样式可以使页⾯的结构标签更具美感、⽹页外观更加美观。
基于Web标准的网页设计与制作2版习题解答
基于Web标准的网页设计与制作（第2版）习题解答习题11.1 作业题1. 对于采用虚拟主机方式的多个网站，域名和IP地址是（C）的关系。
A. 一对多B. 一对一C. 多对一D. 多对多2. 网页的本质是（ B ）文件。
A. 图像B. 纯文本C. 可执行程序D. 图像和文本的压缩3. 请解释/business/moe/115078.html的含义。
答：http是协议名；是域名（或称主机头），business和moe是网站目录中子目录名，115078.html是文件名。
4. 简述WWW和Internet的区别。
答：Internet可提供很多种服务，WWW只是Internet提供的一种信息浏览服务。
5. 简述URL的含义和作用。
URL是（Universal Resource Locator，统一资源定位器）的缩写，URL是Internet上任何资源的标准地址，每个网站上的每个网页（或资源文件）在Internet上都有一个唯一的URL地址，通过URL，浏览器就能定位到目标网页或资源文件。
6. 简述网站的本质和特点。
网站就是由许多网页及资源文件（如图片）组成的一个集合，通常把网站内的所有文件都放在一个文件夹中，所以网站从形式上看就是一个文件夹。
特点：①拥有众多的网页。
②拥有一个主题与统一的风格。
③有便捷的导航系统。
④分层的栏目组织。
1.2 上机实践题1. 使用DW新建一个名称叫“wgzx”的网站目录，该网站目录对应硬盘上的“D:\wgzx”文件夹。
2. 在电脑上安装Firefox浏览器，并分别使用IE浏览器和Firefox浏览器查看网页的源代码。
习题21. HTML中最大的标题元素是: （ C ）A．<head> B．<title> C．<h1> D．<h6>2. 下列哪种元素不能够相互嵌套使用。
（ B ）A．表格B．表单form C．列表D．div3. 下述元素中都是表格中的元素。
Dreamweaver8系列DIV+CSS教程网页标准布局实例教程(二)
div+css网页标准布局实例教程（二）五、布局页面——头部和导航有了上边的基础，下面的任务就是要利用html和css制作完成一个完整的网页了。
先从头部开始，第三小节时我们已经把整体框架给搭建好了，就像盖房子一样，整体结构已经出来了，下面就需要填砖分割空间了。
先分析下头部：分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。
另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把log o做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。
如果要在logo加上链接的话，那么就不能用背景图片的方法了。
<div id="header"><div id="logo">此处显示id "logo" 的内容</div><div id="search">此处显示id "search" 的内容</div></div>先在header里插入以上两块元素。
然后分别插入相应的内容，在logo里插入我们事先切割好的logo图片，在search里插入一个表单，一个文本框和一个按钮，插入后如下：<div id="header"><div id="logo"><img src="images/logo.gif" width="181" height="45" /></div><div id="search"><form id="form1" name="form1" method="post" action="">搜索产品<input type="text" name="textfield" id="textfield" /><input type="submit" name="button" id="button" value="查询" /></form></div></div>接下来定义css吧，在ps里测量，头部的高度是71px，logo距顶部18px，搜索产品距顶部30px，下面在css里把这些参数都给定义上，看显示的效果和效果图中的效果是不是一样呢？#logo { float:left; margin-top:18px;}#search { float:right; margin-top:30px;}这两项的位置已经差不多了。
腾讯网Web页面设计规范
二、个性皮肤
Hummer个性皮肤：
二、个性皮肤
QQPlay个性皮肤：
三、图标的统一使用
下载地址： /r_icons_ weather.htm
三、图标的统一使用
下载地址： /r_icons_expression.h tm
更多请参看：/index.htm
二、参考指南
01 页面修饰 • 简单的光影效果 • 质感的表现 • 透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意
一、网页宽度
最新显示器分辨率比例调查： 目前主流分辨率 1024X768，在此状态下，默认使用910的网页宽度，与腾讯网首页统一尺寸。
特殊情况 1 . 信息量或图片量过大的情况，可以考虑加宽承载，给出两个参考尺寸： 950（paipai，Qbar等) 990（QQshow，游戏产品等) 2. 搜索类信息页面，采用自适应屏幕方式（比如soso搜索产品)
一、网页宽度
不同浏览器，不同分辨率下网页第一屏最大可视区域： 有效可视区域（单位：Px）
一 二 600 432（+168） 452（+148） 417(+183) 461(+139) 1024 1003（+21） 1003（+21） 1007(+17) 1005(+19) 768 600（+168） 620（+148） 585(+183) 629(+139) 1280 1259（+21） 1259（+21） 1263(+17) 1261(+19) 三 1024 856（+168） 876（+148） 841(+183) 885(+139)
精通css高级web标准解决方案
引言随着 Web 技术的快速发展和不断演进，网页设计和开发变得越来越复杂。
CSS （层叠样式表）是前端开发中的重要组成部分，它决定了网页的外观和样式。
在本文中，我们将深入研究 CSS 的高级用法和 Web 标准解决方案，帮助读者精通 CSS 的使用。
目录1.CSS 布局：弹性盒子和网格布局2.响应式设计和媒体查询3.CSS 动画和过渡效果4.CSS 高级选择器和伪类5.利用 CSS 绘制图形和图标6.使用 CSS 模块化和预处理器7.Web 标准解决方案的最佳实践1. CSS 布局：弹性盒子和网格布局CSS 布局是网页设计的基础，传统的盒模型和浮动布局已经不再适用于复杂的页面结构。
使用弹性盒子（Flexbox）和网格布局（Grid Layout）可以更灵活地控制元素的排列和尺寸。
我们将深入研究这两种布局方式的语法和用法，并通过实例演示其灵活性和效果。
2. 响应式设计和媒体查询在移动设备的普及和多种屏幕尺寸的存在下，响应式设计已成为现代网页设计的必备技能。
通过使用媒体查询（Media Queries），我们可以根据设备的屏幕尺寸和特性，动态地调整元素的样式和布局。
本章将介绍响应式设计的原理和常用的媒体查询技巧，帮助读者制作适应不同设备的网页。
3. CSS 动画和过渡效果CSS 提供了丰富的动画和过渡效果的功能，通过使用关键帧动画（Keyframe Animation）、过渡（Transition）和变换（Transform），我们可以为网页添加生动和吸引人的效果。
本章将深入探讨这些特性的使用方法和参数调整，帮助读者制作出令人印象深刻的动画效果。
4. CSS 高级选择器和伪类CSS 的选择器是控制元素样式的重要手段，通过组合选择器和伪类，可以更精确地选择页面中的元素，并对其应用样式。
本章将介绍一些常见的高级选择器和伪类的使用方法，包括子选择器、相邻选择器、属性选择器和伪元素等，帮助读者在复杂的页面结构中准确地选择元素。
web界面设计规范
web界面设计规范Web界面设计规范是一系列规定和约束，旨在确保网站或应用程序的用户界面设计符合统一的标准，以提供用户友好的体验和一致性的外观。
以下是一些常见的Web界面设计规范：1. 界面布局规范：- 使用网格系统来实现页面布局，确保页面的各个元素对齐和排列整齐。
- 确定主要内容的位置，如导航栏、辅助功能和主要内容区域。
- 使用一致的字体、颜色和图标来传达信息层次结构和用户导航。
2. 导航规范：- 使用清晰的导航栏，以帮助用户快速找到所需的功能和信息。
- 提供可见的面包屑导航，以显示用户当前所在位置和可点击的路径。
- 使用显眼的按钮和链接，以便用户点击并进行导航。
3. 内容呈现规范：- 使用有吸引力的图像和多媒体内容来吸引用户的注意力。
- 调整字体大小和行距，以确保易读性和可访问性。
- 使用合适的排版和格式，以将信息呈现清晰、易理解。
4. 表单规范：- 使用标签来描述每个输入字段，并对输入字段进行合适的格式控制。
- 提供明确的错误消息和验证规则，帮助用户填写表单。
- 为用户提供方便的方式来提交表单，如按钮或提交链接。
5. 响应式设计规范：- 确保网站或应用程序在不同设备上具有一致的外观和功能。
- 使用可自适应的布局和元素，以适应不同的屏幕尺寸和方向。
- 优化页面加载速度，减少数据传输和图像大小。
6. 可访问性规范：- 使用无障碍标准和技术，以确保残障用户能够方便地访问和使用网站。
- 提供有意义的文本替代品和注释，以帮助使用辅助技术的用户理解图像和多媒体内容。
- 使用明确和简洁的语言，避免使用模糊、不明确的术语和词语。
7. 交互规范：- 使用明确和一致的图标和按钮，以指示用户可执行的操作。
- 提供实时反馈和状态更新，以使用户意识到其操作的结果。
- 使用动画和过渡效果来增强用户体验，但不要过度使用，以免分散用户注意力。
以上是一些常见的Web界面设计规范，可以根据具体的项目需求和目标来制定和调整。
设计规范的核心目标是提供用户友好的体验和一致性的外观，为用户提供无障碍的操作和导航。
基于Web标准实现四种基本页面布局
它 的 可 扩 展 性 和灵 活 性 将 适 应 未 来 网 络 应 用 更 多 的 需
★基 金 项 目： 内蒙 古 自治 区科 技 计 划 项 目（ ． ０ １ ０ ） Ｎｏ ０ ８ ５ ４ ２
收 稿 日期 ： ０ ２ ２ ４ ２ １ —０ —２ 修 稿 日期 ：０ ２ ０ —０ ２１— ３ ２
下 都 能 被 正 常 浏 览 和 使 用
由结构 、 表现 和行 为等三部分组 成 结构的标准主要包
括 ＨＴ ＭＬ、 ＸＨＴ ＭＬ和 ＸＭＬ： 现 的 标 准 主要 包 括 Ｃ Ｓ 表 Ｓ：
行 为 的标 准 包 括 Ｗ３ Ｏ 和 Ｅ ＭＡ ｃｉｔ ＣＤ Ｍ Ｃ Ｓｒ ｔ ｐｑ
ＨＴ ＭＬ（ 文 本 标 记 语 言 ） 构 成 网 页 文 档 的 主 要 超 是
Ｃ Ｓ 层 叠样 式 表 ） 一种 用 来 为结 构 化 文 档 （ Ｔ Ｓ（ 是 Ｈ ＭＬ
或 Ｘ Ｌ 添加样式 的计 算机语 言 通过使 用 Ｃ Ｓ样 式 Ｍ ） Ｓ
设 置 页 面 的格 式 ． 以 扩 展 Ｈ ＭＬ的 功 能 ． 得 用 户 可 可 Ｔ 使 以重 新 定 义 Ｈ Ｍ Ｔ Ｌ元 素 的显 示 方 式 Ｄ Ｍ（ 档 对 象 模 型 ） 以 面 向 对 象 方 式 描 述 的文 Ｏ 文 是 档模 型 ，Ｏ 定义 了表示 和修 改文 档所 需 的对象 、 Ｄ Ｍ 这 些 对 象 的 行 为 和 属 性 以 及 这 些 对 象 之 间 的 关 系 Ｅ ． Ｃ ＭＡ ｃｉｔ Ｅ Ｍ 制 定 的标 准 脚 本 语 言 ．往 往 被 称 为 Ｓｒ 是 Ｃ Ａ ｐ
ＤＩ Ｃ Ｓ布局 技 术 实 现 四 种 基 本 页 面布 局 的 过 程 ， Ｖ＋ Ｓ 同时 给 出相 关 方 法 和 步 骤 。
web ui标准
web ui标准一、概述Web UI标准是指一套规范和标准，用于设计、开发、测试和评估Web用户界面（UI）的元素和行为。
它为Web开发者提供了一套统一的、可重复使用的、高效的界面设计模式，旨在提高用户体验、降低维护成本、提高网站性能和安全性。
二、设计原则1. 易用性：UI设计应该以用户需求为导向，确保界面元素易于理解、操作简单、反馈清晰。
2. 直观性：界面元素应清晰、简洁，避免使用过于复杂的设计和视觉效果，使用户能够快速理解界面功能。
3. 响应性：UI应能够适应不同尺寸的设备，并根据用户行为进行动态调整，以提高用户体验。
4. 可访问性：确保UI对所有用户（包括视障、听觉障碍等不同能力水平的用户）都是可访问的。
5. 用户体验：始终关注用户需求，关注界面设计的细节，以提高用户体验。
三、元素分类1. 文本元素：包括标题、段落、链接、文本输入框等，用于传达信息和与用户进行交互。
2. 图像元素：用于增强视觉效果、展示复杂信息或作为导航标识等。
3. 颜色元素：包括背景色、边框色、文字颜色等，用于强调重要信息、创造情感联系或影响用户情绪。
4. 布局元素：包括页面结构、表单布局、响应式布局等，用于组织界面元素和提供良好的用户体验。
5. 交互元素：包括按钮、下拉菜单、动画效果等，用于触发操作、提供反馈和增强用户体验。
四、标准规范1. 尺寸规范：制定不同设备（如电脑、平板、手机）的UI元素尺寸标准，以确保界面在不同设备上的良好显示效果。
2. 字体规范：指定可重复使用的字体类型、大小和样式，以提高可读性和用户体验。
3. 颜色规范：制定颜色选择标准，包括背景色、文本颜色、边框颜色等，以增强视觉效果和传达信息。
4. 图标规范：使用统一的标准图标，以提高品牌一致性和用户体验。
5. 交互规范：制定按钮、下拉菜单等交互元素的点击反馈、响应时间等标准，以提高用户体验和可用性。
6. 响应式设计规范：制定适应不同设备的界面布局标准，以确保界面在各种设备上的良好显示效果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
设置字体样式 字体样式缩写
font-style : normal [正常] italic [斜体 ] oblique [倾斜字体] font:样式 变体 粗细 字号/行高 字体 font:italic small-caps bold 24px/3em „隶书‟; font:24px/2em „宋体‟; （其它的可以省略，这三个不能省）
－高级网页设计人才培训专家!
什么是web标准
一、什么是web标准? web标准不是某一个标准，而是由W3C和其他标准化 组织制定的一系列标准的集合。 包含我们所熟悉的 HTML、XTHML、Javascript、以及CSS等。 二、Web标准的目的? 在于创建一个统一的用于Web表现层的技术标准，以 便于通过不同浏览器或终端设备向最终户展示信息内 容。
CSS 颜色单位
颜色单位 十六进制 颜色名称 三原色单位 说明 如： color:#ff0000 如： color:red
如： rgb(255,0,0)
一般最常用的是十六进制，三原色单位的原理【红（ r ） , 绿 （ g ） , 蓝 (b) 】混合而成。每个值域在 0 － 255 之间
－高级网页设计人才培训专家!
html,xhtml 1.0的区别
html 规范化/严格化 xhtml1.0
XHTML 标签必须被正确地嵌套。
XHTML 标签必须被关闭。
标签名必须用小写字母。 属性名必小写,必有值,值必加引号
－高级网页设计人才培训专家!
－高级网页设计人才培训专家!
CSS 长度单位
相对长度单位 em px 绝对长度单位 in cm mm pt 说明 相对于当前对象内文本的字体尺寸 像素（Pixel）推荐使用 说明---基本上用不到 英寸 厘米 毫米
点（Point）
－高级网页设计人才培训专家!
－高级网页设计人才培训专家!
为页面添加正确的DOCTYPE
DOCTYPE是document type(文档类型)的简写。 主要用来说明你用的XHTML或者HTML是什么 版本。浏览器根据你DOCTYPE定义的DTD(文 档类型定义)来解释页面代码，并展现出来 。所 以，要建立符合标准的网页，DOCTYPE声明是 必不可少的关键组成部分
－高级网页设计人才培训专家!
－高级网页设计人才培训专家!
CSS简介
一、概念：CSS是Cascading Style Sheets （层叠样式表）的简称。 更多的人把它称作样式表。顾名思义，它是一 种设计网页样式的工具。借助CSS的强大功能， 网页将在你丰富的想象力下千变万化。实际上 CSS的代码都是由一些最基本的语句构成的。 CSS可以做为 html，xhtml，xml的样式控制语 言
－高级网页设计人才培训专家!
采用标准的好处
1、提高页面浏览速度。使用CSS方法，比传统的 web设计方法至少节约50%以上的文件尺寸。 2、缩短改版时间，将表现（样式/外观）与内容（信 息/数据）相分离。只要简单的修改几个CSS文件就 可以重新设计一个有成千上万页面的站点。 3、降低网站流量的费用。带宽要求降低（代码更简 洁），成本降低。更广泛的设备所访问。包括屏幕阅读机 、手持设备、搜索机器人、打印机、电冰箱等等。
－高级网页设计人才培训专家!
CSS在网页的中应用方式
三、网页中加CSS的方式有四种： 1、内联式样式表：直接写在现有的标记中，如： <p style=“color:red”>这里文字是红色的</p> 2、嵌入式样式表：使用“<style></style>”标签嵌入 到HTML文件的头部中<head>标记内，如： <style type="text/css"> <!- body { background : white ; color : black ; } --> </style> <!-- -->用于当浏览器不支持样式表时，不会将样式表 内容显示出来
－高级网页设计人才培训专家!
二、CSS语法结构 选择符 { 属性: 值 } 例如：body{font-size:12px;} 参数说明： 1、选择符（Selector）：指明这组样式所要针对的对象。 可以是一个XHTML标签，如body,h1；也可以是定义了特 定的id或class的标签，如#main选择符表示选择<div id="main">,即一个被指定了main为id的对象。 2、属性（proprety）：选择符的样式属性，如颜色、大小、 定位、浮动方式等。 3、值（value）：是指属性的值。 4、同时可以为一个选择符定义多个属性，每个属性之间用 分号“;”分隔
五． CSS常用属性, CSS选择器基本类型
六． 从html迈向xhtml
－高级网页设计人才培训专家!
从html迈向xhtml
1993标记语 言第一版 1995 html2.0 1996 html3.2 w3c推荐标准
2001 xhtml1.1 w3c推荐标准
2000 xhtml1.0 w3c推荐标准
1999 html4.0.1 w3c推荐标准
2008 html5
蒂姆· 伯纳斯一李 万维网之父 html设计者 w3c 创始人
北京传智播客教育
－高级网页设计人才培训专家!
什么是XHTML
一、什么是XHTML XHTML是The Extensible HyperText Markup Language的缩写，XHTML的中 文意思是可扩展标识语言。 XHTML是HTML向XML过渡的一个桥梁， XHTML是基于HTML的，这是更严密、代 码更整洁的HTML版本。
－高级网页设计人才培训专家!
CSS在网页的中应用方式
3、外部链接式”样式表”：将样式表写在一个独立 的.css文件中，然后在页面head区<head>标记内用 <link>标签调用它，主要用于实现表现与结构分离如： <link href=“main.css" rel="stylesheet" type="text/css" /> 4、导入式”样式表”：导入式样式表与链接式样式表的 功能基本相同，只是语法和动作方式上略有不同，同 样也将导入样式代码写在<head>标记内。 语法： <style type="text/css"> @import url("basic.css"); </style>
－高级网页设计人才培训专家!
XHTML 1.0 提供了三种DTD声明
XHTML 1.0 提供了三种DTD声明可供选择： (1)过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01 的标识(但是要符合xhtml的写法)。完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (2)严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例 如<br>。完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"> (3)框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包 含有框架，需要采用这种DTD。完整代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "/TR/xhtml1/DTD/xhtml1-frameset.dtd">
－高级网页设计人才培训专家!
CSS控制字体
功能 设置字号 设置字体 设置行高 设置字体的粗细 设置字体变体 语法 font-size:12px font-family: Arial,‟宋体‟; line-height:150% = line-height:1.5em = line-height:1.5 font-weight : normal [正常] bold [粗体] font-variant:normal[正常的字体 ] small-caps小型的大写字母字体
－高级网页设计人才培训专家!
理解表现和结构分离
web标准的好处之一是“理解表现和内容分离 ”----那这到底是什么意思呢？ 首先我们必须先明白一些基本的概念： 内容、结构、表现和行为。
1、内容：就是制作者放在页面内真正想要让访问者浏览的信息
2、结构：使内容更加具有逻辑性和易用性[类似于：1级2级标题、 正文、列表等把它们称为结构] 3、表现：用于修饰内容的外观的样式的东西称为表现。 4、行为：对内容的交互及操作效果，如通过javascript判断表单 提交等
什么是W3C？
我们平时说的W3C，其实是World Wide Web Consortium 的缩写，中文是 W3C组织或者万维网联 盟，W3C这个组织是做什么的呢？简单说，就是出 网页标准的。那么由W3C组织推出的标准就被称为 W3C标准或Web标准
北京传智播客教育