html标签总结

标签名	属性	效果
html		网页总标签
br		换行
hr		画出水平分割线
em		起强调作用
blockquote		表明内容是引用
strong		内容显示为粗体
ol		创建有序列表
ul		创建无序列表
li		用于创建列表中的具体的项
a	href mailto:email target:_blank	网页链接到别的界面，href表示链接的网址。
img	src=”” alt=”” 当图片无法显示时显示文字 title=”” 鼠标点击图片时显示	插入图片
figcaption
figure		hhtml5中可以对图形进行描述

表格

1、实例：

<table>
			<tr>
				<th>1</th>
				<th>2</th>
			</tr>
			<tr>
				<td>
					40
				</td>
				<td>30
					
				</td>
			</tr>
		</table>

2、属性标签：

属性	效果
colspan	跨多少列
rowspan	跨多少行

表单

1、实例：

<form action="sub.php" method="get/post">
    <!--单行文本框-->
    username:<input type="text" name="username" length="20"><br/>
</form>

2、组合表单元素：

<fieldset>
    <legend>个人信息</legend>
    <label>姓名</label><input type="text" name="name"><br>
    <label>年龄</label><input type="text" name="age"><br>
    <label>职务</label><input type="text" name="work"><br>
    <input type="submit" value="提交">&nsbn<input type="reset" value="清空">
</fieldset>

3、html5验证表单：

<form>
	<label>姓名</label><input type="text" name="name" required="required"><br>
	<label>年龄</label><input type="text" name="age" required="required"><br>
	<input type="submit" name="提交">
</form>

目前只有chrome和opera支持该特性。需要添加required属性。

4、html5日期控件：

1 2	<label>生日</label><input type="date"> <!--type属性值为date表示插入一个日期控件-->

5、html5邮件、url输入控件、搜索控件

1
2
3

<label>电子邮件</label></label><input type="email">
<label>url</label><input type="url">
<label>搜索</label><input type="search" name="search" placeholder="请输入搜索内容">

其他标记

文档类型

1	<!DOCTYPE html>

注释

<!--注释-->

块级元素

有些元素在浏览器中显示的过程中总是要另起一行，称为块级元素。如div。

内联元素

有些元素在浏览器中显示过程中总是和相邻元素处在同一行内，称为内联元素。如span。

内联框架

在网页中开启另一个小窗口，可以看到另一个网页。常用在网页中显示地图。

1	<iframe width="450" height="350" src="http://maps.google.co.uk/maps?q=moma+new_yourk&output=embed"></iframe>

添加视频信息

1、视频

属性：

属性名称	属性值	属性解释
src	视频路径
poster	图片路径	用于在未播放视频时在视频中显示的图片
width,height	指定播放视频的宽度和高度
controls		如果使用该属性，表明需要提供浏览器默认的播放器
autoplay		表明浏览器会自动播放视频
loop		表明在播放完视频之后会重复播放视频
preload	none/auto/metadata	在用户不点击播放时不加载视频/在加载页面时加载视频/只收集少量的视频信息

1
2
3

<video src="video/puppy.webm" poster="images/puppy.jpg" controls autoplay >
		
</video>

若是有多个视频，可以使用标签进行操作，代替vedio标签中的src属性。在vedio标签中包含多个视频。

添加音频信息

1	<audio></audio>

属性与视频属性相同。