HTML从入门到精通

1、HTML 简介

1.1、网站、网页和浏览器

1.1.1、网站

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

1.1.2、网页

网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。

网页是构成网站的基本元素，网页是由网页元素组成的，这些元素是利用html标签描述出来，它通常由图片、链接、文字、声音、视频等元素组成，然后通过浏览器解析来显示给用户的。通常我们看到的网页常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。

1.1.3、浏览器

浏览器是网页显示和运行的平台。常用的浏览器有IE、火狐（Firefox )、谷歌(Chrome ) 、Safari（苹果）和 Opera等，并称为五大浏览器。

浏览器内核（渲染引擎）︰负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
firefox Gecko 火狐浏览器内核
Safari Webkit 苹果浏览器内核
chrome/Opera Blink chrome/opera浏览器内核。Blink其实是WebKit的分支。

1.2、HTML 和 HTML5

1.2.1 HTML

HTML 指的是超文本标记语言(HyperText Markup Language)，它是用来描述网页的一种语言。HTML 不是一种编程语言，而是一种标记语言(markup language)。所谓的超文本，即它可以加入图片、声音、动画、多媒体等内容（超越了文本限制），还可以通过一个文件跳转到另一个文件（超链接文本）。

1.2.2、HTML5

HTML5 是 HTML 最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定，设计的主要目的是为了在移动设备上支持多媒体。HTML5 主要改进在添加了新元素、新属性、本地存储、完全支持CSS3等新，比如新的表单控件，calendar、date、time、email、url、search等。HTML5 仍处于完善之中，虽然大多数的浏览器已经提供了支持。


1.3、Web 标准

Web 标准不是某一个标准，而是一系列标准的集合。Web 标准的三个规范：结构（Structure）、表现（Presentation）和行为（Behavior），并且尽量的相分离。

标准 说明
结构（Structure） 结构用于对网页元素进行整理和分类，主要包括HTML、XHTML和XML等
表现（Presentation） 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为（Behavior） 行为是指网页模型的定义及交互的编写，主要包括JavaScript和DOM（Document Object Model）

1.3.1、结构（Structure）

  1. HTML 是一个超文本标记语言，主要通过网页元素，例如图片、声音、动画、多媒体和链接等，对网页的结构进行划分，它采用了一系列的标签符号来控制输出的效果。

  2. XHTML 是 HTML 向 XML 的过渡语言，删除了部分表现层的标签，标准要求提高，有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。

  3. XML（eXtensible Markup Language）即可扩展标记语言，主要用于网络数据的转换和描述。XML是一种简单的数据存储语言，使用一系列简单的标记描述数据，进行数据的传输。

1.3.2、表现(Behaivor)

表现标准语言主要是CSS（Cascading Style Sheets）层叠式样式表，通过CSS样式表，W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言，通过CSS样式可以使页面的结构标签更具美感、网页外观更加美观。

1.3.3、行为(Presentation)

行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，标准主要包括对象模型（如W3C DOM）、ECMAScript并要求这三部分分离。

  1. DOM （Document Object Model）即文档对象模型的缩写，是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM 给予 Web 设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。

  2. ECMAScript是ECMA(EuropeanComputer Manufacturers Association)制定的标准脚本语言（JAVAScript）


1.4、HTML基本骨架

<!-- 文档声明，声明当前文档遵循HTML5规范，作用就是告诉浏览器使用哪种HTML版本来显示网页。 -->
<!DOCTYPE html>
<!-- 定义文档显示的语言，英语为en，中文为zh-CN等，此定义会提示是否翻译，但不限制文档中使用的语言 -->
<html lang="en">
<!-- 超文本标记语言文件的标记符 -->
<html>
<!-- 定义文档的信息 -->
<head>
    <!-- 定义文档编码格式 -->
    <meta charset="UTF-8">
    <!-- 定义文档标题，显示在网页窗口的标题栏中 -->
    <title>Title</title>
</head>
<!-- 实体标记，网页中显示的内容 -->
<body></body>
</html>

2、HTML 基本标签

2.1、文档信息标签

2.1.1、定义文档信息

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 1. 定义文档编码格式 -->
    <meta charset="UTF-8">

    <!-- 2. 定义文档标题 -->
    <title>Title</title>

    <!-- 3. 定义文档描述 -->
    <meta name="description" content="文档信息标签学习"/>

    <!-- 4. 定义文档关键词 -->
    <meta name="keywords" content="title标签，meta标签，link标签，style标签，script标签"/>

    <!-- 5. 为所有链接设置默认地址和打开方式 -->
    <base href="https://www.baidu.com" target="_blank"/>
