HTML-02标签

HTML标签

html最主要的就是语法和标签，按照标签不同的作用可以将标签分成很多类。
基础标签，文本标签，布局标签，语义标签，超链接a标签，多媒体标签，列表标签，表格标签，表单标签，行内标签，块标签等（我们只需要将标签分为是行内标签还是块标签，方便后期html配合css进行布局）。接下来我们以标签的学习进入html的世界。

html注释

<!-- 注释内容 -->

hn *代表重要程度

这是标签两大类之中的快标签，什么是块标签？块标签独占一行，宽度默认为100%；

标题标签hn，一共六个。
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>

strong

文本加粗，行内标签，什么是行内标签？行内标签多个并排一行，宽高为内容大小。
<strong>一段文字</strong>

p *

段落标签，块标签。
<p>段落文字</p>

hr

水平线，块标签。注意/位置，是一个单标签。
<hr/>水平线

br

强制换行,块标签。
<br/>

b / strong

都是文本加粗，行内标签。

<b></b>
<strong></strong>

i / em

斜体，行内标签。

<i></i>
<em></em>

big|small

big字体变大，
small字体变小。
行内标签。

<big></big>
<small></small>

del

删除线，行内标签。
<del></del>

sup|sub|u|pre

上标|下标|下划线|预格式文本

span ****

典型布局标签，行内标签。他没有什么具体的格式表现，但是他用处非常多，配合css使用。
<span></span>

div *****

典型的布局标签，块标签。他独占一行，与css配合使用非常非常多。
<div></div>

header/nav/main/section/artical/aside/footer/tabel/form

都是语义标签，块标签，html5中标签名就代表了标签中内容的意思，这就是html5语义化思想。
header头部标签，nav导航标签，main主体，section节，artical文章，aside边栏，footer尾部。这几个标签其实与div的功能是一模一样的，只是更体现html5语义化。

table

表格

<table>
	<tr>
		<td></td>
	</tr>
</table>

table表格语法严格，必须嵌套规则。tr代表表格的行，有几对tr就有几行，td代表行里面的单元格，几个td代表他所属行里面有几个单元格。
扩展：

<table>
	<caption></caption>
	<thead>
		<tr>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
		</tr>
	</tfoot>
</table>

th表格头部单元格，caption表格的标题thead表格头部，tbody表格主体，tfoot表格尾部。这是html5语义化完整的表格。
表格合并（单元格之间的合并）：跨行合并（上下单元格）rowspan=“n”；跨列合并（左右合并）colspan=“n”。记得合并后删除多余单元格。

form表单 ****

表单：网页里收集数据。
语法：

<form action="URL" method="get|post">
	<input type="text" name="username"/>
	<button type="submit">提交<button>
</form>

表单三件套：
1：表单标签：属性包含了请求的URL地址和提交数据的方式。
2：表单域：就是各种框，如上面的文本框，还有密码框，单选框，复选框，等等等等。
3：表单按钮：提交按钮提交数据，重置按钮，普通按钮定义脚本处理工作。

1：表单标签：form

属性：必要的两种：一是action="URL"指明表单数据发往何处。二是method="get|post"指明文件传输的方式，get是默认方式，在网址后添加？传数据，它操作简单，便于使用，但不安全，传输的数据量较少，post数据添加到请求体，操作安全，传输的数据量大，但不方便使用。

2：表单控件：input|select|textarea|label|button

select下拉框

<select name="" size="">
	<option value=""></option>
	<option value=""></option>
	<option value=""></option>
</select>

select属性：name写下拉框名字；size写下拉框显示的个数。
option属性：value选项值，不写就按option标签中间为准；selected默认选中的内容。
textarea多行文本域

<textarea name="" cols="" rows=""></textarea>

textarea属性：name名字；cols宽度；rows高度。
label标注

<label><input type="radio">单选</label>

label标注作用就是点击label框起来的字也能点击选中的内容。
button按钮 ****
三个按钮

<button type="submit|reset|button">按钮</button>

type属性下值等于submit是提交按钮；reset重置按钮；button为普通按钮。

input表单控件标签最为最重要，这里作详细介绍。 ***
input的属性有很多type设置是什么框框， name设置框框的名字，用于提交数据， value设置框框的默认值，checked单选复选框的额选中项， maxlength设置框框最多输入的字数， readonly框框只能读， disabled框框只能看， placeholder框框里面的提示语。
其中type有很多很多类型，下面列举几个：text文本框；password密码框，掩码显示；radio单选框，checkbox复选框，单选复选框name属性必须一致，是用来把他们设置为一组选择元素，value属性是每个选项的传输的值；
file文件上传框；hidden隐藏域框；
html5中有很多新的框框：url框；color框；time框；email框；tel框；number框，等等有很多框，看到这些框的含义就知道如何正确使用这些框，这就是html5语义化特点的表现之一。
type属性还有三个按钮：submit，reset，button。这是一种使用方式，但是为了配合后面的js的学习，建议用button标签设置按钮。

列表标签 ***

三大列表，常用的是无序列表。
1.无序列表 ***

<ul>
	<li>内容</li>
</ul>

块标签，ul li必须组合出现。
ul是整个列表，定义整个列表的位置；li是列表项，可以有多个列表项。
li里面可以嵌套标签。
无序列表前面的小圆点是可以去除的。（添加样式属性style=“list-style:none”）。
2.有序列表

<ol>
	<li></li>
</ol>

语法跟无序列表一样，不一样的是列表项前是数字12345…。
ol的li前可以是数字（默认是数字），也可以是大小写字母，大小写罗马字母，用type属性=“A|a|I|i”。
3.定义列表

<dl>
	<dt>标题</dt>
	<dd>内容</dd>
</dl>

超链接a标签 ****

<a href="" target="">链接的名字<a/>
超链接就是页面与页面的跳转。
分类：内部链接，外部链接，锚点链接
外部连接：当前网站跳转到其它的网站（不同网站之间跳转）
内部连接：当前网站的一个网页跳转到另一个网页（相同网站内的跳转）。
锚点连接：当前网页内部各个部分之间进行跳转（网页内容太多的时候用）。
属性（常用的属性）：href链接的目标路径。target打开链接后网页窗口的方式：_self默认当前窗口打开，_blank新窗口打开。
路径：相对路径与绝对路径 ****
1.绝对路径：（1）协议: http:// （2）基于网站根目录：/
2.相对路径：以当前目录为出发点，查找资源的路径
当前目录 ./ （可不写）
上一级目录 …/
下一级目录 目录名/

img ***

img图片标签，单标签 , 支持文件：jpg,bmp,png,gif

<img src="URL" alt="加载失败时显示的内容" width="px" title="鼠标移上去显示的文字" />

audio

audio声音标签，双标签 , 支持文件：MP3、 Ogg Vorbis (chrome)

<audio src="URL" controls="显示控件" >书写不支持的文字信息</audio>

video

video 视频标签，双标签 ， 支持文件Ogg、MPEG4、WebM

<video src="URL" controls="controls" height="px" width="px" poster="播放前可添加的图片地址"  autoplay自动播放 muted静音 > 错误信息</video> 

（自动播放必须和静音一起使用）

特殊符号

html中有一些特殊意义的符号，它会被解析为标签，从而不能正常显示

<!--空格-->
&nbsp;
<!--大空格-->
&emsp;

还有很多请网上自行了解。