HTML初学者指南-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46061082/article/details/114604947

HTML学习总结

前言
一、HTML是什么？
二、HTML文档结构的分析
- 1.引入HTML文档
- 2.HTML 文档相关说明
三、标题
四、文本格式
五、超链接a
六、图片及文件路径 img
- 1.图片
- 2.文件路径
七、表格 Table
八、列表 List
九、表单 Form
十、其它
附录
总结

前言

提示：本次博客主要是个人学习HTML时的一些总结，最后会放出个人在练习时的代码，第一次学习，代码不好望见谅，希望对需要的人有帮助。接下来还会尽快发一个CSS对页面优化的博客。

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTML是什么？

首先需要了解HTML的定义：HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。
那么什么是超文本呢？“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。
HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。
在浏览器中看到的任何网页背后都是一个 HTML 文档，只要在网页上点击鼠标右键->查看源代码（用控制台工具也可）就可看到。

二、HTML文档结构的分析

1.引入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 文档：

<!DOCTYPE html>:声明文档类型。出于历史原因需要，现在可有可无。
<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">: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)
<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body></body>: <body>元素。包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

2.HTML 文档相关说明

注释：

如同大部分的编程语言一样，在 HTML 中有一种可用的机制来在代码中书写注释。
注释是被浏览器忽略的，而且是对用户不可见的，它们的目的是允许你描述你的代码是如何工作的和不同部分的代码做了什么等等。如果你在半年后重新返回你的代码库，而且不能记起你所做的事情，或者当你处理别人的代码的时候，那么注释是很有用的.
为了将一段 HTML 中的内容置为注释，你需要将其用特殊的记号包括起来，比如：

<p>这里是正常的文段，可以显示！</p>
<!-- <p>这里是注释，页面不会显示出来，但在代码中可以查看到</p> -->

注意： HTML 不区分标签的大小写，但建议全部使用小写！

空元素：

一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如<br>, <hr>, <input>, <img>, <a>等等。我们称其为空元素，如下：

<!-- 换行 -->
<p>我<br>们</p> 
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>

提示: 在上面代码中你看到<br>元素放到<p>元素之中——这被称作嵌套！

元素的属性:

元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。

<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上可以看到title属性！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">
<!-- password的属性会以密码形式展示 -->

一个属性必须包含如下内容：

一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
属性名称，后面跟着一个 = 号。
一个属性值，由一对引号 “” 引起来。

三、标题

HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>，如下所示：

<h1>一级标题</h1>
<p>文段</p>
<hr>
<h2>二级标题，字体会小于一级标题</h2>
<p>文段</p>
<hr>

在页面中，标题非常重要：

搜索引擎用标题来索引页面的内容
用户也习惯以标题进行主要内容浏览，以决定是否查看该页面

注意：
一级标题<h1>最醒目，应该用于页面的主标题，其次为二级标题，以此类推,不要因为希望醒目，试图使用标题对正文的文字进行放大或加粗。正文文字的醒目可以使用文本格式或 CSS 进行。

四、文本格式

我们需要知道的文本格式标签如下：

  <!-- 显著用mark -->
  <p>用mark标签来使显著<mark>这里会变得明显</mark></p>
  <!-- del表示删除的文档 -->
  <p><del>这里的文字会被线划掉</del></p>
  <!-- s表示不再准确的描述 -->
  <p><s>不准确的描述</s></p>
  <!-- ins表示对文档的附加 -->
  <p><ins>对已有的文档的附加</ins></p>
  <!-- u表示下划线 -->
  <p><u>对文段加下划线</u></p>
  <!-- small表示字体小 -->
  <p><small>小字体的文段</small></p>
  <!-- strong表示字体大 -->
  <p><strong>大字体的文段</strong></p>
  <!-- em表示斜体 -->
  <p><em>这里的文段会变成斜体</em></p>

五、超链接a

定义：没有超链接就没有万维网（World Wide Web）。基本上，我们可以把任何东西加上超链接，不过常用的是文本、图片等。

超链接语法：

<a href="https://www.baidu.com/" target="_blank">百度</a>

说明：

href即为要跳转去的地址 URL（Uniform Resorce Locator)
target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的

锚点：
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

<h2 id="A1">TyuanY边路常用英雄</h2>
<p>下面是锚点的使用展示</p>
<a href="#A1">点击这里快速常看TyuanY的边路常用英雄</a>

注意：

