H5第二课：常用标签

H5常用标签

• 标签：
• 属性：name=“wangcai”
• 元素：汪财

name属性
所有标签都有name属性
name标明他们是一组
例：在radio属性中只有使用name属性将男女划分为一组才可以在其中进行单选

单位问题
html不支持带单位
css必须带单位

1、文字

文字可以直接写在body中，但是不推荐！ 空格和换行只是为了代码优美，在页面上没有效果。

1.1 常用标签

• h1 – h6：标题

加粗，字体大小逐渐缩小，前后自带换行，有间距。

• p：段落

前后自带换行，有间距。

• br：换行
• hr：水平线

1.2 过时的标签（css3取代）

font、b、i、u、s、center

2、图片

img标签

	<img   src="images/1.jpg"   height="200"  width="200">

3、声音

audio标签

• controls 显示控件
• loop 循环播放
• autoplay 自动播放（疑已改革，可以使用js实现）

子标签source:

• src 执行播放的声音文件路径

<audio controls loop>
        <source src="images/horse.mp3">
</audio>

audio支持的声音文件格式：

浏览器	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	YES	YES	YES

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

4、视频

video标签

• controls 显示控件
• loop 循环播放
• autoplay 自动播放（muted静音时可以自动播放）

子标签source

• src 执行播放的声音文件路径

<video  controls   loop  autoplay>
        <source  src="images/movie.mp4">
</video>

vidio支持的文件格式：

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (从 Opera 25 起)	YES	YES

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

5、超链接

5.1 页面之间跳转

a标签

• href 跳转页面的url
• target 在哪里显示链接的资源 ，_self 在当前窗口中显示链接，_blank打开一个新窗口显示链接

5.2 页内位置之间跳转

第一步：定义锚点

< a  name="锚点名称">   < /a >

第二步：定义超链接

< a  href="#锚点名称"> 链接显示内容  < /a >

6、列表

将多行内容，左对齐排列

• 无序列表ul
• 有序列表ol
• 子标签li

7、表格

将内容以多行多列的形式，整齐排列。

• table：表格
• tr：行标签
• th：列标签（加粗显示）
• td：列标签

单元格合并

td的属性–rowspan所占的行数 colspan所占的列数

8、表单

页面上用于用户输入信息的元素统称。
使用场景：注册、登录、添加、修改、搜索。

form标签

• action 数据提交给谁
• method 提交方式get或post

子标签

• Input标签

type属性： text、password、radio、checkbox、file、hidden、submit、reset、button

• textarea：文本框
• select（option）：下拉列表

9、框架标签

在同一个窗口中显示多个页面（非同时）
两种实现方式：

（1）frameset（out）

将窗口划分为多个区域，每个区域显示一张页面。

（2）iframe（推荐）

一个窗口中显示一张页面，在页面中占用一块区域用来显示其他页面。
经典应用：后台管理导航页

<a href="新页面" target="xiaomi">小米官网</a><br>
<iframe name="xiaomi" src="本页面" frameborder="0" scrolling="no"></iframe>

10、块元素

div

块元素：可以占用很多行

和p类似：

​ p前后有换行；div也有。

​ p是容器，存储一段文字；div，也是容器，存储任何元素。

​ p前后默认有间距；div默认没有。

html5的语义元素:本质都是div
header、footer、nav、article、section、aside

span

行内块元素：只能占用一行中的一部分。

特点：

一行中的一块。

前后没有换行。

默认前后没有间距。