本文详细介绍了HTML的基本结构，包括文档声明、元素、属性、空元素、文本格式、超链接、锚点、图片、文件路径、列表、表单以及区块元素等内容，并通过实例展示了它们的使用方法和效果。此外，还提到了特殊字符的处理和预设格式的展示。
一、新建html文件
在一个自己创建的文件夹下创建一个html文件，并输入以下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个Web页</h1>
<p>当前有点丑：)</p>
</body>
</html>
结果如下图所示
二、剖析HTML文件
对于我们前面创建的 HTML 文档，分析如下：
1.: 声明文档类型。出于历史原因需要，现在可有可无。
2.: 元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
3.: 元素。 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
4.: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
5.: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)
6.
7.: 元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
三、空元素
一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如
,
, , , 等等。我们称其为空元素，如下代码：
<!-- 换行 -->
<p>我可以<br>换行</p>
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>
可以看到下面的结果
四、元素的属性
元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。
一个属性必须包含如下内容：
一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就1.与前一个属性之间有一个空格。)
2.属性名称，后面跟着一个 = 号。
3.一个属性值，由一对引号 “” 引起来。
输入以下代码进行调试
<!-- 带属性的段落输入框 -->
<p title="title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">
HTML 提供了从大到小6级标题，分别是：
~
代码如下
<h1>大漠孤烟直</h1>
<hr>
<p>长河落日圆</p>
<hr>
<h2>欲穷千里目</h2>
<hr>
<p>更上一层楼</p>
<hr>
我们需要知道的文本格式标签如下
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
结果如下
五、超链接语法
1.href即为要跳转去的地址 URL（Uniform Resorce Locator)
2.target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
3.超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的
代码如下
<a href="https://www.cqjtu.edu.cn/" target="_blank">重庆交通大学官网</a>
六、锚点
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
输入以下代码
<!-- 文档其余部分 -->
<h2 id="ABS">第五回<hr>棒打白骨精</h2>
<!-- 文档其余部分 -->
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<a href="#ABS">跳到第四章</a>
<!-- 文档其余部分 -->
结果如下
七、图片
1.src属性为要显示图片文件的位置 URL，即图片文件的路径
2.alt属性当获取图片出现问题时显示的文字（占位符）
3.可为图片指定高宽度，但不建议（可能导致图片变形）
提示： 对于小尺寸的图片，现在可采用 base64 编码进行，可提高页面加载速度，提升用户体验。可前往一试。
输入以下代码试一下
<img src="http://5b0988e595225.cdn.sohucs.com/images/20171013/fec49f59b98041a4a16886893447f746.jpeg" alt="小图片" width="500" height="500">
结果如下：
八、文件路径
上述将图片的链接地址显示出来个方法为绝对路径，下面来说一下相对路径，将图片放到文件的目录中，这种方法相对不太方便，别人很可能看不到你的图片。
<img src="0040039504628208_b.jpg">
结果如下
或者写为
<img src="./images/0040039504628208_b.jpg">
结果相同
九、无序，有序列表
1.无序列表使用
-
标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
2.有序列表使用-
标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。
结果如下
-
标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。
<ul type="aquare">
<li>jidan</li>
<li>putao</li>
<li>juzi</li>
</ul>
<ol type="A">
<li>dxsxzc</li>
<li>dsfvd</li>
<li>dzxcvcx</li>
</ol>
当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（form）来让用户填写或选择。
代码如下：
<form>
<!-- 文本框，注意有 placeholder 提示符 -->
用户名：<br>
<input type="text" name="name" placeholder="请输入用户名"><br>
<!-- 密码框 -->
密码：<br>
<input type="password" name="ps" placeholder="请输入密码"><br>
年龄：<br>
<!-- 数字输入框，注意 min 和 value 属性-->
<input type="number" name="age" min="18" value="18"><br>
<!-- 单选按钮, 注意 checked 属性 -->
性别：<br>
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female"> 女<br>
<input type="radio" name="gender" value="other"> 其它<br>
<!-- 下拉列表，注意 selected 属性 -->
党派：<br>
<select name="party">
<option value="D">民主党</option>
<option value="R" selected>共和党</option>
<option value="N">无党派</option>
</select><br>
<!-- 多选框 -->
您有哪些交通工具：<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>
<!-- 日期选择器 -->
您的工作日期：<br>
<input type="date"><br>
<!-- 文件选择器 -->
上传您的照片:<br>
<input type="file" name="photo"><br>
<!-- 文本输入区域，注意 rows 和 cols 属性 -->
您的建议：<br>
<textarea name="message" rows="5" cols="30">
The cat was playing in the garden.
</textarea><br><hr>
<!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
<input type="submit" value="提 交">
<input type="reset" value="重 置">
</form>
运行结果如下：
十、区块元素
区块元素在浏览器显示时，通常会以新行来开始（和结束）。
<h2>dshghgchbgcusdhjuhgb</h2>
<div>sduhyhdfchshju</div>
<div>sdhyudshchjdhj</div>
<p>dscukhjjhdsj</p>
运行结果如下
内联元素：内联元素相反，他们总是一个接一个进行显示，不会新起一行。
<h3>第三季度</h3>
<span>年龄：</span>
<input name="username">
<span>嘻嘻嘻</span>
<a href="https://baidu.com/">百度</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">
十一、预设格式
pre标签
<pre>
1.爱情的电影，散不散都没了关系，一人安静，一人哭泣。《散场电影》
2.暴雨天，照逛街，偷笑别人花了脸。如果再看你一眼，是否还会有感觉，当年的素面朝天《素颜》
3.不是穿上情侣装就可以装情侣，不是小心翼翼就能重演这场电影。《情侣装》
4.窗外夜风裹走时间，后退的景谁在流连。《梧桐灯》
5.弹指一挥间 红尘已渺远 沧海成桑田 真情永不变《弹指一挥间》
6.当我发现醒来其实是另一个梦，梦的出口散不开的浓雾太沉重，就算当初声嘶力竭作苦苦的求你留下别走，也没用。《灰色头像》
7.断桥是否下过雪，又想起你的脸，若是无缘再见，白堤柳帘垂泪好几遍。《断桥残雪》
8.多想给我一副威尼斯假面，华丽的忧伤我要赤脚踏过远方的冰霜，任凭风雪如何阻挡至少还有面具上坚挺的鼻梁。《威尼斯假面》
9.关外野店，客未眠，寒风间，谁来为我添两件，只可惜瘦马不得好歇。《千百度》
10.孩子说如果爱 就请深深爱。可很多事是不由人的。你说这次再见，或许再也不会见！去老地方吧再见一面。《不煽情》
11.寒梅落尽把冬了 衔春的燕想归巢 沿途的景牵挂的人 两情迢迢《燕归巢》
12.和你相知多年，我确信对你的了解。《内线》
13.江南月色下的小桥屋檐，读不懂塞北的荒野梅开时节因寂寞而缠绵，春归后又很快湮灭《断桥残雪》</pre>
结果如下：
十二、特殊字符
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体
例如 ，就表示为空格
代码如下：
<p>有多 远，滚 多远！</p>
<hr>
<h2>test.html</h2>
<pre>
<h1>鹅鹅鹅</h1>
<p>曲项向天歌<p>
<a href="https://www.baidu.com/">红掌拨清波</a>
运行;
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
