HTML5的学习

HTML5基础

在这个互联网时代中,大家的学习、工作和生活基本上都离不开网络。大家经常浏览的新闻页面、微博和微信等各种从网上获得信息的途径,无论是个人计算机(Personal Computer, PC)终端,还是移动客户端,基本上都是以Web为基础来呈现的,因此Web页面呈现信息已成为各种信息共享和发布的主要形式。

**超文本标记语言(Hyper Text Markup Language, HTML)**是创建Web页面的基础。

什么是HTML? HTML是用来描述网页的一种语言,它是一种超文本标记语言,也就是说,HTML不是一种编程语言,仅是一种标记语言(Markup Language)。HTML由一套标记标签(Markup Tag)组成,在制作网页时,HTML使用标记标签来描述网页。

HTML5的优势

世界知名浏览器厂商对HTML的支持

通过对Internet Explorer、Google、firfox、Safari 、Opera等主要的Web浏览器发展策略调查发现他们都在支持HTML5。

市场的需求

现在的市场已经迫不及待的要求有一个统一的互联网常用标准。HTML5之前的情况是由于各浏览器之前的不统一,仅是修改Web浏览器之间的由于兼容性而引起的bug就浪费了大量时间。而HTML5的目标就是将Web带入一个成熟的应用平台,在HTML5平台上,视频,音频,图像,动画及计算机分交换被标准化。

跨平台

HTML5可以做到跨平台开发,用户只用打开浏览器即可访问应用,pc网站,各种移动设备,插件等核心代码就可以不需要重新编译,极大的减少了开发人员的工作量。

W3C标准

W3C标准不是某一个标准,而是一系列标准集合,一个网页主要由三部分组成,即结构,表现和行为。其中,W3C标准包括结构化标准语言(HTML)。

在一个网页中,包括各级标题、正文、图片、列表等,构成了网页的“结构”,每个组成部分的字体、颜色、间距等属性就构成了它的“表现”。用户通过单击然某个页面中某个元素移动、消失等动画交互就称它为“行为”。

结构、表现、行为分别对应三种常用的技术,既HTML、CSS、JavaScript。也就是说HTML用来决定结构和内容,CSS用来设定网页的表现样式。JavaScript用来控制网页的行为。

HTML5文件的基本结构

<html>
    <head>
        <title>我的第一个网页</title>
        <body>
            我的第一个网页
        </body>
    </head>
</html>

整个html包括头部(head)、和主体两部分(body),头部包括网页标题title等基本信息,主体包括网页的内容信息、如图片、文字等。

网页的基本信息

DOCTYPE声明:

DOCTYPE声明必须位于HTML文档的第一行。

<!DOCTYPE html>
标签 <title>标签 2.<title>标签

title标签

使用title标签描述网页的标题,类似一篇文章的标题,一般为一个简洁的主题,并能使读者有兴趣读下去。比如:搜狐网站的主页,如下:

<title>搜狐—中国最大的门户网站</title>

打开页面后,将在浏览器窗口的标题栏显示标题。

标签

使用该标签描述网页的摘要信息,包括文档内容类型,字符编码信息,搜索关键字,网站提供的功能和服务的详细描述等。标签描述的内容并不显示,其目的是方便浏览器解析或利于搜索引擎,它采用"名称/值"对的方式描述摘要信息。

(1)文档内容类型,字符编码信息书写如下:

<meta charset="UTF-8"/>

属性:charset表示字符集编码,常用的编码有以下几种:

(1) gd2312:简体中文,一般用于包含中文和英文的页面

(2) lSO—885901:纯英文,一般用于只包含英文的页面

(3) big5:繁体,一般用于带有繁体字的页面

(4) UTF—8:国际性通用的字符编码,同样适用于中文和英文的页面。和gd2312编码相比,国际通用性更好。

在保存文件时编码方式一定要与HTML5页面中标签中编码方式保持一致,否则,将会出现乱码

网页的基本标签

标题标签
<h1>一级标题 </h1>
<h2>二级标题 </h2>
<h3>三级标题 </h3>
<h4>四级标题 </h4>
<h5>五级标题 </h5>
<h6>六级标题 </h6>

标题标签表示一段文字的标题或主题,并且支持多层次的内容结构。比如一级标题采用<h1>,二级标题则采用<h2>,其他标题以此类推。HTML一共提供了六级标题<h1>~<h6>,并赋予了标题一定的外观,所以字体加粗,其中<h1>标签最大,<h6>标签最小。

段落标签和换行标签

顾名思义,段落标签<p>表示一段文字等内容,列如"北京欢迎你"这首歌,包括歌名(标题)和歌词(段落)。

换行标签<br>表示强制换行显示,该标签比较特殊,没有结束标签,直接使用
表示标签的开始和结束。

