HTML5

最新推荐文章于 2024-12-28 22:30:06 发布

for_him

最新推荐文章于 2024-12-28 22:30:06 发布

阅读量2.9k

点赞数 3

本文链接：https://blog.csdn.net/for_him/article/details/101526909

版权

HTML5

一、HTML5是什么

HTML语言又称为超文本标记语言；HTML语言是用来描述网页的一种语言，HTML语言不是一种编程语言，而是一种标记语言；既然HTML是标记语言，那么HTML由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。

二、HTML5基础

一、HTML的优势

1、世界知名浏览器厂商对HTML5的支持；例如：Internet Explorer 、Google、Firefox 、Safari、Opera等主要的Web浏览器都是支持的。

2、市场的需求

3、跨平台

二、W3C标准

1、HTML遵守W3C的原因

万维网联盟（World Wide Web Consortium ，W3C）是Web技术领域最权威和具有影响力的国际中立性技术标准结构；W3C标准的诞生确保多个浏览器都兼容，HTML内容结构都是语义化的。

2、W3C标准的介绍

W3C标准不是某一个标准，而是一系列的标准集合，一个网页主要由三个部分组成：结构、表现和行为。

W3C标准包括结构化标准语言（HTML、XML）、表现标准语言（CSS）、行为标准（DOM、ECMAScript）。

三、HTML5文件的基本框架

HTML5最基本的语法就是<标记>内容</标记>

标记在有的地方也称为标签或元素，标签都是成对出现的，有开始标记也有对应的结束标记，以"<>“开始，以”</>"结束，要求成对出现；标签之间要有缩进，体现出层次感，以方便阅读程序和修改程序；

1、HTML5的基本结构

<html>
	<head>
        <title>这是头部名称</title>
    </head>    
    <!--head表示头部部分-->
    <body>
        这是主体部分
    </body>
    <!--body表示主体部分-->
</html>

HTML5的基本结构分为两个部分：头部部分（head）和主体部分（body）；头部部分包括网页标题（title）等信息；主体部分包括网页内容信息。

2、网页的基本信息

1、DOCTYPE声明

DOCTYPE是用来声明文档类型的声明，是用来告诉浏览器用哪种规范来解释这文档中的代码的；DOCTYPE语句必须在文档的第一行。HTML5文档中可以不使用DOCTYPE，浏览器也可以勉强识别；但是建议要有DOCTYPE语句。

<!DOCTYPE html>

2、<title>标签

<title>
    标题标签
</title>

<title> 标签是用来描述网页标题的，在浏览器中显示的位置是在浏览器窗口的标题栏上的网页标题。

3、<mate>标签

<mate charset="UTF-8"/>

<mate>是用来描述网页的摘要信息的，摘要内容包括：文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的详细描述等，但是<mate>标签描述的内容不显示。

<mate>的属性：

1、gb3212：简体中文

2、IOS—885901：纯英文

3、big5：繁体

4、UTF-8：国际性通用的字符编码

注意：在保存文件时编码方式一定要和HTML5页面中的<mate>的编码保持一致，否则会出现乱码现象。

四、网页的基本标签

1、标题标签

标题标签使用来表示一段文字的标题或主题，支持多层次的内容结构

标题标签的语法是：

<h1>这是一级标题 </h1>  <!--<h1>的字体是最大的-->

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>
    
<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>   <!--<h6>的字体是最小的-->

在HTML5中提供了上面六种标题标签，其中<h1>标签是字号最大的，<h6> 是字号最小的；运用标签后标题字体会加粗，并且会有一定的外观。

2、段落标签和换行标签

段落标签的语法：

<p>
    这是一个段落标签
</p>
<p>
    这也是一个段落标签
    我是一个人才
</p>
<!--结果是：
	这是一个段落标签
	这也是一个段落标签我是一个人才
-->

<p> 标签用来表示一个段落，一个段落中可以包含多行文字，文字内容将随浏览器窗口的大小自动换行。

换行标签语法：

<p>
    这个组员有点难搞哦<br/>
   	就算是个人才也搞不定啊<br/>
</p>
<!--结果是：
	 这个组员有点难搞哦
   	 就算是个人才也搞不定啊
-->

换行标签< br/> 表示的是强制换行，这个标签有点特殊，没有结束标签，直接使用标签表示开始和结束；

