HTML5基础以及基本用法
HTML简介
HTML是用来描述网页的一种语言，是一种超文本标记语言。
HTML由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。
现在介绍的是最新版HTML5，HTML5作为最新版本，提供了一些新的元素和一些有趣的新特征，同时也建立了一些新的规则。这些元素，特征和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。
HTML5的优势
- 世界知名浏览器厂商对HTML5的支持，包括：微软、Google、苹果、Opera、Mozilla。目前这些浏览器已经纷纷朝着支持HTML5、结合HTML5的方向迈进，因此HTML5已经被广泛地推行开来。
- 市场的需求：HTML5之前，由于各个浏览器之间的不统一，仅是修改Web浏览器之间的由于兼容形而引起的bug就浪费了大量的时间。而HTML5的目标就是将Web带入一个成熟的应用平台，在HTML5平台上，视频、音频、图像、动画及同计算机的交互都被标准化。
- 跨平台：HTML5可以做到跨平台开发，用户只用打开浏览器即可访问应用，PC网站、各种移动设备、插件等核心代码就可以不需要重复编写，极大的减少了开发人员的工作量。
W3C标准
W3C是用来指定和维护统一的国际化Web开发标准，确保各个浏览器都兼容开发的一个组织。因此由W3C组织制定的Web开发标准，是Web技术领域最权威和具有影响力的国际中立技术标准机构。
W3C标准不是某一个标准，而是一系列的标准集合，一个网页主要是由三部分组成，即结构、表现、行为。W3C标准包括结构化标准语言、表现标准语言、行为标准。
HTML5文件的基本结构
HTML基本结构分为两部分：头部、主体。头部包括网页标题等基本信息，主体包括网页的内容信息，如图片、文字等。
基本框架如下：
<!DOCTYPE html>
<html>
<head>
<!---头部-->
</head>
<body>
<!---主体-->
</body>
</html>网页的基本标签
- 标题标签：
标题标签表示一段文字的标题和主题，并且支持多层次的内容结构。HTML共提供了六级标题<h1>~<h6>,并赋予了一定的外观，所有标题字体加粗，h1最大，h6最小
效果图： - 段落标签和换行标签：
<p>····</p>表示一段文字等内容。使用<p>标签表示一个段落。实际上，一个段落中可以包含多行文字，文字内容将随浏览器窗口的大小自动换行。
换行标签</br>表示强制换行显示，该标签比较特殊，没有结束标签，一个标签就表示开始和结束。 - 水平线标签：
</hr>标签表示一条水平线，该标签与<br>标签一样，一个标签表示开始和结束。
效果图：
- 字体样式标签：
<strong>标签表示加粗，<strong>标签不但能表示加粗，实际上它还有一个更加重要的身份，它是一个带有语义化的标签。具有强调、加强语气的作用。
<em> - 注释和特殊符号：
当页面的HTML结构复杂或内容较多时，需要添加必要的注释方便代码阅读和维护。同时，有时为了调试，需要暂时注释掉一些不必要的HTML代码。语法：
<!---注释内容-->在HTML中，一些特殊的符号必须使用相应的HTML代码表示，这些特殊符号对应的HTML代码被称为字符实体，通常以"&“开头，以”;"结尾。如下表所示：
特殊符号 | 字符实体 |
空格 |  ； |
大于号(>) | >； |
小于号(<) | <； |
引号(") | "； |
版权符号(©) | ©； |
图像标签
常见的图片格式有：JPG格式、GIF格式、BMP格式、PNG格式四种，平时接触的也会比较多。
图像标签的基本语法：
<img src="图片路径" alt="图像无法显示时的替代文字" title="鼠标悬停文字" width="图片宽度" height="图片高度"/>超链接标签
链接包含俩部分,一是链接地址,即链接的目标,可以是某个网址或文件的路径,对应<a>标签的属性,二是链接文本或图像,单击该文本或图像,将跳转到href属性指定的链接地址,超链接的基本语法如下:
<a href="链接地址" target="目标窗口位置">链接文本或图像</a>注意：超链接也可以是文本超链接,也可以是图像超链接.
根据链接的地址是指向站外文件还是站内文件,链接又分为绝对路径和相对路径：
1、绝对路径:指向目的地址是完整描述,一般指向本站点外的文件.
2、相对路径:相对于当前页面的路径,一般指向本站点内的文件,所以一般不需要完整的url地址的形式.
另外,站内使用相对路径时常用到两个特殊符号:"…/“表示当前目录的上级目录,”…/…/"表示当前目录的上上级目录.
几种超链接的应用方式
1.页面间链接：页面间链接就是从一个页面链接到另外一个页面
2锚链接：锚链接常用于目标页内容很多,需定位到目标内容的某个具体位置时。语法如下:
<a name="marke">目标位置已</a>
<a href="#marke">当前位置甲</a>以上代码表示页面中从甲位置跳到了乙位置
3功能性链接：功能性链接比较特殊,当单击该链接时不是打开某个网页,而是启动本机的自带的某个应用程序,如网上常见的电子邮件,qq,msn等链接，就需要用到功能性链接。
行内元素和块元素
块元素特性:无论内容多少,该元素独占一行，如<p>标签
行内元素特性:内容撑开宽度,左右都是行内元素的可以排在一行.如<img />标签
列表
什么是列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷的获得相应的信息。实现HTML中的列表可以分为三种类型：无序列表、有序列表、定义列表。
无序列表
无序列表由<ul>标签和<li>标签组成,使用<ul>标签作为无序列表的声明,使用<li>标签作为每个列表的起始.
语法
<ul>
<li>第一项<li>
<li>第二项<li>
<li>第三项<li>
<ul>遵循W3C标准,<ul>标签里面只能嵌套<li>标签,不能嵌套其他标签
<li>标签里面可以嵌套任意标签
无序列表的特性如下
1、没有顺序,每个<li>标签独占一行(块元素)
2、默认<li>标签项前面有实心小圆点
一般用于无序列表的列表,如导航,侧边栏新闻、有规律的图文组合模块等。
有序列表
由<ol>标签和<li>标签组成,使用<li>标签作为有训列表的声明,使用<li>标签作为每个列表的起始,只能<ol>标签里面嵌套<li>标签
语法
<ol>
<li>...</li>
<li>...</li>
</ol>有序列表的特性如下:
1、有顺序,每个<li>标签独占一行(块元素)
2、默认<li>标签项前面有顺序标记
一般用有序列表的有：试卷、问卷选项等。
定义列表
定义列表是一种很特殊的列表形式,它是标题及列表的结合。定义列表的语法相对于无序列表和有序列表不太一样，它使用<dl>标签作为列表的开始，使用<dt>标签作为每个列表项的起始，而对于每个列表项的定义则使用<dd>标签来完成。语法如下：
<dl>
<dt>标题一</dt>
<dd>......</dd>
<dd>.......</dd>
<dt>标题二</dt>
<dd>.......</dd>
<dd>.......</dd>
</dl>有序列表的特性如下：
1、没有顺序,每个<dt>标签,<dd>标签独占一行(块元素)
2、默认没有标记
一般用于(一个标题下有一个或多个列表)*n的情况。
表格
为什么使用表格：简单通用、结构稳定
表格的构造
1.单元格：单元格是最小的单位,一个或多个单元格纵横排列组成了表格
2.行：一个或多个行单元格横向堆叠形成了行
3.列：一个或多个行单元格纵向堆叠形成了行
创建一个表格的语法如下：
<table>
<tr>
<th>第一个单元格的内容</th>
<th>第二个单元格的内容</th>
</tr>
<tr>
<td>第一个单元格的内容</td>
<td>第二个单元格的内容</td>
</tr>
</table>表格的跨列与跨行
表格的跨列
跨列是指单元格的横向合并，语法如下：
<table>
<tr>
<td colspan="所跨的列数">单元格内容</td>
</tr>
</table>表格的跨行
跨行是指单元格在垂直方向上的合并，语法如下：
<table>
<tr>
<td rowspan="所跨的行数"/>单元格内容</td>
</tr>
</table>一般来说，跨行或跨列操作时，需要以下两个步骤：
1、在需合并的第一个单元格，设置跨列或跨行属性。
2、删除被合并的其他单元格，即把某个单元格看成多个单元格合并后的单元格。
注意：跨行和跨列之后，并不改变表格的特点，同行的总高度一致，同列的总宽度一致。因此，表格中各单元格的宽度或高度互相影响，结构相对稳定，但缺点就是不能灵活的进行布局控制。
HTML5的媒体元素
视频元素
video元素：HTML5中的video元素是用来播放视频的,支持Ogg,MPEG4,WebM等视频格式
语法如下：
<video src="视频路径" controls="controls" ></video>当浏览器不支持某个视频格式时需要多个路径，语法如下：
<video controls>
<source src="video/.webm"/>
<source src="video/.mp4"
</video>音频元素
audio元素：HTML5中的audio元素是用来播放视频的,支持Ogg,MP3,WAv等视频格式
语法如下
<audio src="音频" controls="controls"><audio>与视频元素一样。当浏览器不支持某个视频格式时需要多个路径，语法如下：
<audio controls>
<source src="music/music.mp3"/>
<source src="music/music.ogg"/>
</audio>页面布局
页面布局分析：能够看起来更加美观。能够对去分析页面的大体结构。
HTML的结构元素
元素名 | 描述 |
header | 标题头部区域的内容(用于页面或页面中的一块区域) |
footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
section | Web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关内容或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
通过这些语义化结构标签不仅可以使网页结构更清晰，明确，还有利于搜索引擎的检索。
iframe框架
<iframe>框架的主要作用是使页面中的部分内容用框架实现，一般用于在页面中引用站外的页面内容，使用比较灵活、方便。
语法如下：
<iframe src="应用页面地址" name="框架标识名"></iframe><iframe>内联框架的常用属性包括name,width,heigth,其中name属性可以和前面的锚链接结合起来实现页面间的相互跳转,步骤如下：
1、在被打开的框架上加name属性,
<ifarme name="maininfarm" src="subfframe/the.html">2、在超链接上设置target目标窗口属性为希望显示的框架窗口名
<a href="subframe/the-html" target="mainfarman">下边显示第二页</a>表单
表单就是一个将用户信息组织起来的容器。将需要用户填写的内容放置在表单容器中，当用户单击"提交"按钮的时候，表单会将数据统一发送给服务器。
表单的应用:
1.登录,注册,登录时填写用户名,密码,注册时填写用户名,电话等个人信息
2.网上订单,在网上购买商品,一般要求填写姓名,联系方式,付款方式等
3.调查问卷,回答对某些问题的看法,以便形成统计数据
4.网上搜索,输入关键字,搜索想要的可用信息
表单标签及表单属性
在HTML5中，使用<form>标签来实现表单的创建，该标签用于在网页中创建表单区域，属于容器标签，其他表单标签需要在它的范围内才有效。<input>便是其中的一个，用以设定各种输入资料的方法。
<form>标签的属性
属性 | 说明 |
action | 此属性指示服务器上处理表单输出的程序,一般来说,当用户单击表单上的提交按钮后,信息发送到web服务器上,由action属性所指定的程序处理 |
method | 此属性告诉浏览器如何将时间发送给服务器 |
其中method有两种方法:
1、以post方法提交表单
2、以get方式提交,在单击提交按钮,地址栏中的url信息会被提交上去
基于以上两点的区别,post方法提交的数据安全性更高,在日常开发中,尽可能的还是采用post方法.
表单元素及其格式
input 标签中的常用属性
属性 | 说明 |
type | 此属性指定表单元素的类型,可用的类型有text,password,chekbox,radio,submit,rest,file,email,默认为text。 |
name | 此属性指定表单元素的名称。 |
value | 此属性是可选属性,它指定表单元素的初始值。 |
size | 此属性指定单元格的初始宽度。 |
maxlength | 此属性用于指定text或password元素中输入的最大字符,默认为无限大。 |
checked | 此属性用于指定按钮是否被选中。 |
1.文本框
在表单中最常用,将表单元素<type>属性设为text类型即可,语法如下：
<input type="text" name="名字" />2.密码框
将表单元素type属性设为password类型即可,设置了<type>属性,在密码框输入的字符全都以黑色实心的圆点来显示,语法如下：
<input type="password" name="名字" />3.单选按钮
单选按钮控件用于一组排斥按钮,用户只能选中一个单选按钮,只有从组中选中的单选按钮才会在提交的数据中提交对应的数值,在使用单选按钮时,需要一个显示value属性。其中name属性的值必须相同才能实现互斥。
其中有一个默认选项,可以使用checked,语法如下：
<input type="radio" name="a" />
<input type="radio" name="a" checked="checked"/>4.复选框
复选框的类型是checkbox,与单选框类似,只不过可以选择多个选项用户可以选中某个复选框,也可以取消选中.一但用户选中了某个复选框,在提交表单时,会将该复选框的name值和对应的value值一起提交,语法如下：
<input type="checked" name="a" />
<input type="checked" name="a"/>5.列表框
列表框通过<select>标签和<option>标签来实现的,<select>标签用于显示可供用户选择的列表框,每个选项由一个<option>标签来实现,<select>标签至少包含一个<option>标签
如果需要某个选项默认显示，就需要使用selected属性来进行设置,语法如下：
<select>
<option>选项</option>
</select>6.按钮
1、reset按钮:用户单击该按钮后,无论表单中是否已经填写或输入数据,表单中的各个表单元素都会被重置成最初状态,而填写或输入的数据都会被清空
2、submit按钮:用户单击该按钮后,表单将会提交到action属性所指定的url,并传递表单数据
3、button按钮:属于普通按钮,需要与事件关联使用
onclick事件是表单元素被单击时所触发的事件。语法如下：
<input type="reset" name="a" />
<input type="submit" name="b" />
<input type="button" name="c"/>7.多行文本域
当需要在网页输入两行或多行以上的文本时,我们将使用<textarea>标签
语法如下：
<textarea naem="textarea" cols="显示的列数" rows="显示的行数">
文本内容
</textarea>8.文件域
文件域的作用是用于实现文件的选择,在应用时只需要把type属性设为file即可.
文件域在不同的浏览器显示的效果是不一样的,但是功能是一样的,如果想要它在不同的浏览器中显示的一样,可以使用css样式进行修改。文件域会创建一个不能输入内容的地址文本框和一个"选择文件"按钮或"浏览"按钮。语法如下：
<input type="file" name="名字" />9.邮箱
email类型的input元素是一种专门应用于输入Email地址的文本框,与上面表单元素不同的是email在提交表单的时候会自动验证email文本框的值,如果不是有效的邮箱地址,则输入不允许提交表单。语法如下：
<input type="email" name="名字" />10.网址
url类型的input元素提供用于输入url地址这一类特殊的文本的文本框,提交表单时,如果输入不是url地址格式的表单将不允许提交表单。语法如下：
<input type="url" name="名字" />11.数字
number类型的input元素提供了用于输入数字的文本框,我们还可以对接收的数字进行限制,包括规定允许的最大值和最小值,合法的数字间隔或默认值等,如果输入的数字不在规定的范围之类,则会出现错误提示.
number类型的属性
属性 | 值 | 描述 |
value | number | 规定的默认值 |
min | number | 规定允许的最小值 |
max | number | 规定允许的最大值 |
step | number | 规定合法的数据间隔 |
语法如下：
<input type="number" name="名字" />12.滑块
以"range"类型使用,与number类型的属性时用于的类型属性时一样的这两种类型的不同之处在于外观表现上
支持range类型的浏览器都会显示滑块
属性 | 值 | 描述 |
value | number | 规定的默认值 |
min | number | 规定的最小值 |
max | number | 规定的最大值 |
step | number | 规定合法的数据间隔 |
语法如下：
<input type="range" name="名字" />13.搜索框
search类型的input元素提供用于输入搜索关键字的文本框,虽然外观看起来search类型和input的普通text类型差不多,但是实现起来却并不容易。语法如下：
<input type="search" name="名字" />表单的高级应用
设置表单的隐藏域
将type属性设置为hidden隐藏类型即可创建一个隐藏域。语法如下：
<input type="hidden" name="名字" />表单的只读与禁用设置
1、只读：网站服务器方不希望用户修改的数据，这些数据在表单元素中显示。不可修改。
2、禁用：只有满足某个条件后，才能选用某种功能。在网页中的显示一般为灰色，并且不能被提交到另一个页面。
只读和禁用效果分别通过设置readonly属性和disabled属性来实现
通常只读属性用于不希望用户对数据进行修改的场合,禁用属性则可以配合其他控件使用.
表单元素的标注
语法
<label for="表单元素的id">标注的文本</lable>对于表单元素而言,其name属性与id属性都是必须的,name属性由表单负责处理,而id属性是给label标签和表单元素进行关联使用
表单的初级验证
plaeeholder
plaeeholder属性用于为input类型的文本框一种提示,这种提示可以描述文本框期待用户输入何种内容,在输入空时显示,当在文本框中写入内容消失,该标签适合于input标签,text,search,url,email和password等lx.
required
required属性用于规定文本框填写内容不能为空,否则不允许用户提交表单.
pattern
pattern属性用于input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配.匹配就能提交,否则不能提交.
