目录
目录
前言
2021暑假为了强化自己，决定自学web前端编程。经过查阅相关资料，网页现在新的标准是W3C，了解到HTML，CSS和JavaScript是前端开发最基本最重要的知识，所以这个假期我对这三个方面进行了粗略的了解。在这篇文章中我将把假期所学到的HTML知识进行总结归纳，考虑我是初次了解这些知识，可能会有不足。本文可能涉及的错误与不足将会在日后持续的改正。
一、什么是HTML？
HTML的全称为超文本标记语言，是一种标记语言，是我们网页最常用普通的语言。我们如果将HTML比作盖房子的过程的话，那么HTML的学习就是选择砖瓦的过程。HTML是网页前端开发的基础，其包含了大量的标签（标签是HTML组成的基本单位，分为成对标签和单标签），选择合适的标签能让网站的搭建达到事半功倍的效果。
使用Pycharm创建一个HTML文件，我们能得到HTML的基本结构：
<!DOCTYPE html> //文件类型说明
<html lang="en">
<head>
<meta charset="UTF-8"> //字符串说明
<title>Title</title>
</head>
<body>
</body>
</html>其中HTML的编写主要是对<head></head>标签和<body></body>标签中内容的编写。
二、HTML中的标签
1、<head></head>中常用标签
1、<title></title> 设置网页标题
2、<meta>标签 设置网页基本信息
常见的有：
<meta charset=""> 设置字符
<meta http-equiv="refresh" content="时间或者url等"> 间隔时间跳转
<meta name="keywords" content=""> 关键字
<meta name="description" content=""> 描述，对页面的描述
（其中关键字和描述便于爬虫的爬取）
3、<link rel="关系" type="类型" href="地址"/> 定义两个文档之间的连接关系
4、<style>
在此加载css
</style> 设置p标签中内容样式
5、<script>
在此写javascript代码
</script> 弹窗提示
因头标签常用标签所涉及到内容不多，所以在此不进行举例说明。
2、<body></body>中常用标签
1、文本与文本格式标签
（下边标签为文本格式标签）
1、<p></p>标签：段落标签,与上下行文本间隔一行。
align属性 控制内容方向left,center,right
title属性 段落标题
2、<pre></pre>标签：原格式输出
3、<mark></mark>标签：标记文本
4、<h1></h1>标签：标题标签 (h1-h6)
5、<br/>标签：换行
6、<hr/>标签：水平行线标签 width属性：宽度 align属性：位置对齐 color属性：颜色 size属性：大小
7、<bdo></bdo>标签：覆盖原本文本方向
dir属性：文字方向
8、<details></details>标签:详细信息拓展
9、<summary></summary>标签：与details配合使用，改变细节名称
10、<dialog></dialog>标签：对话窗口标签
open属性 open=True
11、<figure></figure>标签：打包组合
（下边标签是对网页字体进行操作的标签）
12、<b></b>标签：加粗定义,物理标记
13、<strong></strong>标签：加粗定义，逻辑标记（强调）
14、<i></i>标签：斜体
15、<em></em>标签：斜体，强调
16、<u></u>标签：下划线标签
17、<del></del>标签：删除线标签 了解现已经不用：<font></font>标签：字体标签
18、<small></small>标签：小字体标签
19、<sub></sub>标签：下标
20、<sup></sup>标签：上标
举例：
我们编写以下代码来对每个标签的结果进行测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网站</title>
</head>
<body>
<p align="center" title="第一句">这是一段落</p>
<p align="left">这是一段落</p>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<hr/>
<b>这是b标签</b>
<i>这是i标签</i>
<u>这是u标签</u>
<del>这是del标签</del>
<br/>
<p>上标<sub>opp</sub></p>
<p>下标<sub>opp</sub></p>
<p><mark>这是mark标签</mark></p>
<p>测试pre标签
只有p标签，换行再写pre,可以看到不会换行</p>
<p><pre>测试pre标签
换行在写pre
</pre></p>
</body>
</html> 我们可以得到以下结果：
2、语义化标签
1、<span></span>行标签
2、<div></div>块状标签
（下边的标签无法观测到，只是达到告诉浏览器内容的作用）
3、<header></header>网页头部
4、<footer></footer>网页底部
5、<nav></nav>网页导航
6、<aside></aside>侧边栏
7、<section></section>定义一个区块
8、<article></article>定义文章区块
9、<address></address>定义一个地址
对于定义的区块我们无法直接观测得出，但是我们可以通过添加边框的方法来观察。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网站</title>
<style>
body>div{
border:1px solid red;
}
</style>
</head>
<body>
<div>这是一个div块</div>
</body>
</html>得到以下的结果，其中红色边框围起来的即为div块，大多数网页都是由一个个的div搭建的。
例如CSDN网页的网页头：
他其实是由一个大的div上内部的四个小的div组合而成的，第一个小的div内存储的是最前方的图标，第二个小的div存储的是发布文章及其相关，第三个div是头尾部的登录按钮，第四个div是尾部的消息按钮，我们可以通过右键检查来查看。
3、列表标签
1、<ul></ul>定义无序列表（与<li>标签协同使用）
2、<ol></ol>定义有序列表（与<li>标签协同使用） start = “”属性开始序号 type = "" 序号属性 reverse = "reverse"序号倒序
3、<li></li>列表属性
4、<dl></dl>定义一个定义列表
5、<dt></dt>定义一个定义列表项目
6、<dd></dd>定义列表中对项目的描述
上述就是为了列表的创建ul，ol用来列举每个li标签，dl用来列举每个dt标签，所以li标签应该写在ul，ol标签里，dt标签应该写在dl标签里。
总结
本文介绍了几种标签，后续的标签将会在后边的文章中进行介绍。
904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