注意：这种标签也叫单标签；有开始和结束标签的叫双标签。

3、水平线标签

水平线的语法：

<p>
    人才
</p>
<hr/>
<p>
    个个是人才<br/>
    好好学习<br/>
    天天向上<br/>
</p>
<!--结果是：
人才
————————————————————————————————————————————————————————————————————————————————————————————————————
个个是人才
好好学习
天天向上
-->

水平线标签和换行标签一样的特殊，水平线标签也是单标签。

4、字体样式标签

加粗语法：

<strong>我是最棒的</strong>

<strong> 标签可以让字体变粗；<strong>还是一个带有语义化的标签，有强调、加强语气的作用。

倾斜语法：

<em>好好学习</em>

<em>标签可以让字体倾斜。

5、注释和特殊符号

注释的语法：

<!-- 这是一条注释 -->

注释就是用来解释文档的，当浏览器遇到注释的时候会自动忽略注释内容。

特殊符号表

特殊字符	字符实体
空格	&nbsp；
大于号（>）	&gt；
小于号(<)	&lt；
引号（"）	&quot；
版权符号（©）	&copy；

6、图像标签

1、常见的图像格式：JPG格式、GIF格式、BMP格式、PNG格式

2、图片标签的基本语法：

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

<img>是图片标签；src属性表示图片路径； alt属性指定的替代文本，在图片无法显示的时候，替代显示的文本；title属性可以提供额外的提示或帮助信息，当鼠标放在图片上时显示提示信息；width属性和height属性分别表示宽度和高度，如果要改变图片原始的大小，就可以用width属性和height属性设置。

7、超链接标签

1、超链接的基本语法：

<a href="链接地址" target="目标窗口位置">链接文本或图片</a>
<a href="#"></a>  <!--空链接-->

href：表示链接地址的路径；当超链接路径为"#"时，表示空链接。

target：指定链接在哪个窗口打开，常用的取值有 _self(自身窗口) ， _blank(新建窗口)。

2、路径

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

绝对路径：指向目标地址完整描述，一般指向本站点外的文件。绝对路径是从盘符出发的。

相对路径中可能会用到的特殊符号：" …/ “表示当前目录的上一级目录，” …/…/ "表示当前目录的上上级目录。

3、页面间链接

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

4、锚链接

语法：

<a name="marker">目标位置乙</a>

name为 <a> 标签的属性，marker为标记名；注：如果没有name属性可以用id属性来做标记，效果是一样的，但是兼容性更好。

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

设置甲位置链接路径href属性值为"#标记名"。

5、功能性链接

功能性链接比较特殊，当单击该链接时不是打开某个网页，而是启动本机自带的某个应用程序。

8、行内元素和块元素

块元素特性：无论内容多少，该元素独占一行。

行内元素特性：内容撑开宽度，左右都是行内元素的可以排在一起。

三、列表、表格和媒体元素

一、列表

列表是信息资源的一种展示形式。列表分为三种类型：无序列表、有序列表、定义列表；

1、无序列表

语法：

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

无序列表由 <ul> 标签和 <li> 标签组成，<ul>标签是无序列表的声明，<li> 标签作为每个列表项的起始。

注意：

1、<ul> 标签里面只能嵌套 <li> 标签，不能嵌套其他标签。

2、<li> 标签里面可以嵌套任何标签。

无序列表的特征：

1、没有顺序，每个<li> 标签独占一行（块元素）

2、默认的<li> 标签项前面有个实心小圆点。

3、一般用于无序类型的列表。

2、有序列表

语法：

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

有序列表用 <ol> 标签和 <li>标签组成，<ol> 是用来声明有序列表的，<li>是每个列表项的起始。

有序列表的特征：

1、有顺序，每个 <li> 标签独占一行（块元素）。

2、默认< li>标签项前面有顺序标记。

3、一般用于排序类型的列表。

3、定义列表

语法：

<dl>
    <dt>标题一</dt>
    <dd>第一项</dd>
    <dd>第二项</dd>
    
     <dt>标题二</dt>
    <dd>第一项</dd>
    <dd>第二项</dd>
</dl>

定义列表是标题及列表项的结合，定义列表是用 <dl> 来声明的，用 <dt> 来表示每个列表项的起始，用 <dd> 来表示每个列表项的定义。

定义列表的特性：

