该博客是HTML学习总结，介绍了HTML相关知识。包括网页的定义、HTML是描述网页的标记语言及网页形成步骤，还阐述了HTML基本结构标签，重点讲解了标题、段落、超链接等常用标签的语义、特点和使用方法。
HTML学习总结
目录
- HTML简介
- HTML基本结构标签
- HTML常用标签
一、HTML简介
1、什么是网页？
网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容的相关的网页集合。
网页是网站中的“一页”，通常是HTML格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其格式俗称为HTML文件。
2、什么是HTML？
HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签。
超文本(两层含义):
- 它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)；
- 还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接(超级链接文本)。
3、网页的形成
网友是有网页元素组成的，这些元素是利用HTML标签描述出来的，然后通过浏览器来解析显示给用户的。
形成步骤：
前端人员开发代码 ————>浏览器显示代码(解释、渲染)————>生成最后的web页面
二、HTML基本结构标签
基本结构标签也称为骨架标签。
<html> ----------------------------<!-- 根标签 -->
<head> ------------------------<!-- 文档的头部(其中必须设title) -->
<title>1128</title> -------<!-- 文档标题 -->
</head>
<body> ------------------------<!-- 文档的主体 -->
一心一意，易烊千玺
</body>
</html>
三、HTML常用标签
1、标题标签<h1> — <h6>
HTML提供6个等级的网页标题。
<h1>一级标题</h1>
标签语义：作为标题使用，并且依据重要性递减。
特点：
- 加了标题的文字会加粗，字号变大；
- 一个标题独占一行
2、段落标签和换行标签
<p>段落标签</p>
标签语义：可以把HTML文档分割为若干段落。
特点：
- 加了标题的文字会加粗，字号变大；
- 一个标题独占一行
<br/>
标签语义：强制换行。
特点：
<br/>是个单标签；<br/>只是简单地开始新一行(无空隙)，跟段落不一样(有空隙)。
3、文本格式化标签
网页中，为文字设置粗体、斜体或下划线效果。
标签语义：突出重要性，比普通文字更重要。
加粗 ：<strong></strong> 或 <b></b>
斜体 ：<em></em> 或 <i></i>
删除线 ：<del></del> 或 <s></s>
4、超链接a
没有超链接就没有万维网（World Wide Web）。基本上，我们可以把任何东西加上超链接，不过常用的是文本、图片等。
超链接语法：
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
说明：
href即为要跳转去的地址 URL（Uniform Resorce Locator)target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）- 超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击
5、锚点
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->
...
注意：
- 元素的
id值必须是唯一的，也即页面不能再有其它元素的id值为C4- 超链接中的地址需要有
#符号
6、图片及文件路径 img
插入图片格式：
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
说明：
src属性为要显示图片文件的位置 URL，即图片文件的路径alt属性当获取图片出现问题时显示的文字（占位符）- 可为图片指定高宽度，但不建议（可能导致图片变形）
文件路径之相对路径：
| 例子 | 解释 |
|---|---|
<img src="picture.jpg"> | 该图片文件与当前文档在同一目录中 |
<img src="./images/picture.jpg"> | 该图片文件在当前目录下的images目录中 |
<img src="../picture.jpg"> | 该图片文件在上一级目录中 |
7、表格 table
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
代码中，<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）
8、列表 List
无序列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
有序列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
9、表单 Form
10、其他
区块元素
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。
内联元素
内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。
预设格式
如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用pre标签。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
