HTML
总结
经过这段时间对HTML的学习，深刻了解了网页的结构和组成以及对网页界面构成的代码有了一定的认识基础，从之前对网页制造的白板认识，到现在能看懂网页代码的大致意思。这让我有了很多收获。
一、HTML简介
（1）超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
（2）HTML 不是一种编程语言，而是一种标记语言
（3）标记语言是一套标记标签 (markup tag)
（4）HTML 使用标记标签来描述网页
（5）HTML 文档包含了HTML 标签及文本内容
（6）HTML文档也叫做 web 页面
二、HTML文档结构
HTML的结构主要分为5各部分DOCTYPE，html，head，title，body。
1、DOCTYPE
DOCTYPE，其作用主要在于对自身的文件格式进行声明，让浏览器知道这是一个HTML文件，其格式一般为<!DOCTYPE html>。
2、html
html是由一个个元素组成的，而每个元素都是由一对标签构成的。在html标签包裹下的内容就是整个html文件的所有内容。其结束标签都是在前面加一个反斜杠 /。格式：
<html>
····
</html>
3、head、title
head的作用就是在文件的前面将一些外部文件，格式引入，或者对文件的格式，风格等做出一些规划标准的地方。title就是网页所显示的名称。其经常在head标签中展示。
head中包含一些固定语句，例如：
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="1.ico" type="image/x-icon">
<title>做个俗人，贪财好色</title>
</head>
<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> :以.ico的就是指定页面的图标，出现在浏览器标签上。
4、body
就是HTML的主体部分，包含页面上的所有内容。格式为：
<body>
····
</body>
三、html文档结构分析
1、元素
元素是构成html页面的单元，而元素是由一对标签即开始标签和结束标签加上其包含的内容组成的。
例如：
<p>我这个页面有点小帅啊</p>
其在页面中显示为
2、空元素
用来在元素所在位置插入/嵌入一些东西，如<br>, <hr>, <input>, <img>, <a>等等。称其为空元素。
例如：
<h1>2021成功上岸！</h1>
<p>请输入你的密码进入傻妞的世界</p>
<input>
<hr>
<h2>欢迎来到！<br>我的世界!</h2>
其结果显示：
3、属性
元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。
<p title="这是个title属性">百度一下</p>
<!-- 带属性的输入框 -->
<input type="text">
<br>
<input type="password">
其结果显示
一个属性必须包含如下内容：
1、一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
2、属性名称，后面跟着一个 = 号。
3、一个属性值，由一对引号 “” 引起来。
其属性的值，表示这个元素的值应该符合属性值的类型。比如上述 type="text"则表示输入的值应是文本类型。而type="numbei"则表示输入的应是数字类型，别的类型则不支持。
4、标题
HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>，在页面的布局中，往往需要标题来区分其他的文本，这时就需要标题的大小来美化页面。
5、文本格式
这是对页面中出现的字体进行标记与美化，比如加粗，斜体，画横线等等。
部分文本格式的标签和作用如下：
<mark> </mark> 对字体进行标记
<del> </del> 划掉所显示的字体 与<s> </s>作用相同
<ins> </ins> 将所显示的字体画下划线 与<u> </u>作用相同
<small> </small> 将标记的字体缩小
<strong> </strong> 将标记的字体加粗 和<b></b>类似
<em> </em>将标记的字体倾斜
但HTML 是用来表现页面内容而不是对页面进行修饰的，对文本格式的美化需要使用CSS
6、超链接 a
HTML使用超级链接与网络上的另一个文档相连,点击链接可以跳转到新的文档或者当前文档中的某个部分。
超链接的语法：
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
点击就可以跳转到百度界面了
1、href即为要跳转去的地址 URL（Uniform Resorce Locator)
2、target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
3、超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的
7、图片及文件路径 img
在界面中插入一张图片
格式为：
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
其显示结果：
1、src属性为要显示图片文件的位置 URL，即图片文件的路径
2、alt属性当获取图片出现问题时显示的文字（占位符）
3、可为图片指定高宽度，但不建议（可能导致图片变形）
在插入图片时，一定注意其存储的路径！
如何用图片做出一个超链接
可以通过标签来设置超链接，通过href设置所要跳转的链接，然后在a标签下设置标签用来添加图片，当点击图片时就会跳转到目标链接中
例如：
<a href="https://www.woyaogexing.com/tupian/weimei/2021/179317.html"
target="-blank" >潮流图片
<img src="2.jpg" width="200" height="200">
</a>
8、表格 table
页面的内容需要用表格来进行呈现，使用<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>是表头的单元（将会加粗显示）
9、列表 list
列表分为无序列表和有序列表。其最大的差别就是标签不同，无序列表的标签为<ul>，而有序列表的标签为<ol>
（无序标签）例如：
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
其显示结果：
默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
（有序列表）例如：
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
其结果显示：
默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。
10表单 from
当页面出现一些信息，让你选择一些答案，填写一些意见，需要用表单来进行操作。
其格式：
<from>
....
</from>
例如：
您有哪些交通工具：<br>
<input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
<input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
<input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
<input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
其显示结果为：
这里name是规定表单的名称，value是发送到服务器的值，checked是选择默认值。
11、特殊符号
<pre>标签的作用是将输入的内容格式保持不变。
在服务器中，输入连续的空格，在页面中只显示一个空格的间距，这是我们可以用 代替空格。当在<pre>显示< 和 >时需要用 <和> 来代替。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
