第2章 HTML构建基本网页-【千锋教育】HTML5+CSS3+JavaScript 网页设计基础与实战（微课版）
2023-03-22
|
42页
|
130人阅读
|
1人下载
教辅
内容正文：
第2章 HTML构建基本网页
2.1 制作简单文本网页
2.2 添加图片
2.3 添加超链接
了解HTML常用的基本标签
了解<div>块元素的特点
掌握<a>标签的多种跳转功能
熟练使用<p>标签和<img>标签
学 习 目 标
LEARNING OBJECTIVES
初心至善 匠心育人
引言
本章重点学习如何去构建一个基本HTML网页。标签是构建HTML网页的重要元素，而了解并正确使用标签是十分重要的。HTML网页常用的标签有段落标签、超链接标签、图片标签、块元素等。段落标签用于显示网页中的文本内容，超链接标签可以实现网页之间的跳转，图片标签可在网页中嵌入图片，块元素能对网页内容进行分类分组处理，用于网页的布局。
初心至善 匠心育人
2.1
制作简单文本网页
标题标签
案例—秋天的故事
换行标签
段落标签
目录
Contents
初心至善 匠心育人
2.1 制作简单文本网页
2.1.1 标题标签
标题能够体现文档结构，搜索引擎通过标题能为网页的结构和内容编制索引，用户可通过标题来快速浏览网页。
作用
标题是由<h1>至<h6>标签定义，<h1>定义最大的标题，依次递减，<h6>定义最小的标题，浏览器会自动在标题的前后添加空行。
<h1>标题文字</h1>
语法格式
标题标签的语法格式如下。
初心至善 匠心育人
2.1 制作简单文本网页
2.1.1 标题标签
依次输出<h1>至<h6>标题标签，以便更好地看出它们之间的差别。
演示说明
<body>
<h1>绿水青山就是金山银山</h1>
<h2>绿水青山就是金山银山</h2>
<h3>绿水青山就是金山银山</h3>
<h4>绿水青山就是金山银山</h4>
<h5>绿水青山就是金山银山</h5>
<h6>绿水青山就是金山银山</h6>
</body>
代码 例2.1
运行效果
初心至善 匠心育人
2.1 制作简单文本网页
2.1.2 段落标签
段落是通过<p>标签来定义的。
<p>段落文字<p>
语法格式
段落标签的语法格式如下。
初心至善 匠心育人
2.1 制作简单文本网页
2.1.2 段落标签
在<p>标签中输入文本内容。
演示说明
<body>
<p>明月别枝惊鹊，清风半夜鸣蝉。</p>
<p>稻花香里说丰年，听取蛙声一片。</p>
<p>七八个星天外，两三点雨山前。</p>
<p>旧时茅店社林边，路转溪桥忽见。</p>
</body>
代码 例2.2
运行效果
说明，默认情况下，HTML会自动在块级元素（段落、标题）前后添加一个额外的空行。
初心至善 匠心育人
2.1 制作简单文本网页
2.1.3 换行标签
<br>换行标签可在文本中生成一个换行（回车）符号，它是一个空元素，也是一个单标签，不能在里面写内容。在写诗句文本和地址时，换行是十分适用的。
<p>内容<br>内容<p>
语法格式
换行标签的语法格式如下。
初心至善 匠心育人
2.1 制作简单文本网页
2.1.3 换行标签
输入一首古诗《春晓》，在每个小诗句内容后面添加换行标签，查看实现的效果。
演示说明
<body>
<p> 春晓</p>
<p>春眠不觉晓，<br>处处闻啼鸟。<br>夜来风雨声，<br>花落知多少。</p>
</body>
代码 例2.3
运行效果
初心至善 匠心育人
2.1 制作简单文本网页
2.1.4 案例—秋天的故事
本实例是一篇关于秋天的简单文本介绍。该页面主要由文字元素和标签构成，使用<h1>至<h6>标题标签、<p>段落标签和<br>换行标签来实现整个页面。页面结构简图如图所示。
初心至善 匠心育人
2.1 制作简单文本网页
2.1.4 案例—秋天的故事
代码实现
<body>
<h3>秋天的故事</h3>
<p>秋天，又称秋季，一年四季的第三季，由夏季到冬季的过渡季，天文为秋分到冬至。<br>
自然景观最明显的变化在树木上面，城市里会开始清扫大量的落叶，山区则涌进不少观赏红叶的游客们。</p>
<p>进入秋季，北方冷空气不断侵入，但势力不是很强，常在中国北方形成秋高气爽的天气，华西常有绵绵秋雨出现。<br>
总体来讲，进入秋季，太阳高度角渐低，温度渐降；秋风送爽、炎暑顿消、硕果满枝、田野金黄。</p>
</body>
主体代码 例2.4
初心至善 匠心育人
本节小结
本节内容主要讲解了<h3>标题标签、<p>段落标签和<br>换行标签的使用。通过本节的学习，希望读者可以熟练掌握这些标签。
初心至善 匠心育人
2.2
添加图片
图片标签
案例—致敬教师节
<div>块元素
水平线标签
目录
Contents
初心至善 匠心育人
2.2 添加图片
2.2.1 图片标签
在HTML中图像是由<img>标签定义的，图片标
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。