HTML5基本标签的使用

第一次写这种东西，肯定存在许多不足之处，还望大家多多担待，我会继续加油的！我也是一名HTML5的初学者，只是将这几周在课堂上所听到的东西分享给大家。

下面给大家介绍一下H5！

一、<!DOCTYPE html>

HTML的文档类型声明：声明这个文件是HTML5文件，让浏览器按照HTML5的标准对代码进行解释执行。

要注意的是：文档声明在HTML文件中，必须要有，而且必须写在文件最上方。如果不写文档类型声明，浏览器会默认按照兼容模式运行，可能会出现不明BUG。（这个东西在HBuilder中一般都会直接给出，不用自己写）

二、<head></head>标签

作用：用于描述网页的一些关键信息。比如网页的配置、设置、关键字等等。。。这些信息，大多在浏览器看不到，但是对网页的解析至关重要！

1、<meta charset="utf-8" />

作用：设置网页的字符集编码格式为UTF-8格式。

常见的字符编码格式：

（1）、GB2312:国标码，简体中文的编码格式；

（2）、GBK：扩展的国标码，比国标码多了更多的编码格式，简体中文；

（3）、UTF-8:万国码，可以兼容绝大多数语言的编码。（这个是我们经常用的一种编码格式）

2、 <meta name="keywords" content="" />

作用：设置网页的关键字，有助于搜索引擎的搜索。
name="keywords" 表示这个meta标签用于设置网页的关键字；
content="" 表示关键字的详细信息，多个关键字之间用英文逗号分隔。

3、<meta name="description" content="" />　

　　作用：设置网页的描述信息（搜索引擎搜索时，标题下面的一段文字！非常重要！！！）
　　name="description" 表示这个meta标签用于设置网页的描述信息；
　　content="" 表示描述信息的详细内容。

4、<title></title>标签
　　title：网页的标题，显示在浏览器选项卡上面的文字

5、<link rel="icon" href=""/>　　

　　链接网页的小图标：网页选项卡上的小图片。
　　rel="icon" 表示连接的文件，将作为网页的icon图标；
　　href="img/书.jpg" href表示图标图片所在的路径位置。

三、 <body>部分

从功能上，HTML标签分为“块级标签”和“行级标签”
3.1【块级标签和行级标签的区别】
1、块级标签自动换行，前后隔一行；行级标签不会自动换行，从左往右依次显示。
2、块级标签的宽度默认是100%；行级标签的宽度由文字内容撑开。
3、块级标签可以设置宽度、高度、边距等属性；行级标签不能设置上述属性。
从写法上，HTML标签分为“成对标签”和“自闭和标签（空标签）”。
1、成对标签：成对出现，有开始标签必须有结束标签，内容包裹在两个标签内。例如<h1></h1>、<p></p>、<title></title>等
2、自闭和标签（空标签）：只有一个标签，用/表示标签的自动闭合（/可以省略）。例如<hr/>、<link/>、<meta/>。

3.2【常见的块级标签】

1、h标签：标题标签，默认加粗，h1最大，h6最小

2、hr标签：表示一条水平线标签　　

3、P标签：段落标签。表示网页中的一段文字。

4、br标签：换行符号，在代码中敲回车，在网页中并没有作用，必须使用br标签换行。

5、blockquote：块引用标签。表明一段话是从其他网站引用的。
有一个重要属性：cite=""表示这段话的引用来源，常写一个网站地址。浏览器默认显示效果整段向后缩进。

6、pre标签：预格式标签，与p标签不同的是pre标签会保留代码中的空格与回车，在网页中直接显示。

最常用的作用：是在网页中显示代码段，保留代码段格式。

3.3【基于布局的块级标签】

一个列表由多个li组成　

1、有序列表ol order list

2、无序列表ul unorder list

3、定义列表dl
定义列表包含两部分：
<dt></dt>:定义列表的标题，标题顶格显示，一般一个定义列表只有一个标题。
<dd></dd>:定义列表的描述，相对于标题向后缩进显示，一个定义列表可以有多个描述项。

<dl>
<dt>第一列表的标题</dt>
<dd>定义列表的描述项1</dd>
<dd>定义列表的描述项2</dd>
<dd>定义列表的描述项3</dd>
</dl>

4、组合标签figure（这一部分相对了解一下）
包含两部分：
img 一张图片
figcaption 图片的标题，在图片下方显示

<figure>
<img src="img/书.jpg" />
<figcaption>图片的标题</figcaption>
</figure>

5、div分区标签，用于配合CSS使用，将网页划分为区块，可以包裹各种标签。

