任务4.2 文本排版_第1页
任务4.2 文本排版_第2页
任务4.2 文本排版_第3页
任务4.2 文本排版_第4页
任务4.2 文本排版_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

模块4网页文本设计任务4.2文本排版网页设计项目教程（HTML5+CSS3+JavaScript）学习目标理解段落、标题、水平线、行内标记的语义与用法，掌握特殊信息文本的组织方式知识目标理解段落<p>、换行<br>、预格式<pre>的差异；掌握标题<h1>~<h6>的语义层级与使用规范；熟悉hr、span及特殊信息文本的常见标记。能力目标能够使用HTML标签组织段标题、段落、换行与分隔；能够运用<small>、<cite>、<blockquote>、<time>、<abbr>、<dfn>、<code>、<mark>等标签表达文本语义；能够编写结构清晰、可读性强的博客页面。素养目标体会语义化标签对可访问性的价值；形成良好的代码组织与排版习惯；在实践中注重内容结构与视觉层次的协调。任务描述用HTML标记控制文本的段落、标题与分隔，组织结构清晰的网页要让文字在网页中以特定位置呈现，需要使用HTML标记：换段使用<p>，换行使用<br>，各级标题使用<h1>~<h6>，引用来源使用<cite>，分隔内容使用<hr>。本任务包含：4.2.1段落标记·4.2.2标题标记·4.2.4hr标记·4.2.5span标记·4.2.6特殊信息文本·任务实施本章导读学习路径①段落、换行与预格式（p/br/pre）②标题层级（h1~h6）与水平分隔hr③行内包裹span④特殊信息文本（small/cite/blockquote/q/time/abbr/dfn/code等）⑤综合实践：高可读性博客页面排版4.2.1段落标记用<p>/<br>/<pre>三种标签控制段落的换段、换行与预格式<p>段落标签成对使用，标识同一段落的文字；不同段落之间会自动隔一行空白行；可通过align属性设置left/center/right对齐。良好习惯是成对书写。<br>换行标签没有结束标签，是单标签；在<p>内部使用：行距较小；在<p>外部使用：产生一个大的回车换行，行距较大。<pre>预格式标签成对使用，对文本进行预处理；保留原始的排版格式：空格、换行、缩进都按源代码原样显示；适合展示诗歌、代码片段、ASCII艺术等。案例演示4-6：<p>段落标签通过align属性实现左对齐、居中、右对齐三种段落4-6.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>段落p标签</title></head><body><palign="left">这是左对齐的段落文本，align属性设置为left。</p><palign="center">这是居中对齐的段落文本，align属性设置为center。</p><palign="right">这是右对齐的段落文本，align属性设置为right。</p></body></html>运行效果（图4-6）观察要点：•三个<p>段落各占独立段落；•align="left/center/right"控制对齐方式；•段落之间自动产生空行间距。在<body>中直接使用<br/>让诗句逐行显示4-7.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>br标签</title></head><body>江南春<br/>千里莺啼绿映红，<br/>水村山郭酒旗风。<br/>南朝四百八十寺，<br/>多少楼台烟雨中。<br/></body></html>运行效果（图4-7）观察要点：•每个<br/>让后续文本换到下一行；•与案例4-1对比：源代码换行vs显式<br/>换行；•<br>没有结束标签，是单标签。案例演示4-7：<br>换行标签案例演示4-8：<pre>预格式标签用<pre>保留源代码中诗歌的原始排版格式4-8.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>pre标签</title></head><body><p>保留诗歌格式</p><pre>江南春杜牧千里莺啼绿映红，水村山郭酒旗风。南朝四百八十寺，多少楼台烟雨中。</pre></body></html>运行效果（图4-8）观察要点：•标题、作者、正文均按源代码缩进原样显示；•<pre>内的空格、换行都不会被浏览器合并；•常配合<code>用于展示代码片段。4.2.2标题标记（<h1>~<h6>）6级标题用于建立页面信息的层级关系，从h1到h6依次递减使用说明•标题都是块级标记，前后自动换行；•默认以粗体显示，h1字号最大，逐级递减；•应根据内容层次选择级别，不要按"想要的字号"来选；•避免跨级，如h1→h3；•需要改变样式时，使用CSS设置。此外，<hr>可创建水平线，用于分隔页面中的不同内容。4-9.html<h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6>运行效果（图4-9）4.2.4hr水平线标记用<hr>在页面中插入水平线，分隔不同内容属性与作用•<hr>是单标签，没有结束标签；•常用属性：size——线条粗细（像素）width——线条宽度（像素或百分比）color——线条颜色align——对齐方式（left/center/right）noshade——取消阴影，呈现实心效果•默认带阴影效果；添加noshade后变为实心条；•用于章节分隔、内容分块。4-11.html<p>默认样式的hr标签</p><hr><p>size="1"-细线条</p><hrsize="1"><p>size="10"-粗线条</p><hrsize="10"><p>width="300"-固定宽度</p><hrwidth="300"size="2"><p>color="red"+noshade</p><hrsize="3"color="red"noshade>4.2.5span标记行内元素，对段落中某几个文字做特殊设置特性与用法•<span>是行内（短语）元素，前后不会换行；•没有结构意义，纯粹用于应用样式；•当其他行内元素都不合适时使用；•常与CSS配合，对局部文字设置颜色、背景、字体等效果；与<div>对比：<div>——块级，会换行<span>——行内，不换行4-12.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>span标签</title></head><body><p>学习HTML时，<spanstyle="background-color:yellow;">语义化标签</span>的使用非常重要，...</p></body></html>运行效果（图4-12）4.2.6特殊信息文本使用语义化标签标记版权、插图、引用、时间、缩写、术语等特殊信息本节涵盖的标签•<small>——旁注、版权、免责声明•<figure>+<figcaption>——插图与图题•<cite>——引用的来源（书名、电影名）•<blockquote>——块级长引用•<q>——行内短引用•<time>——时间/日期•<abbr>——缩写词（带title全称）•<dfn>——定义术语•<code><kbd><samp><var>——代码/键盘/示例/变量•<address>——作者联系信息•<mark>——黄色高亮（搜索关键词等）案例4-13运行效果（图4-13）：阿甘正传整合展示了h1/p/strong/em/cite/blockquote/q/time/abbr/dfn等标签。许多标签仅有语义、并无特殊样式，需通过CSS设置外观。特殊信息文本：分类与用途理解每种标签的语义与适用场景，选用合适的标签表达内容1.旁注·插图·引用<small>——旁注（小字号）<figure>——媒体自合元素（图/代码/照片）<figcaption>——为figure指定标题<cite>——引用来源（默认斜体）<blockquote>——块级长引用，自动左右缩排<q>——行内短引用，浏览器自动加引号2.时间·缩写·术语<time>——标记时间/日期datetime属性（YYYY-MM-DDThh:mm:ss）为机器可读，不在屏幕上显示<abbr>——缩写词，title属性提供全称鼠标悬停时显示提示框<dfn>——标记文档中第一次出现的术语

