HTML基础知识详解：Web标准与语义化,
系列文章目录
文章目录
前言
此篇文章适宜新人入坑，也用于自己进行知识回滚。
这部分比较简单，在记事本或者任意编辑器跟着写一下就可以理解。
推荐编辑器vs code 安装教程：菜鸟教程
有兴趣的可以关注一下，此教程会持续更新。
一、Web 标准
1-1 Web 标准构成
Web 标准不是某一个标准，而是由 W3C 和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
- 结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是 HTML。
- 表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是 CSS。
- 行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 JavaScript。
1-2 Web标准的好处
- 让 Web 的发展前景更广阔
- 内容能被更广泛的设备访问
- 更容易被搜寻引擎搜索
- 降低网站流量费用
- 使网站更易于维护
- 提高页面浏览速度
二、HTML 概念
HTML（Hyper Text Markup Language 的缩写），中文译为“超文本标记语言”。是用来描述网页的一种语言。
所谓超文本，是因为它可以加入图片、声音、动画、多媒体等内容。不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。
HTML 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML实例</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
HTML 不是一种编程语言，而是一种标记语言（Markup Language）。标记语言是一套标记标签（Markup Tag）。
总结：HTML 的作用就是用标记标签来描述网页，把网页内容在浏览器中展示出来。
2-1 HTML 标签
HTML 标记标签通常被称为 HTML 标签（HTML Tag）。HTML 标签是由尖括号包围的关键词，比如 <html>。
2-2 HTML 骨架格式
就如同我们平常的书信作文一样需要按照格式来书写，同理HTMl也有自己的骨架格式。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>声明
<!DOCTYPE> 不是一个 HTML 标签，而是一个声明，用来告知 Web 浏览器页面使用了哪种 HTML 版本。<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。
【注意】 总是给你的 HTML 文档添加 <!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。
<html> 标签
HTML 文档的根节点，包括所有 HTML 标签的根标签。
<head> 标签：文档的头部
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<head> 标签中必须包含 <title> 标签。
<title> 标签：文档的标题
定义浏览器工具栏中的标题；提供页面被添加到收藏夹时的标题；显示在搜索引擎结果中的页面标题。
<body> 标签：文档的主体
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等）。
2-3 HTML 标签分类
2-3-1 双标签
HTML 标签成对出现的，叫做双标签：
<标签名>内容</标签名>
该语法中“<标签名>”表示该标签的作用开始，一般称为开始标签（Start Tag）；“</标签名>” 表示该标签的作用结束，一般称为结束标签（End Tag）。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。开始和结束标签也被称为开放标签和闭合标签。
示例：
<div>div标签独占一行，像一个盒子。</div>
<p>p标签将文档变成一行行的段落。</p>
<a>a标签是一个可跳转的链接。</a>
2-3-2 单标签
HTML 标签单个出现的，叫做单标签：
<标签名 />
单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。单标签又称自闭合标签。
示例：
这句文本后面需要换行。<br />
<input placeholder="这是一个输入框" />
<img src="图片地址" />`
2-4 HTML 标签关系
标签的相互关系分为两种：
2-4-1 嵌套关系（父子关系）
<head>
<title></title>
</head>
如果两个标签之间的关系是嵌套关系，子元素最好缩进一个 tab 键位。增加代码可读性，让别人更容易看出层级关系。
2-4-2 并列关系（兄弟关系）
<head></head>
<body></body>
如果两个标签之间的关系是并列关系，最好上下对齐。
三、语义化标签
语义化标签可以理解为用于进行网页页面构建的标签，他们不会影响页面内容，只是对页面结构的规范化。
3-1 为什么要有语义化标签
- 当只有 HTML 页面时，没有 CSS 样式，我们仍然可以很清晰的看懂页面的 DOM 结构。
- 团队维护，当团队来 review 代码或者重构时，增强代码的可读性，更利于维护。
- 有利于 SEO，搜索引擎爬虫依赖于标签来确定上下文和各个关键字的权重。
- 提高用户体验，比如 title 和 alt 等用来解释内容信息。
3-2 常见的语义化标签
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>：分级标题，与<title>协调使用有利于搜索引擎优化。<ul>、<li>：无序列表。<ol>、<li>：有序列表。<dl>、<dt>、<dd>：自定义列表。<header>：头部标签，用来写网页最上方的公共头部，也就是页眉。<nav>：标记导航，对页面内重要的链接群使用。一般写在<header>标签里面，内部有<ul>无序列表。<article>：定义一块与上下文不相关的独立内容，比如一篇文章。<main>：页面主要内容，一个页面只能使用一次。<section>：定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。<aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、相关产品列表等。<footer>：页脚，只有当父级是body时，才是整个页面的页脚。<abbr>：简称或缩写。<address>：定义文档作者或拥有者的联系信息。如果<address>元素位于<article>元素内部，则它表示该文章作者或拥有者的联系信息。
- 示例效果：
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>示例代码</title>
</head>
<body>
<header>
<nav>
<ul>
<li>链接1</li>
<li>链接2</li>
<li>链接3</li>
<li>链接4</li>
</ul>
</nav>
</header>
<main>
<aside>
<p>这是一个侧边栏 aside</p>
</aside>
<div>
<section>
<p>p1</p>
<p>p2</p>
</section>
<section>
<p>p3</p>
<p>p4</p>
</section>
</div>
</main>
<footer></footer>
</body>
</html>
四、HTML 头部标签
1.<head>： <head> 元素包含了所有的头部标签元素。在 <head> 元素中你可以插入脚本（scripts）、样式文件（styles）及各种 meta 信息。
2.<title>：标签定义了不同文档的标题。
3.<base>：描述了基本的链接地址/链接目标，该标签作为 HTML 文档中所有的链接标签的默认链接。
<head>
<base href="https://blog.youkuaiyun.com/PLAY_star?spm=1011.2415.3001.5343" target="_blank">
</head>
href：超链接的地址,也可以认为是超链接的根。
target：超链接的打开方式。
4.<link>：<link> 标签定义了文档与外部资源之间的关系，通常用于链接到样式表（通常指 CSS 样式表）文件：
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
css代码用于美化页面，后续也会更新css教程。
5.<style>：在 <style> 元素中可以直接添加样式（通常指 CSS 样式表）来渲染 HTML 文档：
<head>
<style>
body { background-color: yellow; }
p { color: blue; }
</style>
</head>
6.<meta>：<meta> 标签描述了一些基本的元数据，通常用于指定网页的描述、关键词、文件的最后修改时间、作者和其他元数据。
元数据也不显示在页面上，但会被浏览器解析，可以应用于浏览器（如何显示内容或重新加载页面）、搜索引擎（关键词）或其他 Web 服务：
<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript" />
<meta name="description" content="前端教程" />
<meta name="author" content="star" />
<meta http-equiv="refresh" content="18" />
<meta> 标签也可以描述当前文档的字符编码格式：
<meta charset="utf-8" />
utf-8 是目前最常用的字符集编码方式，常用的字符集编码方式还有 gbk 和 gb2312。
-
gb2312：简单中文，包括 6763 个汉字。
-
gbk：包含全部中文字符，是 bg2312 的扩展，加入对繁体字的支持，兼容 gb2312。
-
utf-8：包含全世界所有国家需要用到的字符。
我们可以优先考虑使用 utf-8 字符集，这样就可以避免出现字符集不统一而引起乱码的情况了。
7.<script>：<script> 标签用于定义客户端脚本（默认指 JavaScript 脚本）：
<head>
<script>
document.write("Hello World!")
</script>
</head>
五、文本格式化
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。
| 标签 | 显示效果 |
|---|---|
| <b></b> 或 <strong></strong> | 文本以粗体方式显示（推荐使用 strong 代替 b）。 |
| <i></i> 或 <em></em> | 文字以斜体方式显示（推荐使用 em 代替 i）。 |
| <s></s> 或 <del></del> | 文字以加删除线方式显示（推荐使用 del 代替 s）。 |
| <u></u> 或 <ins></ins> | 文字以加下划线方式显示（推荐使用 ins 代替 u）。 |
| <small></small> | 文字以小号字体大小显示。 |
| <sup></sup> | 文字以上标方式显示。 |
| <sub></sub> | 文字以下标方式显示。 |
| <pre></pre> 或 <code></code> | 可以定义预格式化的文本，常用来表示计算机的源代码。 <pre> 用来显示多行代码； <code> 用来显示一行代码； <pre> 可以包裹 <code> 元素。 |
示例代码：
<p><strong>粗体</strong>的文本</p>
<p><em>斜体</em>的文本</p>
<p>加<del>删除线</del>的文本</p>
<p>加<ins>下划线</ins>的文本</p>
<p><small>小号</small>的文本</p>
<p>上标文本：10<sup>2</sup></p>
<p>下标文本：H<sub>2</sub>O</p>
<pre>
var text = 'Hello World';
</pre>
效果：
六、基本语法结构
6-1 元素语法
- HTML 元素以开始标签起始； <b>
- HTML 元素以结束标签终止； </b>
- 元素的内容是开始标签与结束标签之间的内容； <b>我是内容</b>
- 某些 HTML 元素具有空内容（empty content）；<b></b>
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）；
- 大多数 HTML 元素可拥有属性。
6-2 属性语法
- HTML 元素可以设置属性；
- 属性可以在元素中添加附加信息；
- 属性一般描述于开始标签；
- 属性总是以名称/值对的形式出现，比如：
type="button"。
| 属性 | 描述 |
|---|---|
| class | 为 html 元素定义一个或多个类名（classname）（类名从样式表文件引入）。 |
| id | 定义元素的 id，在同一个页面中唯一。 |
| style | 规定元素的行内样式（inline style）。 |
| title | 描述了元素的额外信息（作为工具条使用）。 |
示例：
<a href="https://www.baidu.com/" id="link-baidu" class="link" title="百度一下，你就知道" style="color: red;">百度</a>
七、常见标签及其属性
7-1 标题标签
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML 提供了 6 个等级的标题，即 <h1>、<h2>、<h3>、<h4>、<h5> 和 <h6>。
标题的基本语法格式如下：
<h2>标题文本</h2>
<h3>副标题文本</h3>
请尽量避免使用 h1 标签。h1 标签一般是给 logo 使用，或者给页面中最重要的标题信息使用。
7-2 段落标签
在网页中要把文字有条理地显示出来，就离不开段落标签。就如同我们平常写文章一样，整个网页也可以分为若干个段落。
段落的基本语法格式如下：
<p>文本内容</p>
段落是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
7-3 水平线标签
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰、层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，<hr/> 就是创建横跨网页水平线的标签。
<p>第一个段落</p>
<hr />
<p>第二个段落</p>
7-4 换行标签
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，回车键换行是不起作用的，需要使用换行标签。
<p>
鹅，鹅，鹅；<br />
曲项向天歌。
</p>
7-5 图像标签
HTML 网页中任何元素的实现都要依靠 HTML 标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签 <img /> 以及和它相关的属性。
其基本语法格式如下：
<img src="图像URL" />
img的相关属性有:
| 属性 | 属性值 | 必须 | 描述 |
|---|---|---|---|
| src | URL | 是 | 图像的路径，可以是相对路径或绝对路径。 |
| alt | 文本 | 否 | 图像不能显示时的替换文本。 |
| title | 文本 | 否 | 鼠标悬停时显示的内容。 |
| width | 像素 | 否 | 设置图像的显示宽度。 |
| height | 像素 | 否 | 设置图像的显示高度。 |
7-6 链接标签
在 HTML 中创建超链接非常简单，只需用标签环绕需要被链接的对象即可。
其基本语法格式如下：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| 属性 | 属性值 | 描述 |
|---|---|---|
| href | URL | 用于指定链接目标的 url 地址或锚点。 当 a 标签应用 href 属性时，它就具有了超链接的功能。 如果没有确定链接目标，通常将 a 标签的 href 属性值定义为 #，表示该链接暂时为一个空链接。 |
| target | 文本 | 用于指定链接页面的打开方式。可选值：_blank：浏览器总是在一个新打开、未命名的窗口中载入目标文档。_self：默认值，它使得目标文档载入并显示在相同的框架或者窗口中。 |
| title | 文本 | 鼠标悬停时显示的内容。 |
不仅可以创建文本超链接，在网页中的各种元素，如图像、表格、音频、视频等，都可以添加超链接。
7-7 锚点定位
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：
(1) 使用 <a href="#id名">链接文本</a> 创建链接文本：
<a href="#two">第2集</a>
(2) 使用相应的 id名 标注跳转目标的位置：
<h3 id="two">第2集</h3>
7-8 注释标签
如果需要在 HTML 文档中添加一些便于阅读和理解，但又不需要显示在页面中的解释文本，就需要使用注释标签：
<!-- 注释语句 -->
注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。
八、相对路径与绝对路径
实际工作中，通常会创建一个文件夹专门用于存放图像文件，这时在页面中插入图像，就需要采用路径的方式来指定图像文件的位置。
要想正确地使用路径，就必须先搞清楚两个概念：相对路径与绝对路径。
8-1 概念理解
绝对路径是一个绝对的位置，就比如一个地点，在哪里就是在哪里，不会因为你去哪，这个地方的位置就会发生改变。
相对路径则会根据你所处的位置发生变化，比如超市在你北方100米，你制定路线要朝北走100米，到超市。但是当你走了50米后，超市此时相对于你的位置就在北方50米，你如果在这个时候制定路线就要朝北走50米，而不是原来的100米
8-2绝对路径
绝对路径以 Web 站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的 D:\web\img\logo.gif，或完整的网络地址 http://www.baidu.com/images/logo.gif。
8-3相对路径
以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。
- 图像文件位于 HTML 文件的下一级文件夹：输入文件夹名和文件名，之间用
/隔开，如：<img src="img/logo.gif" />。 - 图像文件位于 HTML 文件的上一级文件夹：在文件名之前加入
../，如果是上两级，则需要使用../../，以此类推，如：<img src="../logo.gif" />。 - 图像文件位于网站根目录：在文件名之前加入
/，如：<img src="/logo.png" />。
/开头：代表根目录；./开头：代表当前所在的目录；../开头：代表上一层目录。
九、列表
9-1 无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
<ul></ul> 中只能嵌套 <li></li>。<li>与</li> 之间相当于一个容器，可以容纳所有元素。
无序列表的列表项前默认会添加实心原符号。
9-2 有序列表
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义：
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
......
</ol>
有序列表的列表项前默认会添加序号数字。
9-3 自定义列表
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号：
<dl>
<dt>1</dt>
<dd>12</dd>
<dd>123</dd>
<dt>1234</dt>
<dd>12345</dd>
<dd>123456</dd>
</dl>
十、表格的制作
表格用于 HTML 布局，常用来处理和显示表格式数据。
10-1 表格结构
在使用表格进行布局时，可以将表格划分为标题、头部、主体和脚注。相关标签如下：
-
<caption>：用于定义表格标题。
-
<thead>：用于定义表格的头部。一般包含列名、行号等表头信息。
-
<tbody>：用于定义表格的主体。一般包含数据内容。
-
<tfoot>：用于定义表格的脚注。
定义行和列的标签：
- <tr>：用于定义表格的一行。
- <td>：用于定义表格的单元格。
- <th>：用于定义表头单元格。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>示例代码</title>
</head>
<body>
<table>
<caption>
<h2>商品信息表</h2>
<p>制表：2021/06/29</p>
</caption>
<thead>
<tr>
<th>ID</th>
<th>品类</th>
<th>品名</th>
<th>数量</th>
<th>单价</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>衣服</td>
<td>冬装</td>
<td>1</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>衣服</td>
<td>夏装</td>
<td>1</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>3</td>
<td>饮料</td>
<td>可口可乐</td>
<td>1</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>4</td>
<td>饮料</td>
<td>百事可乐</td>
<td>1</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
</table>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