3.4【常见的行级标签】

1、span标签：用于包裹行内的文字，常配合CSS使用，修改文字样式

2、[em/strong/i/b的区别]

（1）、em和i都能倾斜，strong和b都能加粗。但是，em和strong多了一层强调的含义（强调的作用：让搜索引擎快速抓取网页的重点部分，实现代码的语义化。）

（2）、em和strong都有强调的作用，但是em是倾斜，strong是加粗，而且strong的强调程度要比em更高。

（3）、强调标签可以多层的嵌套。

3、blockquote、q、cite，都是引用标签，其区别在于:

（1）、显示效果上：blockquote整段缩进、q加引号、cite倾斜

（2）、从功能上：blockquote用于引用一整段内容，是块级标签；q用于引用一句话，是行级标签；cite常用于引用作品名、书画名等。

4、img图片标签

（1）、src属性：表示图片所在的路径。

[路径的表示方式]

（1）、网络上的图片地址可以直接使用，并不建议使用。（网络上的图片是随时更换的）

（2）、可以使用图片的绝对路径。但是严禁使用绝对路径，因为绝对路径使用file：//协议，网页使用http：//协议打开无法访问file：//协议的文件

（3）、使用相对路径，推荐使用的唯一方式。

① 图片在当前文件的下一层，“文件夹名/图片名”。

② 图片在当前文件的同一层，直接写图片名就可以了。

③ 图片在当前文件的上一层，”../图片名“。

注意：图片必须包含在项目里面，不能退出项目根目录

（4）、width height 宽度、高度属性

（5）、title属性：鼠标指上时显示的文字。

（6）、alt属性：图片加载不出来的时候显示的内容，省略alt将默认显示title中的内容。

（7）、align：图片周围的文字，相对于图片的排列方式，有以下几个可选值: top文字居上、center文字居中、bottom文字居下。

5、a超链接标签

（1）、href属性：超链接跳转的地址，可以是网络连接，也可以是本地html文件的相对路径。

（2）、target属性：超链接新页面打开的位置。-self在当前页面打开（默认）、-blank在新页面打开

（3）、title属性：鼠标指在超链接上显示的文字。

（4）、锚链接：点击超链接，可以跳转到页面的制定位置（锚点）

①在页面的指定位置定义一个锚点： <a name="top"></a>

②将超链接的href属性改为“#锚点名称” <a href="#top">点击返回顶部</a>

③跳转到其它页面指定锚点的方式 <a href="其它页面地址.html#锚点名称">点击跳转其它页面指定位置</a>

3.5【表格table】

表格中的每一行用tr表示，一行中的每一单元格用td表示；th表示的是表头，表头中的文字默认加粗居中，是用来替换td。

【table的常用属性】

1、border：给表格加边框。默认给所有的td加边框，并且给整个表格加外边框。当增大border值时，td上的边框不变化，只有最外层边框变宽。

2、cellspacing:表示单元格间距。cellspacing="0"表示单元格间距为零，但线仍为两条线宽。

3、cellpadding：单元格中文字与单元格边框的距离。（单元格内边距）

4、height：表格的高度；width：表格的宽度。

5、align：设置表格在浏览器中的位置，（不建议使用），其可选值仅有左中右三种（left、center，right）。

6、bgcolor：背景色； bordercolor：边框颜色

7、background：背景图，背景色与背景图同时存在时，背景图会覆盖背景色。

【tr与td常用属性】

1、height：单元格的高度；width：单元格的宽度

2、bgcolor：背景色，当表格的属性与行列的属性发生冲突时，谁近就用谁。即table<tr<td。

3、align：设置单元格中的文字水平对其方式（其可选值为左中右 right、center、left）。

4、valign：设置单元格中的文字垂直对其方式（其可选值上中下top、middle（center）、bottom）

5、nowrap：当单元格文字过多时，设置单元格文字不断行显示，但会把表格的宽度撑大。

【表格的跨行与跨列】

1、跨列：在td上使用属性colspan="n"进行跨列，如果一个单元格跨n列，则其右侧n-1个单元格需要去掉。

2、2、跨行：在td上使用属性rowspan="n"，进行跨行，如果一个单元格跨n行，则其下边n-1个单元格需要去掉。

3.6【form表单】

1、 form表单的两个重要属性

（1）、action：表示表单提交的服务器地址

（2）、method：表单提交数据的方式，可选值有get、post两种。

2、get、post的区别

（1）、get通过URL传递数据，所有内容在URL（地址栏）可以看到不安全，而post无法看见，比较安全。

