文本元素

全屏查看

1 HTML 文本元素基础概念 #

mindmap
    id1[HTML 文本元素基础概念]
        id1-1[HTML 文本元素定义]
            id1-1-1[文本元素的基本概念]
            id1-1-2[文本元素在网页中的作用]
            id1-1-3[文本元素的分类体系]
        id1-2[HTML 文档结构]
            id1-2-1[DOCTYPE 声明]
            id1-2-2[html 根元素]
            id1-2-3[head 与 body 部分]
HTML 文本元素定义
文本元素的基本概念
文本元素在网页中的作用
文本元素的分类体系
HTML 文档结构
DOCTYPE 声明
html 根元素
head 与 body 部分

2 标题与段落元素 #

标题元素
h1-h6 标题标签
标题的语义化意义
标题的嵌套规则
段落元素
p 标签的基本用法
段落的换行与空格处理
段落的内联元素嵌套
mindmap
    id2[标题与段落元素]
        id2-1[标题元素]
            id2-1-1[h1-h6 标题标签]
            id2-1-2[标题的语义化意义]
            id2-1-3[标题的嵌套规则]
        id2-2[段落元素]
            id2-2-1[p 标签的基本用法]
            id2-2-2[段落的换行与空格处理]
            id2-2-3[段落的内联元素嵌套]

3 文本格式化元素 #

mindmap
    id3[文本格式化元素]
        id3-1[物理样式元素]
            id3-1-1[b 粗体标签]
            id3-1-2[i 斜体标签]
            id3-1-3[u 下划线标签]
            id3-1-4[s 删除线标签]
        id3-2[语义化样式元素]
            id3-2-1[strong 强调标签]
            id3-2-2[em 着重标签]
            id3-2-3[mark 标记标签]
            id3-2-4[small 小号文本标签]
        id3-3[引用与代码元素]
            id3-3-1[blockquote 块级引用]
            id3-3-2[q 行内引用]
            id3-3-3[code 代码片段]
            id3-3-4[pre 预格式化文本]
物理样式元素
b 粗体标签
i 斜体标签
u 下划线标签
s 删除线标签
语义化样式元素
strong 强调标签
em 着重标签
mark 标记标签
small 小号文本标签
引用与代码元素
blockquote 块级引用
q 行内引用
code 代码片段
pre 预格式化文本

4 列表元素 #

无序列表
ul 无序列表标签
li 列表项标签
无序列表的嵌套
有序列表
ol 有序列表标签
有序列表的序号类型
有序列表的起始值
定义列表
dl 定义列表标签
dt 定义术语标签
dd 定义描述标签
mindmap
    id4[列表元素]
        id4-1[无序列表]
            id4-1-1[ul 无序列表标签]
            id4-1-2[li 列表项标签]
            id4-1-3[无序列表的嵌套]
        id4-2[有序列表]
            id4-2-1[ol 有序列表标签]
            id4-2-2[有序列表的序号类型]
            id4-2-3[有序列表的起始值]
        id4-3[定义列表]
            id4-3-1[dl 定义列表标签]
            id4-3-2[dt 定义术语标签]
            id4-3-3[dd 定义描述标签]

5 超链接与锚点 #

mindmap
    id5[超链接与锚点]
        id5-1[超链接元素]
            id5-1-1[a 链接标签]
            id5-1-2[href 属性详解]
            id5-1-3[target 目标属性]
            id5-1-4[相对路径与绝对路径]
        id5-2[锚点功能]
            id5-2-1[页面内跳转]
            id5-2-2[跨页面跳转]
            id5-2-3[邮件与电话链接]
超链接元素
a 链接标签
href 属性详解
target 目标属性
相对路径与绝对路径
锚点功能
页面内跳转
跨页面跳转
邮件与电话链接

6 文本语义化元素 #

时间与日期
time 时间标签
datetime 属性格式
缩写与术语
abbr 缩写标签
dfn 定义术语标签
其他语义化元素
cite 引用来源
address 联系信息
ins 与 del 修改标记
mindmap
    id6[文本语义化元素]
        id6-1[时间与日期]
            id6-1-1[time 时间标签]
            id6-1-2[datetime 属性格式]
        id6-2[缩写与术语]
            id6-2-1[abbr 缩写标签]
            id6-2-2[dfn 定义术语标签]
        id6-3[其他语义化元素]
            id6-3-1[cite 引用来源]
            id6-3-2[address 联系信息]
            id6-3-3[ins 与 del 修改标记]

