2025-10-09 2025-10-09

html element

标签	用途	示例
`<!DOCTYPE html>`	html5标志	`<!DOCTYPE html>`
`<html>`	根元素	`
`<head>`	存放元信息（标题、字符编码等）	`
`<body>`	网页可见内容	`<body> </body>`
`<h1>` ~ `<h6>`	标题	`<h1>主标题</h1>`
`<p>`	段落	`<p>这是一个段落</p>`
`<hr>`	水平线	`<hr>空元素`
`<br>`	换行符	`<br>空元素`
`<pre>`	预格式化文本（保留格式）	`<pre>预格式化文本</pre>`
`<a>`	超链接	`<a href="https://example.com">链接</a>`
`<img>`	图片	`<img src="image.jpg" alt="描述">`
`<ul>` / `<ol>` / `<li>`	列表	`<ul><li>项目1</li></ul>`
`<div>`	块级容器	`<div>内容块</div>`
`<span>`	行内容器	`<span>行内文本</span>`
`<b>`	粗体	`<b>粗体</b>`
`<strong>`	重要文本	`<strong>重要文本</strong>`
`<i>`	斜体	`<i>斜体</i>`
`<em>`	强调文本	`<em>强调文本</em>`
`<mark>`	标记文本	`<mark>标记文本</mark>`
`<small>`	小文字	`<small>小文字</small>`
`<del>`	删除线	`<del>删除线</del>`
`<ins>`	插入线	`<ins>插入线</ins>`
`<sub>`	下标	`<sub>下标</sub>`
`<sup>`	上标	`<sup>上标</sup>`
`<blockquote>`	块引用	`<blockquote cite="">块引用</blockquote>`
`<q>`	引号	`<q>引号</q>`
`<abbr>`	定义缩写	`<abbr title="Golang">go</abbr>`
`<address>`	定义文档的作者的联系地址	`<address>联系地址</address>`
`<cite>`	定义一个作品的引用	`<cite>这个作品</cite>`
`<bdo>`	重新定义文本的方向	`<bdo dir="rtl">从右到左</bdo>`
`<!-- -->`	注释	`<!-- 注释文本 -->`
`<map>` / `<area>`	标记图片的位置，来进行不同的操作	`<img usemap="#workermap"><map name="workermap"><area shape="rect" coords="x1,y1,x2,y2" href=""></map>`
`<link>`	定义文档和外部资源之间的关系（网站图标）	`<link rel="icon" type="image/x-icon" href="">`
`<title>`	页面标题	`<title>文章标题</title>`
`<table>`/`<tr>`/`<th>`/`<td>`	表格	`<table><tr><th>表头</th><tr><tr><td>内容</td></tr></table>`
`<div><span></span></div>`	块元素和内联元素	`<div><span>行内文本</span></div>`
`<iframe>`	在html中嵌入html	`<iframe src="url" title="description"></iframe>`
`<script>`	引入客户端脚本	`<scipt src=""></script>`
`<noscript>`	禁止使用客户端脚本	`<noscript></noscript>`
`<meta>`	用于指定字符集、关键字、作者和视口设置	`<meta charset="utf-8">`
`<base>`	为页面中的所有链接定义默认地址或默认目标	`<base href="" target="_blank">`
`<kbd>`	定义键盘输入内容	`<kbd>Ctrl + S</kbd>`
`<samp>`	定义计算机程序的示例输出内容	`<samp></samp>`
`<code>`	定义计算机代码片段	`<code></code>`
`<var>`	定义编程或数学表达式中的变量	`<var>变量</var>`

style

color

rgb/rgba

rgb(red, green, blue)
rgba(red, green, blue, alpha)
alpha：透明度，取值：0-1
- 0为透明，1为不透明

hsl/hsla

取值范围：0-255

hex

#rrggbb
rr(red)
gg(green)
bb(blue) 取值范围：00-ff

hsl/hsla

hsl(hue, saturation, lightness)
hsla(hue, saturation, lightness, alpha)
hue：色相，取值范围：0-360
- 0为red，120为green，240为blue
saturation：饱和度，取值：0-100%
- 0为灰色，100为全色
lightness：亮度，取值：0-100%
- 0为黑色，100为白色
alpha：透明度，取值：0-1
- 0为透明，1为不透明

