HTML ：深入了解超文本标记语言
文章目录
-
- 前言
- HTML 简介
- HTML 基本结构
- HTML 标记
-
- HTML 文本标记
- HTML 图像标记
- HTML 链接标记
- HTML 表单
- HTML 表格
- HTML 列表
- HTML 媒体元素
- HTML 语义化
前言
欢迎来到本篇博客，我将带你深入了解 HTML（超文本标记语言）。作为前端开发的基础，HTML是构建网页的重要工具。在这里，我们将涵盖 HTML 的全部内容，包括常用语句和标签。
HTML 简介
HTML，全称HyperText Markup Language，是一种用于创建网页结构的标记语言。它由一系列的标签组成，标签用于标记网页的不同部分和内容，以便浏览器正确解析和显示网页。
在网站设计中，纯粹的HTML格式网页通常称为“静态网页”，早期的网站一般都是由静态网页组成的。静态网页的特点是这个网页不论何时何地被浏览，都将显示相同的形式和内容，且仅能供浏览，无法与网站进行互动。
静态页面使用HTML编写，通常扩展名一般为.htm、.html、.shtml、.xml等。静态网页只能单纯地在网页中展示文字与图片，听起来似乎功能简单，但它是所有网页的基础要素，其重要性自然也不言而喻。
在静态网页中，整个网页的主要结构与网页的显示控制都必须利用HTML实现。在HTML格式的网页上，可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字母等。这些“动态效果”只是视觉上的，它们与动态网页是不同的概念。
HTML 基本结构
HTML 文档的基本结构如下：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题title>
head>
<body>
body>
html>
- < !DOCTYPE html >：声明文档类型为 HTML5，确保浏览器正确解析文档。
- < html >：HTML 根元素，包含整个网页内容。
- < head >：包含网页的元信息，如标题、字符编码等。
- < meta >：定义网页的元信息，例如字符编码。
- < title >：设置网页的标题，显示在浏览器标签页上。
- < body >：包含网页的可见内容，如文本、图像、链接等。
HTML 标记
HTML用于描述功能的符号称为“标记”，如“HTML”、“BODY”、“TABLE”等。标记在使用时必须用尖括号“<>”括起来，而且是成对出现，无斜杠的标记表示该标记的作用开始，有斜杠的标记表示该标记的作用结束。
HTML标记由左尖括号（<）和右尖括号（>）组成，浏览器会对尖括号里面的标记进行解释。如在HTML代码中出现< p >< /p >标记对时，浏览器在解释该标记对的过程中，会把它们看成段落并以段落的样式显示在网页中，同理，< table >< /table >标记对被浏览器看做表格来解析。在标记中，可分成单标记和双标记，而双标记即刚刚提到的标记对。
HTML 文本标记
HTML 提供了一系列文本标记，用于组织和呈现文本内容。以下是一些常用的文本标记：
标题：< h1 > 到 < h6 >，用于定义标题，< h1 > 为最高级标题，< h6 > 最低级。
段落：< p >，用于定义段落。
强调：< em >，用于强调文本，通常以斜体显示。
加粗：< strong >，用于强调重要性。
斜体：< i >，用于斜体文本。
下划线：< u >，用于下划线文本。
删除线：< del >，用于删除线文本。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本标记title>
head>
<body>
<h1>最高级标题h1>
<h6>最低级标题h6>
<p>这是一个段落p>
<em>强调文本em>
<strong>重要文本strong>
<b>粗体文本b>
<i>斜体文本i>
<u>下划线文本u>
<s>删除线文本1s>
<del>删除线文本2del>
body>
html>
del标记和s标记的区别
< del > 标记和 < s > 标记都是用于表示删除线，但它们在语义和用途上有一些区别。
< del > 标记：
< del > 是 HTML5 中引入的标签，表示被删除的文本或内容。它的主要目的是用于在文档中显示已被删除或不再有效的信息。通常在版本更新或编辑过程中使用，用于显示被移除的文本内容。示例：
<p>请不要忘记带 <del>雨伞del> 防晒霜。p>输出：
请不要忘记带 雨伞 防晒霜。
注：大多数浏览器会对 < del > 标记中的内容添加删除线样式。< s > 标记：
< s > 标记是 HTML4 中引入的标签，也用于表示删除线，但它并没有 < del > 标记的语义含义。在 HTML5 中，< s > 标记被重新定义为表示不再准确或不推荐使用的内容，但它并不意味着内容已被删除。因此，在 HTML5 中，通常更推荐使用 < del > 标记来表示真正的删除内容。示例：
<p>这是<s>过时的s> 不推荐使用的功能。p>输出：
这是 过时的 不推荐使用的功能。总结：在语义上，< del > 标记用于表示真正删除的内容，而 < s > 标记则用于表示不推荐使用或不准确的内容。所以，如果要表达被删除的文本，应该使用 < del > 标记，而不是 < s > 标记。
HTML 图像标记
在网页中插入图像，可以使用 < img > 标签：
< img src=“image.jpg” alt=“图片描述” >
src：指定图像的路径。
alt：指定图像的替代文本，当图像无法加载时，会显示该文本。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像标记title>
head>
<body>
<img src="image/jay.jpg" alt="这是一张jay的一张图像">
body>
html>
HTML 链接标记
创建链接，使用 < a > 标签：
< a href=“https://www.example.com”>点击这里< /a >
href：指定链接的目标 URL。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接标记title>
head>
<body>
<a href="https://www.baidu.com/">点击这里跳转到百度搜索a>
body>
html>
HTML 表单
HTML 表单允许用户输入数据，并提交到服务器进行处理。表单由 标签包裹，包含各种表单元素，如文本输入框、复选框、单选按钮等。
< form action=“/submit” method=“post”>
< label for=“username”>用户名：< /label>
< input type=“text” id=“username” name=“username” required>
< br>
< label for=“password”>密码：< /label>
< input type=“password” id=“password” name=“password” required>
< br>
< input type=“submit” value=“登录”>
< /form>
action：指定表单数据提交的目标 URL。
method：指定数据提交的方法，可以是 get 或 post。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单title>
head>
<body>
<form action="/submit" method="post">
<input type="text" name="username" placeholder="请输入用户名">
<br>
<input type="password" name="password" placeholder="请输入密码">
<br>
<input type="submit" value="登录">
form>
body>
html>
HTML 表格
当涉及HTML表格时，有多种标签和属性可用于定制和优化表格的外观和功能。以下是HTML表格的所有用法的综合介绍：
< table > 标签
< table > 标签用于创建表格，是表格的最外层容器。< tr > 标签
< tr > 标签用于定义表格中的行（行）。每个< tr >标签都包含一个或多个< td >（数据单元格）和/或< th >（表头单元格）标签。< td > 和 < th > 标签
< td > 标签用于定义表格中的数据单元格。< th > 标签用于定义表格的表头单元格。两者在功能上是相同的，但< th > 标签通常用于表头行，以使其与数据行有一些不同的样式。< caption > 标签
< caption > 标签用于定义表格的标题。它应该在< table >标签的内部，但在< thead >、< tbody >或< tfoot >等标签之前。< thead >、< tbody > 和 < tfoot > 标签
这些标签用于在表格中分组表头、正文和页脚内容。< thead > 包含表格的表头行，< tbody > 包含数据行，< tfoot > 包含表格的页脚行。在大型表格中，使用这些标签可以提高可读性并使表格更易于维护。colspan 和 rowspan 属性
colspan 属性用于指定单元格跨越的列数，而 rowspan 属性用于指定单元格跨越的行数。这两个属性使您可以创建具有合并单元格的复杂表格结构。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格title>
head>
<body>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
style>
<table>
<caption>学生成绩表caption>
<thead>
<tr>
<th>姓名th>
<th>科目th>
<th>成绩th>
tr>
thead>
<tbody>
<tr>
<td rowspan="3">小明td>
<td>数学td>
<td>90td>
tr>
<tr>
<td>语文td>
<td>85td>
tr>
<tr>
<td>英语td>
<td>95td>
tr>
<tr>
<td>小红td>
<td>数学td>
<td>88td>
tr>
tbody>
table>
body>
html>
HTML 列表
当涉及HTML列表时，有三种常见的列表类型：无序列表（< ul >）、有序列表（< ol >）和定义列表（< dl >）。以下是HTML列表的所有用法的综合介绍：
无序列表（Unordered List）
无序列表由 < ul > 标签定义，每个列表项由 < li > 标签定义。无序列表中的项通常以项目符号或其他标记显示。
有序列表（Ordered List）
有序列表由 < ol > 标签定义，每个列表项由 < li > 标签定义。有序列表中的项会自动按顺序进行编号。
定义列表（Definition List）
定义列表由 < dl > 标签定义，每个项目由 < dt > 标签定义，每个项目的定义由 < dd > 标签定义。通常用于描述术语或名称与其定义的关系。
嵌套列表
您还可以在列表项中嵌套其他列表，例如在无序列表或有序列表的列表项中放置另一个列表。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表title>
head>
<body>
<ul>
<li>列表1li>
<li>列表2li>
<li>列表3li>
ul>
<ol>
<li>列表1li>
<li>列表2li>
<li>列表3li>
ol>
<dl>
<dt>列表1dt>
<dd>列表1的描述dd>
<dt>列表2dt>
<dd>列表2的描述dd>
<dt>列表3dt>
<dd>列表3的描述dd>
dl>
<ul>
<li>列表1li>
<li>列表2li>
<li>列表3
<ul>
<li>列表3-1li>
<li>列表3-2li>
<li>列表3-3li>
ul>
li>
ul>
body>
html>
HTML 媒体元素
HTML 支持嵌入多媒体内容，如视频、音频等。使用 < video> 和 < audio> 标签可以实现：
< video src=“video.mp4” controls>< /video>
< audio src=“audio.mp3” controls>< /audio>
src：指定媒体文件的路径。
controls：显示媒体播放控件。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>媒体元素title>
head>
<body>
<video src="image/最伟大的作品MV.mp4" controls width="50%">video>
<br>
<audio src="image/NF - You're Special.mp3" controls>audio>
body>
html>
HTML 语义化
HTML 语义化是指使用恰当的标签来描述网页结构和内容，以增加网页的可读性和可访问性。例如使用 < header > 表示页眉，< nav > 表示导航栏，< main > 表示主要内容等。
HTML 布局元素
除了 < div > 和 < span >，HTML5 引入了一些语义化的布局元素，用于更清晰地定义网页结构：
< header >：表示网页或区块的页眉。
< nav >：表示导航链接。
< main >：表示页面的主要内容。
< section >：表示文档中的一个区域。
< article >：表示独立的内容，如文章或博客帖子。
< aside >：表示侧边栏或附属内容。
< footer >：表示网页或区块的页脚。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语义化title>
head>
<body>
<header>
<h1>语义化h1>
header>
<nav>
<ul>
<li><a href="#">首页a>li>
<li><a href="#">新闻a>li>
<li><a href="#">产品a>li>
<li><a href="#">关于a>li>
ul>
nav>
<article>
<section>
<h2>新闻标题h2>
<p>新闻内容p>
section>
<section>
<h2>新闻标题h2>
<p>新闻内容p>
section>
article>
<aside>
<h2>侧边栏h2>
<p>侧边栏内容p>
aside>
<footer>
<h2>页脚h2>
<p>版权信息p>
footer>
body>
html>
