最全面的HTML基础教学

1、网页制作培训教程设计部： 地瓜教学大纲一、什么是“上网”？1.1 认识临时文件夹1.2 上网的原理1.3认识Chrome浏览器的“网络面板”二、超文本标记语言HTML2.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:UsersAdministrat

2、orAppDataLocalMicrosoftWindowsTemporary Internet Files（每个人的路径都不一样，但是每个人都有）这个文件夹的名字，就叫做“临时互联网文件夹”网页制作培训教程系统为我们打开了一个文件夹：临时文件夹就是我们浏览页面的时候，在本地中的一个暂存的一些文件 我们输入一个网址，加载一个网页的时候，会有一堆文件跑到我们的临时文件夹中。网页制作培训教程1.2 上网的原理上网就是请求数据。并且请求的不是一个数据，而是页面上的所有图片、css、js、flash等相关资源。网页制作培训教程当你在浏览器的地址栏中输入一个地址的时候，比如，这时候你的计算机就会向新浪网

3、的服务器发送一条HTTP请求，“我要请求你的一个网页”，新浪网的服务器就会利用HTTP协议，将这个网页对应的HTML文件以及这个文件中所有的CSS、JS、图片文件等相关资源都一并传输到你的计算机中的临时文件夹中。浏览器，会在本地渲染这些文件，在屏幕上显示网页。 HTTP（稍微了解即可）： Hypertext Transfer Protocal，超文本传输协议。第一，没 有连接，一次请求，一次传输，不存在持久连接。第二，是可靠的，网页上有一个字符“1”，用户一定能看见这个“1”，不会再传输过程中发生突变“2”。Chrome浏览器中文名“谷歌浏览器”，和Firefox火狐浏览器并称“高级浏览器”。

4、高级浏览器的兼容性非常好，能显示几乎全部的绚丽效果。Chrome浏览器自己提供了一个“审查元素”功能。网页制作培训教程1.3认识Chrome浏览器的“网络面板”网页制作培训教程状态码：304表示没有更改，不再请求这个文件，所以网页第二次加载的时候，由于图片、js、css、flash已经在我们的临时文件夹中，所以浏览器不会再次请求这个文件，而返回304状态码，所以网页加载速度快了。强制刷新：shift+F5。网页制作培训教程上图就是一个304的示例。做的所有的东西，HTML、CSS、JavaScript等等都将跑到客户的计算机的临时文件夹中。所以，我们学的知识，都是开源的。就是可以去查看源代码的

5、。网页制作培训教程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文件页面，里面放了一个有关政

6、府工作的报告，现在此文件（页面）还没施加任何标签；网页制作培训教程语义：文本的意义。HTML超文本标记语言： 超：超能力。浏览器能够自动识别HTML中的标签和文本； 文本：HTML文件从txt文件改名过来的。HTML格式的文件是纯文本文件。什么是纯文本文件？所有能用记事本打开，并且内容不是乱码的文件，都是纯文本文件。 标记：我们为了给文本添加一些“语义”，用到了HTML标记，不过我们中国人称呼“标签HTML就是通过这样的一个个标签，给文本赋予语义的：就是一个“起始标签”，就是“结束标签”。合成“标签对儿”。 语言：我们学的是language，不是javascript，说明HTML不是编程。HT

7、ML毫无逻辑可言，没有数学，没有与或非，没有循环、判断。在学习HTML的第一天，一定要记住这句话：HTML中除了语义，什么都没有！网页制作培训教程现在页面添加了相关的标签元素网页制作培训教程网页制作培训教程所有的标签对儿，都是为了给文本施加语义的。 h是英语headline标题的意思。主标题，W3C规定，任何一个页面最多有一个h1。副标题，W3C规定，任何一个页面最多有一个h2。 分节标题 分节标题 分节标题 分节标题 p是英语paragraph段落的意思。之间的文本就是一个段落。p标签中只能放文字和图片。 学习一个标签，div是英语division分割、区段的意思。2.2 认识h系列标签和p

