HTML笔记

LvemiX⁹2024-03-012024-10-19

HTML 文档详解

<!DOCTYPE html> 声明为 HTML5 文档
<html>  元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<p> 元素定义一个段落
<h1>~<h6> 标题元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低

无语义化元素

<div></div>  无语义，主要用于页面的划分区域
<span></span>  无语义，仅用于给一段文本添加样式 例如：雪碧图
<br/>  无语义，空元素，用于在页面中换行 不建议使用改标签，使用会导致页面布局的改变和不利于网站维护
<hr> 无语义，空元素，用于在页面制造一个分割线 不建议使用该标签，使用会导致页面布局的改变和不利于网站维护

标记文本

标题

<h1>主标题</h1>         HTML 包括六个级别的标题， 一般最多用到 3-4 级标题
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>
<h5>~<h6>

段落

1	<p>这是一个段落</p> 通常用于指定常规的文本内容

列表

无序列表

1
2
3

<ul>
  <li>Milk</li>   表示一系列无序的列表项目，通常渲染为项目符号列表
</ul>

有序列表

1
2
3

<ol>
  <li>Mix flour, baking powder, sugar, and salt.</li>   表示有序列表，通常渲染为一个带编号的列表
</ol>

属性

<ol reversed start="只能整数" type="a/A/i/I/1"></ol>
reversed  此布尔值属性指定列表中的条目是否是倒序排列的，即编号是否应从高到低反向标注
start  一个整数值属性，指定了列表编号的起始值。此属性的值应为阿拉伯数字，尽管列表条目的编号类型 type 属性可能指定为了罗马数字编号等其他类型的编号
type  5个编号

描述列表

<dl>  <!-- 是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 -->
  <dt>内心独白</dt> <!-- 用于在一个定义列表中声明一个术语 -->
  <dd>  <!-- 用来指明一个描述列表元素中一个术语的描述 -->
    戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。
  </dd>
  <dt>语言独白</dt>
  <dd>
    戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。
  </dd>
  <dt>旁白</dt>
  <dd>
    戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。
  </dd>
</dl>

链接

属性

<a href="tel:/mailto:" download="" ping="" target="_self/_blank/_parent/_top">这是一个链接</a>
download  导致浏览器将链接的 URL 视为下载资源
href  超链接所指向的 URL
    使用文档片段链接到页面的某一段
    使用文本片段链接到某一段文字
    使用媒体片段链接到某个媒体文件
    tel:  URL 链接到一个电话号码
    mailto:  URL 链接到一个邮箱地址
ping  包含一个以空格分隔的 URL 列表，当跟随超链接时，浏览器会发送带有正文 PING 的 POST 请求。通常用于跟踪
target  该属性指定在何处显示链接的 URL
	_self：当前页面加载（默认）
	_blank：通常在新标签页打开，但用户可以通过配置选择在新窗口打开
	_parent：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与 _self 相同
	_top：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 _self 相同

非文本类语义化标签

1 2	<video> 代表一段视频 <audio> 代表一段音频

重点强调文本

<em></em> 元素可以嵌套，嵌套层次越深，则强调的程度越深
<i></i>  用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示
<b></b> 应用场合如：摘要中的关键字、评论中的产品名称，或其他典型的应该加粗显示的文字
<strong></strong>  表示文本十分重要，一般用粗体显示
<mark></mark>  引用或符号目的而标记或突出显示的文本
<u></u> 未阐明的注释（下划线）元素
<cite></cite>  表示一个作品的引用，且必须包含作品的标题。这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写
<q></q>  代表小段的引用 功能：自带前后双引号 适用场景：名人名言
<blockquote></blockquote>  代表整段的引用 功能：会有相应的缩进 适用场景：古诗词（文字较多时）
    
用 <em> 来强调重点
用 <b> 来吸引对文字的注意
用 <mark> 来标记关键词或短语
用 <strong> 来表明文本具有重要意义
用 <cite> 来标记书籍或其他出版物的标题
用 <i> 来表示西方文本中的技术术语、音译、思想或船名
    
不要将<b>元素与 <strong>、<em>或<mark>元素混淆。 <strong>元素表示某些重要性的文本，<em>强调文本，而<mark>元素表示某些相关性的文本。 <b>元素不传达这样的特殊语义信息；仅在没有其他合适的元素时使用它
    
    
<abbr></abbr>  用于代表缩写，并且可以通过可选的 title 属性提供完整的描述
<abbr> 与 <dfn> 联合使用可以定义一个更加正式的缩写
<address></address> 表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息
<sup></sup> 表示上标
<sub></sub> 表示下标

展示计算机代码

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

标记日期与时间

1	<time datetime="2023-12-08"></time> 用来表示 24 小时制时间或者公历日期，若表示日期则也可包含时间和时区

