HTML 开发笔记
用于定义一个网页的结构的基本技术。HTML用来详细说明你的网页内容是应该被理解为段落、列表、头部、链接、图像、多媒体播放器、表单或是其他众多可用的元素当中的一个亦或是你定义的新元素。
是一种用来告知浏览器如何组织页面的标记语言。它有一系列的元素（element）组成。HTML 标签不区分大小写，不过最好使用小写
em 让内容斜体的标签 strong 粗体
一、HTML 元素
<p>1111</p>，这个元素的主要部分有：
- 1.开始标签（Opening tag）：
<p> - 2.内容（Content）：
1111 - 3.（Closing tag）：
</p>
嵌套元素
可以把元素放在其他元素之中，这被称为嵌套。类似于栈，后进的先关闭
<p>我的猫咪脾气<strong>爆</strong>:)</p>
块级元素和内联元素
- 块级元素在页面中以块的形式展现。相对与前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其他块级元素中。
- 内联元素通常出现在块级元素中并包裹文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行，
<em>第一</em><em>第二</em><em>第三</em>
<p>第四</p><p>第五</p><p>第六</p>
第一第二第三
第四
第五
第六
空元素
不是所有元素都拥有开始标签，内容和结束标记。一个元素只有一个标签，通常用来在此元素所在位置插入或嵌入一些东西。
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
二、属性
元素也可以拥有属性。属性包含元素的额外信息，这些信息不会出现在实际的内容中。一个属性必须包含以下内容：
- 1.在元素和属性之间有个空格（多个属性之间也要有）
- 2.属性后面紧跟着一个
=符号 - 3.有一个属性值，有一对
""引起来
<p class="editor-note">fff</p> ，这个class属性给元素赋了一个识别的名字（id），这个名字此后可以被用来识别此元素的样式信息和其他信息。
a 属性
元素 <a> 是锚，它使被标签包裹的内容成为一个超链接。可添加大量的元素，几个如下：
href：这个属性声明超链接的web地址，当这个链接被点击浏览器会跳转至href声明的web地址title：标题title属性为超链接声明额外的信息，比如你将链接至那个页面。当鼠标悬浮在元素的内容上时，将显示这个内容target：目标target属性指定将用于显示链接的浏览上下文。target="_blank"将在新标签页中显示链接，忽略这个则在当前页显示链接。
<p>欲练<a href="https://zh.wikipedia.org/zh-hans/葵花宝典" title="葵花宝典简介" target="_blank">葵花宝典</a>，需引刀自宫</p>
欲练葵花宝典，需引刀自宫
布尔属性
没有值的属性，是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的布尔值。例如disabled属性，它们可以标记表单输入使之变为不可用（变灰色），此时用户不能向它们输入任何数据。
<input type="text" disabled>
<input type="text">
省略包围属性值的引号
某些情况下是被允许的。例如当属性值中没有空格时。建议始终添加引号。
单引号或者双引号？
单引号也可以使用，只是风格问题。单引号和双信号不能在一个属性值里混用。在一个HTML中已使用一种引号，可以在此引号中嵌套另一种引号。<a href="http://www.example.com" title="你觉得'好玩吗'？">示例站点链接</a>
如果想将引号当做文本显示在html中，就必须使用实体引用。
HTML中的空白
无论用了多少空白，当渲染这些代码的时候，HTML解释器会将连续出现的空白字符减少为一个单独的空格符。
三、实体引用：在HTML中包含特殊字符
在HTML中，< > " ' & 是特殊字符，是HTML语法自身的一部分。字符引用：表示字符的特殊编码，每个字符引用以符号&开始，以分号;结束。通过这种方式可以将这些字符包含进文本。
| 原义字符 | 等价字符引用 |
|---|---|
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |
<!-- 错误 -->
<p>HTML 中用 <p> 来定义段落元素。</p>
<!-- 正确 -->
<p>HTML 中用 <p> 来定义段落元素</p>
四、HTML注释
<!— ---> 用一对这种特殊的记号将HTML内容包括起来，就是注释。
五、HTML头部
是包含在<head> 元素里面的内容，不会在浏览器中展示，作用是包含一些页面的元数据。
标题 title元素
元素<title> ：用来表示整个HTML文档大致内容的元数据、建议的书签名、也被用在搜索的结果中。
元数据 meta元素
元数据就是描述数据的数据。
字符编码 <meta charset="utf-8"> ，指定了文档的字符编码
添加作者和描述 <meta name="author" content="Chris Mills"> ，name指定了meta元素的类型，说明了该元素包含了什么类型的信息。content指定了实际的元数据内容。
在搜索引擎中description的使用
<meta name="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.">
许多功能是专有的创作，旨在向某些网站提供可使用的特定信息。
自定义图标：将其保存在与网站的索引页面相同的目录中，以.ico格式保存（支持更通用格式，ico是为了兼容以前很老版本的浏览器）。在HTML
中引用它 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
应用CSS和JavaScript
元素 经常位于文档的头部。有两个属性，rel="stylesheet"标明这是文档的样式表，而href包含了样式表文件的路径。<link rel="stylesheet" href="my-css-file.css">
** **部分没必要非放在文档头部；实际上，把它放在文档底部是一个更好的选择。<script src="my-js-file.js"></script> 。还可以选择将脚本放入<script> 元素中，而不是指向外部脚本文件。
为文档设定主语言
通过添加lang属性到HTML开始标签中来实现。<html lang="en-US"> ，会被搜索引擎更有效的索引。还可以将文档的分段设置为不同的语言。<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
六、HTML文字处理基础
HTML的主要工作是编辑文本结构和文本内容，以便浏览器能正确的显示。
标题和段落
段落通过 <p> 元素标签进行定义，标题是通过”标题标签“进行定义 ，有六个标题元素标签。
层级结构最佳实践：
- 只对每个页面使用一次
- 确保在层级结构中以正确的顺序使用标题
- 可用的六个标题级别中，每页使用不超过三个，除非有必要。
为什么要结构化：
- 浏览器要知道标题、段落
- 方便用户快速查找想要的东西，通过标题
- 搜索引擎将标题的内容视为影响网页搜索排名的重要关键字
- 方便严重视力障碍者，各种技术通过朗读标题来提供文档的概述
- 帮助CSS/JavaScript可以快速定位
语义：确保使用正确的元素给予内容正确的意思、作用以及外形。语义对可访问性、搜索引擎优化等非常重要
列表 Lists
无序 Unordered：无序的列表被用来标记每个项目，项目的顺序并不重要。无序的清单从 <ul> 元素开始，利用 <li> 元素把每个列出的项目分别包裹起来。
<ul>
<li>豆浆</li>
<li>油条</li>
<li>豆汁</li>
<li>焦圈</li>
</ul>
有序 Ordered：有序的列表是根据项目的顺序列出来的。使用<ol> 元素将所有项目包裹。
<ol>
<li>沿着条路走到头</li>
<li>右转</li>
<li>直行穿过第一个十字路口</li>
<li>在第三个十字路口处左转</li>
<li>继续走 300 米，学校就在你的右手边</li>
</ol>
嵌套列表 Nesting lists ：将一个列表嵌入到另一个列表是完全可以的。
<ol>
<li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀，调成“腌料”，鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀，腌渍半小时。</li>
<li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀，调成“综合调味料”。</li>
<li>鸡丁腌好以后，色拉油下锅烧热，先将鸡丁倒入锅内，用大火快炸半分钟，炸到变色之后，捞出来沥干油汁备用。</li>
<li>在锅里留下约两大匙油，烧热后将切好的干辣椒下锅，用小火炒香后，再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅，用大火快炒片刻后，再倒入“综合调味料”继续快炒。</li>
<ul>
<li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。</li>
<li>如果你在北方，可加入黄瓜丁、胡萝卜丁和花生米，翻炒后起锅。</li>
</ul>
</ol>
重点强调
强调：<em> 元素，浏览器默认风格为斜体
非常重要：<strong> 元素，浏览器默认风格为粗体
斜体字、粗体字、下划线：出现在CSS仍然不被完全支持的时期。像这样仅仅影响表象而且没有语义，被称为表象元素（presentational elements）并且不应该再被使用。
- 元素 被用来传达传统上用斜体表达的意义：外国名字、分类名称、技术术语、一种思想
- 元素 被用来传达传统上用粗体表达的意义：关键字、产品名称、引导句
- 元素 被用来传达传统上用下划线表达的意义：专有名词、拼写错误
PS：在 web上，最好只在链接上使用下划线。当语义适合时使用元素，但是有时候在web上用CSS改变下划线默认的样式更加合适。
七、超链接
超链接使我们能够将我们的文档链接到任何其他文档，也可以链接到文档的指定部分。
<a href="">111</a> href属性（也成为目标）
<a title="">111</a> title属性包含关于链接的补充有用信息。（当鼠标悬停在链接上时，标题将做为提示信息出现）
块级链接：可以将块级元素转为为链接。点击图片就会跳转。
<a href="https://www.mozilla.org/en-US/">
<img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
</a>
统一资源定位符（URL）
是一个定义了在网络上的位置的一个文本字符串。URL使用路径查找文件。路径指定文件系统中你感兴趣的文件所在的位置。
文档片段：链接到HTML文档的特定部分。要做到这点必须给要链接到的元素分配一个id属性。
<h2 id="Mailing_address">Mailing address</h2>
//链接特定的id，在URL的结尾使用一个哈希符号（#）指向它
<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>
//在同一份文档下，通过链接文档片段
<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>
绝对URL：指向由其在Web上的绝对位置定义的位置，包括Protocol（协议）和domain（域名）。不管绝对URL在哪里使用，总是指向确定的相同位置。
相对URL：指向与你链接的文件相关的位置。一个相对的URL将指向不同的位置，这取决于它所在的文件的位置
最佳实践
用清晰的链接措辞，不要重复URL作为链接文本的一部分，不要在链接文本里说”link“或者”links to“ ，链接标签尽可能短。
尽可能使用相对链接。检查代码容易，更有效。
链接到非html资源，留下清晰的指示。
<p><a href="http://www.example.com/large-report.pdf">
Download the sales report (PDF, 10MB)
</a></p>
<p><a href="http://www.example.com/video-stream/">
Watch the video (stream opens in separate tab, HD quality)
</a></p>
<p><a href="http://www.example.com/car-game">
Play the car game (requires Flash)
</a></p>
在下载链接时使用下载属性。当要链接到下载的资源而不是在浏览器中打开时，可以使用下载属性来提供一个默认的保存文件名。
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
download="firefox-latest-64bit-installer.exe">
Download Latest Firefox for Windows (64-bit) (English, US)
</a>
电子邮件链接
使用<a>元素和mailto，URL方案，邮件地址是可选的。标准的邮件头字段可以被添加到提供的邮件URL。最常用的是主题（subject）、抄送（cc）和主体（body）。每个字段和值都被指定为查询项。
<a href="mailto:nowhere@mozilla.org">Send email to 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>
ps：每个字段的值必须是URL编码的，不能有非打印字符（制表符、分页符、换行符）和空格。注意使用问号来分割主URL与参数值，以及使用&符来分割mailto:中的各个参数。这是标准的URL查询标记方法。。
八、描述列表
这种列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等。描述列表使用与其他列表类型不同的闭合标签—；每一项都用
<dt> （description term） 元素闭合；每个描述都用
<dd> （description description）元素闭合。
<dl>
<dt>内心独白</dt>
<dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
<dt>语言独白</dt>
<dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
<dt>旁白</dt>
<dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>
浏览器默认样式会在描述列表的描述部分和描述术语之间产生缩进。一个术语可以同时有多个描述
九、引用
HTML有标记引用的特性，引用的是一行还是一块决定了引用元素的不同。
块引用：用 <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>
浏览器在渲染块引用时默认会增加缩进，作为引用的一个指示符。
行内引用：行内元素用同样的方式工作，除了用<q>元素。
<p>The quote element — <code><q></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>
浏览器默认将其作为普通文本放入引号内表示引用。
引文：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>第 33 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 将于 2024 年 8 月在法国巴黎举行。</p>
十一、标记联系方式
<address> 元素是为了标记编写HTML文档的人的联系方式，而不是任何其他内容。
<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>
十二、上标和下标
<sub> <sup>元素
<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>
//咖啡因的化学方程式是 C8H10N4O2。
//如果 x2 的值为 9，那么 x 的值必为 3 或 -3。
十三、展示计算机代码
<code>：用于标记计算机通用代码。特殊字体表示，跟上下文其它字体不一样<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>
十四、标记时间和日期
<!-- 标准简单日期 -->
<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
HTML代码中可根据功能来为区段添加标记。可使用元素无歧义地表示内容区段，屏幕阅读器等辅助技术可以识别这些元素，并帮助执行“找到主导航 “或”找到主内容“等任务。
为了实现语义化标记，HTML提供了明确这些区段的占用标签。
<header>：标题栏。是简介形式的内容，如果它是的子元素，那么就是网站的全局页眉。如果它是 或 的子元素，那么它是这些部分特有的页眉。<nav>：导航栏。包含页面主导航功能。其中不应包含二级链接等内容<main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section>和<div>等元素表示存放每个页面独有的内容，每个页面上只能用一次<main>，且直接位于<body>中。最好不要把它嵌套进其它元素。<aside>：侧边栏，经常嵌套在main中。包含一些间接信息（术语条目、作者简介、相关链接等等）<footer>：页脚。包含了页面的页脚部分。<article>：包围的内容即一篇文章，与页面其它部分无关。<section>：与article类似，更使用于组织页面使其按功能分块。一般的最佳用法是：以标题作为开头；也可以把一篇article分成若干部分并分别重置于不同的section中，也可以把一个区段section分成若干部分并分别置于不同的acticle中，取决于上下文
无语义元素
对于一些要组织的项目和要包装的内容，现有的语义元素均不能很好的应对。HTML提供了<div> <span>元素。应配合class属性提供一些标签，使这些元素能易于查询。
是一个内联的无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。
<p>国王喝得酩酊大醉，在凌晨 1 点时才回到自己的房间，踉跄地走过门口。<span class="editor-note">[编辑批注：此刻舞台灯光应变暗]</span>.</p>
这里“编辑批注”仅仅是对舞台剧导演提供额外指引，没有具体语义。对于观众，CSS应将批注内容与主内容稍微隔开一些。
<aside> 是一个块级无语义元素，应仅用于找不到更好的块级元素时，或者不想增加特定的意义时。例如，一个电子商务网站页面上有一个一直显示的购物车组件。
<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>
这里不应使用 <aside>，因为它和主内容没有必要的联系，甚至不能用 <section>，因为它也不是页面上主内容的一部分。 非常便利但容易被滥用。
换行与水平分割线
<br> 元素可在段落中进行换行，<br> 是唯一能够生成多个短行结构的元素。
<hr> 元素在文档中生成一条水平分割线，表示文本中主题的变化。一般就是一条水平的直线。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论