学习HTML5+CSS3_在静态网页的开发中,使用html(hypertext markup language)可以创建网页的-CSDN博客

HTML 是 HyperText Markup Language（超文本标记语言）的缩写，它是用于创建网页的标准标记语言。HTML 使用标记标签来描述网页，由浏览器来解析，即使用 HTML 来建立 Web 站点，通过 Web 浏览器读取 HTML 文档，并以网页的形式显示出来。是 HTML 最新的修订版本，2014 年 10 月由万维网联盟（W3C）完成标准制定。HTML5 是跨平台的，被设计为在不同类型的硬件（台式计算机、平板计算机、手机、电视机等）上运行的语言。

发展历程

通俗来讲，HTML 就是网页的源代码，任何一个网页都是由一行行 HTML 代码编写而成的。

HTML 的第一个版本诞生于 20 世纪七八十年代，当时互联网没有普及，也没有专业的组织制定 HTML 规范。因此，那个时代 HTML 的发展非常混乱，并没有受到开发者的重视，更没有得到大幅度的发展，HTML 还是一门冷门的语言。

HTML 真正崛起是从 1998 年诞生的 HTML4.0 版本开始的，紧接着在 1999 年更新了 HTML4.01 版本。自 HTML4.01 版本以后，Web 世界经历了巨变。此时，被称为 BAT 三巨头的百度、阿里巴巴、腾讯等互联网企业相继崛起，标志着互联网时代的到来。

HTML5 是由 W3C（万维网联盟）于 2007 年正式立项的，直至 2014 年 10 月底，这个长达八年的规范终于制定完成并公开发布。 HTML5 将会取代 HTML4.01、XHTML1.0 标准，使网络标准满足互联网应用迅速发展的需求，为移动平台带来多媒体，推动 Web 进入新的时代。

HTML5和HTML4的区别

语法简化更简单的 doctype 是 HTML5 中众多新特征之一。

在 HTML5 中，头部只需要写即可。HTML5 的语法兼容 HTML4 和 XHTML1，但不兼容 SGML。

新增语义化标签

新增加的语义化标签（如<header>、<footer>、<section>、等）使得网页的可读性变得更高，也更加明确地表示出网页的结构，对于搜索引擎优化（SEO）有很大帮助。

新的媒体标签

新的<audio>和<video>标签可以用来嵌入音频文件和视频文件。这些标签的使用让网页播放音频、视频更加方便。

使用画布标签绘制图形

标签具有绘图功能，通过与 JavaScript 脚本的搭配，可在网页上绘制图像。

新的表单设计

在 HTML5 中，表单增加了新元素，也为表单元素增加了许多新属性，让表单的使用更加便利。

废除了一些旧标签

HTML5 废除了一些标签，其中大部分为网页美化标签，如<center>、<font>、<tt>、<big>、<dir>、<marquee>、<frame>、等。

2，HTML5 的语法与结构

HTML5 由一个个标签组合而成，标签又有自己的属性和属性值

HTML5 标签

标签是 HTML5 最基本单位和最重要的组成。使用“”括起来，标签都是闭合的（规范）。标签分为单标记和双标记，单标记只有起始标记而没有结束标记，双标记是成对的开始标记和结束标记，基本语法如下：

<hr/>
<title></title>

基础标签

<!DOCTYPE>	定义文档类型。
<html>	定义 HTML 文档。
<head>	定义关于文档的信息。
<title>	定义文档的标题。
<body>	定义文档的主体。
<h1> to <h6>	定义 HTML 标题。
<p>	定义段落。
<br>	定义简单的折行。
<hr>	定义水平线。
<!--...-->	定义注释。

更多见W3schoolHTML 标签参考手册

HTML5 标签属性

标签属性是标签的一部分，用于包含额外的信息。一个标签中可以有多个属性，并且属性和属性值成对出现，基本语法如下：

<img src=“../image/a.png” width=“100” height=“100”/>

HTML5 文档注释

注释是对文档的解释，浏览器不会对注释内容进行解析并呈现到页面上，只有查看 HTML5 文件源代码时才会看到注释，基本语法如下：

HTML5 的文档结构

HTML5 文件均以<html>标记开始，以</html>标记结束。一个完整 HTML5 文件包含头部和主体两个部分的内容，在头部标记<head></head>里可以定义标题、样式等，文档的主体<body></body>中的内容就是浏览器要显示的信息。HTML5 文档的基本结构，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World！</h1>
</body>
</html>

头部内容

<head>标签用于表示网页的元数据，即描述网页的基本信息。其中主要包含以下标签：
1）<title>标签用于定义页面的标题，是成对标记，位于<head>标签之间。
2）<meta>标签用于定义页面的相关信息，为非成对标记，位于<head>标签之间。
3）<meta>标签可以描述页面的作者、摘要、关键词、版权、自动刷新等页面信息。