3.计算机相关元素<code>——计算机代码（等宽字体）<kbd>——键盘输入文本（等宽字体）<samp>——程序/系统示例输出（等宽字体）<var>——变量或占位符（默认斜体）注意：code内的<和>应使用<>4.联系信息·高亮文本<address>——作者/组织联系信息块级元素，默认斜体，自动换行放在<article>内表示文章作者，放在<body>或<footer>表示页面作者<mark>——黄色背景高亮（荧光笔效果）适合搜索关键词、引述、需要引起注意的代码等任务实施：高可读性博客页面排版结合HTML标签与CSS样式，设计一个结构清晰、易于阅读的博客页面01·整体结构•<h1>作为页面主标题；•<h2>作为各节标题（CSS加底部边框）；•<p>组织正文段落；•<ul>/<li>列出要点。结构清晰，层次分明，便于读者快速定位内容。02·文本可读性•正文行高1.7，让文字不拥挤；•限制内容宽度（max-width:700px）并居中显示；•正文使用浅深灰#333，标题使用较深的#222/#444。03·强调与节奏•<em>标记需要强调的短语；•重点内容用class="highlight"设置醒目颜色+粗体；•段落之间留出20px间距；•列表使用30px左缩进，让要点更清晰。04·综合运用•综合h1/h2、p、ul/li、em、strong等语义化标签；•使用CSS美化页面版式；•体现"内容结构+视觉层次"协同设计的思想。任务小结掌握段落与排版标签，能够搭建结构清晰、视觉舒适的文本页面会段落<p>段落<br>换行<pre>预格式三种标签分工

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论