*文档与网站架构

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

*多媒体与嵌入

图像

<figure> 元素代表一段独立的内容,插图、标题和其中的内容通常作为一个独立的引用单元
    <img src="xxx" alt="xxx" />   该元素通过包含图像文件路径的地址属性 src，可在所在位置嵌入图像,该元素还包括一个替换文字属性 alt，是图像的描述内容
	<figcaption>内容</figcaption>
</figure>

视频和音频

<audio> 标签与 <video> 标签的使用方式几乎完全相同
<video src="视频链接" controls> 插入视频标签
	<track default kind="captions" srclang="en" src="文本字幕.vtt" />    
</video>
<audio src="音频链接" controls> 插入音频标签
	<track default kind="captions" srclang="en" src="文本字幕.vtt" />    
</audio>
视频和音频可添加的属性
width 和 height
你可以用属性控制视频的尺寸，也可以用 CSS 来控制视频尺寸。无论使用哪种方式，视频都会保持它原始的长宽比 — 也叫做纵横比。如果你设置的尺寸没有保持视频原始长宽比，那么视频边框将会拉伸，而未被视频内容填充的部分，将会显示默认的背景颜色。

autoplay
这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。

loop
这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。

muted
这个属性会导致媒体播放时，默认关闭声音。

poster
这个属性指向了一个图像的 URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。

preload
这个属性被用来缓冲较大的文件，有 3 个值可选：
    "none" ：不缓冲
    "auto" ：页面加载后缓存媒体文件
    "metadata" ：仅缓冲文件的元数据
  
<track>以下属性
default
该属性定义了该 track 应该启用，除非用户首选项指定了更合适一个 track。每个媒体元素里面只有一个 track 元素可以有这个属性。

kind
定义了 text track 应该如何使用。如果省略了该属性，默认的 kind 值就是 subtitles。下面是允许的关键字：

subtitles
字幕给观影者看不懂的内容提供了翻译。比如英文电影里非英文的对话框或者文字。
字幕可能包含额外的内容，通常有附加的背景信息。比如在电影星球大战开头的文字，或者某个场景的日期，时间，还有地点。
    
captions
隐藏式字幕提供了音频的转录甚至是翻译。
可能包含重要的非言语的信息，比如音乐提示或者音效。可以指定提示音的源文件 (e.g. music, text, character).
适用于耳聋的用户或者当调成静音的时候。
    
descriptions
视频内容的文本描述。
适用于失明用户或者当视频不可见的场景。
    
chapters
章节标题用于用户浏览媒体资源的时候。
    
metadata
脚本使用的 track。对用户不可见。
    
label
当列出可用的 text tracks 时，给浏览器使用的 text track 的标题，这种标题是用户可读的。

src
track 的地址。必须是合法的 URL。该属性必须定义。

srclang
track 文本数据的语言。它必须是合法的 BCP 47 语言标签。如果 kind 属性被设为 subtitles, 那么 srclang 必须定义。

从 object 到 iframe——其他嵌入技术

<iframe id="inlineFrameExample" title="Inline Frame Example" width="300" height="200" src="嵌入的网址链接">
</iframe>  它能够将另一个 HTML 页面嵌入到当前页面中。
<embed> 和 <object> 元素
    
然而，你不太可能使用这些元素——Applet 几年来一直没有被使用；由于许多原因，Flash 不再受欢迎（见下面的插件案例）；PDF 更倾向于被链接而不是被嵌入；其他内容，如图像和视频都有更优秀、更容易元素来处理。插件和这些嵌入方法真的是一种传统技术，我们提及它们主要是为了以防你在某些情况下遇到问题，比如内部网或企业项目等。

具体属性请参考
从 object 到 iframe——其他嵌入技术 - 学习 Web 开发 | MDN (mozilla.org)

在网页中添加矢量图形

SVG 是用于描述矢量图像的XML语言。它基本上是像 HTML 一样的标记，只是你有许多不同的元素来定义要显示在图像中的形状，以及要应用于这些形状的效果。SVG 用于标记图形，而不是内容。非常简单，你有一些元素来创建简单图形，如和。更高级的 SVG 功能包括（使用变换矩阵转换颜色）（矢量图形的动画部分）和（在图像顶部应用模板）

<svg
  version="1.1"
  baseProfile="full"
  width="300"
  height="200"
  xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

详细内容请参考
在网页中添加矢量图形 - 学习 Web 开发 | MDN (mozilla.org)

HTML表格

<table>
  <colgroup>
    <col />
    <col style="background-color: yellow" />
  </colgroup>
  <tr> 定义表格中的行
    <th>Data 1</th> 表格内的表头单元格
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>  定义了一个包含数据的表格单元格
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>