知识点导航:
* h 和 p
* div 和 span
* 列表
* 图片
* 超级链接
* 表单
一、h 和 p <p>
HTML标签是分等级的，HTML将所有的标签分为两种：
1.容器级 ( 里面可以放置任何东西 )
2.文本级 ( 只能放置文字、图片、表单元素 )
-
h 系列
<h1> 到 <h6> 都是标签
<h1></h1> 一级标题
<h2></h2> 二级标题
……
<h6></h6> 六级标题
h 是容器级的标签。理论上里面可以放置p、ul，只是法律上的允许，在语义上，不要这么写。
-
p 标签
p 标签是一个文本级标签,p里面只能放文字、图片、表单元素,其他的一律不能放
二、div 和 span<p>
div 和 span 是非常重要的标签，div 的语义是 division “分割”；span 的语义是 “跨度，范围”，在CSS中，这两个是最最重要的 “盒子”，非常重要的布局标签
* div 是一个容器级标签
* span是一个文本级标签 ( 只能放文字，图片，表单元素 )
三、列表<p>
列表共有三种，都是以组标签的形式存在：
1.无序列表
2.有序列表
3.定义列表
-
无序列表<p>
<ul> <li>北京</li> <li>上海</li> <li>广州</li> </ul>
ul 是英语 unordered list，也就是 无序列表的意思
li 是英语 list item, 列表项的意思
浏览器默认效果每项前面会有个先导小圆点
注意
- li 标签是不能单独存在，必须包裹在 ul 标签里面；ul 不能包裹其他标签， 只能包裹 li 标签
- li 标签是一个容器级标签
-
有序列表<p>
<ol> <li>北京</li> <li>上海</li> <li>广州</li> </ol>
浏览器默认效果每项前面有对应有序数字，使用的不多
-
定义列表<p>
<dl> <dt>北京</dt> <dd>国家首都，政治文化中心</dd> <dt>上海</dt> <dd>魔都，外滩，东方明珠</dd> </dl>
定义标签也是一个组标签，但是它里面出现的三种标签：
dl 表示 definition list 定义列表
dt 表示 definition title 定义标题
dd 表示 definition description 定义表述词
dd是用来描述 dt 的，用法比较灵活，一个 dt 可以搭配多个 dd
dt 和 dd 都是容器级标签
四、图片<p>
-
语法
<img src="baby.jpg" alt="巴黎结婚照" /> //自封闭标签，也称为单标签
HTML 页面不是直接插入图片，而是插入图片的引用地址
img是英语 image “图片” 的简写, src 是英语source “资源” 的简写
img 可以看做是一个文本级的标签,可以当做文本来处理
-
属性
src 是 img 标签的属性，baby.jpg 是这个属性的值
alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个图片无法被显示的时候，出现的替代文字（有的浏览器不支持）
-
支持的图片类型
页面上可以插入图片，能够插入的图片类型是：jpg ( jpeg )、gif、png、bmp
不能往网页中插入的图片格式是：psd、ai
-
相对路径
上一级 ../ 当前级 . 下一级 /
五、超级链接<p>
-
语法
<a href="1.html">结婚照</a>
a 是英语 anchor “锚” 的意思，它一个文本级的标签，可以当做文本来处理
-
属性<p>
title 悬停文本
<a href="09_img.html" title="很好看哦">结婚照</a>
target 是否在新窗口中打开
<a href="09_img.html" title="很好看哦" target="_blank">结婚照</a>
blank就是“空白”的意思，就表示新建一个空白窗口.也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了，就是在新的空白标签页中打开
锚点
<a name="label">锚（显示在页面上的文本）</a>
使用 name 属性 或者 id 属性 创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了
示例：
首先，我们在 HTML 文档中对锚进行命名( 创建一个书签 ) :
<a name="tips">基本的注意事项 - 有用的提示</a>
然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>
也可以在其他页面中创建指向该锚的链接：
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了
六、表单<p>
<div>
<form>所有的表单内容，都要写在form标签里面</form>
</div>
表单是用来收集用户信息的
form 是英语表单的意思，form标签里面有 action 属性 和 method 属性，action 属性表述表单将提交到哪， method 属性表示表单用什么HTTP方式提交
-
文本框
<input type = "text" />
input 表示输入
type 表示类型
text 表示文本
-
密码框
<input type ="password" />
type属性的值决定input是什么类型的输入框
-
单选按钮
<input type ="radio" name ="gender" />男 <input type ="radio" name ="gender" />女
type属性值为radio时，表示单选按钮，它天生是不能互斥的，如果想互斥的话，必须要有相同的 name 属性
若需要默认被选中，增加checked属性值
<input type ="radio" name ="gender" checked ="checked" />
-
复选框
<input type ="checkbox" name ="hobby" />吃饭 <input type ="checkbox" name ="hobby" />睡觉 <input type ="checkbox" name ="hobby" />打豆豆
复选框的type类型值为 checkbox， 虽然不需要互斥， 但最好也是相同的 name
-
下拉列表
<select> <option>北京</option> <option>上海</option> <option>深圳</option> </select>
select 标签和 ul ol dl 一样都是组标签
-
多行文本框（ 文本域 ）
<textarea cols ="30" rows ="10" ></textarea>
cols 属性表示 columns “列”，rows 属性代表“行”
标签对内如果有内容则为默认文字
-
三种按钮
<input type ="button" value ="普通按钮" /> <input type ="submit" /> 提交按钮 <input type ="reset" />重置按钮
type类型值为button为普通按钮，value为按钮上显示的文字
type类型值为submit为提交按钮，无value值自动回有“提交”文字
type类型值为reset为重置按钮
-
label 标签
<input type ="radio" name ="gender" id ="male"/><label>男></label> <input type ="radio" name ="gender" id ="female"/><label>女</label>
input 的 id 属性和 lable 的 for 属性建立了绑定关系，什么表单元素都有 label
