本文详细介绍了HTML的基础标签及高级应用，包括标题、段落、列表、引用、时间标记等，强调了语义化标签的重要性，以及如何使用HTML进行有效的文档结构划分。
HTML介绍
-
标题和段落
标题：
<h1>~<h6>,一级标题到6级标题。
这六个标签具有语义，让人知道这是标题，也帮助搜索引擎或者是屏幕阅读器等工具工作。而使用css对一个没有语义的标签添加样式达到同样的显示效果，这对搜索引擎或者屏幕阅读器就没有任何帮助了。段落：一个
<p>标签就是一个段落。 -
列表
无序列表
<ul>(Unordered List?)：<ul> <li>豆浆</li> <li>油条</li> <li>豆汁</li> <li>焦圈</li> </ul>有序列表
<ol>(Ordered List?)：<ol> <li>沿着条路走到头</li> <li>右转</li> <li>直行穿过第一个十字路口</li> <li>在第三个十字路口处左转</li> <li>继续走 300 米，学校就在你的右手边</li> </ol> -
强调
<em>(emphasis):浏览器默认风格为斜体，但你不应该纯粹使用这个标签来获得斜体风格，为了获得斜体风格，你应该使用<span>元素和一些CSS，或者是<i>元素<strong>(strong importance) :浏览器默认风格为粗体，但你不应该纯粹使用这个标签来获得粗体风格，为了获得粗体风格，你应该使用<span>元素和一些CSS，或者是<b>元素上面两个元素都具有语义，语义对可访问性，SEO（搜索引擎优化）等非常重要。
-
斜体字、粗体字、下划线
-
<i>:被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想…… -
<b>:被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句…… -
<u>:被用来传达传统上用下划线表达的意义：专有名词，拼写错误……
-
-
统一资源定位符(URL)与路径（Path）
统一资源定位符（英文：Uniform Resource Locator，简写：URL）是一个定义了在网络上的位置的一个文本字符串。
URL使用路径查找文件。路径 指定文件系统中您感兴趣的文件所在的位置。
-
文档片段(锚)
超链接
<a>除了可以链接到文档外，还可以链接到文档内的指定位置，<h2 id="Mailing_Address">Mailing_Address</h2> ... <a href="#Mailing_Address">return to mailling address </a>也可以跳转到其他页面的指定位置
<a href="welcom.html#Mailing_Address">jump to mailling address</a> -
电子邮件链接
<a href="mailto:liuabstract@gmail.com">email me now</a>当点击一个链接或按钮时，打开一个新的电子邮件发送信息，邮箱地址是可选的
-
描述列表 (description list)
这种列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等。
描述列表使用与其他列表类型不同的闭合标签— <dl>; 此外，每一项都用 <dt> (description term) 元素闭合。每个描述都用 <dd> (description description) 元素闭合。
<dl> <dt>内心独白</dt> <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd> <dt>语言独白</dt> <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd> <dt>旁白</dt> <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd> </dl><dl>
<dt>内心独白</dt>
<dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
<dt>语言独白</dt>
<dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
<dt>旁白</dt>
<dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>
浏览器的默认样式会在描述列表的描述部分（description description）和描述术语（description terms）之间产生缩进。 -
引用
块引用：如果一个块级内容被其他地方所引用，那么这个块应该用
<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><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>元素，将短的行内引用的文本包裹起来，并且元素的cite属性值标明引用的URL资源。<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><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>
引文：<blockquote>和<q>元素的cite属性都不会显示出来，如果要确保引用的来源在页面上显示出来，最好使用<a>元素包裹<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>
<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</p>
<cite>元素中的内容默认样式为斜体。
-
缩略语
<p>我们使用 <abbr title="超文本标记语言（Hypertext Markup Language）">HTML</abbr> 来组织网页文档。</p> <p>第 33 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 将于 2024 年 8 月在法国巴黎举行。</p><p>我们使用 <abbr title="超文本标记语言（Hypertext Markup Language）">HTML</abbr> 来组织网页文档。</p>
<p>第 33 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 将于 2024 年 8 月在法国巴黎举行。</p>
<abbr>元素用来包裹一个建略语或者缩写，并在title中对其进行解释。 -
标记联系方式
<address>标签用来包含联系方式（地址，邮箱，个人简历的超链接等）<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>
image
但要记住的一点是，<address>元素是为了标记编写HTML文档的人的联系方式，而不是任何其他的内容。
- 上标和下标
<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> -
-
标记时间和日期
<time>元素不仅可以标记时间，还可以将时间标记为可供机器识别的格式:<time datetime="2020-03-30">2020年3月30日</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> -
文档的基本组成部分
网页的外观多种多样，但是除了全屏视频或游戏，或艺术作品页面，或只是结构不当的页面以外，都倾向于使用类似的标准组件：
- 页眉：通常横跨于整个页面顶部有一个大标题 和/或 一个标志。 这是网站的主要一般信息，通常存在于所有网页。
- 导航栏：指向网站各个主要区段的超链接。
- 主内容：中心的大部分区域是当前网页大多数的独有内容。
- 侧边栏：一些外围信息、链接、引用、广告等。
- 页脚：横跨页面底部的狭长区域。
为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如： -
<header>：页眉 -
<nav>：导航栏 -
<main>：主内容，其中还可以包含<div>、<article>、<section>等。 -
<aside>：侧边栏。 -
<footer>：页脚。
-
<div>和<span><span>是一个内联（inline）无语义元素。只有当找不到合适语义的标签时，或者不想为内容增加特定的含义时使用。<div>是一个块级无语义元素，使用场景同<span><div>非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用， 否则文档的升级和维护工作会非常困难。 -
换行和水平分割线
<br>可在段落中换行，是唯一一个可以生产多个断行结构的元素。<hr>元素在文档中生成一条水平分割线，表示文本中主题的变化（例如话题或场景的改变）。
扫一扫
604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
