文章目录
- 何为HTML
- HTML文档结构
- HTML元素
- 文本与标题
- 超链接
- 锚点
- 图片
- 表格
- 列表
何为HTML
HTML是超文本标记语言，用来构建Web页面即所谓的网页。HTML定义了网页的内容的含义与结构。
HTML文档结构
HTML使用“标记”来注明文本、图片和其他内容，以便于在浏览器中显示出来。
HTML标记包含一些规定的“元素”如< head >,< title >,< body >,< header >,< footer >，< article >，< section >，< p >，< div >，< span >，< img >，< aside >，< audio >，< canvas >，< datalist >，< details >，< embed >，< nav >，< output >，
< progress >，< video > 等等。
HTML的基本结构为
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>(标题1)</h1>
<p>(正文)</h>
</body>
</html>在VS Code中实现如下代码，可以看到自己创建的一个网页了
网页的效果如下
可以很明了的看出在源代码中的个部分的作用
- < html>< /html>: < html>元素。这个元素包裹了整个完整的页面。
- < head>< /head>: < head>元素。它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
- < meta charset=“utf-8”>:这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。
- < link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon”>:指定页面的图标，出现在浏览器标签上。
- < title>< /title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
- < body>< /body>: < body>元素。 包含你能在页面看到的所有内容。
HTML元素
在上面的示例中可以看出代码都是以一个一个元素的形式表现出来的，最基础的元素如下
< 元素名> 显示的内容< /元素名>
此外还有一些常用的其他形式的元素
空元素
空元素只有一个开始标签，通常用这些元素插入或嵌套一些东西；
< br>:换行
< hr>:水平分割线
< input>:输入框
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<title>实验一</title>
</head>
<body>
<h1>我的<br>第<hr>一个Web页</h1>
<input>
</body>
</html>
元素属性
我们在浏览一些网页的时候，会输入一些账号、密码等等，我们会发现输入的账号我们是可以看到的，但是密码却不能被我们看到，这是什么原因呢？既然我们之前已经通过空元素实现了输入框的显示，那么能不能通过空元素实现账号和密码的输入产生不同的效果呢？
属性包含元素的额外信息，这些信息不会在浏览器中显示出来。
一个属性必须包含如下内容：
- 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
- 属性名称，后面跟着一个 = 号。
- 一个属性值，由一对引号 “” 引起来。
对输入框的属性进行定义，就可以改变输入框的效果
<p>账号</p>
<input type="text"><br>
<p>密码</p>
<input type="password"><br>效果如图
文本与标题
HTML提供的标题共有6级，分别从h1~h6，正文为p；在body中添加下面的代码在页面中很明显的久能看出来各个标题以及正文的显示格式
<h1>我的第一个Web页</h1>
<h1>标题2</h1>
<h3>标题3</h3>
<h6>标题6</h6>
<p>正文</p>如果想要正文的内容更加醒目，不能选择使用标题的属性，应该使用CSS进行修改！！
在HTML中可通过嵌套标签对正文文本进行简单的格式设置，但是专门的美化还是需要用CSS。以下是一些简单的标签的嵌套使用以及效果显示。
<p>mark<mark>的作用</mark></p>
<p>del<del>的作用</del></p>
<p>s<s>的作用</s></p>
<p>ins<ins>的作用</ins></p>
<p>u<u>的作用</u></p>
<p>mark<small>的作用</small></p>
<p>mark<strong>的作用</strong></p>
<p>mark<em>的作用</em></p>
超链接
<a href="https://www.baidu.com/" target="_blank">百度一下</a>- href即为要跳转去的地址 URL（Uniform Resorce Locator)
- target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
- 超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的
锚点
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
<!-- 文档其余部分 -->
<h2 id="D1">标题一</h2>
<!-- 文档其余部分 -->
<a href="#D1">回到头部</a>
<!-- 文档其余部分 -->这样在网页就会出现回到头部的超链接，当点击这个连接，页面就会自动回到当前页面的顶部。
图片
在页面插入一张图片如下：
<img src="./1.jpg" alt="MDB Logo" width="200" height="200">- src属性为要显示图片文件的位置 URL，即图片文件的路径
- alt属性当获取图片出现问题时显示的文字（占位符)
- 可为图片指定高宽度，但不建议（可能导致图片变形）,但是也可能因为图片过大导致页面被图片占据了大半。
其中src后面可以直接放一个图片的连接，也可以添加本地文件夹中的图片
例子
解释
< img src=“1.jpg”>该图片文件与当前文档在同一目录中
< img src="./images/1.jpg">该图片文件在当前目录下的images目录中
< img src="…/1.jpg">该图片文件在上一级目录中
用图片当作超链接
< a href="http://www.baidu.com/" target="_blank"> < img src="1.jpg" alt="MDB Logo" width="50" height="50">< /a>href中是超链接跳转到的位置，将元素中的内容设置为一张图片就可以将这个图片设置为超链接了。
表格
表格在table这个标签中实现，
< tr>表示行
< th>是表头，会加粗显示出来
< td>是每一行的单元，
<table>
<tr><!--第一行表头-->
<th>1行</th>
<th>12</th>
<th>13</th>
</tr>
<tr><!--第二行-->
<td>2行</td>
<td>22</td>
<td>23</td>
</tr>
<tr><!--第三行-->
<td>3行</td>
<td>32</td>
<td>33</td>
</tr>
</table>列表
无序列表
<ul>
<li type="circle"><img src="1.jpg" alt="MDB Logo" width="20" height="20"></li>
<li>Tea</li>
<li type="square">Milk</li>
</ul>
<ul type="square">
<li>1212</li>
<li type="circle">232</li>
</ul>这个默认使用实心圆点作为每一项的标志，空心圆是circle，方块是square
在第二个无序的列表中可以看到即使标签< ul>的类型已经规定为square，但再次对每一个元素改变属时，还是优先遵守距离内容最近的属性。
有序列表
<!--有序列表-->
<ol type="I">
<li>12</li>
<li>23</li>
<li>2334</li>
</ol>