1、没有顺序，每个 <dt>标签、<dd> 标签都是独占一行的。

2、没有默认标记。

3、一般用于一个标题下有一个或多个列表项的情况。

4、使用场合和注意事项

1、无序列表中的每一项都是平级的，没有级别之分；有序列表会依据列表项的顺序来进行显示。

2、在实际的网页应用中，无序列表比有序列表应用更广泛。

3、定义列表一般适用于带标题和标题解释性内容的场合。

二、表格

1、使用表格的好处

2、表格的基本结构和基本语法

基本结构：

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

2、行：一个或多个的单元格横向堆叠形成了行

3、列：因为表格单元格的宽度必须一致，所以单元格纵向排列形成了列

基本语法：

<table>
    <tr>    <!--tr是开辟一行-->
        <th>第一个单元格的内容</th>    <!--th是使文字加粗变行头并居中-->
        <th>第二个单元格的内容</th>
    </tr>
    <tr>
        <td>第一个单元格的内容</td>   <!--td是开辟一列-->
        <td>第二个单元格的内容</td>
    </tr>
</table>

使用 <table> 标签来创建表格，在< table> 中使用 <tr>来创建行，可以有多行，在 <tr> 中用 <th> 来创建表格标题，在 <tr> 中使用 <td> 来创建单元格，可以有多个单元格； <th> 和 <td> 是同级。

<table>标签有一个常用属性：border（边框），单位是px(像素)。

3、表格的跨行和跨列

跨列的语法：

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

col为colum（列）的缩写，span为跨度，使用colspan的意思是跨列。

跨行的语法：

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

row是行的意思，所以rowspan是跨行。

跨行和跨列后，并不会改变表格的特点，同行的总高度一致，同列的总宽度一致，单元格的宽度或高度互相影响，所以结构是相对稳定的。

三、媒体元素

1、视频元素

<video>元素是用来播放视频文件的，支持Ogg（Ogg Vorbis的简写）、MPEG4、WebM等视频格式。

语法：

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

src是用来指定播放视频的路径的，controls是用来提供播放、暂停和音量控件；除此之外，还可以用width和height来设置视频的宽度和高度。

如果浏览器不能识别<video>元素，可以在<video>元素中间插入一段文字提示，如：

<video src="视频路径" controls="controls">你的浏览器不能识别video标签</video>

在video中虽然可以使用src属性链接视频路径，但是只能链接一种格式的视频；为解决这一问题出现了source元素。source元素嵌套在video里面，并且可以出现多次。

<video controls>
	<source src="video.webm"/>
    <source src="video.mp4"/>
</video>

当属性和属性值相同时，可以省略属性值。

注意：controls是必须要有的，不能省略不写。

2、音频元素

<audio>元素是用来播放音频文件的，支持Ogg、MP3、WAV等音频格式。

语法：

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

src是用来指定播放音频的路径的，controls是用来提供播放、暂停和音量控件；除此之外，还可以用width和height来设置音频的宽度和高度。

如果浏览器不能识别<audio>元素，可以在<audio>元素中间插入一段文字提示，如：

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

音频和视频是差不多的同样是用<source/>元素来提供多路径的播放源。

<audio controls>
	<source src="video.webm"/>
    <source src="video.mp4"/>
</audio>

当属性和属性值相同时，可以省略属性值。

注意：controls是必须要有的，不能省略不写。

还有一个autoplay属性，该属性是指不需要与用户进行任何交流，直接播放。该属性是视频和音频通用的。

四、结构元素

结构元素表

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

实例：

<body>
    <headre>
        <h2>网页头部</h2>
    </headre>
    <section>
        <h2>网页主体部分</h2>
    </section>
    <footer>
        <h2>网页底部</h2>
    </footer>
</body>

五、iframe框架

1、使用<iframe>

语法：

<iframe src="引用网页地址" name="框架标识名"......></iframe>

四、表单

一、表单概述

1、表单的属性和标签

在HTML5中，用<form>标签来实现表单的创建，<form>标签是属于容器标签，<form>标签有两个常用属性：action属性和method属性。

简单来说 action 属性就是提交的地址，method 属性就是发送的方式。

两个属性的语法是：

<form action="URL" method="get/post">
    
</form>

RUL：网址；

get：提交时，网页中的地址栏状态会发生变化，表单数据会在RUL信息中显示；

