HTML的碎碎念

搜索引擎优化SEO

大多数网站的新浏览者大都来自搜索引擎，而且搜索引擎的用户往往只会留意搜索结果中排名前面的几个网站，因此网站的拥有者不仅要到各大搜索引擎进行登录，还要设法提高网站在搜索结果中的排名。

搜索引擎优化（SEO）是指通过优化网站结构、内容和性能，使其更容易被搜索引擎识别和索引，从而提高网站在搜索结果中的排名。单页应用（SPA）通常通过 JavaScript 动态渲染内容，搜索引擎在抓取页面时可能无法获取完整的内容，导致内容难以被及时抓取和索引，从而影响 SEO 效果，可以使用服务器端渲染（SSR）或预渲染等技术进行优化。

SSR（Server-Side Rendering，服务端渲染）是一种由服务器在请求时生成完整 HTML 页面的技术。具体来说，当用户访问一个页面时，服务器会先将 JavaScript 渲染出的页面内容生成静态 HTML 返回给浏览器，浏览器拿到后直接展示，再通过 JavaScript 激活页面上的交互功能（称为 hydration）。

全局属性

accessKey：设置将焦点移到元素的按键组合
contentEditable="{ true, false, inherit }"：设置元素是否可编辑
dir="{ ltr, rtl, auto }"：设置元素文本方向
draggable="{ true, false }"：设置元素是否可拖动
hidden：隐藏元素
id：设置元素的唯一标识
lang：设置元素的语言
spellcheck="{ true, false }"：设置元素是否进行拼写检查
style：设置元素的行内样式
tabindex="n"：设置元素的 tab 键次序

`<body>`

background 属性：设置页面的背景颜色或背景图片
bgcolor 属性：设置页面的背景颜色
text 属性：设置页面的文本颜色
link 属性：设置页面的链接颜色
alink 属性：设置页面的活动链接颜色

vlink 属性：设置页面的已访问链接颜色
在 HTML4 中，这些属性是 <body> 元素的属性，但在 HTML5 中已经被废弃，推荐使用 CSS 来设置样式。

body {
    background-color: #f0f0f0;
    color: #333;
    font-family: Arial, sans-serif;
}
a:link {
    color: #00f;
}
a:visited {
    color: #551a8b;
}
a:hover {
    color: #f00;
}
a:active {
    color: #f00;
}
a:focus {
    outline: 1px dotted #f00;
}

`<p>`

text-align 属性：设置段落的文本对齐方式
line-height 属性：设置段落的行高
text-indent 属性：设置段落的首行缩进
word-spacing 属性：设置段落的单词间距
letter-spacing 属性：设置段落的字母间距
text-transform 属性：设置段落的文本转换方式
text-decoration 属性：设置段落的文本装饰方式,如下划线、删除线等

块级标签（Block-level Elements）和行内标签（Inline Elements）是 HTML 中两类常见元素，它们的默认表现不同：块级元素独占一行，常用于结构布局；行内元素不会换行，常用于文本内嵌。

常见的块级标签包括：

<div>：通用容器

<p>：段落

<h1>～<h6>：标题

<ul>、<ol>、<li>：列表及项

<header>、<footer>、<nav>、<section>、<article>：语义化布局元素

<table>、<form>、<fieldset>、<aside>、<main> 等也属于块级元素

常见的行内标签包括：

<span>：通用文本容器

<a>：超链接

<strong>、<b>：加粗文本

<em>、<i>：强调或斜体

<img>：图片

<input>、<label>、<select>（尽管 select 视觉上可能较大，但仍属行内）

<abbr>、<cite>、<code>、<small> 等也都是行内元素

`<div>`及html5语义化

HTML5 语义化是指使用具有语义的标签（如 <header>、<footer>、<article>、<section>、<nav> 等）来构建页面结构，使代码更具可读性、结构更清晰，便于开发者理解和维护。

`<article>`

<article> 元素表示页面中独立的、完整的内容单元，如一篇博客文章、一则新闻、一篇论坛帖子等。<article> 元素可以包含标题、作者、发布日期等信息，也可以包含评论、标签等相关内容。

`<section>`

<section> 元素表示页面中的一个区块，将网页文本分割成不同的主题区段，或将一篇文章分成不同的章节和段落。

`<nav>`

<nav> 元素表示页面中的导航部分，通常包含一组链接，用于帮助用户浏览或导航到其他页面。