（2）、get传递的数据量是有限的且只能传递文本信息，而post可以传递大量数据并且可以传递图片、视频等其他文件类型。

（3）、get传输速度比post快（这是get的唯一一个优点）

3、get使用URL传递数据的格式

http：//URL地址.html？name1=value1&name2=value2从： “？”表示参数传递的开始，多个参数之间用and符号间隔，同一个参数用name来标识value。

所以使用表单时，input输入框的name属性一定不能省略，如果省略input的name属性，则这个input的数据不会往后台传递

4、input的常用属性

（1）、type：声明input输入框是什么类型。

（2）、name：给input输入框起名字，传递数据时使用name=value的形式传递。

（3）、value：给input输入框提供的默认值

（4）、placeholder：输入框的提示文本，默认当输入框为空时显示，当输入文字时消失。（本身存在value时不显示）

（5）、 checked=“checked”设置单选框或者复选框的默认选中

（6）、disabled=“disabled”禁用，一旦使用disabled禁用的输入框，在传递数据时，将不再往后台传递。

（7）、 hidden=“hidden”将输入框隐藏，但是隐藏的内容依然可以向后台传递。（后期经常用到）

注意：像以上这种属性名等于属性值的写法，可以省略属性值。

5、input属性中type的类型

（1）、text：表示为文本输入框，输入的内容正常显示

（2）、password：表示为密码输入框。输入的内容显示为小黑点

（3）、radio：表示为单选按钮

注意：其中的value属性不能省略，往后台传递值时传递的是value中的值

radio标签凭借name属性判断是否是同一组标签name相同为同一组标签，同一组当中只能选一个。

使用checked=“checked”，可以设置默认选中项，这种属性名等于属性值的写法，可以省略属性值。

（4）、checkbox：表示多选框，其它与单选按钮radio相同

（5）、file：表示文件上传框，点击可以选择文件上传。

accept属性可以限制上传何种类型的文件，“*”表示可以接收所有文件，"image/*"只能接收图片文件。

multiple="multiple"：设置可以上传多个文件。

（6）、submit：表示为提交按钮，点击可以提交整张表单

（7）、reset：表示重置按钮，点击将表单恢复到初始状态。

（8）、image：图形提交按钮。使用src属性导入一张图片，与submit按钮都具有提交表单的功能。

（9）、button：只是按钮形状，没有任何作用。

6、select下拉选择区块

（1）、 select标签中的多个选项，用option表示。

（2）、一个select组合只能有一个name，所以使用时需要给select标签起name，而不是给option标签起name。

（3）、 option标签如果有value属性，则传递数据时将传递value的属性值，如果没有value属性，则传递时将传递option标签中间的文字。

（4）、option标签的title属性，表示鼠标指上之后显示的文字

（5）、给option标签加上selected=“selected”表示默认选中项。

（6）、给select标签加multiple="multiple"表示这个下拉框可以多选，但是这个属性几乎不用

（7）、<optgroup label="组名"></optgroup>用于将所有的option标签进行分组，使用label属性表示组名。具体用法如下：

7、textarea文本域

（1）、文本域可以使用cols（宽）和rows（高）设定宽高，但是我们几乎不用，我们使用CSS样式：style="height: 50px; width: 50px;"来设定大小。

（2）、使用CSS样式style="resize: none;"设定文本域的大小不允许拖动缩放

（3）、使用属性readonly="readonly"设置文本域为只读，不允许修改

（4）、CSS样式overflow用于设置超出区域的文字如何显示，其可选值有三个

hidden：超出区域的文字直接隐藏，无法看到

scroll：无论文字多少，都会显示水平和垂直方向的滚动条

auto：默认效果，文字少时无滚动条，文字多时，自动显示垂直滚动条。也可以使用overflow-x和overflow-y单独设置水平和垂直方向的滚动条是否显示

8、HTML5智能表单

（1）、H5为我们提供了input与form的关联的新方式，并不需要input必须包含在form里面。如果input在form外面，只要给form标签起一个id，让input标签通过form属性关联这个id，即可实现input与form的关联。

（2）、H5给我们提供了一些新的input的type类型：如date、number、url、email、range等。

（3）、H5给我们提供的input新属性

placeholder：输入框的默认提示内容

form：让表单外面的input关联表单id，实现input与form表单关联

required="required"：设置input为必填

pattern：验证input的模式（后面将讲）

autofocus="autofocus"：设置input自动获得焦点

autocomplete="off"：关闭自动提示完成功能，此功能浏览器会默认开启，设置为off会关闭，设置为on会打开。

H5基本标签及其属性就说到这里了，下一篇将介绍CSS的一些基本属性。