Html教程

Appearance

HTML 速查列表 ​

基础结构 ​

HTML5 文档结构 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

常用标签一览表 ​

文档结构标签 ​

标签描述示例
<html>根元素<html lang="zh-CN">
<head>文档头部<head>
<body>文档主体<body>
<title>页面标题<title>页面标题</title>
<meta>元数据<meta charset="UTF-8">
<link>外部资源链接<link rel="stylesheet" href="style.css">
<script>脚本<script src="script.js"></script>
<style>内部样式<style>body { margin: 0; }</style>

文本内容标签 ​

标签描述示例
<h1>-<h6>标题<h1>主标题</h1>
<p>段落<p>这是一个段落</p>
<br>换行文本<br>换行
<hr>水平线<hr>
<strong>重要文本<strong>重要</strong>
<em>强调文本<em>强调</em>
<b>粗体<b>粗体</b>
<i>斜体<i>斜体</i>
<u>下划线<u>下划线</u>
<s>删除线<s>删除</s>
<small>小号文本<small>小字</small>
<mark>高亮文本<mark>高亮</mark>
<sub>下标H<sub>2</sub>O
<sup>上标x<sup>2</sup>

链接和媒体标签 ​

标签描述示例
<a>链接<a href="url">链接文本</a>
<img>图像<img src="image.jpg" alt="描述">
<audio>音频<audio src="audio.mp3" controls></audio>
<video>视频<video src="video.mp4" controls></video>

列表标签 ​

标签描述示例
<ul>无序列表<ul><li>项目</li></ul>
<ol>有序列表<ol><li>项目</li></ol>
<li>列表项<li>列表项</li>
<dl>描述列表<dl><dt>术语</dt><dd>描述</dd></dl>
<dt>术语<dt>HTML</dt>
<dd>描述<dd>标记语言</dd>

表格标签 ​

标签描述示例
<table>表格<table>
<thead>表格头部<thead>
<tbody>表格主体<tbody>
<tfoot>表格脚部<tfoot>
<tr>表格行<tr>
<th>表头单元格<th>标题</th>
<td>数据单元格<td>数据</td>
<caption>表格标题<caption>表格标题</caption>

表单标签 ​

标签描述示例
<form>表单<form action="/submit" method="POST">
<input>输入控件<input type="text" name="username">
<textarea>多行文本<textarea name="message"></textarea>
<select>下拉菜单<select name="city">
<option>选项<option value="beijing">北京</option>
<button>按钮<button type="submit">提交</button>
<label>标签<label for="username">用户名</label>
<fieldset>字段集<fieldset>
<legend>字段集标题<legend>个人信息</legend>

语义化标签 (HTML5) ​

标签描述示例
<header>页面/区域头部<header>
<nav>导航区域<nav>
<main>主要内容<main>
<article>独立文章<article>
<section>文档章节<section>
<aside>侧边内容<aside>
<footer>页面/区域底部<footer>
<figure>图像容器<figure>
<figcaption>图像标题<figcaption>
<time>时间<time datetime="2024-02-03">

常用属性一览表 ​

全局属性 ​

属性描述示例
id唯一标识符id="header"
class类名class="container"
style内联样式style="color: red;"
title提示信息title="这是提示"
lang语言lang="zh-CN"
dir文本方向dir="ltr"
hidden隐藏元素hidden
data-*自定义数据data-id="123"

链接属性 ​

属性描述示例
href链接地址href="https://example.com"
target打开方式target="_blank"
rel关系rel="noopener"
download下载download="filename.pdf"

图像属性 ​

属性描述示例
src图片路径src="image.jpg"
alt替代文本alt="图片描述"
width宽度width="300"
height高度height="200"
loading加载方式loading="lazy"

表单属性 ​

属性描述示例
type输入类型type="email"
name字段名name="username"
value默认值value="默认值"
placeholder占位符placeholder="请输入"
required必填required
disabled禁用disabled
readonly只读readonly
checked选中checked
selected选中selected

Input 类型速查 ​

文本输入类型 ​

类型描述示例
text文本<input type="text">
password密码<input type="password">
email邮箱<input type="email">
url网址<input type="url">
tel电话<input type="tel">
search搜索<input type="search">

数字和日期类型 ​

类型描述示例
number数字<input type="number" min="1" max="100">
range范围<input type="range" min="0" max="100">
date日期<input type="date">
time时间<input type="time">
datetime-local日期时间<input type="datetime-local">
month月份<input type="month">
week周<input type="week">

选择和其他类型 ​

类型描述示例
checkbox复选框<input type="checkbox">
radio单选框<input type="radio">
file文件上传<input type="file">
color颜色选择<input type="color">
hidden隐藏字段<input type="hidden">
submit提交按钮<input type="submit">
reset重置按钮<input type="reset">
button普通按钮<input type="button">

Meta 标签速查 ​

基础Meta标签 ​

