title标签
网页的标题
title也是有助于SEO搜索引擎优化的
HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
h系列
到 都是标签：
一级标题
二级标题
……
六级标题
h是容器级标签，理论上可以放置p，ul只是法律上允许
p标签
段落，是英语paragraph“段落”缩写。
HTML标签是分等级的，HTML将所有的标签分为两种：容器级、文本级。
顾名思义，容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。
p标签是一个文本级标签。从学习p的第一天开始，就要死死记住：p里面只能放文字、图片、表单元素。其他的一律不能放。
试着把h放到p到里：
1
2 我是一个小段落
3
我是一个主标题
4
浏览器不允许你这么做，我们使用Chrome的F12审查，你会发现，浏览器自己把p封闭掉了，不让你去包裹h1。
再次强调，p是一个文本级的标签，p里面只能放文字、图片、表单元素。
图片
页面上可以插入图片，能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。
不能往网页中插入的图片格式是：psd、ai
HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。
插入方法：
1
img是英语image“图片”的简写
src 是英语source“资源”的简写，千万不要写成scr。
src是img标签的属性，baby.jpg是这个属性的值。
这个标签和我们之前学的，都不一样，因为这个标签不是“对儿”。自封闭标签，也称为单标签。
为什么？原因很简单，如果是对儿，里面就要有内容，表示给这个内容增加语义。比如
1哈哈哈哈，我是主标题啦！！！
图片就是一个图片，不需要给什么文字增加语义，所以就是自己一个人活得挺好：
1![]()
我们上午学习的meta也是自封闭标签：
1
alt属性
alt属性：
1
alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个图片无法被显示的时候，出现的替代文字（有的浏览器不支持）
相对路径
HTML中插入图片，所以现在有两个文件，一个html文件，一个是jpg文件。
我们关心的就是这两个文件的相对位置。即使这个网站项目，被用u盘拷给了别人，只要相对路径不变。图片一定能够正常显示。
相对路径不会出现这种情况：
1aaa/../bbb/1.jpg
../要么不写，要么就写在开头。
超级链接
一个网站，是由很多html网页组成的，html网页之间能够通过超级链接互相跳转，从而形成了“网”。
语法：
1结婚照
a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。
href是英语hypertext reference超文本地址的缩写
a标签的另外两个属性
title 悬停文本
target 是否在新窗口中打开
target实际上是“目标”的意思。
结婚照
blank就是“空白”的意思，就表示新建一个空白窗口。为毛有一个_ ，就是规定，没啥好解释的。
也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了，就是在新的空白标签页中打开。
完整的超级链接：
链接的内容
关于超级链接的herf里面也是相对路径
页面内的锚点：
锚点用name属性来设置，一个a标签如果name属性（或者id属性），那么就是页面的一个锚点。
1我的作品
2或者：
3我的作品`
如果有一个超级链接，指向页面中的锚点，那么就是：
1点击我就查看我的作品
a是一个文本级的标签
比如一个段落中的所有文字都能够被点击，那么应该：
p包裹a：
1
2 段落段落段落段落段落段落
3
而不是a包裹p：
1
2
3 段落段落段落段落段落段落
4
5
列表标签
无序标签
无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。
ul就是英语unordered list，“无序列表”的意思。
li 就是英语list item ， “列表项”的意思。
你会发现，这是我们学习的第一个“组标签”，就是要么不写，要么就要写一组。
1
2 - 北京
3 - 上海
4 - 广州
5 - 铁岭
6
也就是说，所以的li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
浏览器会默认的给无序列表小圆点的“先导符号”
但是，我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
有序标签
ordered list 有序列表，用ol表示
1
2 - 小苹果
3 - 月亮之上
4 - 最炫民族风
5
也就是说，ol和ul就是语义不一样，怎么使用都是一样的。
ol里面只能有li，li必须被ol包裹。li是容器级。
ol这个东西用的不多，如果想表达顺序，大家一般也用ul：
定义列表
定义列表也是一个组标签，不过比较复杂，出现了三个标签：
dl表示definition list 定义列表
dt表示definition title 定义标题
dd表示definition description 定义表述词儿
dt、dd只能在dl里面；dl里面只能有dt、dd
1
2 - 北京
3 - 国家首都，政治文化中心
4 - 上海
5 - 魔都，有外滩、东方明珠塔、黄浦江
6 - 广州
7 - 中国南大门，有珠江、小蛮腰
8
定义列表用法非常灵活，可以一个dt配很多dd：
定义列表用法非常灵活，可以一个dt配很多dd：
dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：
用什么标签，不是根据样子来决定，而是语义。
div和span
div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。
CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。
1
2 中国主要城市
3
4 - 北京
5 - 上海
6 - 广州
7
8
9
10
11 美国主要城市
12
13 - 纽约
14 - 洛杉矶
15 - 华盛顿
16 - 西雅图
17
div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己
span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。
就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
span里面是放置小元素的，div里面放置大东西的：
1
div标签是最最重要的布局标签，至于class是什么意思，下午说：
1
2
3
4
5
6
7
8
所以，我们亲切的称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。
表单
表单就是收集用户信息的，就是让用户填写的、选择的。
1
2 欢迎注册本网站
3
form是英语表单的意思。form标签里面有action属性和method属性
method属性表示用什么HTTP方法提交，有get、post两种
文本框
input表示“输入”，指的是这是一个“输入小部件”，
type表示“类型”，
text表示“文本”，指的是类型是一个文本框的输入小部件。
value表示“值”，value属性就是默认有的值，文本框中已经被填写好了：
密码框
1
也就是说，input标签很神奇，又是文本框，又是密码框。
到底是啥？看type属性的值是什么，来决定。
如果type=”text” 文本框
如果type=”password” 密码框
单选按钮
只能选一个，术语叫做“互斥”。
1 男
2 女
radio是“收音机”的意思，input的type的值，如果是radio就是单选按钮。
非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
1 男
2 女
默认被选择，就应该书写checked=”checked”
1
复选框
也是input标签，type是checkbox。
1
2 请选择你的爱好：
3 睡觉
4 吃饭
5 足球
6 篮球
7 乒乓球
8 打豆豆
9
复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）
下拉列表
select就是“选择”，option“选项”。
select标签和ul、ol、dl一样，都是组标签。
1
多行文本框（文本域）
text就是“文本”，area就是“区域”。
1
这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。
cols属性表示columns“列”，rows属性表示rows“行”。
值就是一个数，表示多少行，多少列。
三种按钮
按钮也是input标签，一共有三种按钮：
普通按钮：
1
button就是英语“按钮”的意思。value就是“值”的意思，按钮上面显示的文字。
提交按钮：
2
submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。
这个按钮点击，表单真的能提交。这个表单就会被提交到，form标签的action属性中的那个页面中去。
前端开发工程师，只需要关心页面的美、样式、板式、交互。至于数据的保存、读取，都是后台工程师做的事情。
3重置按钮：
1
reset就是“复位”的意思。
label标签
本质上讲，“男”、“女”这两个汉字，和input元素没有关系。
1 男
2 女
label就是解决这个问题的。
1
2
input元素要有一个id，然后label标签就有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了。
复选框也有label：
1
2
什么表单元素都有label。
HTML杂项
HTML注释
任何的程序、代码都有注释，注释就是给程序员看的，不影响程序的。
适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的。
1
2 头部
3
4 主要内容
5
6 页尾
HTML注释的语法
1
Sublime中按ctrl+/ 就是注释
字符实体
我们想在页面上输出“”这些字符，但是HTML认为这是一个标签，还没封闭。
1好高兴啊，今天我们学习了标签，老师说这个标签是主标题的语义。
所以，
1<
就是<的字符实体，什么意思呢？就是用常用字符表示这些符号的方式。
lt 就是英语less than 小于的意思；
1>
就是>的字符实体。
gt就是greater than 大于的意思。
1©
就是© 版权符号。
1
nbsp就是英语non-breaking spacing不打断空格的意思，就是空格。
所以：
1哈 哈
空出了4个字的格，可以防止空白折叠现象。
欢迎关注公共号
