网页学习——HTML

一、HTML网页的介绍

1.1 简单的HTML网页框架

每一个基本的HTML网页都包含一个基础框架，其他的内容都是在基础框架内进行扩充的。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
输入正文
</body>
</html>

1.2 框架分析

复制代码

<!DOCTYPE html>标签：用于声明此HTML网页为HTML5网页，此标签在整个网页中只需要一个。HTML存在多个版本，此标签的作用是帮助浏览器快速识别当前网页中的标签使用的是哪个版本，不同版本的HTML在标签上有差别。

复制代码

<html lang="en">标签：表示HTML网页的根元素，此标签需要成对出现，第一个<html>标签表示HTML页面的开始，第二个<html>标签表示HTML页面的结束，标签之间是网页的全部内容。此外标签中的属性lang是language的缩写，表示网页使用哪种语言，en表示English,即使用英文，中文网页则使用lang='zh-CN'。

复制代码

<head>标签：网页的头部标签，此标签需要成对出现。标签之间通常插入HTML网页的标题、样式、元数据等内容（此部分的内容并不是网页端口中显示的内容）。

复制代码

<meta charset="UTF-8">标签：其中的<meta>标签用于描述基本的元数据，此标签在整个网页中只需要一个，为单标签，通常用于表明网页的描述、关键字、字符编码方式等。charset="UTF-8"表示字符编码方式为UTF-8，浏览器获取到的此标签信息会按照UTF-8编码方式翻译此网页内容。

<title> 标签：用于设置网页的标题，此标签需要成对出现，标签中的内容为网页标题。

<body >标签：用于显示在网页窗口中的内容，即网页的正文，此标签需要成对出现，表示标签之间的内容都会显示在网页窗口中。<body>标签中的内容可以插入多个内容标签来充分的展示多元化的网页信息。

二、常用标签

2.1 标题标签

在HTML网页中，可以使用**<h1>~<h6>** 来表示网页中正文内容的标题（不同于网页的标题），不同标题的显示效果不同，<h1>标签的标题级别高于<h2>标签的标题级别，以此类推，<h6>标签的标题级别最低。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<h1>我是正文内容标题一</h1>
<h2>我是正文内容标题二</h2>
<h3>我是正文内容标题三</h3>
<h4>我是正文内容标题四</h4>
<h5>我是正文内容标题五</h5>
<h6>我是正文内容标题六</h6>
</body>
</html>

由运行结果发现<h1>标签对中的内容显示在网页的上方，且标签内容的显示效果（字体大小）为<h1>大于<h2>大于<h3>大于<h4>大于<h5>大于<h6>。

2.2 段落标签

在HTML网页中，可以使用**<p>**标签来表示一个段阔的内容。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<h1>我是正文内容标题一</h1>
<p>这里可以写一个段落的文字信息</p>
</body>
</html>

2.3 超链接标签

超链接标签<a>可以用于实现在网页中单击某个信息链接后自动跳转到另一个网页。

使用形式为：

html 复制代码

<a href="链接的网址">链接的文字内容</a>

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<h1>我是正文内容标题一</h1>
<p>这里可以写一个段落的文字信息</p>
<a href="http://www.baidu.com">链接到百度</a>
</body>
</html>

2.4 注释标签

在HTML中也有与python相同含义的注释功能，即运行.html文件时部分代码不会被执行，浏览器读取此标签时，也不会将此部分当成元素进行渲染。

使用形式：

html 复制代码

<!-- 写注释 ->
内容
<!-->

html 复制代码

<!--
写注释
-->

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<h1>我是正文内容标题一</h1>
<p>这里可以写一个段落的文字信息</p>
<a href="http://www.baidu.com">链接到百度</a>
<!-- 下面的<p>被注释了 ->
<p>这里可以写一个段落的文字信息</p>
<!-->
</body>
</html>

2.5 标签属性

标签属性用于给标签设置附加功能，当给标签赋予多种不同含义的属性之后，标签也能具备更多的功能。