</head>
<body>

</body>
</html>

2.1.2、声明代码域和引入外部文件

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 1. 声明CSS代码域 -->
    <style></style>

    <!-- 2. 引入本地CSS样式文件 -->
    <link rel="stylesheet" type="text/css" href="../css/百度百科.css">

    <!-- 3. 声明js代码域 -->
    <script type="text/javascript"></script>

    <!-- 4. 引入本地js脚本文件  -->
    <script type="text/javascript" scr=""></script>

    <!-- 5. 引入网络上的js文件 -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous">
    </script>
</head>
<body>

</body>
</html>

2.2、文本标签

2.2.1、标题和段落标签

标题标签主要有6个，分别是<h1>~<h6>，作用是搜索引擎通过标题为网页的结构和内容编制索引，因此<h1>最重要，应该作为主标题，其余的作用依次递减。标题标签的特点是加黑加粗，独占一行，从<h1>~<h6>字体逐渐减小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>博客园简介 - 代码改变世界 Coding Changes the World</h1>
    <h2>博客园简介 - 代码改变世界 Coding Changes the World</h2>
    <h3>博客园简介 - 代码改变世界 Coding Changes the World</h3>
    <h4>博客园简介 - 代码改变世界 Coding Changes the World</h4>
    <h5>博客园简介 - 代码改变世界 Coding Changes the World</h5>
    <h6>博客园简介 - 代码改变世界 Coding Changes the World</h6>
</body>
</html>

<p>文本</p>是一个段落标签，通过此标签可以将一个文本分割成若干段落，每个标签自动换行，标签内的文本不会随着编译器内的换行或者空格而变化，只有使用换行标签<br />或者转义空格符&nbsp;才可以进行换行或者空格。除此之外，还有大于号&gt、小于号&lt等。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 段落标签 -->
    <p>
        博客园创立于2004年1月，是一个面向开发者的知识分享社区。
        自创建以来，博客园一直致力并专注于为开发者 打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。
        博客园的 使命是帮助开发者用代码改变世界。
    </p>
    <p>
        Cnblogs.com was founded in 2004. <br />
        It is a knowledge-sharing community for developers. <br />
        Our mission is to help developers change the world by coding.
    </p>
</body>
</html>

2.2.2、文本格式化标签

文本格式化标签主要有水平线<hr />、换行<br />、空格&nbsp;、字体加粗<strong></strong>、字体倾斜<em></em>、下划线<u></u>和删除线<del></del>，其中，后面四个标签的作用主要是凸显文本的重要性。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <hr />
    <p>
        <strong>Email</strong><em>：ad@cnblogs.com 或 bd@cnblogs.com</em><br />
        <ins>电话</ins><del>：0571-88079867（杭州）</del><br />
        <small>QQ：206423184</small><br />
        <sub>广告位示例</sub>
    </p>
</body>
</html>

2.2.3、容器标签div和span

<div></div> 标签可以把文档分割为独立的、不同的部分，没有语义。它是块级元素，单独占据一行，可用于组合其他 HTML 元素的容器，一般用它进行页面的布局，大大小小的盒子，通过CSS的定位和渲染后，使得整个网页的布局更加的美观。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>这是一些文本。</p>
    <div style="color:#00FFFF">
        <h3>这是一个在 div 元素中的标题。</h3>
        <p>这是一个在 div 元素中的文本。</p>
    </div>
    <p>这是一些文本。</p>
</body>
</html>

<span></span> 标签是内联元素，可用作文本的容器，不会单独占据一行，没有语义。当与 CSS 一同使用时，可用于为部分文本设置样式属性。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>我有一双
        <span style="color:gold">金色</span> 的
        <span style="font-size:50px">大眼睛</span>和
        <span style="color:blue">蓝色的头发</span>。
    </p>
</body>
</html>

2.3、图像和超链接标签

2.3.1、图像标签

<img /> 图像标签用于向当前页面引入一个外部图片，这个图像资源既可以是本地的，也可以是网络上的，图片格式不限，主要具有以下几个属性：

  • src：图片的资源路径，这个资源既可以是本地服务器的，也可以是网络上的。

  • alt：图片加载不成功时的文字提示，搜索引擎会根据alt的内容识别图片。

  • title：图片的标题，当鼠标悬停时会显示

  • width和height：图片的宽度和高度，如果只修改一个另一个会等比例缩放，PC端修改图片会失真、多占内存，但在移动端，经常将图片缩小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img alt="本地资源" src="../images/a.jpg" title="真帅"><br/>
    <img alt="网络资源" src="https://img2018.cnblogs.com/../1610676-20190715125809080-934042040.png"><br/>
