HTML5 文本格式化学习笔记一、基础文本标签1. 标题标签 (Heading Tags)h1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6从 h1 到 h6重要性递减每个页面应该只有一个 h1 标签搜索引擎优化 (SEO) 重要2. 段落标签p这是一个段落。/pp这是另一个段落。/pp标签定义段落浏览器自动在段落前后添加空白3. 换行和水平线p第一行br第二行/phrp水平线下方内容/pbr换行标签空元素hr水平线标签表示主题分隔二、文本格式化标签1. 强调和重要文本p这是strong重要文本/strong/pp这是em强调文本/em/pp这是b粗体文本/b/pp这是i斜体文本/i/pp这是u下划线文本/u/pp这是mark标记文本/mark/p语义区别strong表示重要性通常显示为粗体em表示强调通常显示为斜体b仅视觉粗体无语义i仅视觉斜体无语义如术语、外语u下划线注意不要与链接混淆mark高亮显示2. 删除和插入文本p原价del¥100/del现价ins¥80/ins/pdel删除文本通常显示为删除线ins插入文本通常显示为下划线3. 上标和下标p水的化学式Hsub2/subO/pp数学公式xsup2/sup ysup2/sup zsup2/sup/psub下标sup上标4. 缩写和首字母缩略词pHTML 代表abbrtitleHyperText Markup LanguageHTML/abbr/pp中国abbrtitlePeoples Republic of ChinaPRC/abbr/pabbr定义缩写词title属性提供完整解释5. 引用文本!-- 块级引用 --blockquotecitehttps://example.comp这是一个长引用通常来自其他来源。/p/blockquote!-- 行内引用 --p他说q今天天气真好/q。/p!-- 缩写定义 --dfnHTML/dfn是超文本标记语言。!-- 代码引用 --p使用codeconsole.log()/code输出日志。/p!-- 预格式化文本 --pre保持原始格式 包括空格和换行/pre!-- 键盘输入 --p按kbdCtrl/kbdkbdC/kbd复制/p!-- 变量 --p公式varE/varvarm/varvarc/varsup2/sup/p!-- 样本输出 --p程序输出sampHello, World!/samp/p三、语义化标签1. 时间标签p会议时间timedatetime2024-04-09T14:00今天下午 2 点/time/pp发布日期timedatetime2024-04-092024 年 4 月 9 日/time/ptime定义日期/时间datetime属性机器可读的格式2. 地址标签address作者张三br邮箱ahrefmailto:zhangsanexample.comzhangsanexample.com/abr地址北京市朝阳区/addressaddress定义文档或文章的作者联系信息3. 小字标签p版权所有 © 2024 公司名small保留所有权利/small/psmall侧注、小字说明版权信息、免责声明等四、实践示例!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleHTML5 文本格式化示例/title/headbodyh1HTML5 文本格式化学习笔记/h1p本文档介绍了 HTML5 中的各种文本格式化标签。/ph21. 基础文本/h2p这是strong重要内容/strong这是em强调内容/em。/ph22. 数学公式/h2p勾股定理vara/varsup2/supvarb/varsup2/supvarc/varsup2/sup/pp水的化学式Hsub2/subO/ph23. 引用示例/h2blockquotecitehttps://www.example.comp这是一个来自其他来源的引用。/p/blockquotep他说q学习 HTML5 很有趣/q。/ph24. 代码示例/h2p使用codelt;pgt;/code标签创建段落。/pprefunction hello() { console.log(Hello, World!); }/preh25. 时间信息/h2p本文发布于timedatetime2024-04-092024 年 4 月 9 日/time/ph26. 联系信息/h2address作者学习助手br邮箱ahrefmailto:learnexample.comlearnexample.com/a/addresshrsmall本文档仅供学习使用 © 2024/small/body/html五、最佳实践语义优先优先使用具有语义的标签如strong而非b可访问性确保屏幕阅读器能正确理解内容SEO 优化合理使用标题标签构建清晰的文档结构避免过度格式化保持内容简洁样式尽量通过 CSS 控制国际化使用lang属性指定语言六、注意事项不要使用b、i、u进行语义标记仅用于视觉样式u标签容易与链接混淆谨慎使用预格式化文本pre会保留所有空格和换行注意内容长度缩写标签abbr的title属性对屏幕阅读器很重要学习建议多实践结合 CSS 样式创建自己的文本格式化示例页面加深理解。