7 特殊文本元素 #

mindmap
    id7[特殊文本元素]
        id7-1[换行与水平线]
            id7-1-1[br 换行标签]
            id7-1-2[hr 水平线标签]
        id7-2[上下标元素]
            id7-2-1[sup 上标标签]
            id7-2-2[sub 下标标签]
        id7-3[特殊字符实体]
            id7-3-1[HTML 实体概述]
            id7-3-2[常用字符实体]
            id7-3-3[数学符号实体]
换行与水平线
br 换行标签
hr 水平线标签
上下标元素
sup 上标标签
sub 下标标签
特殊字符实体
HTML 实体概述
常用字符实体
数学符号实体

8 文本元素的属性 #

全局属性
class 与 id
style 内联样式
title 提示文本
lang 语言属性
事件属性
onclick 点击事件
onmouseover 鼠标悬停
其他常用事件
mindmap
    id8[文本元素的属性]
        id8-1[全局属性]
            id8-1-1[class 与 id]
            id8-1-2[style 内联样式]
            id8-1-3[title 提示文本]
            id8-1-4[lang 语言属性]
        id8-2[事件属性]
            id8-2-1[onclick 点击事件]
            id8-2-2[onmouseover 鼠标悬停]
            id8-2-3[其他常用事件]

9 文本元素的最佳实践 #

mindmap
    id9[文本元素的最佳实践]
        id9-1[语义化使用原则]
            id9-1-1[选择合适的语义标签]
            id9-1-2[避免滥用 div 和 span]
            id9-1-3[可访问性考虑]
        id9-2[SEO 优化]
            id9-2-1[标题层级优化]
            id9-2-2[关键词合理分布]
            id9-2-3[语义化对 SEO 的影响]
        id9-3[性能优化]
            id9-3-1[减少不必要的标签]
            id9-3-2[合理的文本结构]
            id9-3-3[代码压缩与优化]
语义化使用原则
选择合适的语义标签
避免滥用 div 和 span
可访问性考虑
SEO 优化
标题层级优化
关键词合理分布
语义化对 SEO 的影响
性能优化
减少不必要的标签
合理的文本结构
代码压缩与优化

10 HTML5 新增文本元素 #

语义化增强元素
article 文章内容
section 文档分区
header 与 footer
文本相关新特性
新的输入类型
内容可编辑属性
数据属性使用
mindmap
    id10[HTML5 新增文本元素]
        id10-1[语义化增强元素]
            id10-1-1[article 文章内容]
            id10-1-2[section 文档分区]
            id10-1-3[header 与 footer]
        id10-2[文本相关新特性]
            id10-2-1[新的输入类型]
            id10-2-2[内容可编辑属性]
            id10-2-3[数据属性使用]

11 文本元素的样式控制 #

mindmap
    id11[文本元素的样式控制]
        id11-1[CSS 基础样式]
            id11-1-1[字体属性控制]
            id11-1-2[颜色与背景]
            id11-1-3[文本对齐与间距]
        id11-2[响应式文本设计]
            id11-2-1[媒体查询应用]
            id11-2-2[相对单位使用]
            id11-2-3[移动端适配]
CSS 基础样式
字体属性控制
颜色与背景
文本对齐与间距
响应式文本设计
媒体查询应用
相对单位使用
移动端适配

12 文本元素的兼容性 #

浏览器兼容性
主流浏览器支持
兼容性处理技巧
渐进增强策略
设备兼容性
移动设备适配
屏幕阅读器支持
打印样式优化
mindmap
    id12[文本元素的兼容性]
        id12-1[浏览器兼容性]
            id12-1-1[主流浏览器支持]
            id12-1-2[兼容性处理技巧]
            id12-1-3[渐进增强策略]
        id12-2[设备兼容性]
            id12-2-1[移动设备适配]
            id12-2-2[屏幕阅读器支持]
            id12-2-3[打印样式优化]