`<header>`和`<footer>`

<footer> 元素表示页面或区块的页脚，通常包含版权信息、联系方式、相关链接等内容。

<header> 元素表示页面或区块的页眉，通常包含标题、标语、导航等内容。

`<aside>`

<aside> 元素表示页面中的侧边栏、广告、相关链接等内容，通常与主要内容相关，但可以独立于主要内容。

`<main>`

<main> 元素表示页面的主要内容，一个页面中只能包含一个 <main> 元素，用于包裹页面的主要内容部分。

区段格式

`<pre>`

<pre> 元素表示预格式化文本，文本中的空格、换行符等会被保留，文本内容会按照原始格式显示。

`<blockquote>`

<blockquote> 元素表示长引用，通常用于引用其他来源的内容，左右缩进显示。

`<address>`

<address> 元素表示联系信息，通常用于包含作者、版权、联系方式等信息。

`<hr>`

<hr> 元素表示水平分隔线，用于分隔内容。

文本格式

元素

<b>：加粗文本
<i>：斜体文本
<u>：下划线文本
<s>：删除线文本
<sub>：下标文本
<sup>：上标文本
<strong>：强调文本
<em>：强调文本
<small>：小号文本
<dfn>：定义文本
<code>：计算机代码文本
<kbd>：键盘文本
<var>：变量文本
<samp>：样例文本
<cite>：引用文本
<abbr>：缩写文本
<q>：短引用文本
<mark>：标记文本

`<br>`

<br> 元素表示换行，用于在文本中插入换行符。

`<span>`

<span> 元素表示行内文本容器，通常用于设置文本样式或添加事件处理。

`<time>`

<time> 元素表示日期或时间，用于标记时间戳、日期、时间等信息。属性 datetime 用于指定时间戳，机器可以识别，而内容中的时间可以是人类可读的格式。

`<ins>`和`<del>`

<ins> 元素表示插入文本，通常显示为下划线；<del> 元素表示删除文本，通常显示为删除线。

`<ul>`、`<ol>`和`<li>`

<ul> 元素表示无序列表，列表项使用 <li> 元素表示；<ol> 元素表示有序列表，列表项使用 <li> 元素表示。

<ol>的属性有type和start，type表示列表的类型，start表示列表的起始值。比如：

<ol type="A" start="3">
    <li>...</li>  //C
    <li>...</li>  //D
</ol>

定义列表

<dl> 元素表示定义列表，包含术语（<dt> 元素）和解释（<dd> 元素）。

超链接

<a> 元素表示超链接，用于跳转到其他页面或下载文件。<a> 元素的 href 属性用于指定链接地址，target 属性用于指定链接打开方式。

target 属性值	描述
_blank	在新窗口中打开链接
_self	在当前窗口中打开链接
_parent	在父窗口中打开链接
_top	在顶层窗口中打开链接

页内超链接

1 2	<a href="#section1">跳转到第一节</a> <h2 id="section1">第一节</h2>

如果标识符在其他文件则需要在前面加上文件名，如<a href="file.html#section1">跳转到第一节</a>

`<base>`

<base> 元素用于指定文档中所有相对 URL 的基准地址，它必须位于 <head> 中，且只能有一个。当页面中存在相对路径的链接、图片或脚本资源时，浏览器会以 <base> 的 href 属性作为它们的起点进行解析。如果未设置 <base>，则默认以当前文档的 URL 为基准路径。使用不当可能会导致资源加载异常，因此要谨慎使用。

图片

`<img>`

属性

src：图片地址
alt：替代文本
width：宽度
height：高度
ismap：是否为服务器端图像映射
usemap：映射名称

`<figure>`和`<figcaption>`

<figure> 元素表示独立的内容块，通常包含图片、图表、代码等内容，可以使用 <figcaption> 元素为其添加标题。

<figure>
    <img src="image.jpg" alt="图片">
    <figcaption>图片标题</figcaption>
</figure>

表格

<table>
<table> 元素表示表格，包含一组行（<tr> 元素），每行包含一组单元格（<td> 元素）。border-collapse 属性用于设置表格边框的合并方式，border-spacing 属性用于设置表格边框的间距。
<tr>
<tr> 元素表示表格中的一行，包含一组单元格（<td> 元素）。
<td>
<td> 元素表示表格中的一个单元格，包含表格中的数据。
<th>
<th> 元素表示表格中的表头单元格，通常显示为粗体居中文本。

