HTML学习笔记 -- day01 p、h、a、img标签简介
一、HTML骨架
1、标准骨架
Document
2、字符集
中文能用的字符集有：
UTF-8：字比较全
GBK：只有汉字
注意：我们用meta标签可以声明当前这个html文档的字库，但是一定要和保存的类型一样，否则乱码！（重点）
二、h 标签和 p 标签
1、h 系列
一级标题
二级标题
……
六级标题
2、p 标签
HTML标签是分等级的，HTML将所有的标签分为两种：容器级，文本级。
容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。
p标签是一个文本级标签。p 里面只能放文字、图片、表单元素。其他的一律不能放。
三、图片
1、HTML插入的图片类型
页面上可以插入图片，能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。
不能往网页中插入的图片格式是：psd、ai
2、语法
HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上
插入方法：
img 是英语image“图片”的简写
src 是英语source“资源”的简写，千万不要写成scr。
src 是img标签的属性，baby.jpg 是这个属性的值。
这个标签和我们之前学的，都不一样，因为这个标签不是“对儿”。自封闭标签，也称为单标签。
3、alt 属性
alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个图片无法被显示的时候，出现的替代文字（有的浏览器不支持）。
4、相对路径
（1）、绝对路径
（2）、相对路径
注意：../要么不写，要么就写在开头。
四、超链接
1、基本语法
结婚照a 是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。
a 标签是一个文本级的标签。
href 是英语hypertext reference超文本地址的缩写。
2、title：悬停文本
3、target：是否在新窗口中打开
结婚照blank就是“空白”的意思，就表示新建一个空白窗口。
也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了，就是在新的空白标签页中打开。
4、完整的超链接
链接的内容5、页面中的锚点
页面当中可以有锚点，所谓的锚点，就是一个小标记，这个小标记是用户不可察觉的，用户不知道这里有一个标记。
锚点用name属性来设置，一个a标签如果name属性（或者id属性），那么就是页面的一个锚点。
6、练习：制作可以点击的图片
五、列表
1、无序列表：ul
用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。
ul 就是英语unordered list，“无序列表”的意思。
li 就是英语list item ， “列表项”的意思。
注意：
li 不能单独存在，必须包裹在ul里面；反过来说，ul 的“儿子”不能是别的东西，只能有 li。
浏览器会默认的给无序列表小圆点的“先导符号”但是，我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
ul的儿子，只能是 li。但是 li 是一个容器级标签，li 里面什么都能放，如图片，段落，a 标签，甚至是 ul 都可以放。
Document
- 北京
- 上海
- 广州
- 铁岭
2、有序列表：ol
ol 里面只能有 li，li 必须被 ol 包裹。li 是容器级。
Document
- 北京
- 上海
- 广州
- 铁岭
3、定义列表
定义列表也是一个组标签，不过比较复杂，出现了三个标签：
dl 表示definition list 定义列表
dt 表示definition title 定义标题
dd 表示definition description 定义表述词儿
表达的语义是两层：
1) 是一个列表，列出了北京、上海、广州三个项目
2）每一个词儿都有自己的描述项。
Document
- 北京
- 国家首都，政治文化中心
- 上海
- 魔都，有外滩、东方明珠塔、黄浦江
- 广州
- 中国南大门，有珠江、小蛮腰
注意：
定义列表用法非常灵活，可以一个dt配很多dd：
还可以拆开，让每一个dl里面只有一个dt和dd，这样子感觉清晰一些。
dt、dd都是容器级标签，想放什么都可以。
六、div和span
1、div
div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。
div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己
2、span
span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。
span里面只能放置文字、图片、表单元素。 span里面不能放 p、h、ul、dl、ol、div。
3、div和span区别
span里面是放置小元素的，div里面放置大东西的
七、表单
1、什么是表单
表单就是收集用户信息的，就是让用户填写的、选择的。
欢迎注册本网站
form是英语表单的意思。form标签里面有action属性和method属性，在《Ajax》课程上给大家讲解。稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。
2、文本框
input 表示“输入”，指的是这是一个“输入小部件”，
type 表示“类型”，
text 表示“文本”，指的是类型是一个文本框的输入小部件。
注意：input 是一个自封闭标签，自此，我们学习的自封闭标签有：
3、密码框
input标签很神奇，又是文本框，又是密码框。
到底是啥？看type属性的值是什么，来决定。
如果type=”text” 文本框
如果type=”password” 密码框
4、单选按钮
radio是“收音机”的意思，input的type的值，如果是radio就是单选按钮
男
女
注意：单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
默认被选择，就应该书写checked=”checked”
5、复选框
也是input标签，type是checkbox。
请选择你的爱好：
睡觉
吃饭
足球
篮球
乒乓球
打豆豆
注意：复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）。
6、下拉列表
select就是“选择”，option“选项”。
select标签和ul、ol、dl一样，都是组标签。
7、文本域
text就是“文本”，area就是“区域”。
这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。
cols属性表示columns“列”，rows属性表示rows“行”。
值就是一个数，表示多少行，多少列。
8、三种按钮
按钮也是input标签，一共有三种按钮：
（1）、普通按钮
（2）、提交按钮
submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。
这个按钮点击，表单真的能提交。这个表单就会被提交到，form标签的action属性中的那个页面中去。
（3）、重置按钮
reset就是“复位”的意思。
9、label标签
input元素要有一个id，然后label标签就有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了。