网页设计与制作-HTML5 + CSS3 课件 任务4 制作“学习动态”子页面_第1页
网页设计与制作-HTML5 + CSS3 课件 任务4 制作“学习动态”子页面_第2页
网页设计与制作-HTML5 + CSS3 课件 任务4 制作“学习动态”子页面_第3页
网页设计与制作-HTML5 + CSS3 课件 任务4 制作“学习动态”子页面_第4页
网页设计与制作-HTML5 + CSS3 课件 任务4 制作“学习动态”子页面_第5页
已阅读5页，还剩25页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计与制作HTML5+CSS3任务4制作“学习动态”子页面第2章网页的基本结构实现知识目标技能目标素质目标（1）掌握常用块元素的用法。（2）掌握常用行元素的用法。（1）能够熟练使用段落、标题、列表、通用块标签。（2）能够熟练使用超级链接、图像、通用行标签。（3）能够使用合适的HTML标签创建图文并茂的网页。（1）培养自主学习能力。（2）培养具一反三的能力和吃苦耐劳的精神。（3）培养学生从知识到实践的的程序思维。常用的块元素常用的行元素任务实现第2章网页的基本结构实现1.常用的块元素1.1段落与标题1.2通用块元素1.3常用列表块元素1.4语义块元素第2章网页的基本结构实现1.1段落与标题1.常用的块元素HTML网页中一篇文章要结构清晰，就需要有标题和段落。段落标签：<P>格式：<palign="对齐方式">段落文本</p>注：align属性规定段落中文本的对齐方式。属性值有left，right，center，justify。但不建议使用，建议使用样式取代。段落标签：<pre>与<p>标签用法基本相同，区别是<pre>内文本内容将保留空格和换行符。1.1段落与标题1.常用的块元素<body><p>这是段落文字这是段落文字这是段落文字这是段落文字</p><hr><pre>这是段落文字这是段落文字这是段落文字这是段落文字</pre></body>1.1段落与标题1.常用的块元素HTML网页中一篇文章要结构清晰，就需要有标题和段落。标题标签：<h1>~<h6>标签可定义标题元素。注：<h1>定义最大的标题。<h6>定义最小的标题。1.2通用块元素1.常用的块元素<div>标签：<div>标签用来定义文档中的分区或节（division/section），把文档分割为独立的、不同的部分。<div>标签是一个容器标签，其中的内容可以是任何HTML元素。id和class是div标签最重要的两个属性，区别在于class用于元素组（某一类元素），而id用于标识单独的唯一的元素1.3常用列表块元素1.常用的块元素HTML支持有序、无序和定义列表，本质是组织文本的一种方式。有序列表：特定顺序的列表项集合格式：<ol

type=编号类型

start=value><li>第一项</li><li>第二项</li><li>第三项</li></ol>type值描述1阿拉伯数字：1、2、3……A大写英文字母：A、B、C……a小写英文字母：a、b、c……I大写罗马数字：I、II、III……i小写罗马数字：i、ii、iii……表2-1有序列表type属性取值1.3常用列表块元素1.常用的块元素...<ol><li>苹果</li><li>香蕉</li><li>菠萝</li></ol><oltype="a"start="3"><li>咖啡</li><li>牛奶</li><li>茶</li></ol>...1.3常用列表块元素1.常用的块元素HTML支持有序、无序和定义列表，本质是组织文本的一种方式。无序列表：列表中列表项的前导符合没有一定的次序，而是黑点、圆圈、方框等一些特殊符号标识。格式：<ultype=编号类型><li>第一项</li><li>第二项</li><li>第三项</li></ul>type值描述disc表示实心圆(默认)circle表示表示空心圆square表示小方块表2-2无序列表type属性取值1.3常用列表块元素1.常用的块元素...<body><ul><li>首页</li><li>学校概况</li><li>教学在线</li><li>院系设置</li><li>党的建设</li></ul></body>...1.3常用列表块元素1.常用的块元素HTML支持有序、无序和定义列表，本质是组织文本的一种方式。定义列表：又称为释义列表或字典列表，主要用到3个HTML标签：<dl>标签、<dt>和<dd>标签。格式：<dl><dt>名词1</dt><dd>名词解释1</dd><dt>名词2</dt><dd>名词解释2</dd>…</dl>1.3常用列表块元素1.常用的块元素...<body><dl><dt>Web前端课程</dt><dd>这里有html教程</dd><dd>这里有css教程</dd><dt>Java课程</dt><dd>这里有java开发教程</dd></dl></body>...1.4语义块元素1.常用的块元素语义元素是拥有语义的元素，它清楚地向浏览器和开发者描述其意义。例如，form、table以及img能清晰地定义其内容。标签名描述<header>表示页面中一个内容区块或整个页面的标题<section>页面中的一个内容区块比如章节、页眉、页脚或页面的其他部分可以和h1、h2…等元素结合起来使用表示文档结构<article>表示页面中一块与上下文不相关的独立内容比如一篇文章<aside>表示<article>标签素内容之外的、与<article>标签内容相关的辅助信息可用作文章的侧栏<hgroup>表示对整个页面或页面中的一个内容区块的标题进行组合<figure>表示一段独立的流内容一般表示文档主体流内容中的一个独立单元<figcaption>定义<figure>标签的标题<nav>表表示页面中导航链接的部分<footer>表示整个页面或页面中一个内容区块的脚注一般来说它会包含创作者的姓名、创作日期以及创作者的联系信息表2-3语义块元素1.4语义块元素1.常用的块元素header元素：具有引导和导航作用，通常放在页面头部。<header><h1>网页主题</h1>…</header>nav元素：用于定义导航链接，将具有导航性质的链接归纳在一个区域中。<nav><ul><li><ahref＝"＃">首页</li><li><ahref＝"＃">公司概况</li></ul></nav>article元素：经常被用于定义一篇日志、一条新闻或用户评论等。<article><header><h2>第二章</h2></header></article>1.4语义块元素1.常用的块元素aside元素：定义页面内容以外的某些内容。section元素：素定义文档中的节，即文档的各个部分。例如章节，页眉。<section>