post：提交时，网页中的地址栏状态不会发生变化，表单数据不会被显示；

post方法要比get方法的安全性要高，建议多使用post方法。

2、表单元素及格式

在表单中常用的标签有< input>、<textarea>、<select> …，目前主要学习前三个标签。

属性	说明
type	用来指定表单元素的类型，可以用的类型有:text、checkbox、image、radio、password、submit、reset、button、file、email、url、hidden、number。默认为text。
name	指定表单元素的名称
value	该属性是可选的，指定表单元素的初始值，如果value为radio类型，则必须指定一个值
size	指定表单元素的初始宽度，如果type为text或password类型，则单位为字符；如果type为其他类型，则单位为像素。
maxlength	指定可在text或password元素中输入最大字符数，默认是无限大的
checked	指定按钮是否被选中，也就是默认选中

1、文本框

在表单中最常用的表单元素就文本框，它用于输入单行文本信息 type的类型为text。

<form action="#" method="post">
    名字：<input type="text" name="name" />
</form>

2、密码框

密码框与文本框类似，区别在于 type的类型为password；并且密码框输入的字符全部都是以黑色实心的圆点来显示。

<form action="#" method="post">
    密码：<input type="password" name="pass"/>
</form>

3、单选按钮

单选按钮控件用于一组互排互斥的值，一组中的单选按钮控件是有一个相同的名字的，用户只能选中一个单选按钮。

<form action="#" method="post">
    性别：
    <input type="radio" name="sex" value="男"/>男
     <input type="radio" name="sex" value="女"/>女
</form>

4、复选框

复选框和单选按钮是类似，只不过复选框可以给用户选择多个选项。

<form action="#" method="post">
    爱好：
    <input type="checkbox" name="aihao" value="sports"/>运动
    <input type="checkbox" name="aihao" value="talk"/>聊天
    <input type="checkbox" name="aihao" value="play"/>玩游戏
</form>

注：复选框和单选按钮都可以设置默认选项；设置默认选项可以使用 checked 属性。

<form action="#" method="post">
	<p>
        性别：
        <input type="radio" name="sex" value="男" checked/>男
         <input type="radio" name="sex" value="女"/>女
     </p>
    <p>
         爱好：
        <input type="checkbox" name="aihao" value="sports" checked/>运动
        <input type="checkbox" name="aihao" value="talk"/>聊天
        <input type="checkbox" name="aihao" value="play"/>玩游戏
    </p>
</form>

上面的是默认选中性别：男爱好：运动；

5、下拉框

下拉框是用<select>标签和<option>标签来实现的。

语法：

 <form action="#" method="post">
     <select name="指定列表名称" size="行数">
         <option value="可选项的值" selected="selectde">.......</option>
          <option value="可选项的值">.......</option>
     </select>
</form>

size：确定列表中可同时看到的行数；

selected：表示默认选中，该标签目前只在select中可用；

6、按钮

按钮分为四种：submit（提交按钮）、reset（重置按钮）、button（普通按钮）、image（图片按钮）

语法：

<form action="#" method="post">
    提交按钮:<input type="submit" name="Submit" value="提交"/>
    重置按钮:<input type="reset" name="Reset" value="重置"/>
    普通按钮:<input type="button" name="Button" value="普通"/>
    图片按钮:<input type="image" name="Image" value="图片"/>
</form>

reset按钮：用户单击该按钮后，表单中的元素会被重置到最初的状态。

submit按钮：用户单击该按钮后，表单将会提交到action属性指定的URL，并传递表单中的数据。

button按钮：属于普通按钮，需要与事件关联使用（onclick事件是表单元素被单击时所触发的事件）。

image按钮：属于图片按钮，用户单击该按钮后，表单将会提交到action属性指定的URL，并传递表单中的数据。

7、多行文本域

显示两行及以上的文本时可以用到多行文本域

<form action="#" method="post">
    <textarea name="textarea" cols="显示的列数" rows="显示的行数">
    	文本内容
    </textarea>
</form>

cols：用来指定多行文本域的列的宽度

rows：用来指定多行文本域的行数。

注：在<textarea>标签中绝对不能用value属性来赋初始值。

8、文本域

文本域用来实现文件的选择，在type属性设置为file就可以了。

<form action="#" method="post">
    <p>
        <input type="file" name="File"/>
    </p>
