【前端】HTML介绍

StatisticsLittleFish
146 阅读12分钟

1. HTML入门

HTML是超文本标记语言(HyperText Markup Language)，不是编程语言。它是定义网页结构的基本技术，HTML用于标识网页内容是应该被解析为段落、列表、头部、链接、图像、多媒体播放器、表单或是其他众多可用的元素之一，亦或是你定义的新元素。

元素

元素

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

属性

属性

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

代码操场

剖析 HTML 文档

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的测试站点</title>
    </head>
    <body>
        <p>这是我的页面</p>
    </body>
</html>
  1. <!DOCTYPE html> 声明文档类型。
  2. <html></html> <html>元素。这个元素包裹了整个完整的页面，是一个根元素。
  3. <head></head> <head>元素。这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS 样式，字符集声明等等。
  4. <meta charset="utf-8"> 这个元素设置文档使用 utf-8 字符集编码， utf-8 字符集包含了人类大部分的文字。
  5. <title></title> 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
  6. <body></body> <body>元素。包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>神雕侠侣</title>
    </head>
    <body>
        <h1>经典回忆</h1>
        <p>
            相思无用，惟别而已。别期若有定，千般煎熬又何如？莫道黯然销魂，何处<strong>柳暗花明</strong>？<br> 
            ——《<a href="https://zh.wikipedia.org/zh-hans/神鵰俠侶">神雕侠侣</a>》
        </p>
        <img
        src="https://roy-tian.github.io/learning-area/extras/tools/playable-code/images/sdxl.jfif"
        />
    </body>
</html>

字符实体引用表

XML 和 HTML 字符实体引用列表

注释

 <!-- 注释 -->

2. 元数据

用开发者工具查看网页的 head 信息，Ctrl + Shift + I

h1 和 title 的区别

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>&lt;title&gt; element</title>
    </head>
    <body>
        <h1>&lt;h1&gt; element</h1>
    </body>
</html>

指定字符编码

<meta charset="utf-8">

添加作者和描述

许多 <meta> 元素包含了 name 和 content 属性：

  • name 指定了 meta 元素的类型；说明该元素包含了什么类型的信息。
  • content 指定了实际的元数据内容。

这两个 meta 元素对于定义你的页面的作者和提供页面的简要描述是很有用的。让我们看一个例子：

<meta name="author" content="Chris Mills">

<meta name="description" content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

好处：

  • 联系作者
  • 搜索引擎优化

其他类型的元数据

当你在网站上查看源码时，你也会发现其它类型的元数据。你在网站上看到的许多功能都是专有创作，旨在向某些网站（如社交网站）提供可使用的特定信息。

例如，Facebook 编写的元数据协议 Open Graph Data 为网站提供了更丰富的元数据。在 MDN Web 文档源代码中，你会发现：

<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png">

<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">

<meta property="og:title" content="Mozilla Developer Network">

上面代码展现的一个效果就是，当你在 Facebook 上链接到 MDN 时，该链接将显示一个图像和描述：这为用户提供更丰富的体验。

Twitter 还拥有自己的类型的专有元数据协议（称为：Twitter Cards），当网站的 URL 显示在 twitter.com 上时，它具有相似的效果。例如下面：

<meta name="twitter:title" content="Mozilla Developer Network">

为站点添加自定义图标

为了进一步丰富你的网站设计，你可以在元数据中添加对自定义图标（favicon，为“favorites icon”的缩写）的引用，这些将在特定的场合（浏览器的收藏，或书签列表）中显示。

页面添加图标的方式有：

  1. 将其保存在与网站的索引页面相同的目录中，以 .ico 格式保存（大多数浏览器将支持更通用的格式，如 .gif 或 .png，但使用 ICO 格式将确保它能在如 Internet Explorer 6 那样古老的浏览器显示）

  2. 将以下行添加到 HTML 的 <head> 中以引用它：

<link rel="icon" href="favicon.ico" type="image/x-icon">

实验操作：应用 CSS 和 JavaScript

<link rel="stylesheet" href="my-css-file.css">
<script src="my-js-file.js" defer></script>
  1. 拷贝 meta-example.html、script.js 和 style.css 文件
  2. 使用浏览器和文字编辑器同时打开你的 HTML 文件。
  3. 根据上面的信息，添加 <link> 和 <script> 元素到你的 HTML 文件中，这样你的 HTML 就可以应用 CSS 和 JavaScript 了。

为文档设定主语言

<html lang="zh-CN">

这在很多方面都很有用。如果你的 HTML 文档的语言设置好了，那么你的 HTML 文档就会被搜索引擎更有效地索引。

将文档的分段设置为不同的语言。例如，我们可以把日语部分设置为日语，如下所示：