主体内容

标记<body></body>包含文档所有的内容，如文字、图像、表格、表单等元素。

二，HTML5 常见的块级标签和行级标签

1，常见的块级标签

<h1></h1>…<h6></h6>：标题标签
<hr/>：水平线标签
<p></p>：段落标签
<br/>：换行标签
<blockquote></blockquote>：引用标签
<pre></pre>：预格式标签
<ul><li></li></ul>：无序列表标签
<ol><li></li></ol>：有序列表标签
<dl></dl>：定义列表标签
<div></div>：分区标签

2，常见的行级标签

<img/>：图片标签
<a></a>：超链接标签
<em>，<strong>，<small>，<s>，<b>，<i>

注意：块级标签与行级标签的特点与区别。
 块级标签自动换行，前后隔一行；行级标签不会自动换行，从左往右依次显示。
 块级标签的宽度默认是 100%；行级标签的宽度由文字内容撑开。
 块级标签可以设置宽度、高度、边距等属性；行级标签不能设置上述属性

3，HTML5 新增标签简介

在此主要介绍 HTML5 新增结构标签。使用结构标签可以提升网页文档的可读性，并且有利于搜索引擎优化。HTML5 新增的结构标签主要包括以下 7 个：<section>、<article>、<header>、<hgroup>、<footer>、<nav>、<aside>。HTML5 结构标签布局示意图如图所示。

HTML5 新增的标签还有很多，如<canvas>、<video>、<audio>等，

注意：在此只是非常简要的罗列了一些常用的标签，想要更进一步必须了解更多的标签以及各种标签的属性的使用。

三，HTML5 表格

1，HTML5 表格简介

表格是 HTML5 中的重要布局之一，使用灵活方便，相对于其他的块级标签，表格在布局上拥有更加强大能力，可以快速地搭建出网页中的结构形式。表格包含的包容十分广泛，几乎可以包含所有的 HTML5 标签，可以极大地增加表格在布局方面的能力。表格在网页布局中非常常用，可以让网页以行、列的方式承载数据。

2，表格的基本结构

表格的基本结构由行列组成，单元格是表格的最基本单位。表格的基本结构示意图如图所示。

3，表格的定义

表格由 <table> 标签定义。每个表格均有若干行，行由 <tr> 标签定义，每行被分割为
若干单元格，列由 <td> 标签定义。字母 td 指表格数据（table data），即数据单元格的内
容。如果表格的第一行为表头，那么<td>标签需要用<th>标签替换掉。数据单元格可以包含
文本、图片、列表、段落、表单、水平线、表格等。基本语法如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>表格的基本结构</title>
</head>

<body>
    <table>
        <tr>
            <th>表头 1</th>
            <th>表头 2</th>
            <th>表头 3</th>
        </tr>
        <tr>
            <td>第一行 1</td>
            <td>第一行 2</td>
            <td>第一行 3</td>
        </tr>
        <tr>
            <td>第二行 1</td>
            <td>第二行 2</td>
            <td>第二行 3</td>
        </tr>
    </table>
</body>

</html>

显示如下：

4，表格的基本属性

表格的属性可以分为两大类，分别为作用于<table>标签的和作用于行<tr>、列<td>的属性。

下面介绍作用于<table>标签的各种属性：

border：表格边框属性
width/height: 表格（宽度/高度）属性
bgcolor: 表格背景色属性
background: 表格背景图属性
bordercolor: 表格边框颜色属性
cellspacing: 表格单元格间距属性
cellpadding: 表格单元格内边距属性
align:表格对齐属性

下面介绍作用于行<tr>、列<td>标签的各种属性：

width/height：单元格宽度/高度属性
bgcolor：单元格背景色属性
align：单元格内容水平对齐属性
valign：单元格内容垂直对齐属性
colspan /rowspan：表格的跨行与跨列

5，表格的结构化与直列化

为了更好地管理及格式化表格，更好地语义化标签，需要掌握表格的结构化与直列化。

表格的结构化：

表格的结构化就是将表格分为表头、表体、表尾三部分，这样在修改其中一部分时不会影响到其他部分，方便对表格进行操作。

一个完整的表格通常包括以下四部分：

1）caption：表格的标题，通常出现在表格的顶部。

2）thead：定义表格表头，通常表现为标题行。

3）tbody：定义一段表格主体，一个表格可以有多个主体，可以按照行来进行分组。

4）tfoot：定义表格的脚尾，通常表现为总计行。

基本语法如下：

<table width="500">
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>表格头部</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>表格主体</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>表格底部</td>
        </tr>
    </tfoot>
</table>

