下载文档原格式
HTML5CSS3网站设计基础教程_教学指导大纲一、引言A. 简介1. 概述HTML5和CSS32. 网站设计的重要性和必要性B. 目标读者1. 网站设计初学者2. 对HTML和CSS有一定了解的读者C. 教学目标1. 理解HTML5和CSS3的基本概念和语法2. 掌握基本的网站设计技巧和方法3. 能够设计简单但具有吸引力的网页布局4. 运用HTML5和CSS3创建响应式网站二、HTML5基础A. HTML5简介1. HTML5的发展历程2. HTML5的新特性和改进之处B. HTML5的基本结构1. DOCTYPE声明2. HTML文档的基本结构C. HTML5常用标签1. 文本标签2. 超链接标签3. 图像标签4. 表格标签5. 表单标签D. HTML5多媒体1. 音频和视频标签的使用2. 使用Canvas绘制图形3. 嵌入地图和地理定位E. HTML5表单和表单验证1. 表单元素2. 表单验证的基本原理和方法三、CSS3基础A. CSS3简介1. CSS的发展历程2. CSS3的新特性和改进之处B. CSS选择器和样式规则1. ID选择器和类选择器2. 标签选择器和属性选择器3. 组合选择器和伪类选择器C. CSS盒模型1. 盒子的尺寸和边框2. 盒子的内边距和外边距D. CSS布局和定位1. 流式布局2. 弹性盒子布局3. 定位布局E. CSS3过渡和动画1. 过渡效果的基本原理和用法2. 动画效果的实现方法四、响应式网站设计A. 响应式网站设计的概念1. 什么是响应式网站设计2. 为什么需要响应式网站设计B. 响应式网站设计的原则和方法1. 弹性网格布局2. 媒体查询的应用3. 图像和媒体资源的处理C. 响应式网站设计的实践1. 设计响应式布局2. 适配不同设备和屏幕尺寸3. 进行兼容性测试和优化五、总结A. 知识回顾1. HTML5的基本概念和语法2. CSS3的样式规则和布局B. 学习建议1. 实践和练习的重要性2. 深入学习和进阶的方向C. 结束语1. 网站设计的未来发展趋势2. 鼓励读者继续学习和探索六、附录A. HTML5和CSS3的常用资源和工具推荐B. 参考文献和学习资料以上为《HTML5CSS3网站设计基础教程_教学指导大纲》的详细内容概述，本教程将通过逐步引导读者学习HTML5和CSS3的基础知识，同时指导读者如何运用所学知识进行网站设计。
基于html5＋css3网页设计翻转教学的研究与实践基于HTML5+CSS3网页设计翻转教学的研究与实践一、引言二、翻转教学的理论基础翻转教学是一种将课堂学习和课外学习进行颠倒的教学模式。
传统的教学模式是教师在课堂上讲解知识点，学生在课外完成作业和习题。
而翻转教学则是让学生在课外通过观看视频、阅读资料等方式学习知识点，然后在课堂上进行互动讨论、实践操作等形式来加深对知识的理解和应用。
翻转教学的理论基础主要包括认知理论和建构主义理论。
认知理论认为学习是一个主动的、建构的过程，学生通过自主学习和积极参与来构建知识结构。
而建构主义理论强调学习者应该在真实的问题和情境中主动地发现、探索和构建知识，而不是 passively接受老师的知识。
翻转教学正是基于这两种理论的结合，促进学生的主动学习和知识的建构。
HTML5和CSS3作为Web开发的技术，能够提供丰富的视觉效果和交互体验。
在翻转教学中，利用HTML5和CSS3设计网页可以为学生提供更直观、生动的学习体验，提高学习的吸引力和趣味性。
1. 多媒体教学资源HTML5提供了丰富的多媒体支持，如音频、视频、动画等，可以为教学资源的呈现提供更多元的可能。
通过在网页上嵌入视频、音频等多媒体内容，可以为学生呈现更生动、直观的学习材料，提高学习效果。
2. 交互式学习CSS3提供了丰富的样式和动画效果，可以为网页设计提供更多的交互性。
利用CSS3的动画效果和过渡效果，可以设计出更具吸引力的交互式学习界面，增加学生的参与度和学习体验。
3. 响应式设计HTML5和CSS3还支持响应式设计，可以根据不同设备和屏幕大小自动调整布局和样式，使得网页在各种终端上都能够得到良好的呈现。
这对于学生来说，可以更加方便地在不同设备上进行学习，提高学习的便捷性和灵活性。
1. 设计教学内容首先需要设计好教学内容和教学资源，包括视频、音频、图片、文字等多媒体材料。
这些材料可以包括课程讲解、案例分析、实例演示等内容，以便学生在课外进行学习。
《HTML5+CSS3网页设计与制作》课程教学大纲（课程英文名称）课程编号：学分：5学分学时：74学时（其中：讲课学时：50学时上机学时：24学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3网页设计与制作》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标签、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
该课程属于“1+X证书制度”Web前端的初级课程，通过本课程，能够为学习后面的前端知识夯实基础。
二、课程设计理念与思路课程设计理念：课程的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以技能培养为目标，以案例（项目）任务实现为载体、理论学习与实践操作相结合”。
三、教学条件要求开发工具：Dreamweaver CS6或其他代码编辑工具四、课程的主要内容及基本要求第一章HTML5+CSS3网页设计概述学习单元HTML5+CSS3网页设计概述学时2学时学习目标◆了解网页概念和组成。
◆理解HTML、CSS和JavaScript的功能和作用。
◆熟悉Dreamweaver工具的基本操作。
学习内容知识点了解掌握重点难点认识网页√网页名词解释√Web标准√HTML简介√CSS简介√JavaScript简介√网页的展示平台—浏览器√认识Dreamweaver界面√Dreamweaver初始化设置√Dreamweaver基本操作√【阶段案例—创建第一个网页】√第二章初识HTML5学习单元初识HTML5 学时6学时学习目标◆了解HTML和HTML5的基本结构，能够区分两者的结构差异。
第6章浮动与定位《HTML5+CSS3网站设计基础教程》学习目地/Target理解元素地浮动,能够为元素设置浮动样式。
熟悉清除浮动地方法,可以使用不同方法清除浮动。
掌握元素地定位,能够为元素设置常见地定位模式。
章节概述/Summary默认情况下,网页地元素会按照从上到下或从左到右地顺序一一罗列,如果按照这种默认地方式进行排版,网页将会单调,混乱。
为了使网页地排版更加丰富,合理,在CSS可以对元素设置浮动与定位样式。
本章将对元素地浮动与定位进行详细讲解。
目录/Contents01元素地浮动02元素地定位03元素地类型与转换04阶段案例—制作网页焦点图01元素地浮动初学者在设计一个页面时,通常会按照默认地排版方式,将页面地元素从上到下一一罗列。
这样地布局看起来呆板,不美观,那么,如何对页面重新排版,使页面变得整齐,有序呢？这就需要为元素设置浮动。
本节将对元素地浮动进行详细讲解。
掌握元素地浮动属性float地用法,能够设置元素地浮动。
学习目地1.元素地浮动属性float1.元素地浮动属性float究竟是什么是浮动？应用排列图文排列论坛分享说到浮动,其实大家并不陌生1.元素地浮动属性float浮动属性作为CSS地重要属性,在网页布局至关重要。
在CSS,通过float属性来定义浮动,所谓元素地浮动是指设置了浮动属性地元素会脱离标准文档流地控制,移动到其父元素指定位置地过程。
选择器{float:属性值;}属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值）掌握清除浮动地方法,能够为元素清除浮动。
学习目地2.清除浮动2.清除浮动2.清除浮动由于浮动元素不再占用原文档流地位置,所以会对页面其它元素地排版产生影响,如果要避免这种影响,就需要对元素清除浮动。
2.清除浮动在CSS,使用clear属性清除浮动。
选择器{clear:属性值;}属性值描述left不允许左侧有浮动元素（清除左侧浮动地影响）right不允许右侧有浮动元素（清除右侧浮动地影响）both同时清除左右两侧浮动地影响2.清除浮动运用clear属性只能清除元素左右两侧浮动地影响。
《HTML5+CSS3网页设计与制作》课程教学大纲（课程英文名称）课程编号：学分：5学分学时：74学时（其中：讲课学时：50学时上机学时：24学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3网页设计与制作》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标签、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
该课程属于“1+X证书制度”Web前端的初级课程，通过本课程，能够为学习后面的前端知识夯实基础。
二、课程设计理念与思路课程设计理念：课程的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以技能培养为目标，以案例（项目）任务实现为载体、理论学习与实践操作相结合”。
三、教学条件要求开发工具：Dreamweaver CS6或其他代码编辑工具四、课程的主要内容及基本要求第一章HTML5+CSS3网页设计概述学习单元HTML5+CSS3网页设计概述学时2学时学习目标◆了解网页概念和组成。
◆理解HTML、CSS和JavaScript的功能和作用。
◆熟悉Dreamweaver工具的基本操作。
学习内容知识点了解掌握重点难点认识网页√网页名词解释√Web标准√HTML简介√CSS简介√JavaScript简介√网页的展示平台—浏览器√认识Dreamweaver界面√Dreamweaver初始化设置√Dreamweaver基本操作√【阶段案例—创建第一个网页】√第二章初识HTML5学习单元初识HTML5 学时6学时学习目标◆了解HTML和HTML5的基本结构，能够区分两者的结构差异。
第2章HTML5页面元素及属性《HTML5+CSS3网站设计基础教程》（第2版）学习目地/Target掌握结构元素地使用,可以使页面分区更明确理解分组元素地使用,能够建立简单地标题组。
掌握页面交互元素地使用,能够实现简单地交互效果。
理解文本层次语义元素,能够在页面突出所标记地文本内容。
掌握全局属性地应用,能够使页面元素实现相应地操作。
章节概述/SummaryHTML5引入了很多新地标记元素与属性,这是HTML5地一大亮点,这些新增元素使文档结构更加清晰明确,属性则使标记地功能更加强大,掌握这些元素与属性是正确使用HTML5构建网页地基础。
本章将HTML5地新增元素分为结构元素,分组元素,页面交互元素与文本层次语义元素,除了介绍这些元素外,还会介绍HTML5常用地几种标准属性。
/Contents01 02 03列表元素结构元素分组元素04页面交互元素/Contents05 06文本层次语义元素全局属性07阶段案例—制作电影影评网01列表元素章节概述HTML5引入了很多新地标记元素与属性,这是HTML5地一大亮点,这些新增元素使文档结构更加清晰明确,属性则使标记地功能更加强大,掌握这些元素与属性是正确使用HTML5构建网页地基础。
本章将HTML5地新增元素分为结构元素,分组元素,页面交互元素与文本层次语义元素,除了介绍这些元素外,还会介绍HTML5常用地几种标准属性。
为了使网页更易读,经常将网页信息以列表地形式呈现,例如,淘宝商城首页地商品服务分类,排列有序,条理清晰,呈现为列表地形式。
为了满足网页排版地需求,HTML语言提供了3种常用地列表元素,分别为ul元素（无序列表）,ol元素（有序列表）与dl元素（定义列表）,本节将对这3种元素进行详细讲解。
1.ul元素l 了解无序列表地概念,能够说出无序列表地特点。
l 掌握无序列表地基本语法格式,能够在网页定义无序列表。
学习目地1.ul元素无序列表是网页最常用地列表,之所以称为"无序列表",是因为其各个列表项之间没有顺序级别之分,通常是并列地。
《HTML5+CSS3网页设计基础教程》课程标准第一部分、课程定位一、课程性质本课程是计算机应用专业一门专业必修课程二、课程性质与目标《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容。
通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
三、前导、后续课程（1）前导课程计算机应用基础（2）后续课程JavaScript编程、Vue.js、微信小程序开发第二部分、课程设计一、基本理念高职教育的集中实践教学环节需明确必要的理论知识的深化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
二、课程设计思路（1）以职业岗位和后续课程需求确定课程目标首先组建专业必修课、专业教师、企业专家三方人员组成的课程开发团队，进行课程服务专业的人才培养目标分析，确定计算机应用专业的岗位面向；进而确定本课程所织成的具体核心课程有哪些？同时结合行业对岗位任职的具体标准，确定课程的具体目标。
（2）依据职业标准，通过对所服务的后续课程和必修课程本身分析，以专业基础课与学习领域课程聚合点构建教学内容通过对职业标准进行剖析和本门课程所服务的后续课程本身进行分析，得出后续专业课程负载点与专业基础课程支撑点存在聚合，将这些聚合点作为教学内容选择、实训任务确定的依据。
（3）根据教学内容需求和学生学情的分析设计教学方法和手段根据教学内容需求，以及根据学生形象思维强、逻辑思维相对弱的现状，设计案例教学法、引导文教法等，应用项目应用设计等教学手段服务抽象的理论教学。
（4）以优质的教学资源和优秀的教学团队，为课程实施和后续课程服务提供保障。
HTML5和CSS3作为现代Web开发的必备技术，已经成为Web设计师和开发人员的首选。
本文将介绍HTML5和CSS3的设计作业，包括设计作业的基本概念、开发工具、设计原则和实战案例等方面。
一、设计作业的基本概念设计作业是Web设计师和开发人员的基本功之一。
它是指利用HTML5和CSS3技术进行网页设计和页面布局的工作。
设计作业包括网页结构设计、样式设计、交互设计等内容，是Web开发过程中不可或缺的一部分。
设计作业的基本概念涵盖了HTML5和CSS3的使用、页面布局和设计原则等内容。
在进行设计作业时，设计师需要根据网页的需求和用户体验的要求，合理地使用HTML5和CSS3技术，设计出符合规范且具有美感的网页界面。
二、开发工具在进行HTML5和CSS3设计作业时，开发工具起着至关重要的作用。
常用的开发工具包括Sublime Text、Visual Studio Code、Dreamweaver等。
这些工具提供了丰富的代码编辑功能，支持HTML5和CSS3的语法高亮、智能提示、代码折叠等功能，极大地提高了设计作业的效率和质量。
除了基本的开发工具外，网页设计师和开发人员还可以选择一些常用的框架和库，如Bootstrap、Vue.js等，以加速设计作业的开发过程。
这些工具提供了丰富的组件和模板，同时还能够提供响应式设计和移动端适配的解决方案，为设计作业的开发提供了很大的便利。
三、设计原则设计原则是进行HTML5和CSS3设计作业时需要遵循的准则和标准。
在进行设计作业时，设计师需要考虑页面的结构、布局、色彩、字体和交互等方面，以确保网页的视觉效果和用户体验达到最佳状态。
常见的设计原则包括层次感、对比度、对齐、重复和对称等。
设计师需要根据页面的需求和设计的目的，合理地运用这些设计原则，设计出符合规范且美观大方的网页界面。
四、实战案例以下是一个使用HTML5和CSS3进行设计作业的实战案例：案例名称：响应式网页设计案例描述：设计一个响应式的网页，适配不同设备，如PC、平板和手机等。
XXX职业技术学院202X级《WEB开发基础》课程标准课程代码XXXXXX课程性质专业平台课课程学分4总学时64适用专业软件技术专业制（修）订日期202X-X-XX执笔审核一、课程定位本课程是软件技术专业群的平台课，是培养学生B/S架构项目开发的基础必修课程。
本课程主要培养学生的网站设计和开发能力，通过“教、学、做”一体化教学，使学生能熟练掌握PC端网页、WebApp自适应网站、响应式网站的开发规范和制作技巧，培养学生的创新能力、审美能力、自学能力、沟通能力、解决问题能力、自我管理能力、团队协作能力，为后续课程及其他程序设计课程的学习和应用打下基础。
先修课程：《计算机应用基础》《程序设计基础》。
后续课程：《Java Web应用开发》《Vue前端应用开发》《微信平台应用开发》等。
二、课程目标（-）总体目标通过本课程的学习，学生能了解WWW、HTTP、HTML5、CSS3的定义、概念和作用；了解服务器、客户端、浏览器的概念和作用，熟悉web项目规划和需求分析的基本方法，具备web网页设计、制作及站点管理的基本知识和基本技能，学生能够独立制作中小型的网站。
熟练掌握HTML5语言中的各种文本格式、字符格式、段落设置、列表、标记的使用方法；熟练CSS3样式表制作方法和技巧；熟悉PC端网站、WebApp自适应网站、响应式网站的排版技巧，根据前端设计师的任职要求，参照计算机程序员职业标准和网站开发和网页制作的职业资格标准，改革课程体系和教学内容。
课程内容突出职业能力培养，体现基于职业岗位分析和能力为导向的课程设计理念，以真实工作任务或社会产品为载体组织教学内容，在真实工作情境中采用新的教学方法和手段进行实施。
（二）具体目标课程教学目标具体体现为专业知识、专业技能和专业素质三方面的目标。
（1）专业知识目标①掌握HTML5与CSS3基础知识及最新技术。
②熟悉企业网站制作具体流程。
③掌握不同类型静态网站的开发技巧。
网页设计与制作HTML5+CSS3+JavaScript教学设计一、教学目标和要求1.理解HTML5、CSS3、JavaScript的概念及各自的作用；2.能够使用HTML5、CSS3、JavaScript分别搭建静态网页、设置样式、实现交互效果；3.熟悉各种网页元素及其应用；4.具备网页设计与制作的基础能力。
二、教学内容和方法1. HTML5的基本语法和标签•介绍HTML5语言的基础知识：HTML5文档结构、标签、属性、元素等；•演示如何搭建静态网页，如头部、导航栏、总结等；•学习HTML5表单的相关标签及基本应用。
2. CSS3的样式设置•介绍CSS3概念、语法、常用样式属性等；•讲解样式的继承、层叠等基本原理；•展示如何使用CSS3设置页面布局、字体、颜色、背景等等。
3. JavaScript的基础知识和DOM操作•介绍JavaScript基础语法，语言特点，数据类型，运算符等；•讲解DOM对象的基本概念，元素节点、属性节点等；•展示如何使用JavaScript实现交互效果，如点击按钮弹窗、页面滚动、表单验证等。
4. 综合实战•带领学生实现一个完整的网页设计和制作，包括HTML5、CSS3、JavaScript三项内容；•在实战过程中，注意掌握网页的整体设计思路、完整流程和基本原则。
5. 授课方式和评估标准•采用翻转课堂的授课方式，将理论应用与实践结合，让学生在实战中进行学习；•作业形式以小组作业为主，要求学生在规定时间内完成一个网页设计和制作；•评估标准包括实战成果、作业质量、思考深度等方面综合考虑。
三、教学资源和参考书籍1. 教学资源•讲解PPT、教学视频等多样化教材；•具体数据、素材等各类教学资源。
2. 参考书籍•《HTML5+CSS3基础教程》；•《JavaScript高级程序设计》；•《Web前端开发必备：深入浅出移动Web开发》。
四、教学效果与总结•教学效果以学生成绩和实际应用能力为主要标准；•总结探讨教学中存在的问题，进一步探究网页设计与制作的深层次思路和实现方法，提高教学成果。
网页设计规范参考111总论 (2)一、目录结构规范 (2)1. 网站目录划分 (2)2. 多级目录 (2)3. 目录、文件的命名规范 (3)二、文件命名原则 (3)1. 命名原则的指导思想 (3)2. 路径/文件名设定 (3)3. 各路径下的开始文件 (3)4. html 文件的命名原则 (4)5. 图片的命名原则 (4)三、一般原则 (5)1. 表格问题 (5)2. 首行缩进 (5)3. 图片 (5)4. 字号 (6)5. 中英文混排时 (6)6. 行距 (6)7. 网站中的路径........................................................................................................ 错误！未定义书签。
四、代码编写规范 (6)1. 首页head区代码规范 (6)2. 页面内容部分代码规范 (7)3. CSS 文件的格式样例代码 (8)4. CSS的命名规范及部分简写说明 (9)5. CSS和JS尽量采取外部调用 (10)总论参考网上的一些文章和部分门户网站规范，结合用户浏览习惯以及实际策划、设计、使用中的经验，制订了《网站设计规范参考》，本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。
但是，请大家千万不要随意更改规范。
如果有任何问题，请及时与我联系，我会及时更改本规范的相关代码样例和文档。
一、目录结构规范1. 网站目录划分在网站根目录中开设images 、js 、css、temp子目录☆images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等；☆css 子目录中放css文件，如果站点模板多尽量分成多个css文件调用；☆js 子目录中一般放javascript文件；☆temp 子目录放客户提供的各种文字图片等等原始资料。
temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。
☆广告、交换链接、banner等图片保存到images下adv目录2. 多级目录在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。
3. 目录、文件的命名规范除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，尽量避免用拼音命名。
二、文件命名原则1. 命名原则的指导思想命名原则的指导思想是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。
2. 路径/文件名设定路径/文件名称需与栏目菜单名称具有相关性。
一律采用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文翻译为优先，尽量避免使用拼音作为目录名称3. 各路径下的开始文件各路径下的开始文件，命名为index.* 静态文件为index.html，动态文件为index.asp,index.aspx,index.php,index.jsp4. html 文件的命名原则下面以“新闻”（包含“国内新闻”和“国际新闻”）这个栏目来说明html 文件的命名原则：☆在根目录下开设news目录☆第一条缺省新闻取名index.htm☆所有属于“国内新闻”的新闻依次取名为：china_1.htm, china_2.htm, …☆所有属于“国际新闻”的新闻依次取名为：internation_1.htm, internation _2.htm, …☆如果文件的数量是两位数，请将前九个文件命名为：china_01.htm, china_02.htm 以保证所有的文件能够在文件夹中正确排序。
☆需定期更新的页面文件或文本采用：名称缩写＋(年份)＋月份＋日期＋序号，如：news081508.*5. 图片的命名原则☆名称分为头尾两两部分，用下划线隔开。
☆头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。
☆一般来说: 放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner标志性的图片我们取名为：logo在页面上位置不固定并且带有链接的小图片我们取名为button在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu装饰用的照片我们取名：pic不带链接表示标题的图片我们取名：title依照此原则类推。
☆尾部分用来表示图片的具体含义。
☆样例如下：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg三、一般原则1. 表格问题在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免<colspan> <rowspan> 两个标记。
一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。
如果必须这样做，请使用<tbody>标记，以便能够使这个大表格分块显示。
2. 首行缩进排版中我们经常会遇到需要进行首行缩进的处理，不要使用空格或者全角空格来达到效果，规范的做法是在样式表中定义p { text-indent: 2em; } 然后给每一段加上<p> 标记，注意，请不要省略</p> 结束标记。
3. 图片采用gif,jpg格式，每幅图片要有本图片的说明文字(alt=””)，这样如果图片不能正常显示，也可知道图片处代表什么意思。
原则上，禁止用<img width=? height=?> 来人为干预图片显示的尺寸，而且建议<img> 标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给<img>附上width 和height 属性。
4. 字号所有的字号都应该用样式表来实现，尽量不要在页面中出现<font size=?> 标记。
5. 中英文混排时中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。
6. 行距建议用百分比来定义，常用的两个行距的值是line-height:140%到180%之间。
四、代码编写规范我们应该有一个代码整体风格一致的概念，不同时期编写的代码风格应保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致以便随时查找、修改。
1. 首页head区代码规范head区是指首页HTML代码的<head>和</head>之间的内容。
head区必须加入的标识1）公司版权注释<!--- The site is designed by yourcompany,Inc 05/2007 --->2）网页显示字符集例如：简体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">繁体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">英语：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">3）网站简介<META NAME="DESCRIPTION" CONTENT="网站的简介">4）搜索关键字<META NAME="keywords" CONTENT="关键字1,关键字2...">5）网页的css规范<LINK href="commom/style.css" rel="stylesheet" type="text/css">网页标题<title>网页标题</title>收藏夹图标<link rel = "Shortcut Icon" href="favicon.ico">2. 页面内容部分代码规范在写<table> 互相嵌套时，对于单独的一个<table>来说，<table><tr>对齐，<td> 缩进两个半角空格，<td> 中如果还有嵌套的表格，<table>也缩进两个半角空格，如果<td>中没有任何嵌套的表格，</td> 结束标记应该与<td> 处于同一行，不要换行，如我们注意在源代码中不应有这样的代码：<td><img src=”../images/sample.gif”></td>而应该是这样的：<td><img src=”../images/sample.gif”></td>这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写：<td><img src=”../images/sample.gif”> </td>属于同一个级别的<table> 一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于12px 的单元格应该在<td> 和</td> 之间写一个空格。