</body>
</html>

2.3.2、超链接标签

<a></a> 标签用来设置超文本链接（超连接），点击链接可以从一张页面跳转到另一张页面。超连接可以是一个字、一幅图、一个页面或者当前文档的某个部分（锚点），同时里面里面还可以文件路径，点击时会自动下载，主要有以下几个属性：

  • href：要跳转的资源路径，也就是链接的地址，可以是一个页面，也可以是当前文档的某个元素位置（锚点）

  • target：指明要跳转的资源的显示位置（链接将以哪种形式出现在浏览器中）

    • _selt：在当前页面刷新显示
    • _blank：在新的页面显示
    • _top：在顶层页面显示
    • _parent：在父级页面显示

默认情况下，链接将以以下形式出现在浏览器中：一个未访问过的链接显示为蓝色字体并带有下划线；访问过的链接显示为紫色并带上下划线；点击链接时，链接显示为红色并带上下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定来显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://www.cnblogs.com/mh20131118" target="_blank">外部链接</a><br/>
    <a href="TextTag.html" target="_selt">内部链接</a><br/>
    <a href="test.txt" target="_selt">下载链接</a><br/>
</body>
</html>

相比HTML4，HTML5做了很大的改进，摒弃之前a标签嵌套的繁琐，而是废除了name属性，改用id来定位锚点。就如同CSS,Jquery中的ID选择器定位页面DOM元素一样，通过ID快速跳转到指定锚点位置。同样的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#d3">我在找OA系统</a><br/>
    <a id="d1">禅道项目管理软件</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <a id="d2">蝉知企业门户系统</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <a id="d3">然之协同办公系统</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

HTML5这样修改最大的好处就是方便用户跳转任意元素，因为每个元素都可以设置ID属性，而无需再去嵌套a标签。也就是说，HTML5中所有设有id属性的标签元素都可直接当作锚点。使用选择器定位，这样也很符合前端人员书写CSS，Jquery的习惯，而且各大主流搜索引擎都已兼容该功能。


2.4、列表标签

列表标签就是在网页中将相关资料以条目的形式有序或者无序排列而形成的表。常用的列表有无序列表、有序列表和定义列表三种。另外，还有不太常用的目录列表和菜单列表。

2.4.1、无序列表

无序列表(Unordered List)是一个没有特定顺序的相关条目(或称为列表项)的集合。在无序列表中，各个列表项之间属并列关系，没有先后顺序之分，它们之间以一个项目符号来标记。

在HTML中，可以使用成对的<ul></ul>标记插入无序列表，其中的列表项标记<li></li>(list-items)用来定义列表项序列。

使用无序列表标记的type属性，可以指定出现在列表项前的项目符号的样式，其取值以及相对应的符号样式如下（HTML5中已经废除了）：

  • disc：指定项目符号为一个实心圆点(IE浏览器默认值是disc)；

  • circle：指定项目符号为一个空心圆点；

  • square：指定项目符号为一个实心方块。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 1.无序列表 -->
    <h4>中国四大电商</h4>
    <ul>
        <li><a href="https://www.taobao.com" target="_blank">淘宝</a></li>
        <li><a href="https://www.jd.com" target="_blank">京东</a></li>
        <li><a href="https://www.suning.com" target="_blank">苏宁</a></li>
        <li><a href="https://www.pinduoduo.com" target="_blank">拼多多</a></li>
    </ul>
</body>
</html>

2.4.2、有序列表

有序列表(Ordered List)是一个有特定顺序的相关条目(或称为列表项)的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。

在HTML中，可以使用成对的<ol></ol>标记插入有序列表，其中的列表项标记<li></li>(list-items)用来定义列表项序列。

使用有序列表标记的type属性，可以指定出现在列表项前的项目编号的样式，其取值以及相对应的符号样式如下：

  • 1：指定项目编号为阿拉伯数字(IE浏览器的默认值)；

  • a：指定项目编号为小写英文字母；

  • A：指定项目编号为大写英文字母；

  • i：指定项目编号为小写罗马数字；

  • I：指定项目编号为大写罗马数字。

通常，在指定列表的编号样式后，浏览器会从1、a、A、ⅰ、Ⅰ开始自动编号。而在使用有序列表标记的start属性后，用户则可改变标号的起始值。start属性值是一个整数，表示从哪一个数字或字母开始编号。