tbody 包含行的内容下载完优先显示，不必等待表格结束。另外，还需要注意表格行本来是从上向下显示的，但是应用了显示。后的后面，网页显示时，还是先写在了以后，就“从头到脚”显示，即不管行代码顺序如何，即使<thead>写在了<tbody>的后面，网页显示时，还是先<thead>后<tbody>显示。

表格的直列化：

通过设置表格的直列化可以对表格的列进行分组，以便对其进行格式化。基本语法如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>表格的基本结构</title>
</head>

<body>
    <table width="500">
        <colgroup style="background-color: yellow;">
            <!--前两列为一组-->
            <col />
            <!--第一列-->
            <col />
            <!--第二列-->
        </colgroup>
        <col style="background-color: blue;" />
        <!--第三列-->
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>头 1</th>
                <th>头 2</th>
                <th>头 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>111</td>
                <td>111</td>
                <td>111</td>
            </tr>
            <tr>
                <td>222</td>
                <td>222</td>
                <td>222</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>尾 1</td>
                <td>尾 2</td>
                <td>尾 3</td>
            </tr>
        </tfoot>
    </table>

</html>

显示如下：

如需对全部列应用样式，标签很有用，这样就不需要对各个单元和各行重复应用样式了。注意：<colgroup> 标签只能在<table>中使用

四，HTML5表单

在网页中，表单主要用于用户填写信息，并将获得的信息传递到后台服务器端，使网页具有交互功能的元素。在 HTML5 中，表单增加了新元素，表单元素也增加了许多新属性，让表单的使用更加便利。

1，表单简介

表单用于让用户填写信息并提交给服务器进行处理，它的用途有很多，如网站的注册登录、在线购物的购物车、论坛留言板等功能。如图所示的 QQ 注册中就使用了表单。

2，表单的结构

表单由许多表单控件组成，主要包括用户填写信息部分和表单提交按钮。用户填写数据第 4 章 HTML5 表单完成后，单击“提交”按钮就可以发送数据到服务器，经过后台程序处理后将用户所需的信息返回到客户端，在浏览器中展示给用户，表单内容由<form></form>包裹。基本语法如下：

<form>

各种表单控件

</form>

3，表单的常用属性

表单的常用属性有 3 种。

action 属性

action 属性用于指定表单提交时向何处发送表单数据，即需要发送的服务器地址。

method 属性

method 属性用于指定表单向服务器提交数据的方法，包括两种方法，分别是 get 和 post。

enctype 属性

enctype 属性指定表单发送的编码方式，只有 method="post"时才有效。

<form action="form.php" method="post">
    各种表单控件
</form>

4，input 输入框

作为表单最重要的元素，input 输入框用于搜集用户信息。根据不同的 type 属性值，可以用多种形式输入内容。例如，当 type 值为 password 时就可以设置输入框为输入密码形式，此时用户输入的内容用小黑点代替显示。灵活使用 input 输入框可以让表单收集更多的信息，下面来具体学习 input 输入框的相关属性和类型。

常用属性：

type 属性

type 属性表示 input 输入框的类型，它的默认值是 text。所有浏览器都支持 type 属性，但是 type 的属性值并不是所有浏览器都可以支持

name 属性

name 属性表示 input 输入框的名称，一般必填。因为传递数据时，使用“name=value” 的形式传递。

value 属性

value 属性表示 input 输入框的默认值。

<form action="form.php" method="post">
      请输入内容：
      <input name="text1" type="text" value="输入框的默认值"/>
</form>

显示效果如下：

placeholder 属性

placeholder 属性表示输入框中的提示信息，当输入框有 value 属性的时候，提示内容会消失，转而显示 value 属性值。

<form action="form.php" method="post">
   请输入内容：
   <input name="text1" type="text" placeholder="请输入"/>
</form>

效果显示如下：

tabindex 属性

tabindex="1" 此属性控制按 Tab 键时的跳转顺序，从最小的数值开始，逐个往大的数值跳转，依次获得焦点。

其他属性：

1） checked="checked" 默认选中。

2）disabled="disabled" 设置控件不能使用。用在按钮上效果为不能单击，用在输入框上则表示不能修改。而且，如果输入框设置为 disabled，则输入框中的信息不能往后台传递。

3）hidden="hidden" 设置隐藏控件。

5，input 输入框 type属性值

text：文本输入框

文本输入框用于输入单行文本，默认宽度为 20 个字符。在登录注册时，常常用到文本输入框，它主要用于填写用户名称。代码示例的运行效果如图所示。代码示例如下：

<body>
    <form action="form.php" method="post">
        请输入内容：
        <input name="text1" type="text" maxlength="10" size="5" />
        <!--上述代码表示这个文本输入框的最大字符长度为 10，可显示的字符数为 5 -->
    </form>
</body>

password：密码输入框

