第1章 为什么要学习HTML
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
19
网页的基本组成
超链接是网站的灵魂
超链接的目的端通常是另一个网页，但也可以是一幅图片、一个电子 邮件地址、一个文件、一个程序或者也可以是本页中的其它位置
20
网页的基本组成
CSS是网页排版的灵魂 CSS是网页排版的灵魂
Css的发展和规范代表了互联网历史上一个独特的发展阶段
21
网页的基本组成
表单是用来收集站点访问者信息的域集
24
网页的基本组成
网页中除了这些最基本的元素，还包括横幅广告、字幕、悬 停按钮、日戳、计数器、音频、视频等
25
网页设计需要哪些工具
浏览器（browser） 浏览器（browser）: 游览器有很多可供选择，最普及的浏 览器当属微软（Microsoft）公司的Internet Explorer（俗称 览器当属微软（Microsoft）公司的Internet Explorer（俗称 “IE”），其他的一些浏览器包括Opera、Mozilla Firefox IE”），其他的一些浏览器包括Opera、 （俗称“火狐”）等 网页制作工具：Microsoft FrontPage、 网页制作工具：Microsoft FrontPage、 SharePoint_Designr、 SharePoint_Designr、Macromedia Dreamweaver 不过现在可以忘掉这些程序，它们对你学习网页制作没有什 么帮助！
12
HTML的编码规范 HTML的编码规范
5. 缩进：为了让代码具有良好的可读性，我们需要让一些标 缩进：为了让代码具有良好的可读性，我们需要让一些标 签呈现缩进效果，而这些缩进，我们一定要用TAB键来处理 签呈现缩进效果，而这些缩进，我们一定要用TAB键来处理 ，而不是空格。 6.空格：理论上讲，网页中是完全不必要出现空格的。如果 6.空格：理论上讲，网页中是完全不必要出现空格的。如果 非要用的话，用
牢记所有常用HTML标签:在没有代码提示的情况下，不能敲出任何一 个标签是很尴尬的事 一定要学会“盲打”：靠肉眼去识别键盘是一定会被累晕的 能够做到“成竹于胸”：对于已完成的网页设计图，能够在头脑中形 成明确的标签轮廓 做到了以上三点，那么我们通过任何工具来制作网页，都不会比别人 慢。因为我们网页，是真正属于我们自己的!
加载文件：图片文件、JS文件、CSS文件，应该应该分别存储在单独的文 加载文件：图片文件、JS文件、CSS文件，应该应该分别存储在单独的文 件夹内
29
网页(网站) 网页(网站)的发布
通常我们设计一个静态页面（.html），可直接在浏览器下打开运行 通常我们设计一个静态页面（.html），可直接在浏览器下打开运行
在填写好表单之后，站点访问者便送出所输入的数据，该数据就会根 据所设置的表单处理程序，以各种不同的方式进行处理
22
网页的基本组成
动画是网页上最活跃的元素
通常制作优秀、创意出众的动画是吸引浏览者的最有效的方法
23
网页的基本组成
框架是网页的一种组织形式
框架可以将相互关联的多个网页的内容组织在一个浏览器窗口中显示
实际应用中的 .html 并不一定都是静态页面
如果我们要发布一个动态项目（.NET 如果我们要发布一个动态项目（.NET 或 Java），那么就需要有一个 Java），那么就需要有一个 Web服务器作为发布的平台，如 Web服务器作为发布的平台，如 Windows 的 IIS
.NET (asp) => IIS Java PHP => Tomcat => Apache
9
如何学习别人网页中的技术
学习别人网页中的技术，也是必须掌握HTML语言的原因之 学习别人网页中的技术，也是必须掌握HTML语言的原因之 一 在网页中点击鼠标右键，可以弹出一个菜单，选择查看源文 件
10
如何学习别人网页中的技术
11
HTML的编码规范 HTML的编码规范
1.标签闭合：HTML中的所有标签都必须是闭合的 1.标签闭合：HTML中的所有标签都必须是闭合的 2.标签名小写 : 虽然不是必须的，但我们一定要用小写字母 2.标签名小写 来拼写标签名 3.属性值包含在双引号内：除特殊情况，我们一定要用双引 3.属性值包含在双引号内：除特殊情况，我们一定要用双引 号来包裹属性值。如： <div class=“myBox”></div> 4.标签的嵌套关系：有些标签属于其他标签的子标签，那么 4.标签的嵌套关系：有些标签属于其他标签的子标签，那么 如果父标签不存在，则子标签页不应存在。如：<td>在没有 如果父标签不存在，则子标签页不应存在。如：<td>在没有 <table>出现的时候，是绝对不应该出现的 <table>出现的时候，是绝对不应该出现的
7
为什么要学习HTML 为什么要学习HTML
在实际的项目开发中：
设计师：“我设计的界面效果不是这样的，细节都没有了。” 程序员：“对，我们是按照默认的结构开发的。” 设计师：“为什么不按我的设计来实现呢？” 程序员：“按照你的设计实现了，如果系统不稳定，我们没法负责 啊~~~”(你做的效果我根本实现不了) 设计师草稿（经客户认可） = 100 分 设计师不能还原草稿 程序员加入程序之后 CSS不兼容 JS不兼容 = 70 分 = 50 分 = 20 分 = 0分
7.特殊字符的使用：会发生冲突的字符，我们采用特殊字符 7.特殊字符的使用：会发生冲突的字符，我们采用特殊字符 的方式输出，如： © = © 8.扩展名（htm or html） : 同样不是必须的，但是我们一 8.扩展名（htm html） 定要用HTML作为文件的扩展名 定要用HTML作为文件的扩展名
35
HTML 4.01 — XHTML 1.0 — HTML 5.0 —
6
HTML的工作原理 HTML的工作原理
HTML其实就是组合成一个文本文件的一系列标签。 HTML其实就是组合成一个文本文件的一系列标签。 浏览器通过对这些标签的解析(DOM)，来呈现给我们最终格 浏览器通过对这些标签的解析(DOM)，来呈现给我们最终格 式化后的网页效果 HTML标签通常是代表不同含义的英文词汇的缩写 HTML标签通常是代表不同含义的英文词汇的缩写 例： <p>从这里开始我们的HTML之旅</p> <p>P标签是Paragraph的缩写，代表段落</p>
15
网页结构图
16
网页结构图
17
网页的基本组成
网页中的信息主要是以文本为主的
在网页中可以通过字体、大小、颜色、底纹、边框等来设置文本的属 性。这里指的文字是文本文字，而并非图片中的文字
18
网页的基本组成
今天看到的丰富多彩的网页，都是因为有了图像
用于网页上的图片一般为JPG和GIF格式的，即以.jpg(或.jpeg)和 .gif为后缀的文件
总体课程导航 总体课程导航
掌握HTML语言的基本语法 掌握HTML语言的基本语法 掌握HTML标签的使用规范 掌握HTML标签的使用规范 掌握网页的基本组成 掌握HTML在网页中与其他组成之间的关系 掌握HTML在网页中与其他组成之间的关系 掌握HTML与其他组成如何互动协作 掌握HTML与其他组成如何互动协作
第一章
本章节授课目标
了解HTML的工作原理 了解HTML的工作原理 掌握HTML的基本组成 掌握HTML的基本组成 网页的开发工具及使用
4
HTML是什么 HTML是什么
HTML：（HyperText MarkHTML：（HyperText Mark-up Language）超文本标记 Language）超文本标记 语言 设计HTML语言的最初目的，是为了能把存放在一台电脑中 设计HTML语言的最初目的，是为了能把存放在一台电脑中 的文本或图形联系在一起，用于与另一台电脑的发送和接收
26
我的第一个网页
输出效果
大家好，这是我的第一个网页作品
代码部分
<html> <head> <title>我的第一张网页</title> </head> <body> 大家好，这是我的第一个网页作品。 </body> </html>
27
特别要求
我们一直在强调，尽量少的去使用工具，那么在手写代码的 过程中，我们就应该具备以下能力：
总结
本章重点讲解了：
HTML的基本组成 HTML的语法规范 网页开发的工具
32
课后作业
作业
使用你最熟悉的网页制作工具或者用手写代码的方式，完成一个属于 自己的网页
作业要求：所有代码必须符合今天所讲的HTML编码规范
33
课后预习
预习内容
网页是如何通过代码控制排版、布局的
34
附件 特殊字符对照表
HTML是WEB页面标准开发的基础 HTML是WEB页面标准开发的基础
5
HTML标准的版本历史 HTML标准的版本历史
HTML 1.0 HTML 2.0 HTML 3.2 HTML 4.0 — — — — 1993年6月 1993年 1995年11月 1995年11月 1996年1月 1996年 1996年 1996年1月 1999年12月24日，W3C推荐标准 1999年12月24日，W3C推荐标准 2000年1月 2000年 预计将在2010年9月正式向公众推荐 预计将在2010年 月正式向公众推荐
13
小结
14
网页中都会包含哪内容
1、HTML是基础 HTML是基础 2、CSS依靠选择符提供视觉 CSS依靠选择符提供视觉 3、Javascript 依靠HTML事件去驱动行为 依靠HTML事件去驱动行为 4、DOM提供API修改HTML DOM结构的API给javascript调用 DOM提供API修改HTML DOM结构的API给javascript调用 5、AJAX提供XMLHTTP API建立客户端和服务器端的通信，而且是异 AJAX提供XMLHTTP API建立客户端和服务器端的通信，而且是异 步通讯 6、HTML的语义化使用和微格式提供数据抽取，就是SEO的一部分 HTML的语义化使用和微格式提供数据抽取，就是SEO的一部分 注：seo = (Search Engine Optimization)，汉译为搜索引擎优化
当网站（项目）发布到web服务器后，我们会有一个对应的 当网站（项目）发布到web服务器后，我们会有一个对应的 IP 地址和端 口号用于访问这个网站（项目） 将域名解析到对应的 IP 地址，并在Web服务器中做好主机头映射，即可 地址，并在Web服务器中做好主机头映射，即可 通过域名访问
30
小结
31
28
网页的存储
扩展名：* 扩展名：*.htm 或 *.html
.htm 和 .html 的区别：在DOS和Windows 3.X环境下，由于文件名受8.3格 式限制，文件名长度不得超过8个字符，扩展名只能是.htm
命名规则：
1.无空格 2.无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字 3.字母区分大小写 4.首页文件名默认为：index.htm 或 index.html （default）
8
为什么要学习HTML 为什么要学习HTML
Web2.0时代 Web2.0时代 ：ajax应用的“泛滥” ajax应用的“泛滥” RIA时代：自定义控件的“泛滥” RIA时代：自定义控件的“泛滥” 前端设计的重要性已经渐渐赶上后台，甚至从某种角度来说，要超过后 台 将来在工作中要做的事，比你现在想象的要多的多……