直接使用<br/>表示标签的开始和结束的标签叫做单标签。成对出现的,如<html></html>这样有开始标签和结束标签的标签叫双标签。

水平线标签

水平线标签<hr/>表示一条水平线,注意该标签与<br/>标签一样,比较特殊,没有结束标签

字体样式标签

在网页中,经常会遇到字体加粗或斜字体,可以使用<strong>标签来让字体变粗,<em>标签让文字倾斜

注释和特殊符号

HTML中注释是为了方便代码阅读和调试。当浏览器遇到注释时会自动忽略注释内容

HTML注释的语法是,如下

<!--注释内容-->
特殊符号字符实体示例
空格&nbsp;<a href="#".>百度</a.>&nbsp;|&nbsp;<a href="#".>Google</a.>
大于号 (>)&gt;如果时间&gt;晚上6点,就坐车回家
小于号(<)&lt;如果时间&lt;早上7点,就走路去上学
引号(’’)&quot;W3C规范中,HTML的属性值必须用成对的&quot;引起来
版权符号©&copy;&copy;20013-2018北大青鸟
图像标签
常见的图像格式

1.JPG格式

此格式最适合用于摄影或连续色调图像的高级格式,这是因为JPG文件可以包含数百种颜色,随着JPG格式文件品质的提高,文件的大小和下载时间也会随之增加。

2.GIF格式

GIF格式是使用最广泛,最普遍的一种图像形式,它是图像交换格式,Gif格式在网页的背景和一些多层特效的显示上用的非常多,还支持动画,这是它最突出的一个特点。

3.BMP格式

BMP格式图像在windows操作系统中使用的比较多,它是位图,BMG形式图像文件不支持压缩,也不适用于Web。

4.PNG格式

PNG兼有GIF格式和JPG格式的优势,同时具备GIF格式不具备的特性.流式网络图形格式。

图像标签的基本语法如下:

<img src="图片地址"alt="图像的替代文字"title="鼠标悬停提示文字"width="图片宽度"height="图片高度"/>

其中,src属性表示图片路径,alt属性表示图片无法显示时指定的替代文本,width属性指定图片宽度,height属性表示图片高度。

超链接标签
超链接的基本用法

超链接包含两部分内容,一是链接地址,即链接目标,可以是某个网址或文件的路径,对应为<a>标签的href属性;二是链接文本或图像文本或图像,单击该文本或图像,将跳转到href属性指定的链接地址,超链接的基本语法如下:

<a href="链接地址"target="目标窗口位置">链接文本或图像</a>

绝对路径:指向目标地址的完整描述,一般指向本站点外的文件

相对路径:相对于当前页面的路径,一般指向本站点的文件,所以一般不需要一个完整的URL地址的形式

页面间链接:页面间链接就是从一个页面链接到另一个页面

功能性链接:功能性链接比较特殊,当单击该链接是不是打开某个网页,而是启动本机自带的某个应用程序,如网上常见的电子邮件,QQ等链接。

超链接的应用

1.页面间链接

页面间链接就是从一个页面链接到另外一个页面。

2.锚链接

锚链接常用于目标页内容很多,需定位到目标内容的某个具体位置时。语法:

<a name="make">目标位置已</a>

name为<a>标签的属性,marker为标记名,其功能类似于古时用于固定船的锚(或沟)。语法:

<a href="#marke">当前位置甲</a>

3.功能性链接

功能性链接比较特殊,当单击该链接时不是打开某个网页,而是启动本机的自带的某个应用程序,如网上常见的电子邮件,qq,msn等链接。

列表、表格与媒体元素

列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息。

列表被分为三类型:无序列表、有序列表、定义列表。

无序列表

无序列表由<ul>标签和<li>标签组成,使用<ul>标签作为无序列表的声明,使用<li>标签作为每个列表的起始。语法:

<ul>
	<li>第一项<li>
	<li>第二项<li>
	<li>第三项<li>
<ul>

遵循W3C标准,<ul>标签里面只能嵌套<li>标签,不能嵌套其他标签

<li>标签里面可以嵌套任意标签。

无序列表的特性如下:

1.没有顺序,每个<li>标签独占一行(块元素)

2.默认<li>标签项前面有实心小圆点

3.一般用于无序列表的列表,如导航、侧边栏

有序列表

由<ol>标签和<li>标签组成,使用<li>标签作为有序列表的声明,使用<li>标签作为每个列表的起始,只能嵌套<li>标签。语法:

<ol>
	<li>....<li>
	<li>.....<li>
<ol>

有序列表的特性如下:

(1)有顺序,每个<li>标签独占一行(块元素)

(2)默认<li>标签项前面有顺序标记

(3)一般用于排序列表

定义列表

