（1）-块级、行内元素
【项目目标】
熟练掌握网页结构代码
掌握 HTML 块级元素
掌握 HTML 内联元素
【项目内容】
利用 Notepad++等编辑环境创建和编辑网页。
灵活运用块级元素和内联元素对页面结构化。
【项目步骤】
1．输入内容
将 项 目 二 中 素 材 文 件 夹 中 的 “ 李 白 代 表 作 品 素 材 .txt ” 文 件 重 命 名 为 libai-
representativeworks1.html。用浏览器打开，查看显示结果。
2．文档结构定义
用 Notepad++等打开 libai-representativeworks1.html 文件，根据 HTML 网页结构规
则，在合理的位置添加<html><head><title><body>等标签。
3．文档结构化
（1）继续按项目图 2-1 所示添加段落<p>、标题<hn>、列表<ul>、<li>等块级标签，
保存并用浏览器查看结果。
（2）<blockquote>标签：用于显示长引用，cite 属性设置为李白的百度百科页面网址。
4．行内元素添加
根据项目图 2-1 的效果添加行内元素。
（1）“[唐]李白”部分：设置小字体<>
（2）注释部分：“渡荆门送别”、“荆门”、“楚国”、“月下飞天镜”、“海楼”6 个部分文字
设置为<strong>加粗。
（3）特殊符号：
①在“荆门送别”、“[唐]李白” 之前加入特殊符号空格
②在“联系我们 |”、“关于我们 |”、“隐私声明 |”、“意见反馈”之前加入特殊符号空格
如项目图 2-2 所示。
③ 在“Copyright ”和“书剑风雪的优快云”之间，加入版权符号。
项目图 2-1 块级元素效果图
项目图 2-2 页尾部分的列表设置
4．代码提示
不需要提示的学习者可忽略此图。
项目图 2-3 代码提示
扫一扫
662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