bookmarks

<!-- 标记 -->
<a id="bookmarks"></a>
<!-- 跳转 -->
<a href="#bookmarks"></a>

image map

shape=“rect”（矩形）

网页的坐标是从左上角开始，向右的x坐标，向下的y坐标
左上角(x1, y1) -> 右下角（x2, y2）
coords=(x1, y1, x2, y2)

shape=“circle”（圆形）

中心点（x1, y1）+ 半径长度（radius）
coords=(x1, y1, radius)

shape=“poly”（多边形）

多个点，从左上角开始
coords="x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, x6, y6

shape=“poly”（多边形）

多个点，从左上角开始
coords="x1, y1, x2, y2, x3, y3"

layout

元素

  block-beta
    block
        columns 2
        head:2
        nav:2
        block: group:1
            columns 1
            section
            article
        end
        aside
        footer:2
    end

以下是对这些HTML5语义化标签的准确翻译与解释：

<header>

翻译：页眉/头部
解释：定义文档或内容区块的 introductory 内容，通常包含标题、Logo 或导航。

<nav>

翻译：导航
解释：定义页面导航链接的集合，如主导航菜单、侧边栏导航等。

<section>

翻译：章节/区块
解释：定义文档中的逻辑章节，通常包含一个主题性内容分组。

<article>

翻译：文章/独立内容
解释：定义可独立分发或复用的自包含内容，如新闻文章、博客帖子、论坛帖子等。

<aside>

翻译：侧边栏/附属内容
解释：定义与主内容间接相关的附加内容，如侧边栏、引文、广告等。

<footer>

翻译：页脚/底部
解释：定义文档或内容区块的结尾部分，通常包含版权信息、相关链接等。

<details>

翻译：详情/可折叠内容
解释：定义用户可按需展开/折叠的额外细节内容。

<summary>

翻译：摘要/标题
解释：为 <details> 元素提供可见的标题或摘要说明。

<figure>

翻译：图片/图标/代码等说明
解释：定义自包含内容单元。

<figcaption>

翻译：为元素定义标题
解释：定义图片说明。

<main>

翻译：主要内容
解释：定义文档或应用程序的主要内容，通常包含直接与文档主题相关的内容。每个页面中应仅使用一次。

<mark>

翻译：标记
解释：定义重要内容。

<time>

翻译：时间/日期
解释：定义日期或时间。

应用示例：

<!-- 文档页眉 -->
<header>
    <h1>网站主标题</h1>
    <!-- 导航区域 -->
    <nav>
        <a href="/home">首页</a>
        <a href="/about">关于</a>
    </nav>
</header>

<!-- 主要内容章节 -->
<section>
    <!-- 独立文章内容 -->
    <article>
        <h2>文章标题</h2>
        <p>这是文章的独立内容...</p>
    </article>
</section>

<!-- 侧边附属内容 -->
<aside>
    <h3>相关推荐</h3>
    <p>这里是侧边栏的附加内容...</p>
</aside>

<!-- 可折叠的详情区块 -->
<details>
    <summary>点击查看更多信息</summary>
    <p>这里是默认隐藏的详细内容...</p>
</details>

<!-- 文档页脚 -->
<footer>
    <p>© 2024 公司名称。保留所有权利。</p>
</footer>

这些语义化标签的引入，使HTML文档结构更清晰，同时提升了可访问性和SEO效果。

技术

CSS 框架
- 指一整套预先编写好的CSS样式、组件和工具的集合，旨在简化前端开发流程，提供标准化的解决方案。
CSS 浮动属性
- CSS中一个用于实现文字环绕图片或多列布局的早期属性。元素通过此属性脱离正常文档流，向左或向右浮动。
CSS 弹性盒子布局（flexbox）
- CSS3的一种一维布局模型，用于在容器中高效地对项目进行对齐、分配空间和排序，特别适用于组件和小规模布局。
CSS 网格布局（grid）
- CSS3的一种强大的二维布局系统，能够处理行和列，非常适合构建复杂的整体页面布局。

URL格式

协议://域名:端口/路径?查询字符串#锚点
scheme://prefix.domain:port/path/filename?v=a#anchor