Web编程基础（HTML+CSS）项目实战教程任务2-添加网页文本内容教学课件.pptx

《Web编程基础（HTML+CSS）项目实战教程任务2-添加网页文本内容教学课件.pptx》由会员分享，可在线阅读，更多相关《Web编程基础（HTML+CSS）项目实战教程任务2-添加网页文本内容教学课件.pptx（21页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Web编程基础（HTML+CSS）项目实战教程任务2-添加网页文本内容任务2：添加网页文本内容WEB2.2 任任务2：添加网：添加网页文本内容文本内容【任务描述】本任务主要是使用经过精心处理的文字材料，制作“致敬最美逆行者”新闻页面中的文章标题和段落内容部分，并通过对文字与段落属性的设置来提高文字的艺术表现力。其目的是使学习者掌握网页中最基本的标题标记、段落标记、水平线、换行、注释语句及特殊字符等。添加网页文本内容标题与段落标记水平线标记换行标记特殊字符div与span标记标题和段落标记标题是通过 至 标记进定义的。定义重要等级最高的标题。定义重要等级最低的标题。例如：一级标题二级标题标题标记

2、定义和用法：标题和段落标记在页面中创建教材目录，效果如下图所示。1：标题标记的应用。标题和段落标记HTML的标记（或者说HTML段落标记）表示文本的一个段落。使用一对标记定义段落。标记会自动在段落的前后添加一个空白行。段落标记定义和用法：标题和段落标记应用标题标记和段落标记制作唐诗欣赏页面，效果如下图所示。2：段落标记的应用。课堂实训任务描述：如果想实现每行一句唐诗的效果，如下图所示，该怎么实现呢？试一试。换行标记使用标记可在网页中插入一个换行符。标记是空标记（意味着它没有结束标记，因此这样用是错误的）。换行标记与段落标记的区别是什么？换行标记定义和用法：水平线标记使用标记可在网页中插入一条横

3、跨整个窗口的水平分隔线。水平线标记定义和用法：水平线标记3：水平线标记的应用。换行标记4：换行标记的应用。特殊字符HTML中，&等有特殊含义（，用于定义标记，&用于转义），不能直接使用。在网页中输入特殊字符，需在html代码中加入以&开头的字母组合或以&#开头的数字。特殊字符的定义和用法：显示说明实体名称实体编号不断行的空格  大于号>>&符号&&双引号""版权©©已注册商标®®乘号××除号÷÷特殊字符常用的字符实体课堂实训任务描述：如果想实现

4、如下图所示页面效果，该怎么实现呢？试一试。div与span标记div是一个块标记，一般用于网页布局；span是行级元素(行内标记)，一般用于局部文字的样式，没有结构的意义，纯粹是应用样式；相对与其他HTML标记div和span对于它们包含的元素是没有意义的；div与span的另一个区别就是div会造成换行，而span则不会。定义和用法：div与span标记应用div和span标记实现如下图所示页面效果，并总结两个标记的功能和特点。5：div与span标记的应用课堂实训：制作图文并茂的班级学习交流页面任务描述：构建网页页面并在网页中添加网页文本内容，插入图像，并通过标记和属性对页面中的文本进行简单样式修饰，如颜色、强调、倾斜、右对齐等，页面效果如图所示。任务2-添加网页文本内容标题和段落标记换行标记水平线标记特殊字符的使用div和span标记的使用课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务