除了对列表标记<ol></ol>进行属性设置外，还可以对列表项标记<li></li>进行属性设置。使用列表项标记<li></li>的type属性，可以指定单个列表项的符号(对于无序列表而言)或编号(对于有序列表而言)。在列表标记<ol></ol>的type属性和列表项标记<li></li>的type属性发生冲突的情况下，所指定的单个列表项遵循<li></li>的type属性进行设置（HTML5已删除列表项的type属性）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 2.有序列表 -->
    <h4>中国四大电商</h4>
    <ol type="A" start="2">
        <li><a href="https://www.taobao.com" target="_blank">淘宝</a></li>
        <li><a href="https://www.jd.com" target="_blank">京东</a></li>
        <li><a href="https://www.suning.com" target="_blank">苏宁</a></li>
        <li><a href="https://www.pinduoduo.com" target="_blank">拼多多</a></li>
    </ol>
</body>
</html>

2.4.3、自定义列表

在HTML文件中，只要在适当的地方插入<dl></dl>标记，即可自动生成定义列表(Definition List)。它的每一项前既没有项目符号，也没有编号，它是通过缩进的形式使内容层次清晰。

通过<dl></dl>标记用来创建定义列表，<dt></dt>标记用来创建列表中的上层项目（列表项标题），此标记只能在<dl></dl>标记中使用。显示时，<dt></dt>标记定义的内容将左对齐。

<dd></dd>标记用来创建列表中的下层项目（列表项数据），此标记只能在<dl></dl>标记中使用。显示时<dd></dd>标记的内容将相对于<dt></dt>标记定义的内容向右缩进。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 3. 自定义列表 -->
    <h4>自定义列表</h4>
    <dl>
        <dt>马云</dt>
            <dd>淘宝</dd>
            <dd>阿里</dd>
        <dt>京东</dt>
            <dd>自营</dd>
            <dd>快递</dd>
    </dl>
</body>
</html>

2.4.4、嵌套列表

列表还可以嵌套使用，也就是一个列表中还可以包含有多层子列表。嵌套列表可以是无序列表的嵌套，也可以是有序列表的嵌套，还可以是有序列表和无序列表的混合嵌套。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 嵌套列表 -->
    <ul>
        <li>水果
            <ol type="A">
                <li>苹果</li>
                <li>香蕉</li>
                <li>橘子</li>
            </ol>
        </li>
        <li>蔬菜
            <ol type="i">
                <li>土豆</li>
                <li>茄子</li>
                <li>黄瓜</li>
            </ol>
        </li>
    </ul>
</body>
</html>

2.5、表格标签

在 HTML 中，我们使用 <table></table> 标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的，都包括行、列、单元格、表头等元素。但是 HTML 表格在功能方面远没有 Excel 表格强大，HTML 表格不支持排序、求和、方差等数学计算，它一般用来展示数据。

一个HTML的表格标签<table></table>包含<tr></tr>、<td></td>、<th></th>、<caption></caption>、<thead></thead>、<tfoot></tfoot>、<tbody></tbody>、<col />和<colgroup>等元素，这些元素分别对应表格的行、单元格、表头、表题、组合表头、组合内容等。

2.5.1、表格的基本标签

HTML所有的表格的内容都要写到<table></table>内，主要有三个基本的标签：

  • <tr>：是 table row 的简称，表示表格的行。表格中有多少个 <tr> 标签就表示有多少行数据。

  • <td>：是 table datacell 的简称，表示表格的单元格，这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。

  • <th>：是 table heading 的简称，表示表格的表头。<th> 其实是 <td> 单元格的一种变体，本质上还是一种单元格。<th> 一般位于第一行，充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。

默认情况下，表格是没有边框的。但是我们可以使用

标签中的 border 属性来设置表格的边框宽度，单位是像素（px）。本例中我们将表格的边框宽度设置为 1px。注意，px 是默认的单位，不用显式指明。

注意：在 HTML5 中，仅支持<table>标签的 "border" 属性，并且只允许使用值 "1" 或 ""。同时，除了<th>和<td>的合并单元格属性，即rowspan和colspan属性，其他的都不再支持。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 表格的基本标签 -->
    <table border="1" >
        <tr>
            <th>学号</th>
            <th>班级</th>
            <th>姓名</th>
            <th>专业</th>
        </tr>
        <tr>
            <td>201901</td>
            <td>310181</td>
            <td>张三</td>
            <td>软件技术</td>
        </tr>
        <tr>
            <td>201902</td>
            <td>310181</td>
            <td>李四</td>
            <td>软件技术</td>
        </tr>
    </table>