密码输入框输入的内容会以小黑点的形式替代显示。最常见的一种用法就是用户注册登录时需要输入账号密码框，小黑点的形式可以有效地避免密码泄露。代码示例如下：

<body>
    <form action="form.php" method="post">
        请输入内容：
        <input name="pwd" type="password" maxlength="16" />
    </form>
</body>

radio：单选按钮

单选按钮用于填写表单时信息选择，如调查问卷中的单选题。代码示例如下：

    <form action="form.php" method="post">
        <input type="radio" name="sex" value="男" checked="checked" />男
        <input type="radio" name="sex" value="女" />女
    </form>

注意：

 name 和 value 属性需同时存在，提交时，提交的是 value 中的属性值。

例如：<input type="radio" name="sex" value="男"/> 提交时，显示"sex=男"。

 radio 凭借 name 属性区分是否为同一组。name 相同，为同组，同组中只能选择一个。

 checked="checked" 默认选中。radio 只能选一个，checkbox 可以选多个。

checkbox：复选按钮
file：文件上传按钮
submit：表单提交按钮
reset：重置按钮
image：图形提交按钮
button：可单击按钮

6，其他表单元素

select 下拉选择控件

在表单中通过控件可以创建一个下拉式的列表或带有滚动条的列表，可以在列表中选中一个或多个选项，通常用于填写生日、所在地区等信息。开发人员提前设计好选项，让用户在填写信息时可以直接选择，更加方便用户使用。

<body>
    <form action="form.php" method="post">
        今天是星期几：
        <select name="week">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
        </select>
    </form>
</body>

textarea 文本域

与的 type="text"不同，创建的文本域是多行的，文本区中可容纳无限数量的文本，其中文本的默认字体是等宽字体。通常采用 CSS（层叠样式表）来设置其宽度和高度。文本域常见用于论坛回复的文本框、博客的留言板等。

button 按钮

的作用是定义一个按钮，与创建的按钮功能类似，也可以与 JavaScript 一起使用来启动脚本。

7，HTML5 智能表单

在 HTML5 中，表单新增了一些属性和元素，这些属性和元素让表单变得更加方便实用。例如，autocomplete 属性可以让表单具有自动完成功能，浏览器会根据用户之前输入的值自动完成，这就让表单的填写更加方便。

表单分组：

可以组合表单中的相关元素，将表单根据不同的内容进行分组。其中，<fieldset >表示表单边框，<legend>表示表单标题。如果想要让标题嵌入到边框中，则需将标题标签写到边框标签里面，

    <form action="form.php" method="post">
        <fieldset>
            <legend>这是表单的第一部分</legend>
            其他表单控件
        </fieldset>
        <fieldset>
            <legend>这是表单的第二部分</legend>
            其他表单控件
        </fieldset>
    </form>

表单新增元素

<datalist>

<input>标签定义选项列表。它与<input>元素配合使用来定义<input>可能的值。

<datalist>具有和 autocomplete 类似的自动完成功能，但它还有一个功能是 autocomplete属性所没有的，那就是在使用<datalist>时，它可以根据用户输入的内容，在预先设置好的列表中筛选出与用户输入相关的信息作为备选。


<body>
    <form action="form.php" method="post">
        请输入：
        <input type="text" list="list" />
        <datalist id="list">
            <option>123</option>
            <option>abc</option>
            <option>456</option>
            <option>def</option>
            <option>789</option>
        </datalist>
    </form>
</body>

<keygen>

<keygen> 标签规定用于表单的密钥对生成器字段

<output>

<output> 标签定义不同类型的输出，比如脚本的输出

表单新增属性

autocomplete

规定 form 表单具有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项

novalidate

规定在提交表单时不进行验证

autocomplete 属性值有 on 和 off，novalidate 属性值有 true 和 false

input 标签新增属性

autocomplete 规定<input>标签具有自动完成功能
autofocus 规定在页面加载时，控件自动地获得焦点（不过一个页面只能有一个控件使用该属性）
required 规定输入的字段是必需的（必须填写）
pattern 规定通过其检查输入值的正则表达式
form overrides 规定表单重写属性
form 规定输入域所属的一个或多个表单

input 标签新增输入类型

color 定义拾色器
date 限制用户输入时间格式
email 限制用户输入 email 格式
number 限制用户输入数字格式
range 定义包含一定范围内的值的数字字段
search 定义用于输入搜索字符串的文本字段

    <form>
        拾色器：<input type="color" name="test" /><br /><br />
        日期选择：<input type="date" name="test" /><br /><br />
        电子邮件：<input type="email" name="test" /><br /><br />
        数字输入框：<input type="number" name="test" /><br /><br />
        滑块输入：<input type="range" name="test" /><br /><br />
        搜索框：<input type="search" name="test" /><br /><br />
    </form>