<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

3. HTML文字处理基础

段落

<p>
    我是一个段落。
</p>

标题

<h1>
    我是文章的标题
</h1>

不是标题，胜似标题

<span style="font-size: 32px; margin: 21px 0;">这是顶级标题吗？</span>

无序列表

<ul>
    <li>豆浆</li>
    <li>油条</li>
    <li>豆汁</li>
    <li>焦圈</li>
</ul>

有序列表

<ol>
    <li>沿着条路走到头</li>
    <li>右转</li>
    <li>直行穿过第一个十字路口</li>
    <li>在第三个十字路口处左转</li>
    <li>继续走 300 米，学校就在你的右手边</li>
</ol>

嵌套列表

<ol>
    <li>黄河远上白云间</li>
    <li>一片孤城万仞山
        <ul>
            <li>羌笛何须怨杨柳</li>
            <li>春风不度玉门关</li>
        </ul>
    </li>
</ol>

重点强调

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

<p>This liquid is <strong>highly toxic</strong>.</p>
<p>I am counting on you. <strong>Do not</strong> be late!</p>

斜体字、粗体字、下划线

  • <i> 斜体
  • <b> 粗体
  • <u> 下划线

4. 超链接

链接的解析

链接+标题

<a href="https://www.mozilla.org/zh-CN/"
   title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">
    Mozilla 主页
</a>

图像转链接

<a href="https://www.mozilla.org/zh-CN/">
    <img src="mozilla-image.png" alt="链接至 Mozilla 主页的 Mozilla 标志">
</a>

URL和Path

指向当前目录、子目录和上级目录

<p>要联系某位工作人员，请访问我们的 <a href="contacts.html">联系人页面</a>。</p>
​
<p>请访问 <a href="projects/index.html">项目页面</a>。</p>
​
<p>点击打开 <a href="../pdfs/project-brief.pdf">项目简介</a>。</p>

指向文档片段

<h2 id="Mailing_address">邮寄地址</h2>
​
<p>请将信件邮寄至 <a href="contacts.html#Mailing_address">我们的地址</a>。</p>
​
<p>本页面底部可以找到 <a href="#Mailing_address">公司邮寄地址</a>。</p>

绝对URL

指向由其在 Web 上的绝对位置定义的位置，包括 protocol（协议）和 domain name（域名）。像下面的例子，如果index.html页面上传到projects这一个目录。并且projects目录位于 web 服务站点的根目录，web 站点的域名为http://www.example.com，那么这个页面就可以通过http://www.example.com/projects/index.html访问（或者通过http://www.example.com/projects/来访问，因为在没有指定特定的 URL 的情况下，大多数 web 服务会默认访问加载index.html这类页面）

相对URL

指向与您链接的文件相关的位置，更像我们在前面一节中所看到的位置。例如，如果我们想从示例文件链接http://www.example.com/projects/index.html转到相同目录下的一个 PDF 文件，URL 就是文件名 URL——例如project-brief.pdf——没有其他的信息要求。如果 PDF 文件能够在projects的子目录pdfs中访问到，相对路径就是pdfs/project-brief.pdf（对应的绝对 URL 是http://www.example.com/projects/pdfs/project-brief.pdf）

一个相对 URL 将指向不同的位置，这取决于它所在的文件所在的位置——例如，如果我们把index.html文件从projects目录移动到 Web 站点的根目录（最高级别，而不是任何目录中），里面的pdfs/project-brief.pdf相对 URL 将会指向http://www.example.com/pdfs/project-brief.pdf，而不是http://www.example.com/projects/pdfs/project-brief.pdf

链接最佳实践

  • 使用清晰的链接措辞
  • 尽可能使用相对链接
  • 链接到非HTML资源，留下清晰的指示
<p><a href="http://www.example.com/large-report.pdf">
下载销售报告（PDF, 10MB）
</a></p>
​
<p><a href="http://www.example.com/video-stream/">
观看视频（将在新标签页中播放，HD 画质）
</a></p>
​
<p><a href="http://www.example.com/car-game">
进入汽车游戏（需要 Flash 插件）
</a></p>
  • 在下载链接时使用download属性
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
   download="firefox-latest-64bit-installer.exe">
    下载最新的 Firefox 中文版 - Windows（64位）
</a>

电子邮件链接

<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
   Send mail with cc, bcc, subject and body
</a>

5. 高级文字排版

描述列表

  • <dl> 描述列表(description list)
  • <dt> 描述术语(description term)
  • <dd> 描述部分(description definition)
<dl>
    <dt>内心独白</dt>
        <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
    <dt>语言独白</dt>
        <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
    <dt>旁白</dt>
        <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

引用

块引用

