大二下，HTML5知识点

HTML简单介绍

超文本标记语言

  • 超文本是什么：链接

  • 标记是什么：也叫标签，带尖括号的文本

  • 保持的文件的扩展名为.html

示例：

<strong>显示在网页上时，可以加粗中间的这段文本</strong>

<br>

<!-- 这是注释 -->

<!-- br可用于换行，hr可用于添加一条水平线>

<hr>

以上是双标签（有开始标签和结束标签，结束标签比开始标签多/）和单标签（只有开始标签）示例

开发环境

  • VS Code（很好的编辑器）

  • 谷歌浏览器、Microsoft Edge、联想浏览器等等

HTML基础

HTML基本骨架

示例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Hello world</title>

</head>

<body bgcolor="F6F3D6">

<-- 用HTML语言向世界打声招呼！-->

<h1 align="center">Hello World</h1>

<p align="center">动手改变世界</p>

</body>

</html>

说明：

1. <!DOCTYPE html>

告诉浏览器：本文档采用 HTML5 标准解析，进入标准模式（非兼容模式）。

2. <html>

根元素标签，网页所有内容都必须包在里面。可省略，但写上更规范。

3. <head>

网页的“头部”，放元数据、标题、外部资源引用等，不会直接显示在页面可视区域。

4. <meta charset="utf-8">

指定字符编码为 UTF-8，保证中文、emoji等字符能被正确识别，防止乱码。

5. <title>Hello world</title>

浏览器标签页上看到的标题文字，就是这里定义的“Hello world”。

6. </head>

头部结束。

9. <body>

网页的“身体”开始，所有可见内容都写在这里。

如果写成<body bgcolor="red"> ,可以把界面设置成红色（也可以设置其他颜色） 。

10. <h1>Hello World</h1>

一级标题，文字“Hello World”。

可以写成<h3 align="center">，让一级标题变成三级标题，也可以让文字居中。（下面的<p>，要居中，也是同理）

11. <p>动手改变世界</p>

段落元素，文字“动手改变世界”，也用了居中对齐。

12. </body>

身体部分结束。

13. </html>

根元素结束，整个文档闭合。

HTML结构

meta元素提供元数据信息，主要包括：

  • 页面编码；

  • 网页标题；

  • 网页描述；

  • 网页关键词。

这些信息，一方面可用于告知浏览器如何展示页面，另一方面可以提供给搜索引擎检索。因为搜索引擎会通过meta元素的name和content属性来检索页面，所以当我们加入了合适的关键字和描述内容时，页面就更容易被搜索引擎发现。

示例：

<head>

<title>自我简介</title>

<meta charset="utf-8">

<meta name="description" content="xxx的自我简介网站">

<meta name="keywords" content="自我简介,关键词一,关键词二,关键词三">

</head>

  • 编码格式：charset

  • 描述：name

  • 关键词：content

ul 和 li 是 HTML 里的“列表标签”，专门用来做“无序列表”（前面带小圆点的列表）。

  1. <ul>
    unordered list 的缩写，中文叫“无序列表”。
    作用：告诉浏览器“这里面的内容是一个列表，每个条目前面给我加个小圆点”。

  2. <li>
    list item 的缩写，中文叫“列表项”。
    作用：真正存放每一条内容的容器，必须放在 <ul>（或 <ol>）里面，否则就是非法写法。

示例：

<body>

<h1 align="center">自我简介</h1>

<h2>简介</h2>

<p>在这里简单的描述一下你自己吧。</p>

<h2>三个与你最有关的词</h2>

<p>这三个词可以是一种形容，也可以是一种运动或者是一种独特的爱好，等等。</p>

<ul><!-- 里面一定要有<li>，没有写，浏览器会帮你补，但是会补得很乱 -->

<li>第一个词</li><!-- 在文本前面加小圆点 -->

<p>选择第一个词的原因</p>

<li>第二个词</1li>

<p>选择第二个词的原因</p>

<li>第三个词</1i>

<p>选择第三个词的原因</p>

</ul>

</body>

HTML文本

HTML链接：带超链接的网页

href 属性

href 属性是超链接最重要的属性，它用于指定超链接目标的 URL（Uniform Resource Locator，统一资源定位器）。

典型的超链接格式：<a href="URL">

  • 锚 URL 实例：创建网页内导航

<body>

<h1>HTML 入门</h1>

<h2>本页目录</h2>

<ul>