<h1>第1节</h1>

<p>第1节内容</p></section><section>

<h1>第2节</h1>

<p>第2节内容</p></section>1.4语义块元素1.常用的块元素footer元素：定义一个页面或者区域的底部，通常包含文档的作者、版权信息、使用条款链接、联系信息等等。figure和figcaption元素：搭配使用，定义<figure>标签的标题。<figure><imgsrc="images/img_1.jpg"alt="pic"width="304"height="228"><figcaption>学习贯彻党的二十大精神</figcaption></figure>常用的块元素常用的行元素任务实现第2章网页的基本结构实现2.常用的行元素2.1超链接a2.2通用行内元素span2.3图像img2.4文本格式化元素第2章网页的基本结构实现2.1超链接a2.常用的行元素超链接：点击超链接跳转到新的文档或者当前文档中的某个部分，本质上是网页的一部分，通过<a></a>标签环绕链接对象创建。格式：<a

href=""

target=“"

title="">链接对象</a>href属性定义了这个链接所指的目标地址；title属性定义链接提示文字；target属性定义指定打开链接的目标窗口的方式；2.1超链接a2.常用的行元素超链接的分类：根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接和电子邮件超链接等；根据超链接的对象不同，超链接可分为文字超链接、图像超链接和图像映射等。2.1超链接a2.常用的行元素<ahref="URL">超链接文字</a>文字超链接图像超链接<ahref="链接地址"><imgsrc="源文件地址"></a>电子邮件链接<ahref="mailto:E-mail地址">超链接文本</a>锚点链接：先定义锚点，再通过id名标注跳转到锚点目标的位置。<aid="锚点名称">文字</a><ahref=“#锚点的名称"＞链接的文字</a>图像映射<imgsrc="图像地址"usemap=“#影像地图名称"><mapname="影像地图名称"><areashape="热区形状"coords="热区坐标"href="链接地址“/></map>2.2通用行内元素span2.常用的行元素span元素：在网页的效果上看不出什么意义，但是通过id属性、style属性、class属性设置和JavaScript可以改变span元素内容的排版布局。格式:<span>文本和其他内联元素</span>特点：（1）<span>标签没有特定的含义，可用作文本的容器，用来组合文档中的行内元素。（2）当与CSS一起使用时，<span>元素可为部分文本设置样式属性。（3）<span>标签只能包含文本和其他内联元素，不能将块级元素放入其中。2.3图像img2.常用的行元素HTML网页中经常需要插入图片，使页面更加美观，表达更加清晰。格式：<imgsrc="被引用图片的地址"alt="图片的代替文本">img标签属性：2.3图像img2.常用的行元素图像路径：绝对路径

是主页上的文件或目录在硬盘上的真正路径或网址。例如：“c:/website/img/photo.jpg”相对路径是以当前文件所在路径为起点，进行相对文件的查找。例如：2.4文本格式化元素2.常用的行元素在网页中有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标记使文字以特殊的方式显示。文本格式化元素包括sup元素、sub元素、b元素、i元素、em元素、strong元

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论