HTML、CSS、JavaScript实例教程第2章
《网页设计与开发》教学大纲
《网页设计与开发》课程教学大纲《网页设计与开发》教学大纲一、课程简介网页设计课程是高等院校计算机、信息管理、电子商务和其他相关专业的一门重要的基础课程，也是一门实践性和技能性要求很强的学科。
课程涵盖HTML基本元素、CSS样式表和JavaScript脚本编程语言、页面布局和整站建设三大内容，全面介绍了WEB站点设计与开发的基本操作技术和应用技巧。
本课程采用课堂与实践相结合讲授、案例向导的教学方式。
二、教学目标通过本课程的学习，使学生对网页设计的基本原则、栏目和目录结构定义、主流页面布局方法、导航制作、图文排版、色彩理论等进行详细了解。
掌握网站规划、设计、制作、管理、发布的相关技术及网页制作的操作技能；并熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、框架标记及属性设计出框架网页、表单网页、多媒体动态网页；掌握使用css技术进行网页布局的基本方法。
掌握JavaScript脚本语言的基本语法知识，HTML中JavaScript程序的嵌入方法，对象的概念及使用JavaScript来进行开发、维护、管理和设置WEB应用程序；掌握HTML5最新页面开发技术；掌握综合网站设计和发布的基本流程和方法。
三、教学内容和要求1、教学内容教学内容主要分为基础内容和进阶提高两大部分。
基础内容全面地讲述了HTML、CSS、JavaScript技术。
主要包括HTML设计和开发所需了解的基本概念和框架结构；文字与段落、列表、超链接、表格、表单和多媒体在页面开发中的应用； CSS在实际开发中的应用技巧；JavaScript在动态网页开发中的基本概念和应用。
进阶提高主要包括web设计的基本原则和方法；基于表格的页面布局方法和基于div+css的页面布局方法，以及常见导航菜单的制作；HTML5中介绍了画布、新增表单元素及多媒体应用；综合案例系统介绍了网站开发从规划、实现到发布的完整过程。
2、教学要求●了解万维网的用途及网页设计的基本概念；●了解HTML、CSS、JavaScript在网页设计中的重要作用；●掌握HTML文档的基本结构及标记属性的使用方法和规则●理解HTML中的文本、字符、段落、表格、列表、表单标记的作用；●掌握主流页面布局方法；●理解JavaScript语言的作用和执行方式，掌握在网页中使用客户端脚本的方法，了解事件响应机制，掌握页面事件编程；●了解网页设计的基本原则和方法；●掌握HTML5最新网页设计技术；●掌握网站发布的基本流程。
《HTML+CSS+JavaScript网页制作案例教程》课程教学
传智播客《HTML+CSS+JavaScript网页制作案例教程》教学设计课程名称：HTML+CSS+JavaScript网页制作案例教程授课年级：2015年级授课学期：2015学年第二学期教师姓名：某某老师201 年月日课题名称第5章列表与超链接计划课时6课时内容分析通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。
但是一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。
本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。
教学目标●掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块；●掌握超链接标记的使用，能够使用超链接定义网页元素；●掌握CSS伪类，会使用CSS伪类实现超链接特效；重点及措施教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施教学难点：有序列表、定义列表、链接伪类。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程第一课时（制作“精美电商悬浮框”，讲解无序列表、有序列表）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS盒子模型”的相关知识。
1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）A、333pxB、366pxC、336pxD、363px答案：C●盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和；●所以，盒子的总宽度= width（300px）+左内边距（30px）+左右边框宽度之和（3px*2） =336px；说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。
前端开发实训案例教程初级开发简单的在线投票系统
前端开发实训案例教程初级开发简单的在线投票系统前端开发实训案例教程：初级开发简单的在线投票系统在这个前端开发实训案例教程中，我们将学习如何用HTML、CSS 和JavaScript开发一个初级的在线投票系统。
这个投票系统将允许用户提交并查看投票结果。
通过完成这个案例，您将学到如何使用前端技术创建交互性的网页应用。
第一步：项目准备在开始开发之前，确保您有一个文本编辑器，如Sublime Text或Visual Studio Code，并且已经安装了最新版本的浏览器，如Google Chrome或Mozilla Firefox。
第二步：创建HTML结构首先，让我们创建一个HTML文件，并设置基本的文件结构。
在文件中添加以下代码：```html<!DOCTYPE html><html><head><title>在线投票系统</title><link rel="stylesheet" href="style.css"> </head><body><header><h1>在线投票系统</h1></header><main><h2>投票问题</h2><form><!-- 添加投票选项 --></form><h2>投票结果</h2><ul><!-- 显示投票结果 --></ul></main><footer><p>© 2022 在线投票系统</p></footer><script src="script.js"></script></body></html>```在上面的代码中，我们创建了一个基本的HTML结构，并使用`<header>`、`<main>`和`<footer>`标签来定义页面的不同部分。
html+css+javascript 标准教程(第二版)02
第2章 HTML文档的结构
2.1 HTML文档的结构 2.2 HTML基本语法 2.3 HTML文件的命名 2.4 编写HTML文件的注意事项 2.5 小实例——插入图片与表格 2.6 习题
HTML/CSS/JavaScript 标准教程实例版（第2版）
2.1 HTML文档的结构
2.5 小实例——插入图片与表格
• 在<body></body>间写两段代码，插入横幅banner图片和一段正文文字。
第 2 章
HTML/CSS/JavaScript 标准教程实例版（第2版）
2.5 小实例——插入图片与表格
• 在<body></body>间输入代码
第 2 章
HTML/CSS/JavaScript 标准教程实例版（第2版）
属性语法标记名字属性1属性2属性3htmlcssjavascript标准教程实例版第2222属性语法实例1htmlcssjavascript标准教程实例版第2222属性语法实例1htmlcssjavascript标准教程实例版第2222属性语法实例2htmlcssjavascript标准教程实例版第2222属性语法实例2htmlcssjavascript标准教程实例版第223html文件的命名注意
引。比如，下面的写法都是正确的：
第
2
<hr color=red>
章
<hr color=”red”>
HTML/CSS/JavaScript 标准教程实例版（第2版）
2.5 小实例——插入图片与表格
• 在<head></head>间定义头部信息。
第 2 章
第二章 HTML基础
2.4 建立超链接
2.4.1 建立超链接
建立超链接的标记是<a>，语法格式为： <a href = "url" >超链接标识 </a> url：指明链接目标的具体路径和文件名。 超链接标识：是网页中链接的载体，可以 是文字或图像、热区等页面元素，用户点击它 就会跳到超链接的目标位置。
2.4 建立超链接
2.2 文本的编辑
2.2.4 列表
2．无序列表 基本语法结构为：
<ul type=n> <li>项目1 <li>项目2 …… <li>项目n </ul>
Type：设置符号形状，有实心圆、小正方 形、空心圆三种，具体情况如下： n=disk：符号为实心圆。 n=square：符号为正方形。 n=circle：符号为空心圆。
3．水平线标记<hr> 水平线是在网页上划出一条水平的分割线，用 <hr>来标记水平线。语法格式为： <hr align=left / center / right noshade size=？ width=？ color=？> Size：设置水平线的高度，以像素为单位。 Color：设置水平线的颜色。 Width：设置水平线的宽度，单位是像素或百 分比，像素是绝对大小，不会随着浏览器窗口的大 小而改变，百分比是相对于浏览器窗口水平线所占 的比例，会随着浏览器窗口的大小而改变。 Align：设置水平线的对齐方式。对齐方式有 三种：左对齐、居中、右对齐。
2.3 图像编辑
我们在网页上经常会浏览图像，适当使 用图像可以增加网页的美观。在网页中最常 用到的是插入图像和设置背景图像。
2.3.1 插入图像 2.3.2 使用背景图像
《第2单元制作网页14网页动态效果》教案
在今天的教学中，我尝试通过生活实例引入网页动态效果的概念，希望以此激发学生的兴趣。从课堂反馈来看，这种方法确实起到了一定的效果，大部分同学都能够积极参与课堂讨论，表现出对网页动态效果的好奇心。
在讲授新课内容时，我注意到学生对animation和transition这两个属性的理解较为困难。因此，我通过举例和对比的方式进行了详细解释。从学生的反应来看，这种方法有助于他们理解这两个属性的区别和应用场景。但在今后的教学中，我还需要寻找更多贴近生活的案例，让学生更加直观地感受到这些属性的作用。
3.重点难点解析：在讲授过程中，我会特别强调animation、transition和JavaScript事件处理这两个重点。对于难点部分，我会通过举例和比较来帮助大家理解。
（三）实践活动（用时10分钟）
1.分组讨论：学生们将分成若干小组，每组讨论一个与网页动态效果相关的实际问题。
2.实验操作：为了加深理解，我们将进行一个简单的实验操作。这个操作将演示网页动态效果的基本原理。
（2）掌握JavaScript事件处理机制，如事件冒泡和捕获，以及如何正确使用事件对象。
（3）在设计网页动态效果时，如何优化性能，避免过度使用动画导致页面卡顿。
（4）解决实践操作中遇到的问题，如浏览器兼容性问题、代码调试等。
举例：
-难点在于如何让学生理解animation与transition的适用场景。例如，transition适用于简单的过渡效果，而animation适用于复杂的动画序列。
举例：
-学生需掌握如何使用CSS3中的animation属性制作简单的动画效果，例如让一个元素沿着X轴移动。
-学生需了解如何利用JavaScript的addEventListener方法为网页元素添加点击事件，实现交互效果。
html+css+javascript教程课件ppt
<meta name="generator | author | copyright" content="…..">
<body>
<body bgcolor=“#〞 --背景色 background="img_url" --背景图片
</body> 色彩值 “#rrggbb〞 Eg. <body bgcolor=“#ffffff〞 > 红绿蓝数字值 <body
版) W3C - HTML5(未来代替HTML) IETF – Internet Engineering Task Force
HTML语法标记
标记(标签或元素)的形式 <元素名>内容</元素名> Eg. <font>文字</font> <元素名/> Eg. <img src=“…〞/> <元素名> Eg. <br> 位于尖括号内，可以具有属性值 属性值必须“〞 或 ‘’，不写也可以解析， 但是不推荐〔不符合XHTML〕 有开始必须有结束(XHTML) 标签不能嵌套
URI
分隔线--<hr>
语法
<hr size=“pixels〞 align=“align〞 width=“pixels〞 color=“# 〞 noshade>
Size 高度 Align 对齐方式，可以取left或right Noshade 无阴影效果 颜色
Eg. <hr noshade color=“#ff00ff〞 width=“600〞 size=“8〞 align=“left〞>
《网页设计》教学大纲
课程名称：网页设计课程代码：总学分：4总学时：54适用专业：计算机专业的本科先修课程和后续课程先修课程：计算机基础、图像类设计软件、计算机类语言后续课程：一、课程的性质、目的与任务课程性质：本课程是计算机网络技术、软件技术、电子信息技术、计算机系统与维护、电子商务技术等专业的技术基础课，属于必修课范畴。
课程目的：通过本课程学习，使学生了解网页制作的基础知识、基本流程。
熟悉并掌握HTML语言，WEB服务器的配置，CSS，JA V ASCRIPT并能熟练使用Dreamweaver网站的设计、制作与维护更新，为动态网页设计打下基础。
课程任务：本课程结合实例，详细介绍了HTML标记语言、CSS样式表的应用、JA V ASCRIPT程序设计等知识。
通过本课程的学习，使学生能够掌握网页设计与制作的基本技能，并轻松地创建出具个性化的静态网站等。
二、教学的基本要求以理论够用为度注重技能的培养。
在掌握主要概念和基本操作后，进行专项和综合训练。
通过课堂学习、课后练习和上机实验，使基本技能的训练得到加强，培养学生实际操作的能力。
（一）理论知识方面主要达到：1．掌握网页设计相关常识，熟悉网页制作的基本技术；2．了解网站设计制作的常用工具与基本流程，了解不同网站类型不同的设计与制作要求，了解网站的整体结构规划；3．掌握HTML语言；4．掌握利用CSS构建网站；5. 掌握利用表格或者CSS 进行网页布局5．理解脚本语言以及掌握JA V ASCRIPT（二）能力方面主要达到：1．熟练掌握使用手工编写HTML代码的方式编写网页；2．熟练掌握利用CSS+DIV方式进行网页设计；3．熟练掌握Macromedia Dremweave的基本操作；4．了解网页设计稿文件的切片与优化输出；了解网页图像的优化技巧；5．掌握JA V ASCRIPT编写一些简单的交互程序；6．掌握网站的测试、发布、推广与维护；三、课程教学内容、重点与难点第1章网页与网站基础知识1网页与网站的概念2网页的设计3网页版式和布局4网站的策划与创建原则●教学基础要求使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣●教学重点网页设计中的若干术语●教学难点网页设计中的若干术语第2章html基础1 html文档结构2 html基本语法●教学基础要求标记对与格式标记的使用●教学重点格式标记的使用●教学难点HTML基本语法第3章文字与段落1文字内容2文字样式3文字修饰4段落●教学基础要求了解标题元素,掌握字体,上下标,及特殊字符的标记●教学重点网页中特殊符号的输入●教学难点特殊符号对应的标记第4章列表1列表简介2无序列表3有序列表4嵌套列表5定义列表6菜单列表和目录列表●教学基础要求使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣●教学重点定义列表●教学难点菜单列表第5章超链接1超链接简介2创建超链接3链接对象●教学基础要求掌握超级链接标记的使用●教学重点字体、图片和超级链接标记的使用●教学难点理解书签超级链接的意义第6章表格1表格2表格标记3表格属性修饰4设置行的属性5设置单元格的属性6表格嵌套●教学基础要求掌握简单表格的制作表格中单元格的合并以及表格嵌套和叠加操作●教学难点理解表格属性rowspan与colspan的含义以及表格嵌套实现第7章框架1框架简介2框架的设置3子窗口的设置4浮动框架●教学基础要求掌握框架的制作●教学重点框架的嵌套使用●教学难点理解框架属性name、target的意义第8章表单1表单2输入3多行文本输入框4下拉列表框●教学基础要求掌握框架的使用●教学重点表单元素标志与属性●教学难点理解表单中相应元素对应标志及属性的含义第9章使用CSS格式化网页1样式表的定义与使用2定义选择符3文字与排版式的使用4背景与颜色的使用5美化网页与超链接的设置6矩形模块的概念与使用7列表●教学基础要求在网页中掌握CSS的运用方法●教学重点样式的定义CSS准确应用第10章javascript基础1javascript起步2javascript程序3标识符和变量4运算符和表达式5javascript程序控制结构6常用对象7事件编程●教学基础要求掌握JavaScript在网页开发中的程序设计●教学重点JavaScript函数、BOM对象的处理、DOM对象的处理●教学难点BOM对象的处理、DOM对象的处理、CSS2Properties对象的处理第11章web设计基础1web设计原则2网站结构规划3网页布局4内容设计5色彩设计●教学基础要求掌握WEB设计的原则●教学重点网页布局●教学难点网页规划第12章页面布局技术1.表格布局方法2.div+css布局方法3.页面导航布局方法●教学基础要求掌握网页设计中布局方法●教学重点div+css布局●教学难点div+css布局样式的定义与应用四、 课时安排建议（列简表） 序号 内容或章节 讲授学时安排作业 备注1 第1章 网页与网站基础 3 浏览网站，查看源文件2 第2章html 基础3 使用HTML 手工编写网页3 第3章文字与段落 34 第4章列表 35 第5章超链接 36 第6章表格 37 第7章框架 38 第8章表单3 9 第9章css 格式化网页 12 利用CSS 控制网页元素的风格和样式10 第10章javascript 基础 12 编写客户端脚本，与网页元素进行动态交互 11 第11章web 设计基础 3 制作综合网页12第12章 页面布局技术3合计 54五、 选用的教材和课件 教材：《网页设计与开发—html 、css 、javascript 实例教程》 课件：自作六、 考核方式和成绩评定 考核方式：综合设计作品成绩评定：平时成绩：30% ，考试（考核）：70%七、 主要教学参考书(注明：著者、书名、版本、出版者、出版年)执笔人： 审定人： 系（部）主任：。
HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)-首页
讲授新课内容
授课过程中穿插提问
辅导学生上机操作实践
认真听讲并思考
思考并回答问题
上机操作完成任务
电脑
投影仪
传奇软件
网络
讨论、思考题、作业：
5-17
部门领导意见：
教研室主任签章：2021年 8 月 31 日
XXXX职业技术学院教案首页
编号：JX/GC7.1-01-JL03
教师姓名
张老师
XXXX职业技术学院教案首页
编号：JX/GC7.1-01-JL03
教师姓名
张老师
部 门
软件与信息学院
课程名称
前端设计与开发
编号
1
适用班级
-班级编号-
课时安排
2学时
教学课型：√理论课 □实验课 □体育课 □习题课 □实训课□实践环境课
教案介质
√纸质√电子
教案篇幅
√打印稿1页 □手写稿__页
√PPT23幅 □有其他电子文件
复习上次课程重点内容
讲授新课内容
授课过程中穿插提问
辅导学生上机操作实践
认真听讲并思考
思考并回答问题
上机操作完成任务
电脑
投影仪
传奇软件
网络
讨论、思考题、作业：
4-11、4-12
部门领导意见：
教研室主任签章：2021年 8 月 31 日
XXXX职业技术学院教案首页
编号：JX/GC7.1-01-JL03
教师姓名
65分钟
10分钟
1、引言
1）简述CSS的引用方法
2）简述基本选择器
3）简述复合选择器
2、CSS基础
1）选择器
伪类和伪元素选择器
web标准网站课程设计
web标准网站课程设计一、课程目标知识目标：1. 让学生了解和掌握Web标准的基本概念，包括HTML、CSS和JavaScript 的使用。
2. 使学生能够理解网站结构的重要性和语义化标签的应用。
3. 让学生掌握基本的网页布局方法，包括盒模型、浮动和定位等。
技能目标：1. 培养学生运用Web标准编写简洁、规范的HTML和CSS代码的能力。
2. 培养学生利用JavaScript实现简单交互功能，如表单验证、动态内容加载等。
3. 培养学生运用Web标准进行网站设计和优化的能力。
情感态度价值观目标：1. 培养学生对Web标准的学习兴趣，激发他们的求知欲和探索精神。
2. 培养学生关注网站可用性、可访问性和用户体验，提高他们的责任感和同理心。
3. 引导学生认识到Web标准在互联网发展中的重要性，培养他们的专业素养和团队协作精神。
课程性质：本课程为实践性较强的课程，注重培养学生的动手能力和实际操作技能。
学生特点：学生具备一定的计算机操作基础，对Web技术感兴趣，但可能对Web标准了解不足。
教学要求：结合课程性质、学生特点，将课程目标分解为具体的学习成果，通过案例教学、分组讨论、实践操作等方式，使学生掌握Web标准网站设计的相关知识和技能。
同时，注重培养学生的自主学习能力、创新意识和团队协作精神，提高他们在实际项目中运用Web标准解决问题的能力。
二、教学内容1. 网站基础知识：介绍网站的基本概念，Web标准的发展历程，以及HTML、CSS、JavaScript在网站中的作用。
- 教材章节：第一章 网站与Web标准概述2. HTML基础：讲解HTML的基本结构，常用标签及其属性，语义化标签的使用。
- 教材章节：第二章 HTML基础3. CSS基础：介绍CSS的基本语法，选择器，盒模型，布局方法，浮动与定位等。
- 教材章节：第三章 CSS基础4. JavaScript基础：讲解JavaScript的基本语法，数据类型，函数，事件处理，DOM操作等。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2.1.2 头部内容
<head>…</head>是HTML文档的头部标记, 在浏览器窗口中，头部信息是不被显示在正文中的， 在此标记中可以插入其它用以说明文件的标题和一 些公共属性的标记。 如要指定HTML文档的网页标题（它将显示在浏览 器窗口顶部标题栏），就要在头部内容中提供有关 信息。用title元素来指定网页标题，即在 <title></title>之间写上网页标题，如程序2-2。
<hr size=5px align=center>
2.4编写HTML文件的注意事项
“<”和“>”是任何标记的开始和结束。元素的 标记要用这对尖括号括起来，并且结束的标记总 是在开始的标记前加一个斜杠“/”； 标记可以嵌套使用，但不能嵌套标记。任何回车 符和空格在HTML代码中都不起作用。为了代码 清晰，建议不同的标记都单独占一行； 标记中可以放置各种属性，属性值都用“"”括起 来； 编写代码，一般应该使用缩进风格，以便更好的 理解页面的结构，便于阅读和维护。
基本语法： 语法说明：
2.2.1 标记语法
双标记
–
双标记由首标记和尾标记两部分构成，它必须成对使用。 首标记告诉Web浏览器从此处开始执行该标记所表示的 功能。尾标记告诉Web浏览器在这里结束该标记。
基本语法： – <标记名称>内容</标记名称> 语法说明： – 其中“内容”部分就是要被这对标记施加作用的部分。 – 例如，“b“标记的作用是，告诉浏览器介于标记<b>和
2.1.4 编写网页的开头
可以通过浏览器直接查看一个页面的HTML源代码， 例如在IE浏览器菜单栏上选择“查看 源文件”即 可。 大多页面的开头，通常使用DOCTYPE标记来声明 要使用什么风格的HTML或XHTML。DOCTYPE使 浏览器知道应该如何处理文档，并且让验证器知道 按照什么样的标准检查代码的语法。然后，用 html标记标出实际代码的起始位置。
WEB编程基础
w w w . h n u
Company name
f
e
.
e
d
uLeabharlann .cn2.5 小实例
编写一个HTML文件，在编写的时候要注意编写 文件， 编写一个 文件 的注意事项，养成良好的编码习惯。 的注意事项，养成良好的编码习惯。
<!--程序 程序2-5--> 程序 <html> <head> <title>页面的标题 页面的标题</title> 页面的标题 </head> <body> <p>这是我的第一个页面。<b>这是粗体文本。</b></p> 这是我的第一个页面。 这是粗体文本。 这是我的第一个页面 这是粗体文本 <img src=”./img/welcome.jpg”> </body> </html>
2.4编写HTML文件的注意事项
为了使浏览器能正常浏览网页，在用记事本或别的 HTML开发工具编写好HTML文档后，在保存 HTML时，对HTML文件的命名要注意以下几点： ：
– – – – –
文件的扩展名为.htm或.html结束，建议统一使用html 作为文件名的后缀； 文件名中只可由英文字母、数字或下划线组成； 文件名中不要包含特殊符号，比如空格、$等； 文件名区分大小写； 网站首页文件名一般是index.html或default.html。
小结
本章主要介绍了HTML文件的基本结构和基本语 文件的基本结构和基本语 本章主要介绍了 文件基本结构包含三大部分， 法。HTML文件基本结构包含三大部分，其中： 文件基本结构包含三大部分 其中：
– – –
<html>、</html>分别表示一个HTML文件的开始和结束； <head>、</head>分别表示文件头部的开始和结束； <body>、</body>分别表示文件主体的开始和结束。 <body></body>是HTML文档的核心部分，在浏览器中看 到的任何信息都定义在这个标记之内。
– –
</b>之间的文本应以粗体显示。（这里的“b”是“粗 体（bold）”的意思。 标记可以包含标记，即标记可以成对嵌套，但是不能交 叉地嵌套。下面的代码就是错误的： <B><I>这是错误的交叉嵌套代码</B></I>。
2.2.2 属性语法
HTML通过标记告诉浏览器如何展示网页，如 <br>告诉浏览器显示一个换行。另外还可以为某 些元素附加一些信息，这些附加信息被称为属性 （attribute）。 例如，标记<hr>的作用是在网页中插入一条水平 线,那么这条水平线的粗细、对齐方式等就是该标 记的属性，如：
2.1.2 头部内容
<!--程序 程序2-2--> 程序 <html> <head> <title>我的第一个网站 我的第一个网站</title> 我的第一个网站 </head> <body> </body> </html>
2.1.2 头部内容
2.1.2 头部内容
在头部文件中使用<META>标记用于描述不包含 在标准HTML里的一些文档信息，例如开发工具， 作者，网页关键字，网页描述等。这些定义的内容 并不在网页页面中显示，但是一些搜索引擎可以检 索这些信息，浏览者可以根据这些关键字或描述查 找到该网页。
2.1.2 头部内容
<!--程序 程序2-3 --> 程序 <html> <head> <title>我的第一个网页 我的第一个网页</title> 我的第一个网页 <META NAME="Generator" CONTENT="editplus"> <META NAME="Author" CONTENT="zhaoming"> <META NAME="Keywords" CONTENT="title"> <META NAME="Description" CONTENT="sampleweb"> </head> <body> </body> </html>
主要内容
• 了解 了解HTML文档的基本结构 文档的基本结构 • 了解标记属性的使用方法和规则
2.1 HTML文档结构
一个完整的HTML文件包含头部和主体两个部分的 内容，在头部内容里，可定义标题、样式等，文档 的主体内容就是要显示的信息。
2.1.1 基本结构
<!--程序 程序2-1--> 程序 <html> <head> <title> 一个简单的 一个简单的HTML示例 </title> 示例 </head> <body> <h1>欢迎光临我的主页 欢迎光临我的主页</h1> 欢迎光临我的主页 </body> </html>
2.2 HTML基本语法
HTML 用 于 描 述 功 能 的 符 号 称 为 “ 标 记 ” 。 <html>、<head>、<body>等都是标记。标 记通常分为单标记和双标记两种类型。
2.2.1 标记语法
单标记
– – –
单标记仅单独使用就可以表达完整的意思。 <标记名称> 最常用的单标记是<br>,它表示换行。
<hr size="5px" align="center">
2.2.2 属性语法
基本语法： 基本语法：
–
<标记名称 属性名1="属性值" 属性名2="属性值"> 属性应写在首标记内，并且和标记名之间有一个空格分 隔。例如，上例中hr标记中，align为属性，center为 属性值，属性值可以直接书写，也可以使用""括起来。 以下写法也是正确的：
2.1.3 主体内容
在标记<body>和</body>中放置的是页面中所 有的内容，如图片、文字、表格、表单、超链接等 元素。 例如，程序2-4在body部分添加了几个关于文本 和段落的标记。
2.1.3 主体内容
<!--程序 程序2-4--> 程序 <html > <head> <title>我的第一个页面 我的第一个页面</title> 我的第一个页面 </head> <body> <h1>这里是文章的标题。</h1> 这里是文章的标题。 这里是文章的标题 <p>这里是文章的段落。</p> 这里是文章的段落。 这里是文章的段落 </body> </html>
语法说明： 语法说明：
–
<hr size=5px align=center>
2.3 注释
注释标签用于在 HTML 源码中插入注释。注释会 被浏览器忽略。可以使用注释对程序代码进行解释， 适当的注释对以后代码的阅读和维护产生很大的帮 助。 基本语法： <!-- 注释内容 --> 语法说明： 左括号后需要写一个惊叹号，右括号前就不需要了。 了