</body>
</html>

2.5.2、表格的高级标签

HTML 中的高级标签主要是为了能够更好的管理表格，例如使用<thead></thead>标签组合表格的表头，使用<tbody></tbody>标签组合表格的内容，<tfoot></tfoot>表示表格的页脚，这些元素内部必须包含一个或者多个<tr>标签， 并且元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

  • <thead>：组合 HTML 表格的表头内容。<thead> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 元素之后，<tbody>、<tfoot> 和 <tr> 元素之前。

  • <tbody>：组合 HTML 表格的主体内容。<tbody> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后。

  • <tfoot>：标签用于组合 HTML 表格的页脚内容。<tfoot> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在<caption>、<colgroup>和 <thead> 元素之后，<tbody> 和<tr>元素之前。

  • <caption>：标签用于定义表格的标题，必须直接放置到 <table> 标签之后，同时一个表格只有一个标题。通常这个标题会被居中于表格之上。然而，CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。

  • <col>：标签用于控制表格中的列，使你更加方便的为表格中的列应用样式。通过使用 <col> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。<col> 标签规定了 <colgroup> 元素内部的每一列的列属性。其中，span属性规定<col>元素应该横跨的列数。

  • <colgroup>：标签用于对表格中的列进行组合，以便对其进行格式化。通过使用 <colgroup> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。此元素只能在

元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 表格的高级标签 -->
    <table border="1">
        <caption style="text-align: center; caption-side: top">这个是表格的标题</caption>
        <colgroup>
            <col span="2" style="background-color: rebeccapurple">
            <col style="background-color: #00FFFF">
        </colgroup>
        <thead>
            <tr>
                <th>学号</th>
                <th>班级</th>
                <th>姓名</th>
                <th>专业</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>这个是页脚</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>201901</td>
                <td>310181</td>
                <td>张三</td>
                <td>软件技术</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

2.5.3、表格的单元格的合并

和 Excel 类似，HTML 也支持单元格的合并，包括跨行合并和跨列合并两种。

  • rowspan：表示跨行合并。在 HTML 代码中，允许我们使用 rowspan 特性来表明单元格所要跨越的行数。

  • colspan：表示跨列合并。同样的，在 HTML 中，允许我们使用 colspan 特性来表明单元格所要跨越的列数。

具体格式如下：
<td rowspan="n">单元格内容</td>或<td colspan="n">单元格内容</td>，n 是一个整数，表示要合并的行数或者列数。此处需注意，不论是 rowspan 还是colspan都是 <td> 标签的属性。

下面的例子中，我们将表格第 2 列的第 1、2、3 行单元格合并（跨行合并），将第 3 行的第 3、4 列合并（跨列合并）。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 表格的单元格合并 -->
    <table border="1">
        <caption style="text-align: center; caption-side: top">这个是表格的标题</caption>
        <colgroup>
            <col span="2" style="background-color: rebeccapurple">
            <col style="background-color: #00FFFF">
        </colgroup>
        <thead>
            <tr>
                <th>学号</th>
                <th>班级</th>
                <th>姓名</th>
                <th>专业</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>201901</td>
                <td rowspan="3">310181</td>
                <td>张三</td>
                <td rowspan="2">软件技术</td>
            </tr>
            <tr>
                <td>201902</td>
                <td>李四</td>
            </tr>
            <tr>
                <td>201903</td>
                <td colspan="2">王五</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

通过运行结果可以发现：

rowspan 属性表示向下合并单元格，colspan 属性表示向右合并单元格，每次合并 n 个单元格都要少写 n-1 个<td>标签。

提示：即使一个单元格中没有任何内容，我们仍需使用 <td> 或 <th> 元素来表示一个空单元格的存在，建议在 <td> 或 <th> 中加入 &nbsp;（空格），否则低版本的 IE 可能无法显示出这个单元格的边框。


3、表单标签及其属性

HTML 表单(form) 在网页中主要负责数据采集功能，利用表单可以实现与用户的交互，比如收集浏览者的信息或实现搜索等功能。

一个HTML表单主要包括表单域、表单元素以及提示信息。表单域就是整个<form></form>包括的区域；表单控件主要包括所有的表单元素，例如<input>标签等；提示信息主要包括文本框的输入提示、输入的格式信息等。

3.1、表单域

<form> 标签用于创建供用户输入的 HTML 表单，即表单域，可以包含一个或多个如下元素：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>，其属性如下所示：

