HTML标签介绍

HTML标签

<div></div>：没有任何含义，相当于容器，是块级元素。
<span></span>：没有含义，表示范围，是内联元素。

1、结构标签：

h5添加很多结构标签

<header>
<content>
<main>
<section>：章节
<aside>：侧边栏
<footer>：底部

<nav>：导航
<hgroup>：标题组
<acticle>：文章
<figure>：一组媒体对象及文字（列表）
<figcaption>： figure元素的标题，不能单独使用，结合figure使用

标签的学习：

• 在浏览器的默认样式
• 标签含义

2、基本标签

标题标签：

h1-h6：数字越大字体越小

段落标签：

<p></p>：换段，行间距变大

换行：

<br/>

加粗

<strong></strong>：样式，加粗；加重语气
<em></em>：样式，斜体；加重语气
<b></b>，<i></i>：纯样式标签，不建议使用

水平线：

<hr/>

文本标签

<q>：短引用。样式：加双引号
<blockquote>：长引用。样式：加了缩进，段前段后间距变宽
<pre>：预格式化文本。
<code>：显示代码。样式：没有换行，字体样式不一样
<address>：地址。样式：换行且斜体显示

图片标签

<img src="图片地址" height="" width=""/>
src：
相对地址：
	./：当前路径
	../：返回上一级目录
	/：进入到下一级：img/：表示进入img文件夹
	               /img：根目录
绝对地址：不支持以服务的形式运行的网页，只支持以文件的形式。
title：图片标题
alt：替换文本。当图片不能正常显示时使用。

超链接标签

<a href="链接的目标地址" target=""></a>
target：_blank：在新窗口中显示网页
		_self：在当前窗口显示网页（默认）
		_top：在顶层窗口显示网页
		_parent：在父级窗口显示网页
		name：在指定name的窗口中显示网页

三种链接

1、页面链接：
<a href="页面地址"></a>
2、锚点链接：
定义锚点：<a name=""></a>
跳转锚点：
	同一页面：<a href="#锚点名称"></a>
	不同页面：<a href="页面地址#锚点"></a>
（空链接：<a href="#"></a>）
3、功能链接：
邮件：<a href="mailto:邮件接收人"></a>
链接到第三方网站必须加：http://或https://

列表标签

1、有序列表（order list）
	<ol>
		<li></li>
	</ol>
	type = 1 / A / a / I / i
	默认：1
2、无序列表（unorder list）
	<ul>
		<li></li>
	</ul>
	type = circle / square / disc
	默认：disc
3、定义列表（define list）
	<dl>
		<dt></dt>
		<dd></dd>
	</dl>

3、表格

表格标签

thead：表格的头部
tbody：表格的内容
tfoot：表格的底部

tr：行
	th：表头
	td：单元格
	
caption：标题

属性

<table>
	border：表格边框宽度
	cellpadding：单元格与文字之间的距离
	cellspacing：单元格之间的空白
<tr>
	align：表格行中内容的水平对齐方式（取值：left、center、right）
	valign：表格行中内容的垂直对齐方式（取值：top、middle、bottom）
<td>
	align：单元格中内容的水平对齐方式（取值：left、center、right）
	valign：单元格中内容的垂直对齐方式（取值：top、middle、bottom）
	colspan：合并列
	rowspan：合并行

其他标签

音频标签

<audio src="音频文件地址"></audio>

视频标签

<video src="视频文件地址"></video>

4、iframe内联框架

<iframe src="" frameborder="" name="" width="宽度" height="高度">
src：设置另一个网页文档的路径和文件名
frameborder：设置内联框架的边框样式
name：设置内联框架的名称，配合a标签的target属性，可以实现链接在指定的内联框架中显示

5、HTML元素划分

内联元素：不换行 不可以设置宽高
块级元素：换行 可以设置宽高
内联块级元素：不换行 可以设置宽高

嵌套规则

1、块级元素可以嵌套内联元素和某些块级元素，但内联元素只能嵌套内联元素不能嵌套块级元素。

<div><h1></h1><p></p></div>正确
<a href="#"><span></span></a>正确
<span><div></div></span>错误

2、块级元素不能放在<p>里面

<p><ol><li></li></ol></p>错误
<p><div></div></p>`错误

3、有几个特殊块级元素只能包含内联元素，不能包含块级元素。这几个特殊标签是h1~h6、p、dt。

4、li内可包含div标签

<li><div></div></li>

5、块级元素与块级元素并列、内联元素与内联元素并列

<div><h2></h2><p></p></div>正确
<div><a href="#"></a><span></span></div>正确
<div><h2></h2><span></span></div>错误

6、form表单

表单作用：收集用户信息，并提交给服务器（应用：登录、注册、填表）

结构：
	<form action="提交地址" method="get / post" name="" enctype="">
	</form>
	
get：用户信息显示在url上，信息不安全，数据有限制（一般为：4kb）。
post：数据存储在发送请求的头部信息中，信息相对安全，数据大小没有限制。
name：表单名称，每个表单都有唯一的名称，同一页面中不能重名。

表单enctype属性：

enctype（编码类型）
取值：
	text/plain：文本类型
	application/x-www-form-urlencoded：默认编码
	multipart/form-data：只支持post支持，主要用含有文件的表单提交。
	注：有文件提交的表单，必须使用post提交

表单元素（接收用户输入的元素）

格式：<input type="" name="" />

type取值：
	text
	password
	checkbox
	radio

文本框（text）属性：
	value：值
	maxlength / minlength：最大/最小长度
	size：输入框宽度
	name：名称
	placeholder：设置输入框的提示信息（h5推出）

密码框（password）属性：
	看不到用户输入的内容
	属性与文本框一致

复选框（checkbox）属性：
	value：值
	name：名称
	checked：选中
注意：一组复选框的name要相同，value值不显示给用户。

单选框（radio）属性：
	value：值
	name：名称
	checked：
注意：一组单选框的name要相同，value值不显示给用户。

文件域（file）
隐藏域（hidden）：
	<input type="hidden" />

h5新增表单元素

type：
number
email
color
range

文本域（多行文本框）

<textarea name="" cols="" rows=""></textarea>
注意：中间格式换行对显示会有影响

下拉列表

<select size="" multiple="">
	<option value="" selected="selected"></option>
	<option value=""></option>
</select>
属性：
	selected：默认选中
	size：显示的数量
	multiple：多选

按钮

提交按钮：<input type="submit" value="提交" />
重置按钮：<input type="reset" value="重置" />
普通按钮：<input type="button" value="" />
图片按钮：<input type="image" src=""  />
注意：图片按钮里面的图片具有提交网页的作用。
	  value的值显示在按钮上。

h5按钮

<button></button>：默认提交类型
<button type="button"></button>
<button type="reset"></button>
<button type="submit"></button>

重点：
表单提交，是以元素的name为准，没有写name的元素不会进行提交。

表单属性

readonly="readonly"
readonly：只读。一般和文本框结合使用。
disabled="disabled"
disabled：禁用。一般和按钮结合使用

文本标注

	<input type="text" id="元素的id" />
	<lable for="元素的id"></lable>

域标签：filedset
域标签标题：legend

原则
语义化：见名知义

属性分类：
普通属性：neme、id、class
特殊属性：href、src
自定义属性：属性名由用户取，但是h5给了一个规范，自定义属性加一个data-的前缀。