版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
任务4制作“学习动态”子页面0第2章网页的基本结构实现(1)掌握常用块元素的用法。知识目标(2)掌握常用行元素的用法。(1)能够熟练使用段落、标题、列表、通用块标签。技能目标
(2)能够熟练使用超级链接、图像、通用行标签。(3)能够使用合适的HTML
标签创建图文并茂的网页。(1)培养自主学习能力。素质目标(2)培养具一反三的能力和吃苦耐劳的精神。(3)培养学生从知识到实践的的程序思维。第2章网页的基本结构实现1.
常用的块元素2.
常用的行元素3.
任务实现1.
常用的块元素1.1
段落与标题1.2通用块元素1.3常用列表块元素1.4语义块元素第2章网页的基本结构实现1.
常用的块元素1.1段落与标题HTML
网页中一篇文章要结构清晰，就需要有标题和段落。段落标签：<P>格式：<p
align="对齐方式">段落文本</p>注
：align
属性规定段落中文本的对齐方式。属性值有left,right,center
,justify
。
但不建议使用，建议使用样式取代。段落标签：<pre>与
<p>标签用法基本相同，区别是<pre>
内文本内容将保留空格和换行符。1.
常用的块元素⑤<p>
与<pre>标签的区别①文件
|
D:/demo2/example2-1.html这是段落文字这是段落文字这是段落文字这是段落文字这是段落文字这是段落文字这是段落文字这是段落文字1.1段落与标题<body>这是段落文字
这是段落文字这是段落文字这是段落文字
</p><hr><pre>这是段落文字这是段落文字
这是段落文字
这是段落文字</pre></body>1.
常用的块元素1.1段落与标题HTML
网页中一篇文章要结构清晰，就需要有标题和段落。标题标签：<h1>~<h6>标签可定义标题元素。注
：<h1>
定义最大的标题。<h6>
定义最小的标题。1.
常用的块元素1.2通用块元素<div>
标签：<div>
标签用来定义文档中的分区或节(division/section)
,
把文档分割为独立的、不同的部分。<div>
标签是一个容器标签，其中的内容可以是任何
HTML
元素。id
和
class
是div标签最重要的两个属性，区别在于class
用于元素组(某一类元
素
)
,
而
id
用于标识单独的唯一的元素1.
常用的块元素1.3常用列表块元素H
TML
支持有序、无序和定义列表，本质是组织文本的一种方式。type值描述1阿拉伯数字：1、2、3
……A大写英文字母：A、B、C
……a小写英文字母：a、b、C
……I大写罗马数字：1、IⅡ、Ⅲ
……I小写罗马数字：i、ii、ii
……有序列表：特定顺序的列表项集合格
式
：<oltype=编号类型
start=value>
<li>第一项</li><li>第二项</li><li>第三项</li></ol>表2-1有序列表type属性取值1.
常用的块元素有序列表①文件
|D:/demo2/example2-2.html1.苹果2.香蕉3.菠萝C.咖啡d.
牛奶e.茶1.3常用列表块元素<ol><li>苹果</li><li>
香蕉</li><li>菠萝</li></ol><ol
type="a"start="3"><li>
咖啡</li><li>牛奶</li><li>茶</li></ol>1.
常用的块元素1.3常用列表块元素HTML
支持有序、无序和定义列表，本质是组织文本的一种方式。无序列表：列表中列表项的前导符合没有一定的次序，而是黑点、圆圈、方框等
一些特殊符号标识。type值描述disc表示实心圆(默认)circle表示表示空心圆square表示小方块格式：<ul
type=编号类型>
<li>第一项</li><li>第二项</li><li>第三项</li>
</ul>表2-2无序列表type属性取值1.
常用的块元素无序列表
X①
文
件|
D:/demo2/example2-3.html
应
☆·
首
页●学校概况●教学在线●院系设置●党的建设1.3常用列表块元素<body><ul><li>首页</li><li>
学校概况</li><li>
教学在线</li><li>院系设置</li><li>党的建设</li></ul></body>1.
常用的块元素1.3常用列表块元素HTML支持有序、无序和定义列表，本质是组织文本的一种方式。定义列表：又称为释义列表或字典列表，主要用到3个
HTML
标签：<dl>
标签、<dt>
和<dd>标签。格
式
：<dl><dt>
名词1</dt><dd>
名词解释1</dd><dt>
名词2</dt><dd>
名词解释2</dd>●●●</dl>1.3常用列表块元素<body><dl><dt>Web
前端课程</dt><dd>这里有
html
教程</dd>
<dd>这里有
css
教程</dd>
<dt>Java
课
程
<
/dt><dd>这里有java
开发教程</dd></dl></body>1.常用的块元素定义列表
×①文件|
D:/demo2/example2-4.htmlWeb
前端课程这里有html教程这里有cSs教程Java课程这里有java开发教程标签名描述<header>表示页面中一个内容区块或整个页面的标题<section>页面中的一个内容区块比如章节、页眉、页脚或页面的其他部分可以
和h1、h2…等元素结合起来使用表示文档结构<article>表示页面中一块与上下文不相关的独立内容比如一篇文章<aside>表示<article>标签素内容之外的、与<article>标签内容相关的辅助信息可用作文章的侧栏<hgroup>表示对整个页面或页面中的一个内容区块的标题进行组合<figure>表示一段独立的流内容一般表示文档主体流内容中的一个独立单元<figcaption>定义<figure>标签的标题<nav>表表示页面中导航链接的部分<footer>表示整个页面或页面中一个内容区块的脚注一般来说它会包含创作者的姓名、创作日期以及创作者的联系信息1.
常用的块元素1.4语义块元素语义元素是拥有语义的元素，它清楚地向浏览器和开发者描述其意义。例如，form、table以及img能清晰地定义其内容。表2-3语义块元素1.常用的块元素1.4语义块元素header元
素
：具有引导和导航作用，通常放在页面头部。<header><h1>网页主题</h1></header>nav
元
素
：用于定义导航链接，将具有导航性质的链接归纳在一个区域中。<nav><ul><li><a
href="#">首页</li><li><a
href="#">公司概况</li></ul></nav>article元
素
：经常被用于定义一篇日志、
一条新闻或用户评论等。<article><header><h2>第二章</h2></header></article>1.常用的块元素1.4语义块元素aside元
素
：定义页面内容以外的某些内容。section
元
素
：素定义文档中的节，即文档的各个部分。例如章节，页眉。<section><h1>第1节</h1><p>
第1节内容</p></section><section><h1>
第2节</h1><p>
第2节内容</p></section>1.
常用的块元素1.4语义块元素figure
和
figcaption
元
素
：搭配使用，定义<figure>
标签的标题。<figure>⑤figure
和figcaption
元素的使用
×<imgsrc="images/img_1.jpg"alt="pic"width="304"height="228">
<figcaption>
学习贯彻党的二十大精神</figcaption></figure>①文
件
|
D:/demo2/example2-10.htmlfooter
元
素
：定义一个页面或者区域的底部，
学习贯彻党的二十大精神通常包含文档的作者、版权信息、使用条款链接、联系信息等等。第2章网页的基本结构实现1.
常用的块元素2.
常用的行元素3.
任务实现2.常用的行元素2.1
超链接a2.2
通用行内元素span2.3图像img2.4文本格式化元素第2章网页的基本结构实现超链接：点击超链接跳转到新的文档或者当前文档中的某个部分，本质上是网页的一部分，通过<a></a>
标签环绕链接对象创建。格
式：<a
href=""target=""title="">链接对象</a>href属性定义了这个链接所指的目标地址；title
属性定义链接提示文字；target
属性定义指定打开链接的目标窗口的方式；表2-5target属性值值描述_blank表示在新窗口中打开被链接的文档_self默认。在相同的框架中打开被链接文档parent在父框架集中打开被链接文档_top在整个窗口中打开被链接文档framename指定框架中打开被链接文档2.1超链接a2.常用的行元素超链接的分类：根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接和电子邮件超链接等
；
根据超链接的对象不同，超链接可分为文字超链接、图像超链接和图像映射等。2.1超链接a2.常用的行元素<img
src="图像地址"usemap="#影像地图名称"><map
name="影像地图名称"><area
shape="热区形状”coords="热区坐标"href="链接地址
"/></map><a
id="锚点名称">文字</a><a
href="#锚点的名称">链接的文字</a><a
href="URL">超链接文字</a><a
href="链接地址"><img
src="源文件地址"></a><a
href="mailto:E-mail地址">超链接文本</a>锚点链接：先定义锚点，再通过
id名标注跳转到锚点目标的位置。2.1超链接a电子邮件链接文字超链接图像超链接图像映射2.常用的行元素2.常用的行元素2.2通用行内元素
spanspan
元
素
：在网页的效果上看不出什么意义，但是通过
id属性、style
属性、class
属性设置和JavaScript
可以改变span
元素内容的排版布局。格
式
：<span>
文本和其他内联元素</span>特
点：(1)<span>
标签没有特定的含义，可用作文本的容器，用来组合文档中的行内元素。(
2
)
当
与CSS一起使用时，<span>元素可为部分文本设置样式属性。(3)<span>
标签只能包含文本和其他内联元素，不能将块级元素放入其中。2.常用的行元素2.3图像
imgHTML
网页中经常需要插入图片，使页面更加美观，表达更加清晰。格
式：<img
src="被引用图片的地址"alt="图片的代替文本">img标签属性：属性属性值描述srcURL图像的路径alt文本图像不能显示时的文本title文本鼠标悬停时显示的内容width像素(支持百分比)设置图像的宽度height像素(支持百分比)设置图像的高度border数字不推荐使用。定义图像周围的边框vspace像素不推荐使用。定义图像顶部和底部的空白hspace像素不推荐使用。定义图像左侧和右侧的空白alignleft、right、top、middle、bottom不推荐使用。规定如何根据周围的文本来排列图像2.常用的行元素2.3图像
img图像路径：绝
对
路
径
是
主
页
上
的
文
件
或
目
录
在
硬
盘
上
的
真
正
路
径
或
网
址
。例如：
“C:/website/img/ph
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- GB 4234.11-2025外科植入物金属材料第11部分：锻造钛-6铝-7铌合金
- 泵与泵站课后试题及答案
- 保育卫生保健试题及答案
- 妇科智能用药的药师伦理特殊考量
- 大数据驱动的职业性眼病发病趋势预测研究
- 大数据赋能社区慢性病精准防控
- 多胎妊娠合并垂体瘤的特殊管理策略
- 多组学标志物指导下的乳腺癌分子分型新策略
- 2025年中职（建筑装饰）室内墙面装饰综合测试试题及答案
- 2025年中职幼儿保育（幼儿艺术启蒙教育）试题及答案
- 人事行政部2026年年度计划
- 2025贵州贵阳产业发展控股集团有限公司招聘27人考试参考题库附答案
- 2026贵州省法院系统招聘聘用制书记员282人笔试参考题库及答案解析
- 2026年日历表含农历（2026年12个月日历-每月一张A4可打印）
- 环保局基础知识考试题库100道及答案解析
- 道闸施工方案
- 适用于新高考新教材天津专版2024届高考英语一轮总复习写作专项提升Step3变魔句-提升描写逼真情境能力课件外研版
- 脚手架稳定性计算
- DB31T+598-2023政府质量奖个人评价准则
- 自考《影视编导》03513复习备考试题库（含答案）
- 周围神经损伤及炎症康复诊疗规范
评论
0/150
提交评论