属性 值 描述
action URL 规定当提交表单时向何处发送表单数据，一般为URL、一个页面或者空
accept-charset character_set 规定服务器可处理的表单数据字符集
method get、post、PUT、DELETE等 规定用于发送表单数据的 HTTP 方法
name text 规定表单的名称
novalidate novalidate 如果使用该属性，则提交表单时不进行验证
autocomplete on、off 规定是否启用表单的自动完成功能
enctype application/x-www-form-urlencoded、multipart/form-data、text/plain 规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method="post" 的情况）
target _self、_parent、_top、_blank 规定在何处打开 action URL

3.2、表单元素

3.2.1、input

HTML 文本域是最为常用的表单类型，使用“input”表示。另外，对于文本域表单，在 HTML 5 中也提供了很多不同的输入类型，输入类型使用“type”定义。下面分别介绍演示。

  • type=“text”和“password”：普通文本域和密码框。普通文本域只能输入一行数据，密码字段字符不会明文显示，而是以星号或圆点替代的，可以通过maxlength属性指定两者的数据长度。与之类似的还有type="search"和"tel"，即搜索框和电话。

  • type=“radio”和“checkbox”：单选框和多选框。多个单选按钮和多选按钮的name属性值必须相同，当单选按钮的name值不同时，可以多选。单选按钮和多选按钮除了name和value属性外，还具有checked属性，当checked="checked"时，默认选中当前按钮。

  • type=“date”、“datetime-local”：日期（不含时间）和日期时间。两者可以通过required属性，规定必需在提交表单之前填写输入字段。

  • type=“color”和“button”：拾色器，此类型的表单将会调出拾色器用于选取颜色，当用鼠标点中表单时将会调出拾色器。按钮只是一个普通的按钮，一般用来触发JS的相关处理，实现异步的信息校验或者获取功能。

  • type=“number”：只能输入数值，并且还能够设定对所接收的数字的限定，也可设置步进长度，例如：数量(1~10, 步进为3)<input type="number" name="quantity" min="1" max="10" step="3">，此文本域中数量从 1 开始，每次可以增加 3，最大不超过 10，所以可取值为 1、4、7、10。

  • type=“url”和“email”：地址和邮件。url 类型用于应该包含 URL 地址的输入域，在提交表单时，会自动验证 url 域的值。email 类型用于应该包含 email 地址的输入域，提交表单时，程序会对 email 表单进行验证，若不符合 email 格式，则会给出相应的提示。

  • type=“submit”和“reset”：提交按钮和重置按钮。当用户单击提交按钮时，表单的内容会按照method的方法，传送到action对应的地方。重置按钮一般是将多个输入重置到默认状态。

  • type=“image”：图像输入框，其中的src属性规定显示为提交按钮的图像的 URL，width和height属性用来设置图片的宽高，alt属性定义图像输入的替代文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="TextTag.html" method="get" accept-charset="UTF-8">
        用户名：<input type="text" name="username" maxlength="10" value="请输入用户名"><br />
        密码： <input type="password" name="password"><br />
        性别： <input type="radio" name="sex" value="0" checked="checked">男
        <input type="radio" name="sex" value="1">女 <br />
        爱好：<input type="checkbox" name="hobby" value="打篮球" checked="checked">打篮球
        <input type="checkbox" name="hobby" value="看电影">看电影
        <input type="checkbox" name="hobby" value="蹦迪">蹦迪 <br />
        QQ：<input type="number" name="qq" min="1" max="10" step="3" required><br />
        邮箱：<input type="email" name="email" required><br />
        出身日期：<input type="date" name="birthday" required>
        上班时间：<input type="datetime-local" name="workTime" required><br />
        头像：<input type="image" src="../images/bg.png" alt="你的头像" width="100px" height="100px">
    </form>
</body>
</html>

注意，当type=“submit”和“image”时，还可以有一下的属性，

  • formaction：规定当表单提交时处理输入控件的文件的 URL。

  • formenctype：规定当表单数据提交到服务器时如何编码。

  • formmethod：定义发送表单数据到 action URL 的 HTTP 方法。

  • formnovalidate：覆盖 <form> 元素的 novalidate 属性。

  • formtarget：表示提交表单后在哪里显示接收到响应的名称或关键词。


3.2.2、标记、下拉框、文本域

HTML5的 <label> 标签用于为 input 元素做出标记。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签通过 for 属性把 label 绑定到顶一个元素上， for 属性应当与相关元素的 id 属性相同。