8、标签网页制作培训教程 认识标签的正确封闭的重要性。HTML中标签可以嵌套。网页制作培训教程2.3 网页编辑工具任何纯文本编辑器都是可以制作网页的，都是可以书写HTML文件的。记事本、Dreamweaver 、Sublime Dreamweaver：最著名的网页编辑器，是Adobe的产品 Sublime：是前端开发神器。2.4 HTML页面骨架Sublime 中，Ctrl+N新建一个文件，然后输入： 然后按ctrl+E键或者是直接按Tab键；要注意的是html:xt的双引号，:这个符号必须是英文格式；网页制作培训教程 第1行： 文档声明头，是W3C组织的要求的，所有HTML页面，第一行代码必须是

9、文档声明头。在文档声明头中，声明了html文档执行的标准是什么？XHTML1.0 。 第2行： xmlns=/1999/xhtml xml:lang=en 这个是命名空间，不需要记忆，但是需要会用Sublime生成。 第4行：charset字符集，char是英语charactor字符的意思，set是集的意思。HTML4.01 和 XHTML1.0 是一回事：X表示extensitial，拓展的，严格的。XHTML是更为严格的HTML。 不需要记忆。直接从Sublime中生成即可。网页制作培训教程title就是网页的标题 网页制作培训教程一个HTML文档的规范格式

10、：2.5 认识HTML的特点比较两个代码，HTML对换行不敏感，标签是反映语义的唯一因素，不会因为换行、空格、缩进而改变语义。页面效果一样网页制作培训教程空白折叠现象： 只出现了一个空格标签的父子关系：body是h1、h2、p的父标签； h1、h2、p是body的子标签当页面做完之后，可以将html中所有标签写在一行上，能显著减少页面体积。 在HTML标签对儿中的文本，如果有大量空格、换行、缩进，都只会被渲染成为一个空格。网页制作培训教程 以下两种写法完全等价，没有任何的不同： 他们都描述了一种父子关系。 但是第2种写法，不方便我们判断父子关系，所以我们要求必须正确缩进！三、超级链接和文件路径

11、 a是用于anchor锚的意思，这个标签的语义就是超级链接。3.1 href属性 制作跳转的目标href是英语hypertext reference超文本引用的缩写。特别容易拼写错误：herf网页制作培训教程HTML标签可以有属性（描述这个标签的），属性起始标签的内部，用以下语法：术语上，属性名称为k（key），值是v（value）。 k=”v”3.2 title属性title属性是悬停提示文本 target=”_blank”是一个固定写法，表示在新的标签页中打开链接网页制作培训教程3.3 target属性规定是否在新的标签页中打开链接。如果加上target=”_blank”，表示在新的标签页

12、中打开链接。blank表示空白。不加就是在本标签页中打开连接。1 去页面2标签中的属性更换位置，没有任何问题：网页制作培训教程要跳转到的页面，和本页面不在一个文件夹中： 要跳转到的页面，在更深的文件夹中，书写文件夹名： 要跳转的页面，在更浅的文件夹中，书写./表示一层 路径的综合应用：非常重要！现在06 超级链接.html页面中有一个a，想指向页面2.html这种路径我们称呼“相对路径”。相对我自己，找到要去的页面的路。绝对路径，就是以http:/开头的路径3.4 路径网页制作培训教程四、图片 img是英语image图片的意思。 图片不用文本，图片不需要为某些文字增加语义。所以不需要写标签对儿

13、，是一个自封闭标签。写成错误！src是英语source资源的意思。src属性的值就是要插入的图片的路径，相对路径、绝对路径皆可 img src=images/0.jpg alt=这是一个狮子，可是你看不见！当用户无法加载这个图片的时候，比如路径没写对、网速慢，就会显示这几个字。 alt是英语alternative替代品的缩写网页制作培训教程5.1 块级元素和行内元素网页如同word一样，网页在渲染的时候，也是一行一行进行渲染的。有些标签独占一行，有些可以并排显示。独占一行的标签 块级元素。（这是我们目前接触）并排显示的标签 行内元素。 标准文档流就是指的这个特性。如果想让两个a各占一行，实际上就相当于给他们段落的语义。用p标签包裹每个a。 去页面2 我是另一个a五、标准文档流网页制作培训教程5.2 图片和文字都属于文字流img（不管这个图片有多大）和文字在浏览器看来都是一类元素。空白折叠： 和另一个的关系，就如同文字和文字的关系网页制作培训教程5.3 标签有正确的嵌套合理性标准文档流规定了一些标签为容器级标签，一些标签为文本级标签。p、a、img、span、b、i、s标签都是文本级标签。其余都是容器级标签。文本级标签中，只能放文本