定义列表是一种很特殊的列表形式,它是标题及列表的结合。语法:

<dl>
	<dt>标题一<dt>
		<dd>......<dd>
		<dd>.......<dd>
	<dt>标题二<dt>
		<dd>.......<dd>
		<dd>.......<dd>

有序列表的特性如下:

(1)没有顺序,每个<dt>标签,<dd>标签独占一行(块元素)

(2)默认没有标记

(3)一般用于(一个标题下有一个或多个列表)*n

表格

为什么要使用表格

**简单通用:**由于表格行列的简单结构,以及在生活的广泛使用,因此对它的理解和编写都很方便

**结构稳定:**表格通常每行的列数一致,同行单元格高度一致且水平对齐,同例单元格宽度一致且垂直对齐

表格的基本结构

1.单元格

单元格是表格的最小单位,一个或多个单元格纵横排列组成了表格

2.行

由于表格单元格横向堆叠形成了行

3.列

由于表格单元格的宽度必须一致,因此单元格纵向排列形成了列

创建表格的基本语法如下:

<table>
    <tr>
    	<th>第一个单元格的内容</th>
        <th>第二个单元格的内容</th>
        ......
    </tr>
    <th>
    	<td>第一个单元格的内容</td>
    	<td>第二个单元格的内容</td>
    	......
    </th>
</table>

创建表格一般分为下面四步:

第一步:创建表格标签<table>…</table>

第二步:在表格标签<table>…</table>里创建标签<tr>…</tr>,可以有多行

第三步:在第一行标签<tr>…</tr>里创建单元格标签<th>…/th>,用于创建表格标题

<第四步:在行标签<tr>…<tr>里创建单元格标签<td>…</td>,可以有多个单元格

表格的跨列与跨行

表格的跨列

跨列是指单元格的横向合并,语法如下

<table>
    <tr>
    	<td colspan="所跨的列数">单元格内容</td>
    </tr>
</table>

col为column(列)的缩写,span为跨度,所以colspan的意思为跨列。

表格的跨行

跨行是指单元格在垂直方向的合并,语法如下:

<table>
    <tr>
    	<td rowspan="所跨的行数">单元格内容</td>
    </tr>
</table>

row为行的意思,rowspan即跨行。

HTML的媒体元素

视频元素

video元素的基本语法:

HTML5中video元素是用来播放视频文件的,支持Ogg(Ogg Vorbis的简写),MPEG4,WebM等视频格式,

语法如下:

<video src="视频路径"controls="controls"></video>

音频元素

HTML中的audio元素是用来播放音频文件的,支持Ogg,MP3,WSV等音频格式,其语法如下

<video src="音频路径"controls="controls"></video>

videoo与audio中src属性用于指定要播放的视频文件的路径,controls属性用于提供播放、暂停和音量控件,此外,还可以使用width和height设置视频的宽度和高度。

​ 如果浏览器不支持video/audio元素,可以在video/audio元素中间插入一段文字用于提示,这样,旧的浏览器就可以显示这段文字给用户。具体操作如下:

<video src="视频路径"controls="controls">你的浏览器不支持video/audio标签</video>

HTML的结构元素

元素名描述
header标题头部区域的内容(用于页面或页面中的一块区域)
footer标记脚部区域的内容(用于整个页面或页面的一块区域)
sectionWeb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用(常用于侧边栏)
nav导航类辅助内容

表单

表单标签及表单属性

在HTML5中,使用标签来实现表单的创建,该标签用于在网页中创建表单区域,属于容器标签,其他表单标签需要在它的范围内才有效,便是其中的一个,用于设定各种输入资料的方法

属性说明
action此属性指示服务器上处理表单输出的程序,一般来说,当用户单击表单上的"提交"按钮后,信息发送到Web服务器上,由action属性所指定的程序处理。语法为action=“URL”。如果action属性的值为空,则默认表单提交到本页
method此属性告诉浏览器如何将数据发送给服务器,它指向服务器发送数据的方法。语法为metod=(get|post)

表单元素及其格式

使用< input>标签实现了向表单添加文本框、提交按钮、重置按钮等的功能。< input>中有很多属性,下面对一些较常用的的属性进行整理。

属性说明
type此属性指定表单元素的类型,可用的类型有text,password,chekbox,radio,submit,rest,file,email,默认为text
name此属性指定表单元素的名称
value此属性是可选属性,它指定表单元素的初始值.如果type为radio类型,则必须指定一个值
size此属性指定单元格的初始宽度
maxlength此属性用于指定text或password元素中输入的最大字符,默认为无限大
checked此属性用于指定按钮是否被选中

文本框

在表单最常用,最常见的表单输入元素就是文本框(text),它用于输入单行文本信息,如用户民的输入文本框。若要在文档的表单里创建一个文本框,将表单元素type属性设为text类型就可以了。

