HTML基础知识二

知识点导航:

* h 和 p 
* div 和 span
* 列表
* 图片
* 超级链接
* 表单

一、h 和 p

HTML标签是分等级的，HTML将所有的标签分为两种：

1.容器级 ( 里面可以放置任何东西 )
2.文本级 ( 只能放置文字、图片、表单元素 )

• h 系列

 到 
 都是标签
 一级标题
 二级标题
……
 六级标题

h 是容器级的标签。理论上里面可以放置p、ul，只是法律上的允许，在语义上，不要这么写。

• p 标签

p 标签是一个文本级标签,p里面只能放文字、图片、表单元素,其他的一律不能放

---

二、div 和 span

div 和 span 是非常重要的标签，div 的语义是 division “分割”；span 的语义是 “跨度，范围”，在CSS中，这两个是最最重要的 “盒子”，非常重要的布局标签

* div 是一个容器级标签 
* span是一个文本级标签 ( 只能放文字，图片，表单元素 )

---

三、列表

列表共有三种，都是以组标签的形式存在：

1.无序列表
2.有序列表
3.定义列表

• 无序列表

  
    
  北京
    
  上海
    
  广州
  
  

ul 是英语 unordered list，也就是 无序列表的意思
li 是英语 list item, 列表项的意思
浏览器默认效果每项前面会有个先导小圆点

注意

• li 标签是不能单独存在，必须包裹在 ul 标签里面；ul 不能包裹其他标签， 只能包裹 li 标签
• li 标签是一个容器级标签

---

• 有序列表

  
    
  北京
    
  上海
    
  广州
  
  

浏览器默认效果每项前面有对应有序数字，使用的不多

• 定义列表

  
    
  北京
    
  国家首都，政治文化中心
    
  上海
    
  魔都，外滩，东方明珠
  
  

定义标签也是一个组标签，但是它里面出现的三种标签：
dl 表示 definition list 定义列表
dt 表示 definition title 定义标题
dd 表示 definition description 定义表述词
dd是用来描述 dt 的，用法比较灵活，一个 dt 可以搭配多个 dd

dt 和 dd 都是容器级标签

---

四、图片

• 语法

   //自封闭标签，也称为单标签
  

HTML 页面不是直接插入图片，而是插入图片的引用地址
img是英语 image “图片” 的简写, src 是英语source “资源” 的简写
img 可以看做是一个文本级的标签,可以当做文本来处理

---

• 属性

src 是 img 标签的属性，baby.jpg 是这个属性的值
alt是英语alternate“替代”的意思，就表示不管因为什么原因，当这个图片无法被显示的时候，出现的替代文字（有的浏览器不支持）

---

• 支持的图片类型

  页面上可以插入图片，能够插入的图片类型是：jpg ( jpeg )、gif、png、bmp
  不能往网页中插入的图片格式是：psd、ai

---

• 相对路径

  上一级    ../
  当前级    .
  下一级    /
  

---

五、超级链接

• 语法

  结婚照
  

a 是英语 anchor “锚” 的意思，它一个文本级的标签，可以当做文本来处理

• 属性

title 悬停文本
结婚照
target 是否在新窗口中打开

  结婚照

blank就是“空白”的意思，就表示新建一个空白窗口.也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了，就是在新的空白标签页中打开
锚点
锚（显示在页面上的文本）
使用 name 属性 或者 id 属性 创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了

示例：
首先，我们在 HTML 文档中对锚进行命名( 创建一个书签 ) :
基本的注意事项 - 有用的提示
然后，我们在同一个文档中创建指向该锚的链接：
有用的提示
也可以在其他页面中创建指向该锚的链接：
有用的提示
将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了

---

六、表单

  
所有的表单内容，都要写在form标签里面

表单是用来收集用户信息的
form 是英语表单的意思，form标签里面有 action 属性 和 method 属性，action 属性表述表单将提交到哪， method 属性表示表单用什么HTTP方式提交

• 文本框

input 表示输入
type 表示类型
text 表示文本

• 密码框

type属性的值决定input是什么类型的输入框

• 单选按钮

  男
  女
  

type属性值为radio时，表示单选按钮，它天生是不能互斥的，如果想互斥的话，必须要有相同的 name 属性
若需要默认被选中，增加checked属性值

• 复选框

  吃饭
  睡觉
  打豆豆
  

复选框的type类型值为 checkbox， 虽然不需要互斥， 但最好也是相同的 name

• 下拉列表

  
    北京
    上海
    深圳
  
  

select 标签和 ul ol dl 一样都是组标签

• 多行文本框（ 文本域 ）

cols 属性表示 columns “列”，rows 属性代表“行”
标签对内如果有内容则为默认文字

• 三种按钮

   
   提交按钮
  重置按钮
  

type类型值为button为普通按钮，value为按钮上显示的文字
type类型值为submit为提交按钮，无value值自动回有“提交”文字
type类型值为reset为重置按钮

• label 标签

  男>
  女
  

input 的 id 属性和 lable 的 for 属性建立了绑定关系，什么表单元素都有 label