HTML进阶

1. 字符实体

HTML 中有些字符有特殊含义(如 < >),直接写会被当成标签解析。

字符实体(Character Entities)用特殊代码来显示这些字符。

格式:&实体名;&#实体编号;

演示效果:
< 小于号 > 大于号 & 和号

2. 常用字符实体

以下是常用的字符实体:

字符实体对照表:
实体 编号 显示 说明
&lt; &#60; < 小于号
&gt; &#62; > 大于号
&amp; &#38; & 和号
&nbsp; &#160;   不换行空格
&quot; &#34; " 双引号
&apos; &#39; ' 单引号
&copy; &#169; © 版权符号
&reg; &#174; ® 注册商标
&trade; &#8482; 商标符号
&times; &#215; × 乘号
&divide; &#247; ÷ 除号
使用场景:

1. 显示 HTML 代码:&lt;div&gt;内容&lt;/div&gt;

2. 多个空格:第一&nbsp;&nbsp;&nbsp;第二(普通空格会被合并)

3. 版权信息:&copy; 2024 版权所有

3. SEO 基础

SEO(Search Engine Optimization)搜索引擎优化,让网页更容易被搜索引擎收录和排名。

HTML 中影响 SEO 的关键元素:

SEO 关键元素:
元素 作用 最佳实践
title 页面标题 30-60字符,包含关键词
meta description 页面描述 150-160字符,吸引点击
meta keywords 关键词 3-5个,用逗号分隔
h1-h6 标题层级 一个页面只有一个 h1
alt 属性 图片描述 准确描述图片内容
语义化标签 结构清晰 使用 header/nav/main 等

4. Open Graph

Open Graph(OG)是 Facebook 推出的协议,用于控制网页在社交媒体分享时的显示内容。

其他平台(Twitter、微信等)也支持类似协议。

常用 OG 标签:
标签 说明 示例值
og:title 标题 页面标题
og:description 描述 页面描述
og:image 封面图 https://example.com/image.jpg
og:url 页面 URL https://example.com/page
og:type 类型 website、article、product
og:site_name 网站名 我的网站

5. link 引入 CSS

<link> 标签用于引入外部资源,最常用的是引入 CSS 样式表。

rel 定义关系,href 定义资源地址。

引入方式:
方式 代码 适用场景
外部样式表 <link rel="stylesheet" href="style.css"> 推荐,可缓存
内部样式 <style>...</style> 少量样式
内联样式 <div style="..."> 特殊覆盖

6. link 引入图标

<link rel="icon"> 用于设置网页图标(favicon),显示在浏览器标签页上。

图标格式:
格式 代码 说明
ICO <link rel="icon" href="favicon.ico"> 传统格式,兼容性最好
PNG <link rel="icon" type="image/png" href="icon.png"> 现代格式,支持透明
SVG <link rel="icon" type="image/svg+xml" href="icon.svg"> 矢量格式,可缩放
Apple Touch <link rel="apple-touch-icon" href="apple-icon.png"> iOS 设备图标

7. script 引入 JS

<script> 标签用于引入 JavaScript 代码。

src 引入外部文件,type 指定脚本类型(可省略)。

引入方式:
方式 代码 适用场景
外部脚本 <script src="app.js"></script> 推荐,可缓存
内联脚本 <script>...</script> 少量代码

8. async/defer

asyncdefer 控制脚本的加载和执行时机:

async:异步加载,加载完立即执行(不保证顺序)。

defer:延迟执行,等 HTML 解析完再执行(保证顺序)。

三种加载方式对比:
方式 加载 执行 适用场景
无属性 同步阻塞 立即执行 需要立即执行的脚本
async 异步加载 加载完立即执行 独立脚本(如统计)
defer 异步加载 HTML解析完后执行 需要保证顺序的脚本
执行顺序图解:

无属性:HTML 解析 → 遇到 script → 停止解析 → 下载脚本 → 执行脚本 → 继续解析

async:HTML 解析 → 遇到 script → 继续解析 + 下载脚本 → 脚本下载完 → 执行脚本

defer:HTML 解析 → 遇到 script → 继续解析 + 下载脚本 → HTML 解析完 → 执行脚本

1. 内联样式 style

style 属性用于设置元素的内联样式,直接在标签上写 CSS。

格式:style="属性:值",多个属性用分号分隔。

演示效果:

这是一个蓝色标题

这是一个红色大号文字

2. class 和 id

class 用于定义元素的类名,可以被多个元素共享。

id 用于定义元素的唯一标识符,一个页面中只能使用一次。

演示效果:

这是一个段落,具有 class 和 id 属性。

这是另一个段落,共享相同的 class。

3. 超链接 a

<a> 标签定义超链接,href 属性指定链接地址。

target 属性控制链接打开方式:

_blank 新窗口 | _self 当前窗口(默认)

演示效果:
新窗口打开 当前窗口打开

4. 图片标签 img

<img> 标签用于插入图片,是自闭合标签。

src 指定图片地址,alt 提供替代文本,title 提供悬停提示。

演示效果:
示例图片