元素的id值必须是唯一的，也即页面不能再有其它元素的id值为A1
超链接中的地址需要有#符号

六、图片及文件路径 img

1.图片

在页面插入一张图片代码如下：

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

说明：

src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形）

使用base64完成图片添加(针对于小尺寸的图片)，代码如下：

  <p>使用base64完成图片添加</p>
  <img
    src="data:image/x-icon;base64,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">

2.文件路径

为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。

上面图片的例子即为绝对路径。下面是相对路径的例子：

例子	解释
`<img src="picture.jpg">`	该图片文件与当前文档在同一目录中
`<img src="./images/picture.jpg">`	该图片文件在当前目录下的images目录中
`<img src="../picture.jpg">`	该图片文件在上一级目录中

思考：上表中，.表示当前目录，…表示上一级目录，那么…/…/imgs是什么意思？
答：很明显表示该图片在上一级目录的上一级目录中。
注意：
下面展示用图片做超链接，直接上代码：

  <p>再做一个超链接，点击图片打开百度搜素引擎</p>
  <a href="https://www.baidu.com/" target="_blank"><img src="1308637.ico" alt="加载出错"></a>

七、表格 Table

有时，页面的内容需要用表格来进行呈现。我们使用<table>等标签即可：

  <p>下面展示表格</p>
  <table>
    <tr>
      <th><strong>英雄名字</strong></th>
      <th><strong>英雄性别</strong></th>
      <th><strong>使用场次</strong></th>
    </tr>
    <tr>
      <td>元歌</td>
      <td>男</td>
      <td>800</td>
    </tr>
    <tr>
      <td>马超</td>
      <td>男</td>
      <td>400</td>
    </tr>
    <tr>
      <td>宫本武藏</td>
      <td>男</td>
      <td>1000</td>
    </tr>
  </table>

代码中，<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）

八、列表 List

我们也可以使用列表来呈现内容，分为无序列表和有序列表。
无序列表
无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。

<ul>
  <li>源雅</li>
  <li>帝隐</li>
  <li>萧晓</li>
</ul>

<ul type="square">
  <li>源雅</li>
  <li>帝隐</li>
  <li>萧晓</li>
</ul>

有序列表
有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

<ol>
  <li>源雅</li>
  <li>帝隐</li>
  <li>萧晓</li>
</ol>

<ol type="a">
  <li>源雅</li>
  <li>帝隐</li>
  <li>萧晓</li>
</ol>

九、表单 Form

当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，我们就需要使用表单（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>

注意：
当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。

十、其它

HTML 的元素可以以称为区块或内联的方式进行显示。
区块元素
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>

内联元素
内联元素相反，他们总是一个接一个进行显示，不会新起一行。如：<span>, <input>, <td>, <a>, <img> 等。

<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>哈哈哈</span>
<a href="https://google.com/">Google</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">

预设格式
如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用pre标签。

<!-- pre标签中的内容将保持格式不变 -->
<pre>
              君不见黄河之水天上来
              奔流到海不复回
              君不见高堂明镜悲白发
              朝如青丝暮成雪
</pre>

考虑下面的代码将显示成什么？

<p>你好          呀，我                         很好！</p>

以上代码将得不到你想要的结果。
原因是：在 HTML 中，某些字符是预留的。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）

<p>你好&nbsp;&nbsp;&nbsp;呀，我&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;很好！</p>
<hr>
<h2>test.html</h2>
<pre>
  &lt;h1&gt;这是个一级标题&lt;/h1&gt;
  &lt;p&gt;这是一个段落&lt;p&gt;
<pre>

附录

这里有练习代码用到的两张图片，将其放在.html文件的同一目录即可。有不懂的可以评论留言。

在这里插入图片描述

第一张重命名为：123456.png
第二张重命名为：1308637.ico
当然图片可以自己找，我只是为了让第一次接触的朋友不出错。
感谢阅读！！！

附上练习代码：

<html>

<head>
  <meta charset="utf-8">
  <!-- 这里自己换了一个网页图标 -->
  <link rel="shortcut icon" href="1308637.ico" type="image/x-icon">
  <title>第一次web实验</title>
</head>