<p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
    <p>
         The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an extended quotation.
    </p>
</blockquote>

行内引用

浏览器默认将其作为普通文本放入引号内表示引用

<p>The quote element — <code>&lt;q&gt;</code> — is 
    <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
        intended for short quotations that don't require paragraph breaks.
    </q>
</p>

引文

<p>
    According to the 
    <a href="https://developer.mozilla.org/enUS/docs/Web/HTML/Element/blockquote">
        <cite>MDN blockquote page</cite>
    </a>:
</p>

缩略语

<p>
    我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。
</p>
 ​
<p>
    第 33 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 将于 2024 年 8 月在法国巴黎举行。
</p>

标记联系方式

<address>
    <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

<address>
    <p>
        Page written by <a href="../authors/chris-mills/">Chris Mills</a>.
    </p>
</address>

上标和下标

<p>
    咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。
</p>
<p>
    如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。
</p>

展示计算机代码

  • <code>: 用于标记计算机通用代码。
  • <pre>: 用于保留空白字符（通常用于代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在<pre></pre>标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
  • <var>: 用于标记具体变量名。
  • <kbd>: 用于标记输入电脑的键盘（或其他类型）输入。
  • <samp>: 用于标记计算机程序的输出。

标记日期和时间

<!-- 标准简单日期 -->
<time datetime="2016-01-20">20 January 2016</time>
​
<!-- 只包含年份和月份-->
<time datetime="2016-01">January 2016</time>
​
<!-- 只包含月份和日期 -->
<time datetime="01-20">20 January</time>
​
<!-- 只包含时间，小时和分钟数 -->
<time datetime="19:30">19:30</time>
​
<!-- 还可包含秒和毫秒 -->
<time datetime="19:30:01.856">19:30:01.856</time>
​
<!-- 日期和时间 -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
​
<!-- 含有时区偏移值的日期时间 -->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
​
<!-- 调用特定的周 -->
<time datetime="2016-W04">The fourth week of 2016</time>

HTML 元素参考

6. 文档与网站架构

文档的基本组成部分

  • 页眉 通常横跨于整个页面顶部有一个大标题 和/或 一个标志。这是网站的主要一般信息，通常存在于所有网页。
  • 导航栏 指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的 无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。
  • 主内容 中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。
  • 侧边栏 一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。
  • 页脚 横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。还可以通过提供快速访问链接来进行 SEO。

为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：

  • <header>：页眉。
  • <nav>：导航栏。
  • <main>：主内容。主内容中还可以有各种子内容区段，可用<atricle> <section> <div>等表示。
  • <aside>：侧边栏，经常嵌套在 <main> 中。
  • <footer>：页脚。

HTML元素布局细节

  • <main> 存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body> 中。最好不要把它嵌套进其它元素。
  • <atricle> 包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）。
  • <section> 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以 标题 作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。
  • <aside> 包含一些间接信息（术语条目、作者简介、相关链接，等等）。
  • <header> 是简介形式的内容。如果它是<body> 的子元素，那么就是网站的全局页眉。如果它是 <article> 或 <section> 的子元素，那么它是这些部分特有的页眉（此 <header> 非彼 标题）。
  • <nav> 包含页面主导航功能。其中不应包含二级链接等内容。
  • <footer> 包含了页面的页脚部分。

无语义元素

有时你会发现，对于一些要组织的项目或要包装的内容，现有的语义元素均不能很好对应。有时候你可能只想将一组元素作为一个单独的实体来修饰来响应单一的用 CSS 或 JavaScript。为了应对这种情况，HTML 提供了<div> 和 <span> 元素。应配合使用 class 元素。应配合使用 class 属性提供一些标签，使这些元素能易于查询。

<span> 是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。例如：

<p>
    国王喝得酩酊大醉，在凌晨 1 点时才回到自己的房间，踉跄地走过门口。
    <span class="editor-note">[编辑批注：此刻舞台灯光应变暗]</span>.
</p>

<div>是一个块级无语义元素，应仅用于找不到更好的块级元素时，或者不想增加特定的意义时。例如，一个电子商务网站页面上有一个一直显示的购物车组件。

<div class="shopping-cart">
    <h2>购物车</h2>
    <ul>
        <li>
            <p><a href=""><strong>银耳环</strong></a>：$99.95.</p>
            <img src="../products/3333-0985/" alt="Silver earrings">
        </li>
        <li>
            ...
        </li>
    </ul>
    <p>售价：$237.89</p>
</div>

换行与水平分割线

  • <br> 可在段落中换行
  • <hr> 在文档中生成一条水平分割线

使用 HTML 区段和大纲：HTML5 语义元素和大纲算法进阶指南。

avatar
文章
阅读
粉丝