属性一般位于开始标签的标签名右边，且属性的值为字符串类型，且属性的值为字符串类型，且需要用引号引起来。

常见的标签属性有：

class ：为HTML网页元素定义一个或者多个类名。

id：定义元素的唯一id，此id值在整个网页中是唯一的。

style：定义标签的行内样式。

title：设置标签的额外信息，当鼠标指针移到此标签上时会显示一段提示文本。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<h1>我是正文内容标题一</h1>
<p>这里可以写一个段落的文字信息</p>
<a href="http://www.baidu.com">链接到百度</a>
<h3 id="python", title="我是提示信息",  style="color:red;">我是正文内容标题一</h3>

<!-- 下面的<p>被注释了 ->
<p>这里可以写一个段落的文字信息</p>
<!-->
</body>
</html>

三、设置字体格式

3.1 设置字体的字形和效果

设置粗体格式使用**<b>** 标签，设置斜体格式使用**<i>** 标签，设置上标格式使用<sup>标签，设置下表格式使用**<sub>** ，设置下划线格式使用**<u>**标签。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<h1><i>我是</i><sup>正文</sup>内容<sub>标题一</sub></h1>
<p>这里可以写<b>一个</b>段落的<u>文字信息</u>></p>
<a href="http://www.baidu.com">链接到百度</a>
<h3 id="python", title="我是提示信息",  style="color:red;">我是正文内容标题一</h3>
<!-- 下面的<p>被注释了 ->
<p>这里可以写一个段落的文字信息</p>
<!-->
</body>
</html>

3.2 设置字体颜色

HTML颜色由红色，绿色，和蓝色混合而成，字体颜色可以通过属性style设置。

使用形式为：

html 复制代码

<标签名 style="color: 颜色值">内容</标签名>

颜色值有三种选择：

1、十六进制符号。

2、RGB值

3、颜色名

当style样式值为background时设置字体的背景颜色，background值的使用方式与上面三种颜色值的使用方式相同。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<h1><i>我是</i><sup>正文</sup>内容<sub>标题一</sub></h1>
<p>这里可以写<b>一个</b>段落的<u>文字信息</u>></p>
<a href="http://www.baidu.com">链接到百度</a>
<h3 style="background: lightgreen",id="python", title="我是提示信息",  style="color:red;">我是正文内容标题一</h3>
<!-- 下面的<p>被注释了 ->
<p>这里可以写一个段落的文字信息</p>
<!-->
</body>
</html>

当style中存在多个值时，需要使用分号隔开，且style样式为一个字符串。

3.3 设置字体大小

通过给style赋予font-size的值来实现。

使用形式为：

html 复制代码

<body>
<标签名 style="font-size: 38pt"> 我是标题1</标签名>
</body>

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<h1><i>我是</i><sup>正文</sup>内容<sub>标题一</sub></h1>

<h2 style="font-size: 38pt"> 我是标题2</h2>

</body>
</html>

四、添加多媒体

4.1 添加网页图片

在网页中添加图片可以使用<img>标签（<img>是单标签，只需要一个即可）实现。

使用形式为：

html 复制代码

<img src="网址" alt="文字" width="304px" height="200px">

<img>标签存在多个属性，这里列举常见的src，alt，width，height属性。

src：指必须填入的属性，表明插入图片的url

alt：指当src链接的图片url失效了或因其他原因无法显示图片时出现的提示性文字。

width和height：图片的宽度和高度。单位为px，表示像素，当只填入一个参数时，默认按原比例缩放。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<h1>来自网络</h1>
<img src="https://picsum.photos/304/200" alt="图片丢失了" width="304px" height="200px">

</body>
</html>

4.2 添加音频

使用<audio>标签实现在网页中插入音频。

使用形式为：

html 复制代码

<audio controls="controls" src="音频地址.mp3" type="音频类型">当浏览器不支持播放时的提示信息</audio>

controls：为网页音频播放提供控件，如播放、暂停等

src：用于链接音频文件的地址，音频文件地址一般以.mp3、.wav等为后缀

type：音频文件的类型，.mp3格式为audio/mpeg，.ogg格式为audio/ogg、.wav格式为audio/wav

