HTML介绍 | 青训营笔记

八重嘤
179 阅读8分钟

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

该文章是根据笔者在青训营课程与MDN上的HTML介绍以及自己所学编写而成，多为复习而用，人菜勿喷（求饶buff叠满）

什么是HTML？

HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。笔者以为可以理解为是每个网站最基础的元素，比如标题，比如字体等等这类元素

剖析一个HTML元素

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

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

让我们进一步探讨我们的段落元素：

grumpy-cat-small.png

这个元素的主要部分有：

  1. 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
  2. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
  3. 内容（Content）：元素的内容，本例中就是所输入的文本本身。 4.元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

    （此部分摘自MDN上的解释，因为写的十分通俗易懂笔者便不再修改）

嵌套元素

html标签可以嵌套使用，例如：

<p>I have a <strong> cute </strong> cat. </p>

像这样使用p标签包裹整个句子，其中重点突出的单词可以用strong标签包裹使用

块级元素和行内元素

  1. 块级元素在浏览器中占据整行，排斥其他元素与他位于同一行
  2. 行内元素又叫内联元素，在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。

    例如：
<em>我有</em><em>一只</em><em>小猫</em>
<p>我有</p><p>一只</p><p>小猫</p>

显示的结果却完全不同：

QQ截图.png

em标签是行内元素（内联元素），p标签则是块级元素，可以理解为，p标签包裹的这几个字后面的空白部分，也全是这个p标签的领域，下一个p标签无法占领，只能另起一行。

空元素

不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。

例如img标签，使用方法为 < img src='图片的地址' >

布尔属性

某些没有值的属性被称为布尔属性，比如input的表单项，可以使用display='display'将其调整为无法输入

引号使用

单引号或者双引号均可，但是两者无法一起使用，如果嵌套使用的话，可以在一种引号内容内部使用另一种引号

例如：

<a href="http://www.example.com" title="你觉得'好玩吗'？">示例站点链接</a>

实体引用：在 HTML 中包含特殊字符

QQ截图202.png

在 HTML 中应用 CSS 和 JavaScript

link位于文档头部，含有两个元素，rel="stylesheet"表明这是文档的样式表，而 href 包含了样式表文件的路径。

script没必要放在head中，其中的src属性是js文件的地址，同时最好加上 defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。（当然这个方法不是唯一的，可以选用自己熟悉的方法）

列表

无序列表（经常使用）,大致使用方法：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

有序列表（使用没无序列表多），大致使用方法：

<ol>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>

两者单单只是标签不一样而已

特殊的描述列表： 描述列表使用与其他列表类型不同的闭合标签dl，此外，每一项都用dt元素闭合。每个描述都用dd元素闭合。例如：

<dl>
  <dt>早上</dt>
    <dd>吃油条</dd>
  <dt>中午</dt>
    <dd>吃米饭</dd>
  <dt>晚上</dt>
    <dd>喝汤</dd>
</dl>

文字的特殊标签

<b>:将文字表示为粗体

<i>:将文字表示为斜体

<u>:将文字表示为含有下划线

<em>:起强调作用

<strong>:起着重作用 <br>:常用作换行符

<hr>：在文中生成一条水平分割线

<abbr>:常用来包裹一个缩略语或者缩写，将缩写的解释写在title属性中

<address>:常用来包裹联系方式

<sup>:常用来标注化学方程式，数学方程式之类的上标

<sub>:常用来标注化学方程式，数学方程式之类的下标

<code>]: 用于标记计算机通用代码。

<pre>: 用于保留空白字符（通常用于代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在<pre></pre>标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。

<var>: 用于标记具体变量名。

<kbd>: 用于标记输入电脑的键盘（或其他类型）输入。

<samp>: 用于标记计算机程序的输出。

time:用于将时间和日期标记为可供机器识别的元素,例如：

<time datetime="2022-07-24">2022 年 7 月 24 日</time>

文字引用

如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用blockquote元素包裹起来表示，并且在cite属性里用 URL 来指向引用的资源。

超链接

titie属性

可以补充信息，鼠标悬停在超链接上会显示title的内容

块级链接

将块级元素放在a标签之中，比如img标签，便可将图像变成超链接

文档片段

超链接除了可以链接到文档外，也可以链接到 HTML 文档的特定部分（被称为文档片段）

如果要做到这一点，首先要给需要链接跳转到的地方一个id属性，然后在a标签中的href属性的末尾用井号指向，例如

<h1 id='to'>这是一个需要跳转到的地方</h1>

<a href='#to'>这是跳转开始地方</a>

html文档格式

基本构建

<header>：页眉。

<nav>：导航栏。

<main>：主内容。主内容中还可以有各种子内容区段,可用<article>、<section>和div>等元素表示。

<aside>：侧边栏，经常嵌套在<main> 中。

<footer>：页脚。

布局元素细节

<main>：存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body>中。最好不要把它嵌套进其它元素。

<article>包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）。

<section>与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以标题作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。

<aside>包含一些间接信息（术语条目、作者简介、相关链接，等等）。

<header>是简介形式的内容。如果它是<body>的子元素，那么就是网站的全局页眉。如果它是<article>或<section>的子元素，那么它是这些部分特有的页眉（此 <header> 非彼 标题）。

<nav>包含页面主导航功能。其中不应包含二级链接等内容。

<footer>包含了页面的页脚部分。

无语义标签

span:内联无语义标签，当无法找到更适合的语义标签或者不想让它存在其他特定意思时使用

div:块级无语义标签，当无法找到更适合的语义标签或者不想让它存在其他特定意思时使用

多媒体与嵌入

图片

img标签来使用图像

src属性指向图片的地址

alt属性是图片的描述，当图片可能因为网络等无法显示时便展现出alt的内容

title属性是当鼠标悬停在图片上时展现出来的文字

视频

video标签来使用视频

src属性指向视频的地址

controls属性指控制视频的回放功能

autoplay这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。

loop这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。

poster这个属性指向了一个图像的 URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。

preload 这个属性被用来缓冲较大的文件，有 3 个值可选： "none" ：不缓冲 "auto" ：页面加载后缓存媒体文件 "metadata" ：仅缓冲文件的元数据

表格

表格的基本使用：

<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

呈现的效果为：

QQ.png

因为时间问题便就写这么多，还有很多内容未来再补充（下次一定）

avatar
文章
阅读
粉丝