【技术专题】HTML5 网页技术 - HTML5 文本与排版标签

大家好我是Java1234_小锋老师最近更新 《一天学会 HTML5 视频教程(无废话版) 》专辑感谢大家支持。本课程主要介绍和讲解 HTML5简介文档结构文本与排版标签链接与图片列表标签表格标签表单基础以及增强容器与页面结构基础语义化标签音频与视频Canvas 基础以及动画入门SVG 基础Web Storage 本地存储文件 API拖放 API地理定位 APIWeb Workers 入门。视频教程课件源码 打包下载 链接https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd1234提取码1234HTML5在第二阶段目录里HTML5 文本与排版标签HTML5 的文本与排版标签重点在于语义告诉浏览器和搜索引擎、屏幕阅读器“这段内容是什么”而不只是控制外观。样式通常交给 CSS。1. 标题h1~h6表示六级标题h1级别最高h6最低。h1网页主标题/h1h2章节标题/h2h3小节标题/h3注意用来构建文档大纲不要为了“字大”而用标题。不要跳级例如从h1直接到h3。一个页面通常只有一个h1但 HTML5 中并非强制。2. 段落p表示一个段落是块级元素。p这是一个段落。HTML 会自动在段落前后添加间距。/pp这是另一个段落。/p3. 换行br强制换行是空元素不需要闭合标签。p第一行br第二行/p适合地址、诗歌、短行文本。不要用br来制造段落间距段落间距应该用p或 CSS。4. 水平线hrHTML5 中hr表示主题转换或内容分隔不只是“一条线”。它也是空元素。p上一节内容。/phrp下一节内容。/p注意不要为了装饰而滥用hr。颜色、宽度、边距等应使用 CSS 控制不要用旧属性如color、width。5. 强调strong和emstrong表示重要性、严重性、警告浏览器通常显示为粗体但语义是“重要”。pstrong警告/strong操作不可撤销。/pem表示强调、重音浏览器通常显示为斜体但语义是“强调”。p我em真的/em很想去。/p可以嵌套pstrong注意em必须/em先保存文件。/strong/p如果只是想加粗或斜体没有语义可以用 CSSHTML 中也有b、i但语义不同。6. 引用blockquote表示一段独立的块级引用通常来自其他来源。blockquotecitehttps://example.com/sourcep这是一个引用段落。/p/blockquote注意cite属性放的是来源 URL不是来源名称。引用内容最好放在p等块级元素中。短的行内引用用qp他说q坚持就是胜利。/q/p7. 代码code和预格式precode行内代码片段p使用codeconsole.log()/code输出内容。/ppre预格式文本保留空格、换行和缩进通常用等宽字体显示。pre第一行 第二行有缩进 第三行/pre常见组合是precodeprecodelt;h1gt;标题lt;/h1gt;lt;pgt;段落lt;/pgt;/code/pre注意会保留源码中的换行和空格所以标签位置会影响显示。在pre中展示 HTML 标签时必须把、写成实体字符。8. 实体字符HTML 中有些字符有特殊含义例如会被当作标签开始。要显示它们需要使用实体字符。格式实体名; #十进制数字; #x十六进制数字;常见实体字符命名实体数字实体lt;#60;或#x3C;gt;#62;或#x3E;amp;#38;或#x26;quot;#34;或#x22;apos;#39;或#x27;空格nbsp;#160;或#xA0;©copy;#169;®reg;#174;™trade;#8482;—mdash;#8212;…hellip;#8230;示例pHTML 中lt;divgt;表示一个 div 标签。/pp版权copy;2026nbsp;价格lt;100amp;库存gt;0/pnbsp;是不换行空格不要用它来做段落缩进缩进应该用 CSS 的text-indent。综合示例!DOCTYPEhtmlhtmlheadmetacharsetUTF-8title页面标题/title/headbodyh1HTML5 文本排版/h1h1网页主标题/h1h2章节标题/h2h3小节标题/h3p这是一段普通文字其中有strong重要内容/strong和em强调内容/em。/phrh2代码示例/h2precodelt;h1gt;标题lt;/h1gt;lt;pgt;段落lt;/pgt;/code/preblockquotecitehttps://example.comp这是一段引用文字。/p/blockquotep特殊字符lt;gt;amp;quot;copy;/p/body/html总结h1-h6管结构p管段落br管换行hr管主题分隔strong/em管语义强调blockquote管块引用code/pre管代码与预格式实体字符用于显示 HTML 中的特殊符号。