html5的基本工作原理,互联网基本原理和HTML入门精选

互联网的原理：服务器、浏览器、HTTP。知道网页文件是真实的物理存在，用HTTP请求这个文件。

要知道网址的含义：

请求哪个文件？

请求的是iqianduan.cn服务器上的aaa文件夹中的index.html文件。拓展一下，服务器可以进行默认页面的配置，比如配置为default.html或者default.php等等。但是默认的是index.html。

HTML页面是真正的传输到了你的电脑里面进行渲染的，保存这些文件的文件夹，临时文件夹。

纯文本： 只有字，没有样式。txt、html、java、php、css、js等等。能用记事本打开，并且打开之后不是乱码的，就是纯文本文件。

HTML是负责描述语义的 ： 功能是给文本增加“主标题”的语义，而不是变大黑粗。

p的功能是增加“段落”的语义。

Sublime使用： 任何的纯文本编辑器都能编辑网页html文件。学习的是编程，而不是某种软件。

骨架：

DTD： HTML4.01 3种 ， XHTML1.0 3种。

XHTML1.0明确的规定了标签名必须小写、所有的属性都是双引号封闭、自封闭结尾反斜杠。

strict : 严格版本，font、b、u、i等不能使用了。

2007年之前，就是用这些标签写页面的。但是，2007——08就被废弃了，原因是：DIV+CSS，

我们希望HTML标签只负责语义，而不要负责样式。而b、u、i明显的带有“样式色彩”，所以08年开始，就被废弃了。strict版本中，严格不需使用b、u、i。但是，我们要在页面上巧妙的使用一下b、u、i(css钩子)，所以我们使用transitional版本。

字符集： utf-8和gb2312。 字符库收录文字多少： utf-8 > gb2312? ； 文件尺寸： gb2312 < utf-8。

gb2312没有被废弃，很明显qq.com使用gb2312，追求打开速度快。关键字、页面描述

空白折叠现象 和 HTML标签对空格、tab、换行不敏感。

h标签和p标签

h标签系列，一共6个

p标签，段落语义。

所谓的“容器级”和“文本级”不是官方的分类，而是有经验的程序员自己分出来的类别。

有一些标签，里面什么都能放置，非常的大气； → 容器级

有一些标签，里面只能放置文本，虽然放置别的东西，浏览器可能不报错，但是也没人这么做。 → 文本级

记住：HTML4.01层面，容器级标签，只有div、li、dd、dt、td。其余的标签，都是文本级的。

在HTML页面中要插入图片，使用img标签。

img是英语image的简称，图片的意思

src是英语source的简称，资源的资源

src属性中的值，就是图片的路径。

img标签是一个自封闭标签，也称为单标签，并不是一对儿。

我们现在接触的自封闭标签就两个：

和

网页中能插入的图片格式：jpg、jpeg、png、bmp、gif。 不能插入的图片格式：psd

不设置宽度、高度：

通过width设置宽度、height设置高度：

昨天学的语法，键值对：

如果我们仅仅设置其中一个属性，另一个属性将按比例自动设置。

图片img元素，不是普通的html标签，和p这种东西不一样，img标签实际上也是一个文字。

img标签，就是文字：

去掉空格：

1.相对路径

img的src属性，描述图片文件在哪儿。

从html页面出发，找到图片。这种路径的描述方式，叫做相对路径。

当html文件和图片文件在同一个目录下，那么非常简单，可以直接输入文件名

当图片在更深一层的文件夹中的时候：

写法就是写上文件夹名字：

可以有很多的层次：

如果图片在页面更浅一层的文件夹中：

路径可能比较复杂，没有关系一层一层找就可以了：

需要注意的是：** 只能出现在开头**。

2.绝对路径

所有以http://开头的路径， 或者以/开头的路径，我们都称为绝对路径。

注意http:// 不能省略。

很明显，我们现在不是从html页面出发找到图片，而是描述了一个绝对的一个网址，那么称为“绝对路径”。

以/开头的路径，表示当前服务器的根目录。

不等价于：

解释：

表示从当前页面出发，找到1.jpg。

表示从当前服务器根目录出发，找到1.jpg

等价于绝对地址：

不要去考虑直接插入硬盘中的文件：

不要学，没有用，因为服务器上没有d盘，你的路径不适用服务器的情况。并且也不方便用u盘考来考去。这是一个错误的路径。

看一道面试题，腾讯2014校园招聘笔试题：

alt是英语alternate替代的意思，就是当图片不能被显示的时候(可能因为路径错误、服务器错误)，显示的替代文字：

超级链接，把网页和网页之间连起来了，互联网是“网”的原因。

使用a标签来制作，a是英语anchor锚的意思。

href是英语hypertext reference超文本地址的意思。

类似于img的src。

一定不要写成herf。所以你就要读做“何瑞福”，不要读作“喝er夫”。

href里面的值，就是要跳转到的页面的地址，相对路径、绝对路径都行：

title属性，就是鼠标悬停时候的提示文本

target属性，设置是否在新窗口中打开连接，如果想在新窗口中打开链接?

target是英语目标的意思，blank就是空白新窗口的意思。有一个下划线。

可以通过下面的这种特殊形式的a，在页面中放置锚点：

a里面有一个name属性，name是英语名字的意思。而没有href和链接中的文字。

这种a标签叫做锚点。

可以使用网址：

来快速定位这个锚点。注意看下图的地址栏最后的部分：

可以在页面的其他部分，制作跳转到这个锚点的超级链接：

甚至，可以在其他页面制作这个超级链接：

最后说一下，如果我们想要把一个段落中所有的文字，都是超级链接：

应该p包裹a，因为我们感觉p比a大，a就是一个文字：

而不要：

列表有三种

ul是英语unordered list，无序列表。表达的是没有顺序关系的列表。

li是英语list item列表项的意思。

这是我们学习的第一个组合的标签：

ul的儿子标签，只能是li，不能是别的东西：

错误：

错误：

正确的：

错误的：

li的数量没有限制，可以有无限多个。

li是一个非常经典的容器级标签，里面可以防止任何东西，甚至，再放置一个ul(二级列表)，甚至三级列表。

注意下面的正确写法(这个案例想写对，真的不容易)：

网站上的使用：

至于小圆点，如何变化，是CSS的事情，不是HTML的事情。

ol就是ordered list

所有的注意事项和ul一样一样的。

定义列表表示定义某事的一个列表。

dl是英语definition list定义列表的意思；

dt是英语definition title定义标题的意思；

dd是英语definition description定义描述的意思；

dl中，交替出现dt和dd。dd是dt的解释说明，dd负责解释、描述、定义dt。

也可以单独成为一个dt和dd组，大部分前端工程师更喜欢这样的：

这样的好处，就是样式更好管理一些(学CSS之后你就懂了)。

网页中的应用：

dd和dt都是非常经典的容器级标签，里面什么都能放。

放什么标签，和长得样子没有关系，一切看语义！！