<select> 元素用来创建下拉列表。<select> 元素中的 <option> 标签定义了列表中的可用选项，主要包括以下几个属性值：

  • autofocus：规定在页面加载时下拉列表自动获得焦点。

  • disabled：当该属性为 true 时，会禁用下拉列表。

  • form：定义 select 字段所属的一个或多个表单。

  • multiple：当该属性为 true 时，可选择多个选项。

  • name：定义下拉列表的名称。

  • required：规定用户在提交表单前必须选择一个下拉列表中的选项。

  • siz：规定下拉列表中可见选项的数目。

<textarea> 标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 标记标签、下拉框以及文本域 -->
    <form action="TextTag.html" method="get">
        <label for="male">男</label>
        <input type="radio" name="sex" id="male" value="男">
        <label for="female">女</label>
        <input type="radio" name="sex" id="female" value="女"><br>

        请选择你喜欢的水果：
        <select size="10" name="水果" required>
            <option value="苹果" autofocus>苹果</option>
            <option value="橘子">橘子</option>
            <option value="香蕉">香蕉</option>
            <option value="菠萝">菠萝</option>
        </select>

        <textarea rows="4" cols="5">这是一个文本区域</textarea>

        <input type="submit" value="提交">
    </form>
</body>
</html>

4、HTML5新标签及其属性

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者，等。

4.1、新的多媒体元素

4.1.1、音频

<audio> 标签是 HTML5 提供的用来播放音频文件的，比如音乐或其他音频流。目前，<audio> 元素支持的3种文件格式分别是：MP3、Wav、Ogg，IE 8 或更早版本的 IE 浏览器不支持 <audio> 标签。

可以在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持<audio>标签的浏览器中，<audio> 主要具有以下几个属性：

  • autoplay：如果出现该属性，则音频在就绪后马上播放。

  • controls：如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。

  • loop：如果出现该属性，则每当音频结束时重新开始播放。

  • muted：如果出现该属性，则音频输出为静音。

  • none：规定当网页加载时，音频是否默认被加载以及如何被加载。

  • src：规定音频文件的 URL。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 1. 新的多媒体元素 -->
    <!-- 音频 -->
    <audio controls autoplay>
        <!-- <source> 标签可以为<picture>、<audio>或<video>元素指定一个或者多个的媒体资源 -->
        <source src="horse.ogg" type="audio/ogg">
        <source src="horse.mp3" type="audio/mpeg">
        您的浏览器不支持 audio 元素。
    </audio>
</body>
</html>

4.1.2、视频

<video> 标签是 HTML5 提供用来播放视频文件的，<video> 标签可以将视频内容嵌入到HTML文档中，比如电影片段或其他视频流。目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。 <video> 标签主要包含以下几个属性：

  • autoplay：如果出现该属性，则视频在就绪后马上播放。

  • controls：如果出现该属性，则向用户显示控件，比如播放按钮。

  • loop：如果出现该属性，则当媒介文件完成播放后再次开始播放。

  • muted：如果出现该属性，视频的音频输出为静音。

  • poster：规定视频正在下载时显示的图像，直到用户点击播放按钮。

  • preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

  • src：要播放的视频的 URL。

  • width：设置视频播放器的宽度。

  • heigh：设置视频播放器的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 1. 新的多媒体元素 -->
    <!-- 视频 -->
    <video width="320" height="240" controls autoplay>
        <!-- <source> 标签可以为<picture>、<audio>或<video>元素指定一个或者多个的媒体资源 -->
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        您的浏览器不支持 video 标签。
    </video>
</body>
</html>

4.1.3、插件

<embed> 标签用来定义在页面中嵌入的内容，比如插件，所有主流浏览器都支持 <embed> 标签。<embed> 标签定义了一个容器，用来嵌入外部应用或者互动程序（插件）。它主要有以下几个属性：

  • height：规定嵌入内容的高度。

  • src：规定被嵌入内容的 URL。

  • type：规定嵌入内容的 MIME 类型。注：MIME = Multipurpose Internet Mail Extensions。

  • width：规定嵌入内容的宽度。

<embed src="helloworld.swf" width="100px" height="100px">

4.1.4、字幕

<track> 标签用作<audio>元素和 <video> 元素的子级，它允许您指定定时文本轨道（或基于时间的数据），采用 WebVTT 格式（.vtt 文件），<track> 标签为媒体元素（比如 <audio> and <video>）规定外部文本轨道，这个元素用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。