属性 colspan 和 rowspan 用于设置单元格跨列和跨行，scope 属性用于指定表头单元格的作用范围，headers 属性用于指定与表头单元格关联的数据单元格，abbr 属性用于指定单元格的缩写。

直列式表格
针对列来处理，<colgroup> 元素表示表格中的一列或多列，<col> 元素表示表格中的一列。

<table>
    <colgroup>
        <col style="background-color: #f00;">
        <col style="background-color: #0f0;" span="2">
    </colgroup>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

影音多媒体

`<vedio>`与`<audio>`

<video> 元素表示视频，用于在网页中嵌入视频，audio 用于嵌入音频。

src：视频地址
controls：显示播放控件
autoplay：自动播放
loop：循环播放
muted：静音
poster：封面图片
width：宽度
height：高度
preload：预加载,none、metadata、auto,默认auto,表示页面加载时不加载视频，只有在用户点击播放时才加载,metadata表示加载视频的元数据，none表示不加载视频。
crossorigin：设置如何处理跨文件存取要求

嵌入浮动框架`<iframe>`

<iframe> 元素用于在网页中嵌入其他网页，可以用于显示地图、广告、视频等内容。

src：嵌入页面的地址
srcdoc：嵌入页面的 HTML 内容, 比如<iframe srcdoc="<h1>Hello World!</h1>"></iframe>
width：宽度
height：高度
frameborder：是否显示边框
sandbox：沙箱模式，用于限制嵌入页面的行为
allowfullscreen：是否允许全屏显示
name：用于在页面中定位该框架

窗体

`<form>`和`<input>`

<form> 元素表示表单，用于向服务器提交数据。<form> 元素的 action 属性用于指定表单提交的地址，method 属性用于指定提交方式（get 或 post）。

action：表单提交地址
method：提交方式
target：提交后打开方式
enctype：编码方式
autocomplete：自动完成
accept-charset：接受字符集

<input> 元素表示表单中的输入控件，用于接收用户输入的数据。

type：输入类型

type属性值	描述
text	文本框
password	密码框
radio	单选框
checkbox	复选框
submit	提交按钮
reset	重置按钮
button	普通按钮
file	文件上传
hidden	隐藏域
image	图像按钮

html5新增的input类型

type属性值	描述
date	日期
time	时间
month	月份
email	邮箱
url	网址
tel	电话
search	搜索
color	颜色
number	数字
range	范围
datetime-local	本地日期时间
week	周

accept：接受内容类型
alt：替代文本
autocomplete：自动完成
autofocus：自动获取焦点
checked：默认选中
disabled：禁用
form：关联表单
maxlength：最大长度
minlength：最小长度
min，max，step：最小值，最大值，步长
multiple：多选
name：名称
pattern：正则表达式
placeholder：占位符
readonly：只读
required：必填
size：大小
value：值
src：图片地址

`<textarea>`

<textarea> 元素表示多行文本输入框，用于接收用户输入的多行文本。

cols：列数
rows：行数
name：名称
readonly：只读
required：必填
placeholder：占位符
maxlength：最大长度
wrap：换行方式

`<select>`和`<option>`

<select> 元素表示下拉列表，用于提供选项供用户选择。

autofocus：自动获取焦点
disabled：禁用
multiple：多选
name：名称
required：必填
size：可见选项数,下拉菜单的高度

<option> 元素表示下拉列表中的选项，包含在 <select> 元素中。

disabled：禁用
selected：默认选中
value：值
label：标签

`<label>`

<label> 元素表示表单控件的标签，用于关联表单控件。

for：关联控件的 id

`<optgroup>`

<optgroup> 元素表示下拉列表中的分组，用于将选项分组显示。与 <option> 元素一起使用。

`<fieldset>`和`<legend>`

<fieldset> 元素表示表单中的一组相关控件，用于将表单控件分组显示，通常包含一个 <legend> 元素作为标题。

搜索引擎优化SEO

全局属性

<body>

<p>

<div>及html5语义化

<article>

<section>

<nav>

<header>和<footer>

<aside>

<main>

区段格式

<pre>

<blockquote>

<address>

<hr>

文本格式

元素

<br>

<span>

<time>

<ins>和<del>

<ul>、<ol>和<li>