<li><a href="#toc1">简介</a></li> <!-- 用<a>和href，让文字变成可点击的链接，<a>和href默认就是“官方CP” -->

<li><a href="#toc2">第1关</a></li>

<li><a href="#toc3">第2关</a></li>

</ul>

<h2 id="toc1">简介</h2> <!-- 给“简介”小节加唯一身份证 toc1，上面的href="#toc1"才能精准跳转 -->

<p>

HTML(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。

在CSS(Cascading Style Sheets，级联样式表单)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。

</p>

<h2 id="toc2">第1关</h2>

<p>初识HTML：简单的Hello World网页</p>

<h2 id="toc3">第2关</h2>

<p>HTML链接：带超链接的网页</p>

<hr>

<p><a href="#">回到顶部</a></p>

</body>

  • 相对 URL 实例：跳转到同一网站的另一个网页

<body>

<h2>主页</h2>

<h3>网站导航：</h3>

<ul>

<li><a href="./home.html">主页</a></li>

<li><a href="./blog.html">博客</a></li>

<li><a href="./project.html">项目</a></li>

<li><a href="./about.html">关于我</a></li>

</ul>

</body>

  • 绝对 URL 实例：跳转到另一网页

<body>

<p>你可以使用搜索引擎，例如

<a href="https://www.google.cn" title="google搜索">Google</a>、

<a href="https://www.baidu.com" title="Baidu搜索">Baidu</a>、

<a href="https://www.bing.com" title="bing搜索">Bing</a>等，搜索网络信息。

</p>

</body>

HTML标题与段落：网络文章网页

  • 分级标题

HTML提供了六级标题用于创建网页信息的层级关系。<h1> 定义重要等级最高的标题，之后<h2>到<h6>层级依次递减。

举例如下：

<body>

<h1>书籍标题</h1> <!-- 一般一个网页只有一个<h1> -->

<h2>第一章</h2>

<h3>第一节</h3>

<h4>重点 1</h4>

<h5>1.1 标题</h5>

<h6>1.1.1 标题</h6>

</body>

  • 段落与换行

示例：

<p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的标记语言。<br>

在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台</p>

  • 列表

如果列表顺序是不能随意交换时，我们使用有序列表。例如：

<body>

<p>健身房基本锻炼步骤</p>

<ol>

<li>热身</li>

<li>无氧运动(包括俯卧撑、仰卧起坐、器械锻炼等)</li>

<li>有氧运动(包括慢跑、单车、游泳、登山机等)</li>

<li>拉伸、放松</li>

</ol>

</body>

如果列表顺序不重要时，我们使用无序列表。例如：

<body>

<p>购物清单</p>

<ul>

<li>酸奶</li>

<li>苹果</li>

<li>鸡胸肉</li>

<li>白炽灯泡</li>

</ul>

</body>

  • 文本格式化

常用的元素如下：

strong：加粗，表示内容的重要性

em：表示内容的着重点

mark：表示内容高亮显示

small：表示细则一类的旁注

b：希望读者注意的文字

i：表示不同于其他文字的文字，具有不同的语态或语气

sub：定义下标

sup：定义上标

HTML表格

  • 一个最基本的表格如下：

<body>

<table border="1">

<!-- 第一行 -->

<tr>

<td>第一行第一个单元格数据</td>

<td>第一行第二个单元格数据</td>

</tr>

<!-- 第二行 -->

<tr>

<td>第二行第一个单元格数据</td>

<td>第二行第二个单元格数据</td>

</tr>

</table>

</body>

  • 带表头的表格，示例：

<body>

<table width="400">

<!-- 表标题 -->

<caption>通讯录</caption>

<!-- 表头 -->

<tr>

<th scope="col">姓名</th>

<th scope="col">电话</th>

<th scope="col">备注</th>

</tr>

。。。。。。。。。。。。。。

  • 可以通过编写CSS修改边框样式，写在<head>里，示例：

<head>

<meta charset="UTF-8" />

<title>HTML–简单表格</title>

<style type="text/css">

table

{

border-collapse: collapse;

}

th,

td

{

border: 1px solid #000;

}

</style>

</head>

  • scope属性

<th>元素的scope属性用于定义表头数据与单元数据关联的方法。本例中值为col，表示规定的是列的表头。

其他的一些值含义如下：

值

含义

col

单元格是列的表头

row

规定单元格是行的表头

colgroup

单元格是列组的表头

rowgroup

单元格是行组的表头

  • 结构更清晰的表格：

为了使表格的整体结构更加的清晰，我们还能够使用<thead>、<tbody>和<tfoot>元素来定义表格。

  • 单元格跨越多行或多列的表格：

可以设定colspan 和 rowspan 属性让 <th> 或 <td>单元格跨越多行或多列。

HTML多媒体

HTML图片：带图片的网页

  • 在 HTML 中，我们使用 <img> 标签定义图像。

基本的写法：<img src="URL" alt="" /> <!-- alt文本的作用：在图像无法显示时，就会显示的文本 -->

src源属性，即source，它指定了图片资源的URL地址。

  • height, width 属性: 设定图像尺寸。

示例：

<body>

<h1 align="center">适配不同设备的应用图标</h1>

<br>

<div align="center">

<img src="。。。" width="50" height="50" alt="50*50 应用图标">

<img src="。。。" width="100" height="100" alt="100*100 应用图标">

<img src="。。。" width="200" height="200" alt="200*200 应用图标">

</div>

</body>

什么，你问<div>是什么？<div> 就是一个空盒子，用来：

  1. 装东西（图片、文字、别的盒子）

  2. 摆位置（居中、分栏、留白）

  3. 做样式（背景、边框、动画）

没语义、看不见，专供 CSS 当“骨架”。

  • align 属性：设置对齐与浮动方式

我们还可以在一段文本中加入图片，而图片的对齐方式和浮动方式都是由align属性设定的。

align的取值可以有：

对齐：

bottom 底对齐

top 顶对齐

middle 中心对齐

浮动：

left 左浮动

right 右浮动

HTML音频：音乐播放网页

  • 使用HTML5<audio>元素播放

示例：

<audio controls="controls" height="100" width="100">

  <source src="./audio/青石巷.mp3" type="audio/mp3" />
  
  <source src="./audio/青石巷.wav" type="audio/wav" />
  
  <source src="./audio/青石巷.ogg" type="audio/ogg" />
  
  <embed height="100" width="100" src="song.mp3" />

</audio>

HTML5 <audio> 元素会尝试以 mp3、wav或 ogg 格式来播放音频。如果失败，代码将回退尝试 <embed> 元素。

<embed>元素定义外部内容的容器，能够将音频嵌入网页中。

  • 属性

我们还能为<audio>元素添加不同的属性，为播放器带来更多的功能，常见的一些属性如下表所示：

属性名

属性含义

autoplay

自动播放

controls

播放控件

loop

循环播放

muted

静音

preload

预加载播放

  • 使用雅虎媒体播放器播放

示例：

<a href="./audio/song.mp3">点击播放</a>

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
<!-- 只需要添加以上这一行脚本，点击播放时，就可以打开播放器播放，保障了各个浏览器的兼容性 -->

  • 使用超链接播放

示例：

<a href="./audio/青石巷.mp3">点击播放</a>

HTML视频：视频播放网页

  • 使用HTML5<video>元素播放

可以使用 HTML5 <video> 元素来进行播放。通常可以配合加入<object>和<embed>。

例如：

<video width="550" controls="controls">

        <source src="./video/Sail-Away.mp4" type="video/mp4" />

        <source src="./video/Sail-Away.ogv" type="video/ogv" />

        <source src="./video/Sail-Away.webm" type="video/webm" />

        <object data="./video/Sail-Away.mp4" width="320" height="240">

        <embed src="./video/Sail-Away.swf" width="320" height="240" />

            你的浏览器不支持该视频格式。 Your browser does not support this video format.

        </object>
</video>

在本例中，首先，HTML5 <video> 元素会尝试以 mp4、ogg 或 webm 格式中的一种来播放视频。如果失败，代码将回退尝试 <embed> 元素。

  • 属性

如同<audio>元素，<video>也有类似的属性：

属性名

属性含义

autoplay

自动播放

controls

播放控件

loop

循环播放

muted

静音

preload

预加载播放

  • 嵌入视频网站播放

我们也可以将视频上传到常见的视频网站上，例如优酷、爱奇艺、腾讯视频等，这些网站都会提供嵌入到网页中的HTML代码。

  • 使用超链接播放

同音频播放类似，使用使用超链接的方式，浏览器会自动识别视频文件，然后起用“辅助应用程序”来播放视频文件。

示例：<a href="./video/Sail-Away.mp4" target="_blank">远航.mp4</a>

大二下，HTML5知识点
http://localhost:8090//archives/da-er-xia
作者
24智能B班黄镔
发布于
2025年09月21日
许可协议