以下学习内容均来源于MDN
HTML详解
HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的**元素（elements）**组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。
元素组成：开始标签、结束标签、内容
1.2元素
嵌套元素
<p>我的猫咪脾气<strong>爆</strong>:)</p>
块级元素与内联元素
- 块级元素以块的形式出现，出现在新的一行，例如段落、列表、导航菜单、页脚
- 内联元素出现在块级元素中，不会导致文本换行，出现在文字之间，比如超链接
<a>或者强调元素<em>和<strong>
空元素
注: 空元素（Empty elements） 有时也被叫作 void elements.
- 一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。比如
<img>
1.3属性
<p class="editor-note">加油学习</p>
<!--这里的class就是属性-->
href: 这个属性声明超链接的web地址，当这个链接被点击浏览器会跳转至href声明的web地址。例如：href="https://www.mozilla.org/"。title: 标题title属性为超链接声明额外的信息，比如你将链接至的那个页面。例如：title="The Mozilla homepage"。当鼠标悬停在超链接上面时，这部分信息将以工具提示的形式显示。target: 目标target属性用于指定链接如何呈现出来。例如，target="_blank"将在新标签页中显示链接。如果你希望在当前标签页显示链接，忽略这个属性即可。
<p>欲练<a href="https://zh.wikipedia.org/zh-hans/葵花宝典" title="葵花宝典简介" target="_blank">葵花宝典</a>，需引刀自宫</p>
布尔属性
<input type="text" disabled="disabled">
1.4一个完整的HTML文档
<!DOCTYPE html> <!--声明文档类型-->
<html>
<head>
<meta charset="utf-8">
<!--这个元素设置文档使用utf-8字符集编码-->
<title>我的测试站点</title>
</head>
<body>
<p>这是我的页面</p>
</body>
</html>
1.5 HTML中的空白
无论你在HTML元素的内容中使用多少空格(包括空白字符，包括换行)，当渲染这些代码的时候，HTML解释器会将连续出现的空白字符减少为一个单独的空格符
1.6 实体应用
真的想要在文本中使用符号&或者小于号, 而不想让它们被浏览器视为代码并被解释
| 原义字符 | 等价字符引用 |
|---|---|
| < | & lt; |
| > | & gt; |
| " | & quot; |
| ’ | & apos; |
| & | & amp; |
<p>HTML 中用 <p> 来定义段落元素。</p> 错误
<p>HTML 中用 <p> 来定义段落元素</p> 正确
2、“头里有什么？HTML元信息”
2.1什么是html头部元素？
HTML<head>元素与 <body>元素不同，它的内容不会在浏览器中显示，它的作用是保存页面的一些 元数据。
<head>
<meta charset="utf-8">
<title>我的测试站点</title>
</head>
2.2 添加标题
：<title>整个 HTML 文档的标题（而不是文档内容）
而<h1>也叫网页标题，元素在页面加载完毕时显示在页面中，通常只出现一次，用来标记页面内容的标题（故事名称、新闻摘要，等等）。
2.3 元数据<meta>元素
元数据就是描述数据的数据，而HTML有一个“官方的”方式来为一个文档添加元数据—— <meta>元素
- 指定文档中字符的编码
<meta charset="utf-8">
-
添加作者和描述
name指定了meta 元素的类型； 说明该元素包含了什么类型的信息。content指定了实际的元数据内容。
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Learning Area aims to provide....">
- 其他类型的元素据
Facebook 编写的元数据协议 Open Graph Data 为网站提供了更丰富的元数据
<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
..">
<meta property="og:title" conten.t="Mozilla Developer Network">
2.4 在你的站点增加自定义图标
页面添加图标的方式：
-
将其保存在与网站的索引页面相同的目录中，以.ico格式保存（大多数浏览器将支持更通用的格式，如.gif或.png，但使用ICO格式将确保它能在如Internet Explorer 6一样久远的浏览器显示）
-
将以下行添加到HTML
<head>中以引用它：<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
2.5 在HTML中应用CSS和JavaScript
如今，几乎你使用的所有网站都会使用 CSS 让网页更加炫酷，使用JavaScript让网页有交互功能，比如视频播放器，地图，游戏以及更多功能。这些应用在网页中很常见，它们分别使用<link>元素以及<script>元素。
<link>元素经常位于文档的头部。这个link元素有2个属性，rel="stylesheet"表明这是文档的样式表，而 href包含了样式表文件的路径：
<link rel="stylesheet" href="my-css-file.css">
-
.
<script>部分没必要非要放在文档头部；实际上，把它放在文档的尾部（在</body>标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。<script src="my-js-file.js"></script>
2.6 为文档设定主语言
<html lang="zh-CN">
这在很多方面都很有用。如果你的HTML文档的语言设置好了，那么你的HTML文档就会被搜索引擎更有效地索引 (例如，允许它在特定于语言的结果中正确显示)，对于那些使用屏幕阅读器的视障人士也很有用(比如， 法语和英语中都有“six”这个单词，但是发音却完全不同)。
-
分段设置不同语言
<p>日语实例: <span lang="jp">ご飯が熱い。</span>.</p>
这些codes是根据 ISO 639-1 标准定义的。你可以在Language tags in HTML and XML找到更多相关的。
3、HTML文字基础
3.1添加标题、段落
标题：<h1></h1>
h1一级，h2二级标题…
段落：<p></p>
文章需要有层次结构，我们需要结构化和语义
3.2列表
-
无序列表Unordered
<ul></ul><ul> <li>豆浆</li> <li>油条</li> <li>豆汁</li> <li>焦圈</li> </ul> -
有序列表Ordered
<ol> <li>沿着条路走到头</li> <li>右转</li> <li>直行穿过第一个十字路口</li> <li>在第三个十字路口处左转</li> <li>继续走 300 米，学校就在你的右手边</li> </ol>
3.3 重点强调
- 强调标签：
<em>（emphasis）,浏览器默认风格为斜体
获得斜体风格，你应该使用<span>元素和一些CSS，或者是<i>元素
- 加粗标签:
<strong>
获得粗体风格，你应该使用<span>元素和一些CSS，或者是<i>元素
- 表象元素（presentational elements）
仅仅影响表象而且没有语义，它们出现于人们要在文本中使用粗体、斜体、下划线但CSS仍然不被完全支持的时期。不再使用
HTML5用新的语义规则重新定义了<b>`,`<i>和<u>
<b>斜体：外国文字，分类名称，技术术语，一种思想……<i>粗体：关键字，产品名称，引导句……<u>下划线：专有名词，拼写错误……
4、建立超链接
<a></a>标签
4.1链接到网页
<p>我创建了一个指向
<a href="https://www.mozilla.org/zh-CN/" title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">Mozilla 主页</a>
的超链接。
</p>
你想要将一个图像转换为链接，你只需把图像元素放到<a></a>标签中间。
4.2链接到文档
<p>要联系某位工作人员，请访问我们的 <a href="contacts.html">联系人页面</a></p>
4.3链接到HTML文档的特定部分(文档片段)
首先给要链接到的元素分配一个id属性。例如，如果你想链接到一个特定的标题，可以这样做：
<h2 id="Mailing_address">邮寄地址</h2>
然后链接到那个特定的id，您可以在URL的结尾使用一个井号指向它，例如：
<p>要提供意见和建议，请将信件邮寄至 <a href="contacts.html#Mailing_address">我们的地址</a>。</p>
保持标签尽可能短，尽可能使用相对链接
4.4链接到下载链接
- 在下载链接时，使用download属性来提供一个默认的保存文件名
(：此属性仅适用于同源URL）
<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>
4.5电子邮件链接
当点击一个链接或按钮时，打开一个新的电子邮件发送信息
使用<a>元素和mailto：URL的方案。
其最基本和最常用的使用形式为一个mailto:link （链接），链接简单说明收件人的电子邮件地址。例如:
<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>
5、高级文字格式
5.1引用
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>
The HTML
<blockquote>Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.
-
行内引用
同样方式工作，使用
<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>
浏览器默认将其作为普通文本放入引号内表示引用
The quote element — <q> — is intended for short quotations that don't require paragraph breaks.
-
引文
cite属性内容不会被浏览器显示、屏幕阅读器阅读，需使用 JavaScript 或 CSS，浏览器才会显示cite的内容。如果你想要确保引用的来源在页面上是可显示的，更好的方法是为<site>元素附上链接：<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> <cite>MDN blockquote page</cite></a>: </p> <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> <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> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"> <cite>MDN q page</cite></a>.</p>According to the MDN blockquote page:
The HTML
<blockquote>Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.The quote element —
<q>— isintended for short quotations that don't require paragraph breaks.
-- MDN q page.
5.2描述列表
这种列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等
<dl>
<dt>内心独白</dt>
<dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
<dt>语言独白</dt>
<dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
</dl>
展示效果：
-
内心独白
- 戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。 语言独白
- 戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。
5.3代码、时间日期等其他文本
-
<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>显示效果：
const para = document.querySelector('p'); para.onclick = function() { alert('噢，噢，噢，别点我了。'); }请不要使用
<font>、<center>等表象元素。在上述的 JavaScript 示例中，para 表示一个段落元素。
按 Ctrl/Cmd + A 选择全部内容。
$ ping mozilla.org 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
-
标记时间和日期
<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>
-
5.4下标和上标
上标：<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>
咖啡因的化学方程式是 C8H10N4O2。
如果 x2 的值为 9，那么 x 的值必为 3 或 -3。
5.5略缩语<abbr>
鼠标悬停在上面会出现title内容
<p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。</p>
<p>第 33 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 将于 2024 年 8 月在法国巴黎举行。</p>
我们使用 HTML 来组织网页文档。
第 33 届 奥运会 将于 2024 年 8 月在法国巴黎举行。
5.6标记联系方式address
它仅仅包含你的联系方式，为了标记编写html文档的人的联系方式
<address>
<p>Chris Mills, Manchester, The Grim North, UK</p>
</address>
Chris Mills, Manchester, The Grim North, UK
6、文档与网站架构
6.1网站架构标签
页眉：<header>
导航栏：<nav>
主内容：<main>主内容中还包含各种子内容区段<article>``<section>``<div>
侧边栏：<aside>
页脚：<footer>
6.2无语义元素
<div>和<span>
警告：
<div>非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用， 否则文档的升级和维护工作会非常困难。
6.3 换行与水平分割线
<br> 可在段落中进行换行；<br> 是唯一能够生成多个短行结构（例如邮寄地址或诗歌）的元素。
<hr> 元素在文档中生成一条水平分割线，表示文本中主题的变化（例如话题或场景的改变）。一般就是一条水平的直线
<p>
从前有个人叫小高<br>
他说写 HTML 感觉最好<br>
<hr>
但他写的代码结构语义一团糟<br>
他写的标签谁也懂不了。
</p>
从前有个人叫小高
他说写 HTML 感觉最好
但他写的代码结构语义一团糟
他写的标签谁也懂不了。
7、HTML调试
标签：标签,元素,HTML,文档,2016,链接,详解 来源： https://blog.csdn.net/weixin_45276304/article/details/122791743
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。