html
<!-- 字符编码 -->
<meta charset="UTF-8">

<!-- 视口设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 页面描述 -->
<meta name="description" content="页面描述">

<!-- 关键词 -->
<meta name="keywords" content="关键词1, 关键词2">

<!-- 作者 -->
<meta name="author" content="作者姓名">

<!-- 页面刷新 -->
<meta http-equiv="refresh" content="30">

<!-- IE兼容性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Open Graph 标签 ​

html
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">

Twitter Card 标签 ​

html
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="页面标题">
<meta name="twitter:description" content="页面描述">
<meta name="twitter:image" content="https://example.com/image.jpg">

字符实体速查 ​

常用字符实体 ​

显示描述实体名称实体编号
&和号&amp;&#38;
<小于号&lt;&#60;
>大于号&gt;&#62;
"引号&quot;&#34;
'单引号&apos;&#39;
不间断空格&nbsp;&#160;
©版权符号&copy;&#169;
®注册商标&reg;&#174;
™商标符号&trade;&#8482;

CSS 选择器速查 ​

基本选择器 ​

css
/* 元素选择器 */
p { color: red; }

/* 类选择器 */
.class-name { color: blue; }

/* ID选择器 */
#id-name { color: green; }

/* 通用选择器 */
* { margin: 0; }

/* 属性选择器 */
[type="text"] { border: 1px solid #ccc; }

组合选择器 ​

css
/* 后代选择器 */
.container p { margin-bottom: 1em; }

/* 子元素选择器 */
.nav > li { display: inline-block; }

/* 相邻兄弟选择器 */
h2 + p { font-weight: bold; }

/* 通用兄弟选择器 */
h2 ~ p { margin-left: 20px; }

伪类选择器 ​

css
/* 链接状态 */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }

/* 表单状态 */
input:focus { border-color: #007acc; }
input:disabled { background-color: #f5f5f5; }

/* 结构伪类 */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(odd) { background-color: #f9f9f9; }

响应式设计速查 ​

媒体查询断点 ​

css
/* 移动设备 */
@media (max-width: 767px) {
    .container { padding: 10px; }
}

/* 平板设备 */
@media (min-width: 768px) and (max-width: 1023px) {
    .container { padding: 20px; }
}

/* 桌面设备 */
@media (min-width: 1024px) {
    .container { padding: 30px; }
}

Flexbox 常用属性 ​

css
.flex-container {
    display: flex;
    justify-content: center;    /* 主轴对齐 */
    align-items: center;        /* 交叉轴对齐 */
    flex-direction: row;        /* 方向 */
    flex-wrap: wrap;           /* 换行 */
}

.flex-item {
    flex: 1;                   /* 伸缩 */
    flex-grow: 1;              /* 放大 */
    flex-shrink: 1;            /* 缩小 */
    flex-basis: 200px;         /* 基础尺寸 */
}

Grid 常用属性 ​

css
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-gap: 20px;
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
}

.grid-item {
    grid-column: span 2;       /* 跨列 */
    grid-row: span 1;          /* 跨行 */
    grid-area: header;         /* 区域 */
}

常见错误和解决方案 ​

HTML 验证错误 ​

错误原因解决方案
标签未闭合<p>文本<p>文本</p>
属性缺少引号class=containerclass="container"
嵌套错误<p><h1>标题</h1></p><h1>标题</h1><p>文本</p>
缺少alt属性<img src="pic.jpg"><img src="pic.jpg" alt="描述">

常见布局问题 ​

问题原因解决方案
浮动塌陷父元素未清除浮动使用 overflow: hidden 或 clearfix
垂直居中困难传统方法复杂使用 Flexbox 或 Grid
响应式图片溢出固定宽度max-width: 100%; height: auto;

性能优化清单 ​

HTML 优化 ​

  • [ ] 使用语义化标签
  • [ ] 压缩HTML代码
  • [ ] 减少DOM层级深度
  • [ ] 使用适当的图片格式
  • [ ] 添加图片 alt 属性
  • [ ] 使用 loading="lazy" 懒加载
  • [ ] 预加载关键资源

CSS 优化 ​

  • [ ] 合并和压缩CSS文件
  • [ ] 使用CSS Sprites
  • [ ] 避免复杂的选择器
  • [ ] 使用 CSS Grid 和 Flexbox
  • [ ] 减少重绘和回流
  • [ ] 使用 will-change 属性

可访问性检查 ​

  • [ ] 所有图片都有 alt 属性
  • [ ] 表单控件都有对应的 label
  • [ ] 使用语义化的HTML标签
  • [ ] 提供跳转链接
  • [ ] 确保键盘可访问
  • [ ] 保证足够的颜色对比度

这个速查列表涵盖了HTML开发中最常用的标签、属性和技巧，是日常开发的实用参考工具。

Copyright © 2025-2026 京公网安备 11010102000001号 京ICP备2024078128号-1