《网页制作案例教程（HTML5+CSS3)》 课件 项目2 添加网页内容.pptx

HTMLCSS项目2添加网页内容网页制作案例教程（HTML5+CSS3）

教学目标熟悉了解掌握掌握2了解文本格式化标记和列表嵌套3能够使用标题、段落、图像、列表标记制作简单的网页，并实现不同页面之间的跳转超链接、列表标记，知道超链接分类4掌握标题、段落、图像等标记的使用1

1标题和段落标记2文本格式化标记和特殊字符3图像标记4超链接标记任务分解5列表标记6制作诗词网页

PART0101标题和段落标记

标题和段落标记标题标记HTML用标题来呈现文档结构，提供了h1-h66个标题标记h1定义最大的标题。将h1用作主标题（最重要的），其后是h2（次重要的），再其次是h3，以此类推。

标题和段落标记标题标记基本语法格式hn属性名=“属性值”标题文本/hnleft：设置标题文字左对齐（默认值）；center：设置标题文字居中对齐；right：设置标题文字右对齐。align：设置标题的对齐方式，可选择left、right、center三种。h2赛程/h2h2align=“center”赛程/h2例

设置字体属性h1这是标题1/h1h2这是标题2/h2h3这是标题3/h3h4这是标题4/h4h5这是标题5/h5h6这是标题6/h6例动手实践demo1确保标题标记只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

标题和段落标记段落标记基本语法格式palign=对齐方式段落文本/p例p详细信息/p网页中的正文文字内容一般放在段落标记p/p之间

标题和段落标记换行标记br/标记用来进行换行，不产生一个新段落。基本语法格式br/如果希望在不产生一个新段落的情况下进行换行，需要使用br/标记

设置字体属性p段落1内容br/这也是段落1/pp段落2内容/p例动手实践demo2

标题和段落标记水平线标记基本语法格式hr属性名=属性值/align：设置水平线的对齐方式。可选择left、right、center三种值，默认为center，居中对齐；size：设置水平线的粗细。以像素为单位，默认为2像素；width：设置水平线的宽度。可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%;color：设置水平线的颜色。可用颜色名称、十六进制#RGB、rgb(r,g,b）。hrcolor=“blue”/例

标题和段落标记动手实践demo3bodyh3基本信息/h3hrcolor=”#ff0000”/p图书名称：中国经典故事绘本/pp出版社：延边大学出版社/p/body

PART0202文本格式化标记和特殊字符

文本格式化标记和特殊字符网页中的文本有大小、颜色、字体、粗细、对齐方式、间距、背景等各种样式变化，才使网页看起来更加美观。这些样式变化可以由CSS样式来实现，但早期的HTML版本也提供了一些文本格式化标记。

文本格式化标记和特殊字符文本格式化标记标签描述b/b和strong/strong定义文字以粗体方式显示（XHTML推荐使用strong）i/i和em/em定义文字以斜体方式显示（XHTML推荐使用em）s/s和del/del定义文字以加删除线方式显示（XHTML推荐使用del）u/u和ins/ins定义文字以加下划线方式显示（XHTML不赞成使用u）sub/sub定义下标字sup/sup定义上标字

标题和段落标记动手实践demo4strong粗体/strongbr/em斜体/embr/del删除/delbr/ins下划线/insbr/Xsup2/supbr/Xsub2/subbr/

文本格式化标记和特殊字符HTML5淘汰了一部分标记：s、u、center、font、strike、tt。这些标记纯粹是为页面展示用的，表现的内容应该由CSS完成。还有一些表现类的属性也被淘汰了，比如color，align，bgcolor。

文本格式化标记和特殊字符特殊字符查阅更多特殊符号特殊字符描述字符的代码?空格符nbsp;←左箭头larr;↑上箭头uarr；和号amp;￥人民币yen;?版权copy;?注册商标reg;特殊字符指普通键盘上不存在的符号，例如一些数学运算符、箭头、技术符号和形状之类的HTML符号。

文本格式化标记和特殊字符动手

实践bodyp版权所有copy;第45届世界技能大赛河南省选拔赛组织委员会/pp豫ICP备********号/p/bodydemo5

PART0303图像标记

GIF格式支持动画，支持透明，同时GIF也是一种无损的图像格式，修改图像之后，图像质量几乎没有损失。但GIF图像的颜色数少，只能处理256种颜色。常常用于Logo、小