上节课的知识复习
- 互联网的原理：服务器、浏览器、HTTP。知道网页文件是真实的物理存在，用HTTP请求这个文件。
要知道网址的含义：http://www.iqianduan.cn/aaa
请求哪个文件？
请求的是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。其余的标签，都是文本级的。
图片
1.基本使用
在HTML页面中要插入图片，使用img标签。
img是英语image的简称，图片的意思
src是英语source的简称，资源的资源
src属性中的值，就是图片的路径。
img标签是一个自封闭标签，也称为单标签，并不是一对儿。
我们现在接触的自封闭标签就两个：
和
网页中能插入的图片格式：jpg、jpeg、png、bmp、gif。 不能插入的图片格式：psd
2.图片的宽度和高度
不设置宽度、高度：
通过width设置宽度、height设置高度：
昨天学的语法，键值对：
如果我们仅仅设置其中一个属性，另一个属性将按比例自动设置。
3.图片是“文字”
图片img元素，不是普通的html标签，和p这种东西不一样，img标签实际上也是一个文字。
img标签，就是文字：
去掉空格：
4.相对路径和绝对路径
1.相对路径
img的src属性，描述图片文件在哪儿。
从html页面出发，找到图片。这种路径的描述方式，叫做相对路径。
当html文件和图片文件在同一个目录下，那么非常简单，可以直接输入文件名
当图片在更深一层的文件夹中的时候：
写法就是写上文件夹名字：
如果图片在页面更浅一层的文件夹中：
路径可能比较复杂，没有关系一层一层找就可以了：
需要注意的是： ** ../只能出现在开头**。
2.绝对路径
所有以http://开头的路径， 或者以/开头的路径，我们都称为绝对路径。
注意http:// 不能省略。
很明显，我们现在不是从html页面出发找到图片，而是描述了一个绝对的一个网址，那么称为“绝对路径”。
以/开头的路径，表示当前服务器的根目录。
解释：
等价于绝对地址：
不要去考虑直接插入硬盘中的文件：
看一道面试题，腾讯2014校园招聘笔试题：
img src=”../../photo/1.png” />
5.alt属性
alt是英语alternate替代的意思，就是当图片不能被显示的时候（可能因为路径错误、服务器错误），显示的替代文字：
超级链接
1.基本使用
超级链接，把网页和网页之间连起来了，互联网是“网”的原因。
使用a标签来制作，a是英语anchor锚的意思。
我是超级链接
href是英语hypertext reference超文本地址的意思。
类似于img的src。
一定不要写成herf。所以你就要读做“何瑞福”，不要读作“喝er夫”。
href里面的值，就是要跳转到的页面的地址，相对路径、绝对路径都行：
链接
链接
链接
2.常见属性
-
title属性，就是鼠标悬停时候的提示文本
title属性
我是超级链接
target属性，设置是否在新窗口中打开连接，如果想在新窗口中打开链接 target=”_blank”
我是新窗口打开的链接
- target是英语目标的意思，blank就是空白新窗口的意思。有一个下划线。
3.页面内的锚点
可以通过下面的这种特殊形式的a，在页面中放置锚点：
a里面有一个name属性，name是英语名字的意思。而没有href和链接中的文字。
这种a标签叫做锚点。
可以使用网址：
10_页面内锚点.html#hysh
来快速定位这个锚点。注意看下图的地址栏最后的部分：
可以在页面的其他部分，制作跳转到这个锚点的超级链接：
甚至，可以在其他页面制作这个超级链接：
查看演义生涯
最后说一下，如果我们想要把一个段落中所有的文字，都是超级链接：
应该p包裹a，因为我们感觉p比a大，a就是一个文字：
而不要：
我是段落的文字
列表
列表有三种
1.无序列表
- 百度
- 百度
- 百度
- 百度
ul是英语unordered list，无序列表。表达的是没有顺序关系的列表。
li是英语list item列表项的意思。
这是我们学习的第一个组合的标签：
ul的儿子标签，只能是li，不能是别的东西：
错误：
错误：
中国著名城市
- 北京
- 上海
- 广州
正确的：
中国著名城市
- 北京
- 上海
- 广州
错误的：
中国著名城市
- 上海
- 广州
li的数量没有限制，可以有无限多个。
li是一个非常经典的容器级标签，里面可以防止任何东西，甚至，再放置一个ul（二级列表），甚至三级列表。
注意下面的正确写法（这个案例想写对，真的不容易）：
-
直辖市
- 北京
- 天津
- 上海
- 重庆
-
广东省
- 广州
- 深圳
- 东莞
- 珠海
- 佛山
-
江苏省
- 南京
- 无锡
- 苏州
- 常州
- 扬州
网站上的使用：
至于小圆点，如何变化，是CSS的事情，不是HTML的事情。
2.有序列表
ol就是ordered list
中国著名城市
- 上海
- 广州
所有的注意事项和ul一样一样的。
3.定义列表
定义列表表示定义某事的一个列表。
- HTML语言
- HTML语言是基本的描述文字语义的语言，负责页面的结构
- CSS语言
- CSS是负责描述页面样式的语言
- JavaScript语言
- JavaScript是负责描述页面交互的语言
dl是英语definition list定义列表的意思；
dt是英语definition title定义标题的意思；
dd是英语definition description定义描述的意思；
dl中，交替出现dt和dd。dd是dt的解释说明，dd负责解释、描述、定义dt。
也可以单独成为一个dt和dd组，大部分前端工程师更喜欢这样的：
中国著名女演员
-
- 杨幂
- 出生在北京，老公是刘恺威
- 出演过仙剑奇侠传3
-
- 刘诗诗
- 老公是吴奇隆
- 出演过步步惊心
-
- angelababy
- 老公是黄晓明
这样的好处，就是样式更好管理一些（学CSS之后你就懂了）。
网页中的应用：
dd和dt都是非常经典的容器级标签，里面什么都能放。
放什么标签，和长得样子没有关系，一切看语义！！
表单
表单中的所有元素，都要放在一个form标签中：
form就是英语表格的意思。这个标签是一个功能型的标签，不是一个结构型的标签。form标签是后台哥哥来进行配置的。Ajax课程的第一天，我们讲解PHP语言，将介绍更多的表单提交的原理。那时候你就知道了form表单的两个属性method、action，现在先不说。
1.单行文本框
input是英语输入的意思，表示这是一个输入控件，所谓的控件就是用户能点的、能填的东西。
type是英语类型的意思，text是文本的意思。
这又是一个自封闭标签，不是一个标签对儿。因为它并不需要给别的文字添加语义。
至此，我们已经学习了3个自封闭标签：
value属性表示默认有的值：
2.单选按钮
男
女
你会发现，当行文本框和单选按钮，非常像
radio是收音机的意思，按其中的一个键，其他键就弹起来，所以我们的计算机就沿用了这个名字。
单选按钮，必须是互斥的，不能同时选中多个，所以它们必须有相同的name属性。至于是什么name无所谓，但是必须相同。
说道一个提升用户体验的东西，叫做label标签。点字的时候，小圆点就能被选择上。
label就是标签的意思，id就是id的意思。
现在，这个for属性和id的值是一样的，产生了绑定关系。这是我们学习的第一个有绑定关系的标签，后面还要学习一个。就把某一个label和input产生了绑定关系。
3.复选框
篮球
足球
羽毛球
checkbox就是复选框的意思，name属性虽然现在感觉没有啥用，但是还是应该设置为相同的。
4.密码框
[图片上传失败...(image-bed414-1550760431599)]
5.三种按钮
- button普通按钮
- submit提交按钮
- reset重置按钮
HTML4.01层面就是上面这些input系列：
6.下拉列表
select表示选择的意思，option是选项的意思。
这是一个组合使用的标签组，和ul、li的关系是一样的。
7.文本域
能够换行的输入文本的控件：
text文本，area区域。cols多少列，rows多少行，我们一般都是用css来控制。
这是一个对儿标签，里面的内容是默认文字。
HTML4.01层面（XHTML1.0层面），就这些，表单的东西，我们HTML5将扩充。
表格
1.基本表格
table就是表格、桌子；
tr就是table row表格行的意思；
td就是table dock表格小格的意思。
每一个tr就是一行，每行中的小格格就是td
品牌
价格
类别
宝马
30w
高级轿车
奔驰
50w
高级轿车
现代
20w
中级轿车
QQ
2w
低级轿车
这组标签三层嵌套。td的数量是一样多的。具有表头语义的小格格，用th替代td即可。
品牌
价格
类别
宝马
30w
高级轿车
本质上讲，th和td都是小格格，只不过th有表头小格格的语义；
2.单元格的合并
rowspan 行跨度
colspan 列跨度
小练习，制作下面的表格：
1
2
3
1
2
3
1
2
3
HTML还剩余的知识：
表格的其余组件比如tbody、thead
div、span标签
HTML注释、转义字符
废弃标签介绍
等等
思路：先输出表格，再考虑行跨度(rowspan)和列跨度问题（colspan）。
万公顷
万亩
万公顷
万亩
北京
123
123
123
123
123
123
123
123
北京
123
123
123
123
123
123
123
123
北京
123
123
123
123
123
123
123
123
北京
123
123
123
123
123
123
123
123