python 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<h1>来自网络</h1>

<audio controls="controls" src="音乐.mp3" type="音频类型">音乐丢失</audio>
</body>
</html>

<audio>标签中包含文字信息。某些浏览器不支持<audio>标签，因此当浏览器无法播放音频时，网页会显示文字"当前浏览器不支持播放的提升信息"。

4.3 添加网页视频

使用<video>标签实现在网页中插入视频。

html 复制代码

<video src="视频网址" controls="controls" width="宽度值" height="高度值"autoplay loop muted> </video>

src：需要播放视频的url，视频的链接地址一般以.mp4为后缀

controls：为网页视频播放提供控件，，如播放、暂停等

width和height：视频的宽度和高度，单位为px，即像素

autoplay：表示一旦通过url链接到视频文件便会自动播放视频

loop：设置视频循环播放

muted：设置视频播放时静音

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<h1>来自网络</h1>
<video src="视频网址" controls="controls" width="500" height="300"autoplay loop muted> </video>
</body>
</html>

五、创建容器

5.1 <div>标签

使用<div>标签来建立一个容器。

使用形式为：

html 复制代码

<div>其他标签</div>

被<div>标签所包含的标签都隶属于同一个容器。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<h1>标题1</h1>
<div style="background: antiquewhite">
    <h2>标题2</h2>
    <p>可以输入内容</p>
</body>
</html>

5.2 布局

使用形式为：

html 复制代码

<div style="width: 容器宽度;height: 容器高度;float:容器位置"></div>

width和height：容器的宽度和高度，长度单位为px，即像素。

float：容器的位置，值可以为right（靠右侧），left（靠左侧），bottom（靠底部），top（靠顶部）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<h1>标题1</h1>
<div style="background: antiquewhite;width: 500px;height: 400px">
    <h2>标题2</h2>
    <div style="background: brown; width: 200px;height: 300px;float: left">
        <p>可以输入内容</p>
        <p>python <span style="color: blue">开始</span>学习</p>
    </div>
    <div style="background: darkcyan; width: 300px;height: 300px;float: right">
        <p>可以输入内容again</p>
        <p>python <span style="color: blue">开始</span>工作</p>
    </div>

</div>
</body>
</html>

六、表格

6.1 表格标签

使用<table>创建表格，表格的行数由<tr>标签的个数决定，表格的列数由<tr>标签中<td>标签的个数决定。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    <h1>表格1</h1>
    <table broder="2">
        <tr>
            <td>第一行中的第一格</td>
            <td>第一行中的第二格</td>
        </tr>
        <tr>
            <td>第二行中的第一格</td>
            <td>第二行中的第二格</td>
        </tr>
    </table>
</body>
</html>

6.2 添加表格表头

使用<th>标签实现

使用形式为：

html 复制代码

<th colspan="2">表格表头内容</th>

colspan：表示表头单元格可横跨的列数。

rowspan：表示单元格可横跨的行数。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    <h1>表格1</h1>
    <table broder="2">
        <th colspan="2">表格表头内容</th>
        <tr>
            <td>第一行中的第一格</td>
            <td>第一行中的第二格</td>
        </tr>
        <tr>
            <td>第二行中的第一格</td>
            <td>第二行中的第二格</td>
        </tr>
    </table>
</body>
</html>

6.3 添加表格标题

使用<caption>实现

使用形式为：

html 复制代码

<caption>标题内容</caption>

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    <h1>表格1</h1>
    <table broder="2">
        <caption>表格标题内容</caption>
        <tr>
            <td>第一行中的第一格</td>
            <td>第一行中的第二格</td>
        </tr>
        <tr>
            <td>第二行中的第一格</td>
            <td>第二行中的第二格</td>
        </tr>
    </table>
</body>
</html>

在 HTML 表格中，标签的分工是明确的：

<th>：表格表头单元格标签（table header），用于定义表格的列 / 行标题。
<caption>：表格标题标签（table caption）」，用于给整个表格起一个总标题。