前端之HTML介绍｜ 青训营笔记

暴风云
112 阅读6分钟

这是我参与「第四届青训营 」笔记创作活动的第1天

学习HTML基础中的基础，从一个刚入门的小白开始做起

一、什么是HTML

HTML(HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的**元素（elements）**组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。例如下面一行内容：

My cat is very grumpy

可以将这行文字封装成一个段落（Paragraph）<p>元素来使其在单独一行呈现：

<p>My cat is very grumpy</p>

备注：  HTML 标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。例如，标签 <title> 写作<title>、``<TITLE>、<Title>、<TiTlE>，等等都可以正常工作。不过，从一致性、可读性来说，最好仅使用小写字母

二、HTML元素

1.基本语句

image.png

  • 开始标签（Opening tag）
  • 结束标签（Closing tag）
  • 内容（Content）
  • 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素

标签<p>和</p>表示一行句子（段落）

标签<em>和</em>表示斜体

标签<strong>和</strong>表示加粗

2.嵌套语句

在<p>和</p>加入<strong>强调

<p>My cat is <strong>very</strong> grumpy.</p>

写出来为

My cat is very grumpy.

3.块级元素和内联元素

  • 块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现
  • 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>和 <strong>。

例子：

<em>第一</em><em>第二</em><em>第三</em>

<p>第四</p> <p>第五</p> <p>第六</p>

结果：

第一第二第三

第四

第五

第六

<em>为内联元素，每个语句之间没有间隔
<p>为块级元素，语句都是另外起一行

4.空元素&图片

不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：元素<img>是用来在元素<img>所在位置插入一张指定的图片。例子如下：

该img元素通过包含图像文件路径的地址属性 src，可在所在位置嵌入图像

注意：

  • 在 HTML 代码 src="" 的双引号之间插入文件路径，可以是本地文件夹下的路径
  • 若引用的目标文件与 HTML 文件同级，只需直接使用文件名
  • 要引用子目录中的文件，请在路径前面写上目录名，再加上一个正斜杠。例如：subdirectory/my-image.jpg。
  • 若引用的目标文件位于 HTML 文件的上级，需要加上两个点。力图../my-image.jpg
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0245f92087eb47fda3eed45e1275783d~tplv-k3u1fbpfcp-zoom-1.image">

5.属性

image.png

属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述例子中，这个 class 属性给元素赋了一个识别的名字（id），这个名字此后可以被用来识别此元素的样式信息和其他信息。

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

  1. 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
  2. 属性名称，后面跟着一个等于号。
  3. 一个属性值，由一对引号“ ”引起来，这里的“editor-note”就是属性的值

6.锚元素

元素<a>是锚，它使被标签包裹的内容成为一个超链接。此元素也可以添加大量的属性，主要有三个：

  • href: 这个属性声明超链接的 web 地址，当这个链接被点击浏览器会跳转至 href 声明的 web 地址。例如：href="https://www.mozilla.org/"。
  • title: 标题title属性为超链接声明额外的信息，比如你将链接至的那个页面。例如：title="The Mozilla homepage"。当鼠标悬停在超链接上面时，这部分信息将以工具提示的形式显示。
  • target: 目标target属性用于指定链接如何呈现出来。例如，target="_blank"将在新标签页中显示链接。如果你希望在当前标签页显示链接，忽略这个属性即可

例子：

<p>搜索<a href="https://www.baidu.com/" title="搜索引擎" target="_blank">百度</a></p>

输出：

搜索百度

7.布尔属性

有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值。例如disabled 属性，他们可以标记表单输入使之变为不可用 (变灰色)，此时用户不能向他们输入任何数据。

<input type="text" disabled>

8.单引号和双引号的使用

  • 不可以在同一个语句里混合使用单双引号

错误示例：

<a href="http://www.example.com'>示例站点链接</a>
  • 在一个 HTML 中已使用一种引号，你可以在此引号中嵌套另外一种引号
<a href="http://www.example.com" title="你觉得'好玩吗'？">示例站点链接</a>

9.标记文本

  • 标题Heading

<h1></h1> 该元素可用于指定内容的标题和子标题

  • 列表List

列表的每个项目用一个列表项目（List Item）元素 <li> 包围

无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个 <ul> 元素包围

有序列表（Ordered List）中项目的顺序很重要，就像烹调指南。用一个 <ol> 元素包围

例如：

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

无序列表

  • technologists
  • thinkers
  • builders

三、完整的HTML文档

示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

说明如下：

  1. <!DOCTYPE html>: 声明文档类型。规定了 HTML 页面必须遵从的良好规则，能自动检测错误和其他有用的东西。
  2. <html></html>: 这个元素包裹了整个完整的页面，是一个根元素。注意包含开始和结束才完整。
  3. <head></head>: 。这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。
  4. <meta charset="utf-8">: 这个元素设置文档使用 utf-8 字符集编码，utf-8 字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。
  5. <title></title>: 设置页面标题，出现在浏览器标签上
  6. <body></body>: <body>元素。包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

HTML中包含特殊字符

在 HTML 中，字符 <, >,",' 和 & 是特殊字符。当使用他们时，我们必须使用字符引用 —— 表示字符的特殊编码，它们可以在那些情况下使用。每个字符引用以符号&开始，以分号 (;) 结束。

<p>HTML 中用 <p> 来定义段落元素。</p>

<p>HTML 中用 &lt;p&gt; 来定义段落元素</p>

示例： 这里的&lt;变成了< ,&gt;变成了>

HTML 中用

来定义段落元素。

HTML 中用 <p> 来定义段落元素

HTML注释

为了将一段 HTML 中的内容置为注释，你需要将其用特殊的记号包括起来

<p>我在注释外！</p>

<!-- <p>我在注释内！</p> -->

输出为：

我在注释外！

avatar
文章
阅读
粉丝