密码框

密码框与文本框类似,区别在于需要设置文本框控件的type属性为password。设置了type属性后,在输入密码时字符都由黑色实心点来显示,从而实现了对数据的处理。

复选框

复选框与单选按钮有些类似,只不过复选框允许用户选择多个选项。复选框的类型是checkbox,即将表单元素的type属性设为checkbox就可以创建一个复选框了。

按钮

按钮分为三种,分别是普通按钮(button),提交按钮(submit)和重置按钮(reset)。普通按钮主要用来响应onclick事件,提交按钮用来提交表单信息,重置按钮用来清除表单中一填信息。

多行文本域

当需要在网页中输入两行或两行以上的文本时,怎么办?显然,前面学过的文本框框及其他的表单元素都不能满足要求,这就应该使用多行文本框,他的标签是。语法:

<textarea name="textarea"cols="显示的列数"rows="显示的行数">
文本内容
</textarea>

其中,cols属性用来指定多行文本框的列的宽度;rows属性用来指定多文本框的行数。在…标签中不能使用value属性的初始值

文本域

文本域的作用是用于实现文件的选择,在应用时只需要type属性设为file即可。在实际应用中,文件域通常应用于文件上传的操作,如选择需要上传的文本,图片等。

邮箱

Email类型的input元素是一种专门应用于输入Email地址的文本框,与上面表单元素不同的是Email在提交表单的时候会自动验证Email文本框的值,如果不是有效的邮箱地址,则输入不允许提交表单。

网址

url类型的input元素提供用于输入url地址这一类特殊的文本的文本框,提交表单时,如果输入不是url地址格式的表单将不允许提交表单。

数字

number类型的input元素提供了用于输入数字的文本框,我们还可以对接收的数字进行限制,包括规定允许的最大值和最小值,合法的数字间隔或默认值等,如果输入的数字不在规定的范围之类,则会出现错误提示。

number类型使用表如下所示的属性来规定对数字的限定:

属性描述
valuenumber规定的默认值
minnumber规定允许的最小值
maxnumber规定允许的最大值
stepnumber规定合法的数字间隔(如果step=“2”,则合法的数是-2,0,2,4等)

滑块

range类型的input元素提供用于输入包含一定范围内的数字值的文本框。在页面中显示为滑动条,我们还可以进行对所接收的数字进行限制,包括规定允许的最大值和最小值,合法的数字间隔或默认条。如果输出的数字不在限定范围之内,则会出现错误提示。

搜索框

search类型的input元素提供用于输入搜索关键字的文本框。虽然外观看起来search类型和input的普通text类型差不多,但实现起来却并不那么容易。search类型提供的搜索框不只是Google或百度的搜索框,而是任意一个搜索框。

表单的高级应用

设置表单的隐藏域

网站服务器端发送到客户端(用户计算机)的信息,除了用户直观看到的页面内容外,可能还包含一些“隐藏”信息。例如,用户登录后的用户名,用于区别不同用户的用户ID等。这些信息可能对于客户没用,但对于网站服务器有用,所以一般“隐藏”起来,不在页面中显示。将type属性设置为hidden隐藏类型即可创建一个隐藏域。

表单的只读与禁用

在某些情况下,需要对表单元素进行限制,即设置表单元素为只读属性(readonly)或禁用属性(disabled)。它们常见的应用场景如下。

只读场景:网站服务器方不希望用户修改的数据,这些数据在表单元素中显示。例如,注册或交易协议、商品价格等。

禁用场景:只有满足某个条件后,才能选用某项功能。例如,只有用户同意注册协议后,才允许单击"注册"按钮;播放器控件在播放状态时,不能再单击"播放"按钮等。

表单元素的标注

对表单元素进行标注,这样做的目的就是为了增强鼠标的可用性。这是因为使用表单元素标注时,在客户端呈现的效果不会有任何特殊的改进。如果当用户使用鼠标单击标注的文本内容时,浏览器会自动将焦点转移到与该标注相关的表格单元元素上。为表单元素进行标注时,需要使用<lable>标签,该标签的语法如下:

<lable for="表单元素的id">标注的文本</lable>

在<label>标签中,使用了for属性来指定当鼠标单击标注文本时,焦点对应的表单元素。

表单的初级验证

plaeeholder

plaeeholder属性用于为input类型的文本框一种提示,这种提示可以描述文本框期待用户输入何种内容,在输入空时显示,当在文本框中写入内容消失,该标签适合于input标签,text,search,url,email和password等lx。

required

required属性用于规定文本框填写内容不能为空,否则不允许用户提交表单。

pattern

pattern属性用于input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配,匹配成功就能提交,否则不能提交。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值