一、何为HTML

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。

“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。

HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML
以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。

在浏览器中看到的任何网页背后都是一个 HTML 文档，只要在网页上点击鼠标右键->查看源代码（用控制台工具也可）就可看到。

HTML以及我们后面将要学习的 CSS（Cascading Style Sheets 级联式样式表) 和 JavaScript是构建广泛使用的Web程序的三剑客。

二、 HTML文档结构

1.新建 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>

在这里插入图片描述
然后单击Open in default browser用默认浏览器中打开或者Open in other browser用其他浏览器打开，打开结果如下：

2.文档结构分析

HTML元素（elements）
HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。
剖析一个 HTML 元素
如下所示的一个用于展示段落的元素：
在这里插入图片描述
1.开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
2.结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
3.内容（Content）：元素的内容，本例中就是所输入的文本本身。
4.元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
在这里插入图片描述

扫描二维码关注公众号，回复： 13123563 查看本文章

三、HTML基本知识

1.注释和空元素

注释

如果需要将HTML中的内容置为注释，需要使用特殊的记号包括起来（在code软件中，输入Ctrl + /即可快捷的进行注释！）

<p>我在注释外，可以显示！</p>
<!-- <p>我在注释内！浏览器将忽略我</p> -->

在这里插入图片描述
空元素

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

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

在这里插入图片描述

2.标题

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

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

在这里插入图片描述
在页面中，标题非常重要：
搜索引擎用标题来索引页面的内容
用户也习惯以标题进行主要内容浏览，以决定是否查看该页面

3.文本格式

这些标签可用于文本的格式外，其它标签都不建议用来进行格式的设置，如：< font>< big>< center>等标签皆为不推荐使用的。HTML 是用来表现页面内容而不是对页面进行修饰的，专门的页面美化需要使用后面将要学习的 CSS 。

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

<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>

结果
在这里插入图片描述

4.超链接a

超链接语法

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

在这里插入图片描述
点击后跳转百度的新页面

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

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

<h2 id="C4">ta ha </h2>
<a href="#C4">跳到第ta ha </a>

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

5.图片及文件路径 img

示例如在页面插入一张图片如下：

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

示例结果如下：
在这里插入图片描述

说明：
1.src属性为要显示图片文件的位置 URL，即图片文件的路径
2.alt属性当获取图片出现问题时显示的文字（占位符）
3.可为图片指定高宽度，但不建议（可能导致图片变形）
文件路径
在这里插入图片描述
显示结果

<img src="./rick.jpg" alt="tupian" width="200" height="200">

在这里插入图片描述

6.表格 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>

示例结果：
在这里插入图片描述

7.列表 List

列表分为无序列表和有序列表。
无序列表
示例：

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
<ul type="square">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>

结果显示：
在这里插入图片描述
无序列表使用< ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
有序列表
示例：

<ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>
  <ol type="a">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ol>

结果显示：
在这里插入图片描述
有序列表使用< ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

8.表单Form

HTML 表单用于收集不同类型的用户输入
在这里插入图片描述
示例：

用户名：

密码：

年龄：

性别：
男
女
其它
党派：
民主党共和党无党派
您有哪些交通工具：
自行车
摩托车
轿车
飞机
您的工作日期：

上传您的照片:

您的建议：
The cat was playing in the garden.

示例结果：

在这里插入图片描述
当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。

9.其他

HTML 的元素可以以称为区块或内联的方式进行显示。

区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：< h1>, < pre>, < ul>, < table>，< div> 等。
内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： < span>, < input>, < td>, < a>, < img>等。
示例：

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>
<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>

示例结果：
在这里插入图片描述
特殊字符
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）

HTML初步学习记录

目录