面的HTML基础教学技术方案.ppt

网页制作培训教程 设计部： 地瓜 教学大纲 一、什么是“上网”？ 1.1 认识临时文件夹 1.2 上网的原理 1.3认识Chrome浏览器的“网络面板” 二、超文本标记语言HTML 2.1 HTML整体感知 2.2 认识h系列标签和p标签 2.3 网页编辑工具 2.4 HTML页面骨架 3.5 认识HTML的特点 三、超级链接和文件路径 3.1 href属性 3.2 title属性 3.3 target属性 3.4 路径 四、图片 五、标准文档流 5.1 块级元素和行内元素 5.2 图片和文字都属于文字流 5.3 标签有正确的嵌套合理性 网页制作教程 网页制作教程 1.1 认识临时文件夹 一、什么是“上网”？ C:\Users\Administrator\AppData\Local\Microsoft\Windows\Temporary Internet Files（每个人的路径都不一样，但是每个人都有）这个文件夹的名字，就叫做“临时互联网文件夹” 网页制作培训教程 系统为我们打开了一个文件夹： 临时文件夹就是我们浏览页面的时候，在本地中的一个暂存的一些文件 我们输入一个网址，加载一个网页的时候，会有一堆文件跑到我们的临时文件夹中。 网页制作培训教程 1.2 上网的原理 上网就是请求数据。并且请求的不是一个数据，而是页面上的所有图片、css、js、flash等相关资源。 网页制作培训教程 当你在浏览器的地址栏中输入一个地址的时候，比如，这时候你的计算机就会向新浪网的服务器发送一条HTTP请求，“我要请求你的一个网页”，新浪网的服务器就会利用HTTP协议，将这个网页对应的HTML文件以及这个文件中所有的CSS、JS、图片文件等相关资源都一并传输到你的计算机中的临时文件夹中。浏览器，会在本地渲染这些文件，在屏幕上显示网页。 HTTP（稍微了解即可）： Hypertext Transfer Protocal，超文本传输协议。第一，没 有连接，一次请求，一次传输，不存在持久连接。第二，是可靠的，网页上有一个字符“1”，用户一定能看见这个“1”，不会再传输过程中发生突变“2”。 Chrome浏览器中文名“谷歌浏览器”，和Firefox火狐浏览器并称“高级浏览器”。高级浏览器的兼容性非常好，能显示几乎全部的绚丽效果。Chrome浏览器自己提供了一个“审查元素”功能。 网页制作培训教程 1.3认识Chrome浏览器的“网络面板” 网页制作培训教程 状态码： 304表示没有更改，不再请求这个文件，所以网页第二次加载的时候，由于图片、js、css、flash已经在我们的临时文件夹中，所以浏览器不会再次请求这个文件，而返回304状态码，所以网页加载速度快了。强制刷新：shift+F5。 网页制作培训教程 上图就是一个304的示例。 做的所有的东西，HTML、CSS、JavaScript等等都将跑到客户的计算机的临时文件夹中。所以，我们学的知识，都是开源的。就是可以去查看源代码的。 网页制作培训教程 HTML语言概述： Html是一种超文本标记语言，作为一种网页编辑语言，易学易懂！ 2.1 HTML整体感知 HTML全称 HyperText Markup Language。(超文本标记语言) HTML的制定者是W3C组织，World Wide Web Consortium ， 国际万维网联盟。最新版本是HTML5，我们学习的是HTML4.01。 文件的拓展名是.html或者.htm是一样的。 好比如index.html等价于index.htm 我们新建一个txt文档，将拓展名改成 html; 二、超文本标记语言HTML 网页制作培训教程 例子： 这是一个新建的html文件页面，里面放了一个有关政府工作的报告，现在此文件（页面）还没施加任何标签； 网页制作培训教程 语义：文本的意义。 HTML超文本标记语言： ● 超：超能力。浏览器能够自动识别HTML中的标签和文本； ● 文本：HTML文件从txt文件改名过来的。HTML格式的文件是纯文本文件。 什么是纯文本文件？ 所有能用记事本打开，并且内容不是乱码的文件，都是纯文本文件。 ● 标记：我们为了给文本添加一些“语义”，用到了HTML标记，不过我们中国人称呼“标签 HTML就是通过这样的一个个标签，给文本赋予语义的： h12014年两会政府工作报告全文/h1 h1就是一个“起始标签”，/h1就是“结束标签”。合成“标签对儿”。 ● 语言：我们学的是language，不是javascript，说明HTML不是编程。HTML毫无逻辑可言，没有数学，没有与或非，没有循环、判断。。。。 在学习HTML的第一天，一定要记住这句话： HTML中除了语义，什么都没有！ 网页制作培训教程