<body>
  <h1>我的第一个Web页</h1>
  <p>页面会越来越好看</p>
  <p>首先踏出第一步</p>
  <p>接下来<br>换行</p>
  <p>很明显已经换行了</p>
  <p>下面展示水平分割线</p>
  <p>
    <hr>
  </p>
  <p>下面展示输入框</p>
  <input>
  <!-- 注释展示 -->

  <!-- 带属性的段落输入框 -->
  <h2 id="A1">TyuanY的边路常用英雄</h2>
  <p title="下面的是唐园源的三个边路常用英雄">鼠标移到我上面</p>
  <!-- 带属性的输入框 -->
  <p><mark>第一个</mark><input type="text"></p>
  <p><mark>第二个</mark><input type="text"></p>
  <p><mark>第三个</mark><input type="text"></p>

  <!-- 显著用mark -->
  <p>You can use the mark tag to <mark>highlight</mark> text.</p>
  <!-- del表示删除的文档 -->
  <p><del>This line of text is meant to be treated as deleted text.</del></p>
  <!-- s表示不再准确的描述 -->
  <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
  <!-- ins表示对文档的附加 -->
  <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
  <!-- u表示下划线 -->
  <p><u>This line of text will render as underlined</u></p>
  <!-- small表示字体下 -->
  <p><small>This line of text is meant to be treated as fine print.</small></p>
  <!-- strong表示字体大 -->
  <p><strong>This line rendered as bold text.</strong></p>
  <!-- em表示斜体 -->
  <p><em>This line rendered as italicized text.</em></p>

  <p>下面展示超链接</p>
  <a href="https://www.baidu.com/" target="_self"><mark>点击这里去百度搜素引擎</mark></a>
  <!-- 注意：target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self） -->

  <p>下面是锚点的使用展示</p>
  <a href="#A1">点击这里快速常看TyuanY的边路常用英雄</a>

  <p>下面是图片的展示</p>
  <img src="123456.png" alt="加载出错">

  <p>做一个超链接点击图片查看TyuanY的边路常用英雄</p>
  <a href="#A1"><img src="123456.png" alt="加载出错"></a>
  <p>再做一个超链接，点击图片打开百度搜素引擎</p>
  <a href="https://www.baidu.com/" target="_blank"><img src="1308637.ico" alt="加载出错"></a>

  <p>使用base64完成图片添加</p>
  <img
    src="data:image/x-icon;base64,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">

  <p>下面展示表格</p>
  <table>
    <tr>
      <th><strong>英雄名字</strong></th>
      <th><strong>英雄性别</strong></th>
      <th><strong>使用场次</strong></th>
    </tr>
    <tr>
      <td>元歌</td>
      <td>男</td>
      <td>800</td>
    </tr>
    <tr>
      <td>马超</td>
      <td>男</td>
      <td>400</td>
    </tr>
    <tr>
      <td>宫本武藏</td>
      <td>男</td>
      <td>1000</td>
    </tr>
  </table>

  <!-- 无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。 -->
  <ul>
    <li>源雅</li>
    <li>帝隐</li>
    <li>萧晓</li>
  </ul>
  <ul type="square">
    <li>源雅</li>
    <li>帝隐</li>
    <li>萧晓</li>
  </ul>
  <!-- 有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。 -->
  <ol>
    <li>源雅</li>
    <li>帝隐</li>
    <li>萧晓</li>
  </ol>
  <ol type="a">
    <li>源雅</li>
    <li>帝隐</li>
    <li>萧晓</li>
  </ol>
  <!-- 当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。 -->
  <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>

  <!-- 区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。 -->
  <h2>区块元素</h2>
  <div>Hello</div>
  <div>World</div>
  <p>单独一行</p>

  <!-- 内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。 -->
  <h3>下面的元素将在一行中显示</h3>
  <span>姓名：</span>
  <input name="username">
  <span>哈哈哈</span>
  <a href="https://google.com/">Google</a>
  <img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">

    <h1>这是个一级标题</h1>
    <p>这是一个段落<p>
    <a href="https://twitter.com/">风乍起，吹散一地落叶</a>
  <pre>
  <!-- 以上代码将得不到你想要的结果。
  原因是：在 HTML 中，某些字符是预留的。
  在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。 -->
  <!-- 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities） -->
  <p>你好&nbsp;&nbsp;&nbsp;呀，我&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;很好！</p>
  <hr>
  <h2>test.html</h2>
  <pre>
    &lt;h1&gt;这是个一级标题&lt;/h1&gt;
    &lt;p&gt;这是一个段落&lt;p&gt;
    &lt;a href="https://twitter.com/"&gt;风乍起，吹散一地落叶&lt;/a&gt;
  <pre>
</body>
</html>