</form>

9、邮件

email类型的<input >元素是一种专门用于输入Email地址的文本框，email文本框会自动验证用户输入的地址是否有@符号如果没有不允许提交。

<form action="#" method="post">
    <input type="email" name="Email"/>
</form>

10、网址

url类型的input元素提供用于输入的url地址这类特殊文本框；url也会自动验证url文本框的内容是不是url的地址格式，如果不是不允许提交。

<form action="#" method="post">
    <input type="url" name="URL"/>
</form>

11、数字

number类型的<input>元素提供输入数字的文本框。number类型可以限制最大值和最小值、合法的数字间隔或默认值等，如果输入的数字不在限制的范围内就会报错。

<form action="#" method="post">
    <input type="number" name="num" min="0" max="10" step="2"/>
</form>

min：表示最小值

max：表示最大值

step：表示数字间隔

value：表示默认值

12、滑块

range类型的<input>元素提供用于输入包括一定范围内的数字值得文本框，在页面中显示为滑块条。range类型可以限制最大值和最小值、合法的数字间隔或默认值等，如果输入的数字不在限制的范围内就会报错。

<form ation="#" method="post">
	<input type="range" name="Range" max="10" min="0" step="2"/>
</form>

max：表示最大值

min：表示最小值

step：表示数字间隔

value：表示默认值

13、搜索框

search类型的<input>元素提供用于输入搜索关键词的文本框。search可以在任意页面使用。

<form action="#" method="post">
	<input type="search" name="sousuo"/>
</form>

在<input>元素中email类型、url类型、number类型有自动验证输入是否合格的功能。

二、表单的高级应用

1、表单的隐藏域

在提交时把部分信息隐藏起来，不显示在网页上。

<form action="#" method="post">
	<input type="hidden" name="userid" value="666">
</form>

将表单的提交方式改成get方法，单击"提交"按钮，就可以查看地址栏中被隐藏的数据。

2、表单的只读与禁用

只读场景：网站服务器不希望用户修改的数据，这写数据在表单元素中显示。

禁用场景：只有满足某个条件后，才能选用某项功能。

只读和禁用效果分别通过设置readonly属性和disabled属性来实现。

<form action="#" method="post">
  <p> <input type="text" name="name" value="张三" readonly/> </p>  <!--只读-->
  <p><input type="submit" value="修改" disabled/> </p> <!--禁用-->
</form>

只读和禁用的相同点和不同点

相同点：文本框都不能输入。

不同点：disabled的表单元素不能提交到另一个页面；disabled的颜色为灰色。

通常只读属性用于不希望用户对数据进行修改的场合，禁用属性则可以配合其他控件使用。

3、表单元素的标注

标注的目的就是为了增强鼠标的可用性，当用户使用鼠标单击标注的文本内容是，浏览器会自动将焦点转移到与该标注相关的表单元素上。

<form action="#" method="post">
	请选择性别：
    <label for="male">男</label>
    <input type="radio" name="sex" id="male"/>
    <label for="famale">女</label>
    <input type="radio" name="sex" id="famale"/>
</form>

在<label>标签中name属性和id属性是不可以少的。name属性由表单负责处理，id属性是用来关联的。

三、表单的初级验证

1、初级验证的好处

减轻了服务器的压力；

保证数据的可行性和安全性。

2、初级验证的方法

1、placeholder

placeholder属性是input类型文本框提供一种提示（hint），是用来输入提示语的，当输入框为空时显示，当输入框有输入内容时会自动消失。

<form action="#" method="post">
	<input type="search" name="sousuo" placeholder="请输入要搜索的关键词"/>
   	<input type="sbumit" name="Sub" value="Go"/>
</form>

2、required

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

<form action="#" method="post">
    用户名：<input type="text" name="username" required/>
    <input type="submit" value="提交"/>
</form>

3、pattern

pattern属性用于验证input类型的文本框中用户输入的内容是否与自定义的正则表达式相匹配。

<form action="#" method="post">
			<p>
				电话号码：
				<input type="text" name="tel" required pattern="^1[358\d{9}]" />
				*以13、15、18开头的11位数字
				<br />
				<input type="submit" value="提交" />
			</p>
		</form>

\w:表示任意一个a-z;A-Z;0-9的字符；

[]:表述当前位可以从[]中取任意一个；

{}：表示位数。