title: 1-HTML入门
tags: HTML（构建Web）
category: MDN
HTML 入门
什么是HTML
HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言
HTML 元素
HTML元素的主要部分有：
1、开始标签（Opening tag）：包含元素的名称，被左、右角括号所包围。表示元素从这里开始或者开始起作用
2、结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾
3、内容（Content）：元素的内容，本例中就是所输入的文本本身。
4、元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
嵌套元素
把元素放到其它元素之中——这被称作嵌套
<p>我的猫咪脾气<strong>爆</strong>:)</p>
块级元素和内联元素
1、块级元素：相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
2、内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>和 <strong>
空元素
不是所有元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：元素<img>是用来在元素<img>所在位置插入一张指定的图片
<img src="https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site/images/firefox-icon.png">
空元素（Empty elements） 有时也被叫作 void elements.
属性
属性包含元素的额外信息，这些信息不会出现在实际的内容中
一个属性必须包含如下内容：
1、一个空格，在属性和元素名称之间(如果有多个属性，就与前一个属性之间有一个空格)
2、属性名称，后面跟着一个等于号
3、一个属性值，由一对 英文单引号 或 双引号 括起来
布尔属性
有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值。例如 disabled 属性，他们可以标记表单输入使之变为不可用(变灰色)，此时用户不能向他们输入任何数据。
<input type="text" disabled>
剖析 HTML 文档
<!DOCTYPE html> : 声明文档类型
<html></html> : 这个元素包裹了整个完整的页面，是一个根元素。
<head></head> : 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等
<meta charset="utf-8"> : 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字
<title></title> : 设置页面标题，出现在浏览器标签上，当你标记或收藏页面时它可用来描述页面
<body></body> : 包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等
实体引用：在 HTML 中包含特殊字符
使用字符引用 —— 表示字符的特殊编码, 它们可以在那些情况下使用. 每个字符引用以符号 & 开始, 以分号 ; 结束
head 标签
什么是 HTML 头部元素
HTML <head> 元素与 <body> 元素不同，它的内容不会在浏览器中显示，它的作用是保存页面的一些 元数据
添加标题
<title>可以为文档添加标题。别和 <h1> 元素搞混了，<h1> 是为 body 添加标题的。有时候 <h1> 也叫作网页标题
1、<h1> 元素在页面加载完毕时显示在页面中，通常只出现一次，用来标记页面内容的标题（故事名称、新闻摘要，等等）
2、<title> 元素是一项元数据，用于表示整个 HTML 文档的标题（而不是文档内容）
元数据：<meta>元素
指定文档中字符的编码
<meta charset="utf-8">
添加作者和描述
许多<meta> 元素包含了name 和 content 特性：
1、name 指定了 meta 元素 的类型； 说明该元素包含了什么类型的信息。
2、content 指定了实际的元数据内容
<!--
页面的作者
-->
<meta name="author" content="Chris Mills">
<!--
description被使用在搜索引擎显示的结果页中
-->
<meta name="description" content="The MDN 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 为网站提供了更丰富的元数据
为站点增加自定义图标
图标出现在浏览器每一个打开的页面中的标签页中中以及在书签面板中的书签页面中
页面添加图标的方式有：
1、将其保存在与网站的索引页面相同的目录中，以.ico格式保存（大多数浏览器将支持更通用的格式，如.gif或.png，但使用ICO格式将确保它能在如Internet Explorer 6一样久远的浏览器显示）
2、将以下行添加到HTML <head> 中以引用它
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
在 HTML 中应用 CSS 和 JavaScript
1、应用 CSS ：
<link> 元素经常位于文档的头部。这个link元素有2个属性，rel="stylesheet"表明这是文档的样式表，而 href包含了样式表文件的路径
<link rel="stylesheet" href="my-css-file.css">
2、应用 JavaScript ：
<script> 部分没必要非要放在文档头部；实际上，把它放在文档的尾部（在 </body> 标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）
<script src="my-js-file.js"></script>
为文档设定主语言
为站点设定语言可以通过添加 lang 属性到HTML开始标签中来实现
<html lang="zh-CN">
还可以将文档的分段设置为不同的语言。例如，我们可以把日语部分设置为日语
<p>日语实例: <span lang="jp">ご飯が熱い。</span>.</p>
文字处理基础
标题和段落
1、页面标题：
<h1>我是文章的标题</h1>
这里有六个标题元素标签 —— <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每个元素代表文档中不同级别的内容; <h1> 表示主标题，<h2> 表示二级子标题，<h3> 表示三级子标题，等等
2、段落：
<p>我是一个段落，千真万确。</p>
列表 Lists
无序 Unordered
<ul>
<li>豆浆</li>
<li>油条</li>
<li>豆汁</li>
<li>焦圈</li>
</ul>
有序 Ordered
<ol>
<li>沿着条路走到头</li>
<li>右转</li>
<li>直行穿过第一个十字路口</li>
<li>在第三个十字路口处左转</li>
<li>继续走 300 米，学校就在你的右手边</li>
</ol>
重点强调
强调
在HTML中我们用<em>（emphasis）元素来标记这样的情况。这样做既可以让文档读起来更有趣，也可以被屏幕阅读器识别出来，并以不同的语调发出。浏览器默认风格为斜体，但你不应该纯粹使用这个标签来获得斜体风格，为了获得斜体风格，你应该使用<span>元素和一些CSS，或者是<i>元素
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
非常重要
在HTML中我们用<strong> (strong importance) 元素来标记这样的情况。这样做既可以让文档更加地有用，也可以被屏幕阅读器识别出来，并以不同的语调发出。浏览器默认风格为粗体，但你不应该纯粹使用这个标签来获得粗体风格，为了获得粗体风格，你应该使用<span>元素和一些CSS，或者是 <b> 元素
<p>This liquid is <strong>highly toxic</strong>.</p>
斜体字、粗体字、下划线
<i> 被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
<b> 被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
<u> 被用来传达传统上用下划线表达的意义：专有名词，拼写错误……
超链接
什么是超链接
超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以链接到文档的指定部分。点击（或激活）超链接将使网络浏览器转到另一个网址（URL）
URL可以指向HTML文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。 如果浏览器不知道如何显示或处理文件，它会询问您是否要打开文件（需要选择合适的本地应用来打开或处理文件）或下载文件（以后处理它）
链接的解析
通过将文本（或其他内容，见块级链接)转换为<a>元素内的链接来创建基本链接， 给它一个href属性（也称为目标），它将包含您希望链接指向的网址
<p>
我创建了一个指向
<a href="https://www.mozilla.org/zh-CN/">
Mozilla 主页
</a>
的超链接。
</p>
使用title属性添加支持信息
您可能要添加到您的链接的另一个属性是标题；这旨在包含关于链接的补充有用信息，例如页面包含什么样的信息或需要注意的事情
<p>
我创建了一个指向
<a
href="https://www.mozilla.org/zh-CN/"
title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">
Mozilla 主页</a>
的超链接。
</p>
块级链接
可以将一些内容转换为链接，甚至是块级元素。例如你想要将一个图像转换为链接，你只需把图像元素放到<a></a>标签中间
<a href="https://www.mozilla.org/zh-CN/">
<img src="mozilla-image.png" alt="链接至 Mozilla 主页的 Mozilla 标志">
</a>
统一资源定位符(URL)与路径(path)
1、统一资源定位符（英文：Uniform Resource Locator，简写：URL）是一个定义了在网络上的位置的一个文本字符串。例如 Mozilla 的中文主页定位在 https://www.mozilla.org/zh-CN/
2、路径：
<!--
指向当前目录
-->
<p>要联系某位工作人员，请访问我们的 <a href="contacts.html">联系人页面</a>。</p>
<!--
指向子目录
-->
<p>请访问 <a href="projects/index.html">项目页面</a>。</p>
<!--
指向上级目录
-->
<p>点击打开 <a href="../pdfs/project-brief.pdf">项目简介</a>。</p>
<!--
多层上级目录
../../../complex/path/to/my/file.html
-->
文档片段
超链接除了可以链接到文档外，也可以链接到HTML文档的特定部分（被称为文档片段）。要做到这一点，你必须首先给要链接到的元素分配一个id属性
<h2 id="Mailing_address">邮寄地址</h2>
然后链接到那个特定的id，您可以在URL的结尾使用一个井号指向它，例如:
<p>要提供意见和建议，请将信件邮寄至 <a href="contacts.html#Mailing_address">我们的地址</a>。</p>
你甚至可以在同一份文档下，通过链接文档片段，来链接到同一份文档的另一部分：
<p>本页面底部可以找到 <a href="#Mailing_address">公司邮寄地址</a>。</p>
绝对URL和相对URL
或者称为，绝对链接和相对链接
1、绝对URL ：http://www.example.com/projects/index.html
2、相对URL ：pdfs/project-brief.pdf
下载链接的 download 属性
当链接到要下载的资源而不是在浏览器中打开时，您可以使用 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>
电子邮件链接
当点击一个链接或按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或页面。其最基本和最常用的使用形式为一个mailto:link （链接），链接简单说明收件人的电子邮件地址。例如:
<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>
实际上，邮件地址甚至是可选的。如果你忘记了（也就是说，你的href仅仅只是简单的"mailto:"），一个新的发送电子邮件的窗口也会被用户的邮件客户端打开，只是没有收件人的地址信息，这通常在“分享”链接是很有用的，用户可以发送给他们选择的地址邮件
高级文字格式
描述列表
描述列表 (description list) 。这种列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等
描述列表使用与其他列表类型不同的闭合标签 —— <dl>; 此外，每一项都用 <dt> (description term) 元素闭合。每个描述都用 <dd> (description definition) 元素闭合
<dl>
<dt>内心独白</dt>
<!--
请注意：一个术语 <dt> 可以同时有多个描述 <dd>
-->
<dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
<dt>语言独白</dt>
<dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
<dt>旁白</dt>
<dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>
引用
块引用
如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用<blockquote>元素包裹起来表示，并且在cite属性里用URL来指向引用的资源
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<p>The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block
Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>
行内引用
下面的标记包含了从MDN<q>页面的引用
<p>The quote element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">用于不需要分段的短引用</q></p>
引文
cite属性内容不会被浏览器显示、屏幕阅读器阅读，需使用 JavaScript 或 CSS，浏览器才会显示cite的内容。如果你想要确保引用的来源在页面上是可显示的，更好的方法是为<cite>元素附上链接
<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:</p>
引文默认的字体样式为斜体
缩略语
<abbr> —— 它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）
<p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。</p>
标记联系方式
HTML有个用于标记联系方式的元素——<address>。它仅仅包含你的联系方式
<address>
<p>Chris Mills, Manchester, The Grim North, UK</p>
</address>
上标和下标
当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。 <sup> 和<sub>元素可以解决这样的问题
<!--
下标
-->
<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>
展示计算机代码
有大量的HTML元素可以来标记计算机代码：
<code>: 用于标记计算机通用代码。
<pre>: 用于保留空白字符（通常用于代码块）——如果您在文本中使用缩进或多余的空白，浏览器将忽略它，您将不会在呈现的页面上看到它。但是，如果您将文本包含在<pre></pre>标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。
<var>: 用于标记具体变量名。
<kbd>: 用于标记输入电脑的键盘（或其他类型）输入。
<samp>: 用于标记计算机程序的输出
<pre><code>const para = document.querySelector('p');
para.onclick = function() {
alert('噢，噢，噢，别点我了。');
}</code></pre>
<p>请不要使用 <code><font></code> 、 <code><center></code> 等表象元素。</p>
<p>在上述的 JavaScript 示例中，<var>para</var> 表示一个段落元素。</p>
<p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p>
<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
标记时间和日期
HTML 还支持将时间和日期标记为可供机器识别的格式的 <time> 元素
<time datetime="2016-01-20">2016年1月20日</time>
上述基本的例子仅仅提供了一种简单的可被机器识别的日期格式，这里还有许多其他支持的格式
<!--
标准简单日期
-->
<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>
文档与网站架构
文档的基本组成部分
网页的外观多种多样，但是除了全屏视频或游戏，或艺术作品页面，或只是结构不当的页面以外，都倾向于使用类似的标准组件：
1、页眉：
通常横跨于整个页面顶部有一个大标题 和/或 一个标志。 这是网站的主要一般信息，通常存在于所有网页。
2、导航栏：
指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的 无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。
3、主内容：
中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。
4、侧边栏
一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。
5、页脚：
横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。 还可以通过提供快速访问链接来进行 SEO
用于构建内容的 HTML
为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：
<header>：页眉。
<nav>：导航栏。
<main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。
<aside>：侧边栏，经常嵌套在 <main> 中。
<footer>：页脚。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二次元俱乐部</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header> <!-- 本站所有网页的统一主标题 -->
<h1>聆听电子天籁之音</h1>
</header>
<nav> <!-- 本站统一的导航栏 -->
<ul>
<li><a href="#">主页</a></li>
<!-- 共n个导航栏项目，省略…… -->
</ul>
<form> <!-- 搜索栏是站点内导航的一个非线性的方式。 -->
<input type="search" name="q" placeholder="要搜索的内容">
<input type="submit" value="搜索">
</form>
</nav>
<main> <!-- 网页主体内容 -->
<article>
<!-- 此处包含一个 article（一篇文章），内容略…… -->
</article>
<aside> <!-- 侧边栏在主内容右侧 -->
<h2>相关链接</h2>
<ul>
<li><a href="#">这是一个超链接</a></li>
<!-- 侧边栏有n个超链接，略略略…… -->
</ul>
</aside>
</main>
<footer> <!-- 本站所有网页的统一页脚 -->
<p>© 2050 某某保留所有权利</p>
</footer>
</body>
</html>
HTML 布局元素细节
<main> 存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body> 中。最好不要把它嵌套进其它元素。
<article> 包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）。
<section> 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以 标题 作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。
<aside> 包含一些间接信息（术语条目、作者简介、相关链接，等等）。
<header> 是简介形式的内容。如果它是 <body> 的子元素，那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素，那么它是这些部分特有的页眉（此 <header> 非彼 标题）。
<nav> 包含页面主导航功能。其中不应包含二级链接等内容。
<footer> 包含了页面的页脚部分
无语义元素
对于一些要组织的项目或要包装的内容，现有的语义元素均不能很好对应。有时候你可能只想将一组元素作为一个单独的实体来修饰来响应单一的用 CSS 或 JavaScript。为了应对这种情况，HTML提供了 <div> 和 <span> 元素。应配合使用 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> 可在段落中进行换行；<br>是唯一能够生成多个短行结构（例如邮寄地址或诗歌）的元素
<p>从前有个人叫小高<br>
他说写 HTML 感觉最好<br>
但他写的代码结构语义一团糟<br>
他写的标签谁也懂不了。</p>
<hr> 元素在文档中生成一条水平分割线，表示文本中主题的变化（例如话题或场景的改变）。一般就是一条水平的直线
<p>原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。</p>
<hr>
<p>却说那妖精，脱命升空。原来行者那一棒不曾打杀妖精，妖精出神去了。他在那云端里，咬牙切齿，暗恨行者道：“几年只闻得讲他手段，今日果然话不虚传。那唐僧已此不认得我，将要吃饭。若低头闻一闻儿，我就一把捞住，却不是我的人了。不期被他走来，弄破我这勾当，又几乎被他打了一棒。若饶了这个和尚，诚然是劳而无功也。我还下去戏他一戏。”</p>
规划一个简单的网站
1、时刻记住，大多数（不是全部）页面会使用一些相同的元素，例如导航菜单以及页脚内容。若网站为商业站点，不妨在所有页面的页脚都加上联系方式
2、接下来，可为页面结构绘制草图。记录每一块的作用
3、下面，对于期望添加进站点的所有其它（通用内容以外的）内容展开头脑风暴，直接罗列出来
4、下一步，试着对这些内容进行分组，这样可以让你了解哪些内容可以放在同一个页面。这种做法和 卡片分类法 非常相似
5、接下来，试着绘制一个站点地图的草图，使用一个气泡代表网站的一个页面，并绘制连线来表示页面间的一般工作流。主页面一般置于中心，且链接到其他大多数页面；小型网站的大多数页面都可以从主页的导航栏中链接跳转。也可记录下内容的显示方式
HTML 调试
调试并不可怕
调试其实没有那么可怕，写代码和调试的关键其实是：熟悉语言本身和相关工具
HTML 和调试
浏览器并不会将 HTML 编译成其它形式，而是直接解析并显示结果（称之为解释，而非编译）。可以说 HTML 的 元素 语法比 Rust、JavaScript 或 Python 这样“真正的编程语言”更容易理解。浏览器解析 HTML 的过程比编程语言的编译运行的过程要宽松得多，但这是一把双刃剑
宽松的代码
宽松是什么意思呢？通常写错代码会带来以下两种主要类型的错误：
- 语法错误：由于拼写错误导致程序无法运行，就像上面的 Rust 示例。通常熟悉语法并理解错误信息后很容易修复。
- 逻辑错误：不存在语法错误，但代码无法按预期运行。通常逻辑错误比语法错误更难修复，因为无法得到指向错误源头的信息。
HTML 本身不容易出现语法错误，因为浏览器是以宽松模式运行的，这意味着即使出现语法错误浏览器依然会继续运行。浏览器通常都有内建规则来解析书写错误的标记，所以即使与预期不符，页面仍可显示出来。当然，是存在隐患的
HTML 之所以以宽松的方式进行解析，是因为 Web 创建的初心就是：人人可发布内容，不去纠结代码语法。如果 Web 以严格的风格起步，也许就不会像今天这样流行了
HTML 验证
对于一个非常庞大、复杂的 HTML 文档，最好的方法就是让你的HTML页面通过 Markup Validation Service。由 W3C（制定 HTML、CSS 和其他网络技术标准的组织） 创立并维护的标记验证服务。把一个 HTML 文档加载至本网页并运行 ，网页会返回一个错误报告。
网页可以接受网址、上传一个 HTML 文档，或者直接输入一些 HTML 代码
6290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