提示：track 给媒体元素添加的数据的类型在 kind 属性中设置，kind 属性的取值请参考下面的可选属性列表。

  • default：规定该轨道是默认的。如果用户没有选择任何轨道，则使用默认轨道。

  • kindNew：规定文本轨道的文本类型。主要有captions、chapters、descriptions、metadata、subtitles几个类型。

  • label：规定文本轨道的标签和标题。

  • src：规定轨道文件的 URL。

  • srclang：规定轨道文本数据的语言。如果 kind 属性值是 "subtitles"，则该属性是必需的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 1. 新的多媒体元素 -->
    <!-- 字幕 -->
    <video width="320" height="240" controls autoplay>
        <!-- <source> 标签可以为<picture>、<audio>或<video>元素指定一个或者多个的媒体资源 -->
        <source src="forrest_gump.mp4" type="video/mp4">
        <source src="forrest_gump.ogg" type="video/ogg">
        <track src="subtitles_en.vtt" kind="subtitles" srclang="en"
               label="English">
        <track src="subtitles_no.vtt" kind="subtitles" srclang="no"
               label="Norwegian">
    </video>
</body>
</html>

4.2、新的表单元素

<datalist> 标签需要与 <input> 标签配合使用，用来表示<input>可选的列表。<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

提示：不能控制 datalist 的位置，并且不能将其与服务器的数据进行绑定，IE 9 和更早版本的 IE 浏览器 以及 Safari 不支持 标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 2. 新的表单元素 -->
    <form accept-charset="UTF-8" action="TextTag.html" method="get">
        <!-- 可选列表 -->
        <input list="browsers">
        <datalist id="browsers">
            <option value="Internet Explorer">
            <option value="Firefox">
            <option value="Chrome">
            <option value="Opera">
            <option value="Safari">
        </datalist>
    </form>
</body>
</html>

4.3、新的语义和结构元素

传统的页面布局都是通过<div> 标签的class属性进行标识，例如导航使用class="nav"等，以下是一些常用的布局规范。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 3. 新的语义和结构元素 -->
    <!-- 传统的页面布局 -->
    <!-- 页头 -->
    <div class="header">页头</div>
    <!-- 导航 -->
    <div class="nav">导航</div>
    <!-- 主体内容 -->
    <div class="main">主要内容
        <!-- 文章 -->
        <div class="article">文章
            <!-- 节 -->
            <div class="section">节</div>
        </div>
        <!-- 边栏 -->
        <div class="sidebar"></div>
    </div>
    <!-- 页脚 -->
    <div class="footer">页脚</div>
</body>
</html>

HTML5 新增了一些专门用来布局的新的语义和结构元素，分别如下：

  • header元素：一般用于网页的头部，定义头部的区域块，也可以定义一块内容，所定义的内容是一块独立的。

  • footer元素：与header元素基本一致，但是footer元素一般定义网页的底部内容。

  • nav元素：可以用来定义导航栏，目录，超链接等；并不是需要把所有的连接组都放进nav元素中，只需要将主要的，基本的连接组放进nav元素即可。

  • article元素：用于定义一个独立的内容区块；可以是一篇博客，一篇文章或者是独立的插件；可以嵌套使用，也可以表示插件。类似于div元素

  • section元素：用来定义页面中的内容进行分块；强调分块。一般用于页面中具有明显独立的内容

  • aside元素：通常用来设置侧边栏。同时也可以嵌套在article元素内部使用，作为主要内容的附属信息，比如参考资料，名词解释等也可以定义article元素之外的内容，前提是这些内容与article元素内容相关联。

  • time元素：表示24小时中的某个时刻或某个日期，表示时刻允许带时差。datetime属性中日期与时间要用”T“文字分隔 使用”z“表示UTC标准时间。pubbdate属性是一个可选标签，可以让搜索引擎很方便就识别出文章日期，新闻的发表日期

  • rogress和meter元素：progress元素是HTML5新增的元素，用来建立一个进度条；通常用来与JavaScript结合使用，来显示任务的进度。meter元素：是HTML5新增的元素，用来建立一个度量条，用来表示度量衡的评定；通常与JavaScript结合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 3. 新的语义和结构元素 -->
    <!-- HTML5新增布局元素 -->
    <!-- 页头 -->
    <header>
        <!-- 导航 -->
        <nav>导航</nav>
    </header>
    <!-- 主体内容 -->
    <main>主体内容
        <article>文章
            <section>节</section>
        </article>
    </main>
    <!-- 页脚 -->
    <footer>页脚</footer>
</body>
</html>
posted @ 2022-07-14 10:26  静守己心&笑淡浮华  阅读(203)  评论(0)  编辑  收藏  举报