《Web前端开发(HTML5+CSS3+JavaScript)》教案严健武第1-9次课：Web前端开发概述及HTML基础- 盒子模型、文本与背景

上传人：q*** IP属地：山东上传时间：2024-12-15 格式：DOCX 页数：175 大小：3.84MB 积分：50 举报 版权申诉

《Web前端开发(HTML5+CSS3+JavaScript)》教案严健武第1-9次课：Web前端开发概述及HTML基础- 盒子模型、文本与背景_第2页

《Web前端开发(HTML5+CSS3+JavaScript)》教案严健武第1-9次课：Web前端开发概述及HTML基础- 盒子模型、文本与背景_第3页

《Web前端开发(HTML5+CSS3+JavaScript)》教案严健武第1-9次课：Web前端开发概述及HTML基础- 盒子模型、文本与背景_第4页

《Web前端开发(HTML5+CSS3+JavaScript)》教案严健武第1-9次课：Web前端开发概述及HTML基础- 盒子模型、文本与背景_第5页

已阅读5页，还剩170页未读，继续免费阅读

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

文档简介

PAGE16PAGEXXX学院教案二0二～二0二学年第学期课程名称课程类别£公共基础课£大类平台课£通识课R专业课£实验课£集中实践课课程性质R必修□选修授课专业及班级任课教师系（教研室）主教材信息（教材名称、出版社及出版时间）Web前端开发(HTML5+CSS3+JavaScript)严健武主编中国铁道出版社2024年8月出版总学时起始周理论课时数实验课时数习题课时数机动48321600W1第1次课：Web前端开发概述及HTML基础第次课1课题web前端开发概述及HTML基础教学目标与要求：理解Web前端开发及技术相关概念掌握开发环境搭建和使用掌握HTML基本结构、HTML编写规范掌握HTML常用标记及其属性通过本章节内容的学习，能够使用VSCode制作简单排版功能的HTML文档。授课类型(请打√)：理论课R讨论课□实验课□习题课□上机□辅导□其他□教学重点：VSCode的安装和使用HTML基础标记和属性教学难点：对静态页面与动态页面执行过程的理解。图片浮动教学方法和手段：教学方法：课堂讲授、实例演示与实操教学手段：多媒体课件教学内容及课堂设计(可续页)：教学内容主要包括：Web相关概念；环境安装和使用；HTML结构；HTML常用标记及其属性。一、Web前端开发概述1.1web前端开发是什么前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。由于Web页面日益复杂，不再是简单的内容呈现，而是桌面化软件的交互方式，及呈现后端化倾向，因此在WEB2.0后，作为独立前端开发工程范畴。1.2web前端核心技术（1）HTML：HyperTextMarkupLanguage的简写，通过使用标记呈现页面内容。超文本标记语言，制作WEB的基础语言。重点在于内容的呈现.（2）CSS：CascadingStyleSheets，层叠式样式表。页面布局；改变或增强页面元素的效果，美化页面。如图1.1，列表样式为导航。（3）JavaScript：重点在于是用户交互。如图1.2，事件响应和数据读写。图1.1样式效果图1.2用户交互1.3web工程过程（1）静态页面[HTMLCSSJavaScript]:htm/html；可直接执行(双击打开)（2）动态页面[JSPPHPASP.NET]；不可直接执行，服务器端编译后执行，结果为html内容图1.3web工作过程1.4Web相关概念（1）URL:UniformResourceLocator如何定位到文件（资源位置）语法格式：协议：//域名[/资源路径和文件名]示例：http(s):///index.html（2）Web服务器硬件+软件：提供网站资源访问图1.4web服务器软件（3）超链接包含指向目标资源位置的快捷方式，由浏览器解析执行跳转。定位到网络资源的方式：从一个页面指向另外一个目标[页面]的链接关系，可以指向另外一个网页或同一页面的不同位置，也可以是图片等其他类型文件等。是文件与文件之间的关联方式。图1.5文字和图片链接1.5Web前端开发环境图1.6开发工具选择VSCode的使用下载：/插件使用：1.安装完毕后，启动。2.单击【view】菜单=>【Extension】扩展=>打开扩展面板3.在出现的面板的搜索栏输入：Chinese，找到扩展插件，单击【install】进行安装。必要插件：htmltagwrap:alt+w：选择文本，插入标记AutoCloseTag：自动插入闭合标记AutoRenameTag：修改标记时，自动修改闭合标记AutoFileName：自动显示目录下的文件提供选择openinbrowser:在浏览器打开创建项目和运行：1.在电脑任意位置创建一个文件夹,如：D:\Web2.打开VSCode，执行：【文件】【打开文件夹】，选择D:\Web.3.在控制工作台：资源管理器【WEB】新建文件图标输入文件名和扩展名：双击打开文件进行编辑。4.输入标记，按ALT+B快捷键，在浏览器中打开web页面。本节目标：1.了解本课程学习内容：H5+CSS3+JS，各自任务角色2.理解前端开发的核心任务3.理解基本概念：静态/动态网页的工作过程、WEB服务器、URL和超链接的概念4.重点掌握开发工具的安装和使用目标体现：1.能使用VSCode创建标准结构的HTML文件，并在浏览器中打开查看效果、查看源代码2.VSCode插件的安装（练习：下载、安装及安装插件）二、HTML基础2.1HTML标准结构（1）H5文档标识：!DOCTYPE（2）组成：头部head+主体body（3）meta元数据：告知浏览器文档的基本信息；以及如何解析或执行页面渲染；（4）link元素：引入外部文件，如js、css、icon等。（5）style和script：包含额样式和JS代码。2.2基础标记每个标记有特定含义，由浏览器负责解析。成对标记：标题、段落单标记：换行、横线、图片标题h1~h6段落p文档中一个段落。标记前后分行特征：1.可以包含文本和图片等其他不会自动分行的内容；2.段落前后内容自动分行；3.具有默认的行间距。<p>这是段落1</p><p>这是段落2</p>代码效果（3）换行br单标记，在文本中进行换行，与段落的区别：br前后文本间距小，用于在任意文本中进行换行显示。<!DOCTYPEhtml><html><body><p>这是段落1</p><p>这是段落2</p>这是第1行<br/>这是第2行<p>这是段落中第1行<br/>这是段落中的第2行</p></body></html>代码效果注意：连续的空白字符（空格、回车、跳表键…），都作为一个空格处理（4）横线hr单标记，简单的水平线效果，特征：占满宽度，前后内容自动分行。<h3>这是文档标题</h3><hr/><p>这是段落的内容</p>代码效果2.3标记属性作用：描述标记的特征，包括元素基本效果，如对齐方式、宽度、高度等。位置：开始标记内。其他属性包括：标记的标识，如ID；标记的值，如文本框输入的值等；以及有class、style、事件监听等。本节学习目的：使用有限的属性实现简单的图文混排。学习方法；对比Word文档的理解来学习。暂时记住介绍的属性。例如：例如，如何实现下面所述效果：宽度50%，红色的横线，居中对齐方式段落居中(只有：对齐方式属性)标题居中(只有：对齐方式属性)显示图片：来源、大小；居中的图片属性语法(均为小写)单标记：<标记名属性名=“属性值”属性名=“属性值”…/>成对标记：<标记名属性名=“属性值”属性名=“属性值”…></标记名>注意：一个标记可以有多个属性，每个属性使用空格隔开，属性值使用双引号括起。（1）标题和段落属性属性名：align，表示段落文本的对齐方式取值：left、right、center和justify，分别代表文本在段落中左对齐、右对齐、居中对齐和两端对齐。示例：段落和标题的对齐方式<h1align="left">这是左对齐H1标题</h1><h2align="right">这是右对齐H2标题</h2><h3align="center">这是居中对齐H3标题</h3><palign="left">这是左对齐段落文本</p><palign="right">这是右对齐段落文本</p><palign="center">这是居中对齐段落文本</p>代码效果两端对齐效果。<palign=“justify”>段落内容-拉伸为满行</p>注：justify两端对齐，是指超过一行的文字，这一行文字对齐左右两端（类似拉伸本行文字，对中文平均分配字符间隔,对英文而言，单词不会中间断开），没有超过一行的，正常显示.。（2）水平线属性<hrwidth=“宽度值”size=“大小”color=“颜色值”align=“对齐方式”/>width：宽度，单位为px（像素）或%（百分比），如果使用百分比%，那么是相对父元素的宽度值，当前所有的示例父元素都为body，即浏览器窗口宽度。size：大小，类似横线的高度，单位为px。color：横线的颜色值，单位为英文单词，如红色red，灰色gray等；也可以是十六进制数字，如：#ffffff。align：对齐方式，当设置宽度后，可以设置横线左对齐、居中对齐（默认）和右对齐演示与讲解示例：横线属性使用<h4>默认横线</h4><hr/><h4>宽度为50%的红色横线</h4><hrwidth="50%"color="#ff0000"/><h4>左对齐、宽度为50%、大小为10px的横线</h4><hrwidth="50%"size="10"color="red"align="left"/>这是横线后面文字，自动分行了代码效果（3）图片属性img是单标记，用于在页面实现图片，其语法为：<imgsrc="图片URL"width="宽度值"height="高度值"/>src：图片文件位置，可以是绝对位置(网络图片)，也可以是相对位置。width、height属性：图片的宽度和高度，如果不设置则显示图片原始大小。通过改变图片宽度和高度值，可以缩放图片。单位：px(像素)，也可以是百分比%，注意，使用百分比值时，是相对其父元素的宽度和高度值。align：图片后续文本与图片的对齐方式，默认底部对齐；取值为left或right，表示图片在左边或右边浮动，其后续文本将环绕图片。演示与讲解示例：显示原始图片大小和缩小图<h4>1.默认图片</h4><imgsrc="baidu.png"/>图片后面文字，默认底部对齐，超出宽度则换行到图片下方<h4>2.缩小图片</h4><imgsrc="baidu.png"width="60px"height="60px"/>图片后面文字，默认底部对齐，超出宽度则换行到图片下方演示与讲解示例：显示左右浮动的图片<h3>1.图片左浮动</h3><imgsrc="baidu.png"width="60px"height="60px"align="left"/>图片后面文字，浮动在图片左边<br/>图片后面文字，浮动在图片左边<br/>图片后面文字，浮动在图片左边<br/><h3>2.图片右浮动</h3><imgsrc="baidu.png"width="60px"height="60px"align="right"/>图片后面文字，浮动在图片右边<br/>图片后面文字，浮动在图片右边<br/>图片后面文字，浮动在图片右边<br/>代码效果2.4注释语法格式：2.5HTML文档编写规范1.HTML标记是由尖括号包围的关键字，所有的标记以<开始，以>结束，结束标记前加/。2.单标记在结束符>前，建议加/，形成自我闭合的标记，如：<br/>、<hr/>、<img/>3.标记可以嵌套，但不要交叉，如：<p><imgsrc=“”/></p><head><titile></head></title>X嵌套的标记要考虑实际需要：<p><p>段落中的段落</p></p>没必要，如果文本需要分行，使用br标记段落与标题不要相互包含，如果使用标题，与段落分开实现4.标记不区分大小写，但建议全部小写。5.关于标记的属性，属性值一般用双引号括起。如：<hrcolor=“red”size=“2”>属性之间是空格隔开6.注意：空格、tab和回车符在HTML中成为”空白字符”，多个空格和回车符将被当作一个空白字符处理；空格可以使用：表示。需要换行使用<br/>标记。7.HTML文档命名规范文档扩展名为：html或htm，建议使用：html，如:index.html文档命名一般使用字母/单词或拼音，不要使用中文名称。主页一般命名为：index.html或default.html综合实例与练习根据教材中给出的素材和效果，使用所学的内容来实现。1.文字标题使用标题3且居中2.红色2px横线3.段落文字缩进两个空格,两端对齐4.图片居中,大小：200*100px5.灰色2px横线6.底部段落文字居中素材：HTML百度词条HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。百度一下，你就知道本章目标：1.熟悉HTML基本文档结构，各部分包含的具体内容2.掌握基本标记含义及其常用属性：p/br/hr/h1~h6/img（当前只要先记住）3.掌握HTML文档的规范要求。目标体现：按给出的要求，实现简单的图文混排效果。创建index.html文件，请实现如图的效果：1.浏览器窗口标题栏为：百度搜索。2.显示标题3：百度一下，你就知道3.添加横线：2px，灰色。4.图文混排，段落内换行，首行缩进2字符，图片宽度为200px,高度为100px且左浮动。素材：百度（Baidu）是拥有强大互联网基础的领先AI公司。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。“百度”二字，来自于八百年前南宋词人辛弃疾的一句词：众里寻他千百度。这句话描述了词人对理想的执着追求。1999年底，身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于2000年1月1日在中关村创建了百度公司。拟融入课程思政/劳动教育/创新创业内容：分析Web开发的技术栈，明确学习目标和职业规划。教学后记：这是首次课，学生比较投入、专注；内容较为广泛、简单。说明：教案编写应以一次课（一般2学时）为单位编写，重复班授课可不另填写教案。注：填写后，所有涂黄提示应删去。

W1第2次课：格式化文本和段落第次课2课题格式化文本和段落教学目标与要求使用文本格式化标签实现文本效果掌握简单的特殊符号，如空格掌握段落格式化标签授课类型(请打√)：理论课R讨论课□实验课□习题课□上机□辅导□其他□教学重点：文本格式化标签段落格式化教学难点：图文排版及格式化教学方法和手段：教学方法：课堂讲授、实例演示与实操教学手段：多媒体课件教学内容及课堂设计(可续页)：教学内容主要包括：特殊符号；文本格式化标签；段落格式化标签。2.1特殊符号应用场景：在页面中如果要输出HTML保留字符，或者添加无法从键盘输入获取的字符图标，需要使用到HTML的特殊字符。特殊字符语法格式：&+字符+分号例如大于号：>常用的特殊字符如下图所示特殊字符应用实例（1）段落缩进4个空格: 尊敬的领导：<br/> 您好！执行效果如下：（2）实现版权和商标代码：Microsoft®版权所有©，微软公司实现数学公式代码：X÷2<2&&y×2>3提示也可以使用输入法中的特殊符号代替,如：乘除，×÷（如果仅为了显示，可以中文输入法＞＜，但在XML文件中，有时是比较运算，只能使用特殊符号表示法，如mybatis中sql映射语句。）其他特殊字符-大全，了解，应用：使用字符代替图标/post/html-enerty-code.html2.2文本修饰效果包括：粗体（着重）、斜体（强调）、下划线、删除线；上标、下标。应用实例：实现下图的文本效果代码：<!DOCTYPEhtml><html><body><b>粗体</b><br/><strong>着重，类似粗体</strong><br/><i>斜体</i><br/><em>强调，类似斜体</em><br/><u>下划线</u><br/><del>删除线</del><br/>上标：X<sup>2</sup><br/>下标:X<sub>2</sub><br/></body></html>代码<!DOCTYPEhtml><html><body><p>micosoft<sup>®</sup></p><p>X<sub>1</sub><sup>2</sup>+Y<sub>1</sub><sup>2</sup>=Z<sub>1</sub></p><p>原价：<del>￥1999</del>，当前价：<b><u><i>￥99</i></u></b>(粗体、斜体、下划线)</p></body></html>2.2字体效果包括字体名、字体颜色和大小标记语法：<fontface=字体名color=颜色size=大小>文本</font>说明：face：系统安装的字体名color：单词|16进制（以#为前缀）size：数字，1-7(不在此范围则为1,超过7为7)应用实例：实现下图效果素材：荣耀畅玩205000mAh超大电池续航6.5英寸大屏莱茵护眼4GB+64GB全网通幻夜黑当前价：￥2999，原价￥4999<p><imgsrc="huawei.jpg"align="left"/><fontface="黑体"size="6"color="blue">荣耀畅玩</font>205000mAh超大电池续航6.5英寸大屏莱茵护眼4GB+64GB全网通幻夜黑<br/>当前价：<u><fontcolor="red"size="5">￥2999</font></u>，原价：<del><i><fontcolor="gray">￥4999</font></i></del><p>2.3段落与排版1.段落缩进(长引用)语法格式：<blockquote>缩进文字</blockquote>效果：包含的文字缩进约5个字母，2.5个汉字距离；可以嵌套；前后分行，类似段落标记注意：该标记可以嵌套使用，子元素依次缩进4个字符。应用实例：实现下图效果实现代码：2.预处理标记作用：按标记内原始格式显示内容，如果有其他文本样式标记，则以文本修饰格式显示。标记用法：<pre>文本</pre>应用实例：实现下图效果具体实现：综合实例，根据给出的素材，按以下要求实现：1.文字标题使用标题22.段落：红色、3号、仿宋字体3.段落文字4.横线：2px；gray5.标题3,：蓝色blue6.图片200*100px,左浮动，段落文字全部缩进2.5个字符。7.标题3,蓝色blue8.段落文字9.横线：2px；gray10.居中段落文字；注册符号：上标、红色、加粗素材高中数学解题方法导引100册以上团购优惠联系电话4006186622何家竣著上海大学出版社编辑推荐不依教科书式的单个知识点罗列，以思想性及解题方法为主线，侧重论述解题思想与方法，在注重通法的前提下，展示一题多解性，让人耳目一新。作者简介何家竣，原为上海大学教师，后辞职专职从事“家教”，主要进行高中数学教育培训，以实战著称。其独特的高中数学学习方法及不一样解题视角与技巧，为他赢得良好的市场口碑，很多市重点学校的学生都慕名而来学习。版权所有JD效果：代码实现<!DOCTYPEhtml><html><body><h2>高中数学解题方法导引</h2><p><fontface="仿宋"color="red"size="3">100册以上团购优惠联系电话4006186622</font></p><p>何家竣著上海大学出版社</p><hrsize="2"color="gray"/><h3><fontcolor="blue">编辑推荐</font></h3><imgsrc="book.png"width="200px"height="100px"align="left"/><blockquote>不依教科书式的单个知识点罗列，以思想性及解题方法为主线，侧重论述解题思想与方法，在注重通法的前提下，展示一题多解性，让人耳目一新。</blockquote><br/><br/><br/><h3><fontcolor="blue">作者简介</font></h3><p>何家竣，原为上海大学教师，后辞职专职从事“家教”，主要进行高中数学教育培训，以实战著称。其独特的高中数学学习方法及不一样解题视角与技巧，为他赢得良好的市场口碑，很多市重点学校的学生都慕名而来学习。</p><hrcolor="gray"size="2"/><palign="center">版权所有JD<fontcolor="red"><sup>®</sup></font></p><p>microsoft®</p><p>X<sub>1</sub><sup>2</sup>+Y<sub>1</sub><sup>2</sup>=Z<sub>1</sub></p>原价：<b><del>￥1999</del></b>，当前价：<b><i><u>￥99(粗体、斜体、下划线)</u></i></b></body></html>本章目标：掌握特殊字符输出：空格、大于、小于、&，注册和版权符号。掌握简单文本格式：粗体、斜体、下划线、删除线、上标下标等的用法；以及字体font样式属性理解blockquote和pre标记含义及使用目标体现：按要求能实现简单的文本效果。简单数学公式使用：上标、下标、特殊符号商品正常价格、划线价格，字体效果实现：粗体、斜体、下划线、删除线。简单文本排版：缩进和按原格式输出拟融入课程思政/劳动教育/创新创业内容：掌握基础知识，多练习，熟能生巧。创新源自熟练和思考。教学后记：通过15分钟的课堂练习，学生接收程度不错，能按要求完成课堂练习。说明：教案编写应以一次课（一般2学时）为单位编写，重复班授课可不另填写教案。注：填写后，所有涂黄提示应删去。

W2第3次课：列表第次课3课题列表教学目标与要求：掌握列表的分类和应用场景掌握无序、有序和定义列表的标记，了解它们的属性和属性取值。授课类型(请打√)：理论课R讨论课□实验课□习题课□上机□辅导□其他□教学重点：无序列表和嵌套列表的应用，能够完成课堂作业。教学难点：嵌套列表的使用。教学方法和手段：教学方法：课堂讲授、实例演示与实操教学手段：多媒体课件教学内容及课堂设计(可续页)：教学内容主要包括：无序列表、有序列表和定义列表，以及嵌套列表的使用。授课内容：列表主要作用是在页面列出数据项，结合CSS，可以实现页面的水平、垂直导航链接、商品展示等局部布局效果。1.无序列表无序列表类似Word文档的符号列表，用于展示对顺序不敏感的一组数据项，即数据项不存在前后顺序关系。其用法如下：<ultype="符号类型">

<litype="符号类型">数据项1</li>

<li>数据项2</li></ul>用法说明：ul（UnorderList）：表示无序列表，是列表项的容器。标记之间只能包含列表项li标记，不能有其他标记。type属性表示列表项的符号类型，取值可以为none（无符号）、disc（实心圆，默认值）、circle（空心圆）和square（正方形）。Ii（List）：列表项，可以包含文本、图片、段落和标题等标记，是一个容器标记。注意所有这些内容必须放在li之间。ul中的type属性用于统一设置各个列表项的符号，但如果个别列表项要设置不同的符号，那么单独设置列表项中的type属性。表3.1是无序列表的具体应用效果。表3.1无序列表示例示例效果<ul><li>爬行动物</li><li>飞禽类动物</li><li>鱼类动物</li><li>家禽类动物</li></ul><ultype="circle"><li>爬行动物</li><li>飞禽类动物</li><li>鱼类动物</li><li>家禽类动物</li></ul><ultype="circle"><li>爬行动物</li><litype="square">飞禽类动物</li><litype="square">鱼类动物</li><li>家禽类动物</li></ul>2.有序列表如果数据项之间有前后顺序，那么通常使用有序列表来展示数据项。有序列表类似Word文档中的编号列表，其用法如下：<oltype=“编号类型”start=“起始编号”><litype=“编号类型”value=“当前编号”>列表项</li><li>列表项</li>……</ol>用法说明：ol：OrderList的缩写，表示有序列表，标记之间只能存在列表项标记li。type：表示列表项目的编号类型，取值可以为：none（无编号）、1（数字编号，默认值）、A或a（大写字母或小写字母编号）、I或i（大写或小写罗马数字编号）。start：表示起始编号，整数。value：用于改变当前列表项的编号。注意，其后续的列表项编号依次从该编号开始。表3.2是有序列表的具体应用效果。表3.2有序列表示例示例效果<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol><oltype="A"start="1"><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol><oltype="I"start="2"><li>列表项1</li><litype="1"value="3">列表项2</li><li>列表项3</li></ol>3.定义列表定义列表（DefinitionList）用于分组列出数据项，其用法如下：<dl><dt>项标题</dt><dd>列表项</dd><dd>列表项</dd>…<dl>用法说明：定义列表使用dl标记，该标记包含dt（标题项）和dd（数据项）标记，dd项自动缩进。定义列表可以包含多个分组标题项，每个标题项可以包含多个描述项。表3.3是定义列表的应用示例。表3.3定义列表应用示例效果<dl><dt>学校名称</dt><dd>广州交通大学</dd><dt>学校地址</dt><dd>广州黄埔区红山三路101号</dd><dt>联系电话</dt><dd>lt;/dd><dd>lt;/dd><dt>相关院校</dt><dd>上海海事大学</dd><dd>大连海事大学</dd><dd>集美航海学院</dd></dl>4列表嵌套列表嵌套是指一个列表中包含其他的列表（子列表）。注意，子列表必须位于父列表的列表项中。例如，下面是正确的列表嵌套写法：<ul><li>列表项1</li><li>列表项2<ul><li>列表项21</li><li>列表项22</li></ul></li><li>列表项3</li></ul>通常，列表中的首行文本作为该列表项的标题使用，例如这里的“列表项2”；无序列表和有序列表可以相互嵌套使用。上面文档的效果如图3.3所示。图3.3嵌套列表而下面的是错误的列表嵌套用法：<ul><li>列表项1</li><li>列表项2</li><ul><li>列表项21</li><li>列表项22</li></ul><li>列表项3</li></ul>因为ul列表标记只能包含li列表项标记，而且子列表必须位于父列表的列表项li中，所以这里错误的原因在于,粗斜体所示部分标记直接将ul包含在ul中，而没有位于li内。例选择合适的HTML标记实现图3.4呈现的效果。参照图3.4，按以下顺序要求逐步实现：调整合适尺寸，显示商家LOGO图片。显示灰色段落文字。显示内容列表。显示底部列表内容。图3.4例3.1示例效果具体实现如下：<!DOCTYPEhtml><html><body><imgsrc="pupu.jpg"width="200px"/><p><fontcolor="gray">朴朴超市是一家30分钟即时配送的移动互联网购物平台。</font></p><ul><li>蔬菜豆制品类</li><li>肉禽类<ul><li>猪肉<ul><li>排骨</li><li>瘦肉</li><li>猪肚</li></ul></li><li>鸡肉</li><li>鸭肉</li><li>牛肉</li></ul></li><li>海鲜水产类</li></ul><fontcolor="gray"><dl><dt>朴朴客服</dt><dd>全国免费热线:400-777-1313</dd><dd>工作时间：周一~周日8：00-22：00</dd><dt>朴朴官网</dt><dd>官网：/</dd></dl></font></body></html>代码说明：行4：显示指定宽度、在当前目录下的图片。行5：显示灰色的段落文本。行6~24：使用嵌套列表，其中行7是单纯列表项；行8列表项包含子列表，其首行文本作为子列表标题，即行9；行10~行21为二级列表，而行11为三级列表的标题，其又包含三级列表，即行12~行16。使用列表嵌套的基本思路时，首先列出一级列表，再以一级列表的列表项中，添加二级列表，以此顺序创建多级列表。行25和行33：将包含的文本都使用font标记统一设置字体样式。行26~32：定义列表的具体应用，dl包含多组标题项dt，每个dt之后可以添加任意多个描述项。课堂练习根据给出的素材和效果，使用所学的内容来实现。效果素材百度糯米-便宜实惠，品质保证，服务专业！麻辣烫/冒菜美食中餐/家常菜夏日饮品米芝莲：24元沪上阿姨：12.90元哆哆鲜奶吧：30元黄记玉米汁：80元创意菜/私房菜联系客服人员:邮箱：nuomihelp@周一至周日9:00-22:00客服电话免长途费4006-888-887参考答案：<!DOCTYPEhtml><html>

<imgsrc="./bdnm.png"/>

<!--麻辣烫/冒菜

美食

中餐/家常菜

夏日饮品

米芝莲：24元

沪上阿姨：12.90元

哆哆鲜奶吧：30元

黄记玉米汁：80元

创意菜/私房菜-->

<ultype="disc">

<li>美食

<ultype="circle">

<li>夏日饮品

<ultype="square">

<li>哆哆鲜奶吧：30元</li>

<li>黄记玉米汁：80元</li>

</ul>

</li>

</ul>

</li>

</ul>

<fontcolor="gray">

<dl>

<dt>联系客服人员:</dt>

<dd>邮箱：nuomihelp@</dd>

<dd>周一至周日9:00-22:00</dd>

<dt>客服电话免长途费</dt>

</dl>

</font></body></html>本章目标：掌握列表的分类和应用场景。掌握无序、有序列表的标记、属性和属性取值能够使用嵌套列表在WEB页面实现数据项展示目标体现：能独立实现课堂练习中提出的要求。1.列表分类2.无序列表和有序列表标记和属性、属性取值3.嵌套列表使用4.定义列表简单应用练习题一、填空1.列表有三种类型，分别是_________,________和___________。2.ul是_____________列表标记，有序列表的标记是_________。3.ul的type属性表示列表项的符号类型，取值有______、______、______和______。4.ol中的type属性表示列表项的编号类型，start表示起始编号。5.dl是_______列表，包含子标记_______和_________。二、判断1.无序列表和有序列表的标记之间只能包含列表项标记（√）。2.列表项是一个容器标记，可以包含文本、图片、标题和段落等其他标记（√）。3.当type属性取值为none时，有序列表和无序列表效果相同（√）。4.无序列表中的列表项可以使用与其他列表项不同的符号（√）。5.无序列表中的列表项可以改变当前编号，其后续的列表项编号不会顺延（×）拟融入课程思政/劳动教育/创新创业内容：以京东商城对比淘宝、优衣库等电子商务网站，结合列表展示商品列表来强调用户习惯。教学后记：通过练习，学习效果基本达到预期。说明：教案编写应以一次课（一般2学时）为单位编写，重复班授课可不另填写教案。注：填写后，所有涂黄提示应删去。

W3第4次课：链接、图片热点与多媒体第次课4课题链接、图片与多媒体教学目标与要求：1.掌握链接分类；链接各个属性：href、target、name（锚点名）、title(通用属性）2.理解和掌握相对URL及其用法。3.掌握锚点链接的使用：跳转转到当前页面指定位置、外部页面指定位置4.掌握框架iframe属性：src、name;掌握链接的target属性中_top、_parent和框架名的使用5.理解图片热点概念，掌握当热点区域为矩形或圆时的用法。授课类型(请打√)：理论课R讨论课□实验课□习题课□上机□辅导□其他□教学重点：掌握超链接标记、属性和使用理解绝对路径和相对路径的概念教学难点：嵌入式框架的使用图片热点区域的创建教学方法和手段：教学方法：课堂讲授、实例演示与实操教学手段：多媒体课件教学内容及课堂设计(可续页)：教学内容主要包括：超链接概念、分类、属性；页面链接、锚点链接、下载链接、邮件链接和空链接的具体应用；图片热点；多媒体播放。授课内容：一、超链接1.1基本概念超链接是从一个页面指向其他目标的一种链接方式。超链接根据目标类型不同，可以分为网页链接、锚点链接、文件下载链接和邮件链接，此外，还有空链接；根据链接资源的不同，可以分为文本链接和图片链接。1.2网页链接网页链接是在页面中指向其他目标页面的链接。可以是文本链接，也可以是图片链接。其用法如下：<ahref="目标页面URL"target="目标窗口"title="链接提示">文本或图片</a>用法说明：href属性：目标页面的URL，取值可以是绝对位置，也可以相对位置，甚至可以是#或空字符串值。取值为值为#，表示指向当前页面顶部，再次访问该页面时不会刷新，但会回到页面顶部；取值为为空字符串””，每次单击链接指向并刷新当前页面。绝对位置URL：表示目标页面的URL是其他外部网站的页面，例如/index.html，绝对位置使用“协议://域名/文件名”格式。相对位置URL：表示指向当前网站的其他页面，其他页面的位置相对当前页面的位置来设定。相对位置可以使用./（点斜杠，通常可以省略）表示当前页面所在的目录，也可以使用../(点点斜杠)表示当前页面所在目录的上一级目录。例如href=”./login.html”，表示与当前页面位于同一个目录的login.html页面，也可以直接写为：href=”login.html”；或者href=”./admin/main.html”，表示与当前页面位于同一目录中的images文件夹下的main.html；再如，href=”../user/user.html”，表示当前页面所在目录的上一级目录中user文件夹下的user.html文件。target属性：表示目标页面打开的位置。取值有：_self（当前窗口，默认值）、_blank（新窗口）、_top（顶部窗口）、_parent（父窗口）和name（框架窗口），其中，后三个属性与嵌入式框架iframe有关。title属性：鼠标在链接上悬停时显示的提示信息。1.3锚点链接锚点链接也叫书签，通过锚点链接，可以快速跳转到目标页面指定的位置（锚点）。比如当一个页面内容很长，用户拉动到页面底部后如果要快速回到页面顶部浏览，那么可以通过创建锚点链接实现。锚点链接的用法分两步实现：创建锚点在页面需要跳转的位置创建锚点：<aname="锚点名">锚点处文本</a>锚点定义使用链接标记a和name属性，name属性指定当前页面具有唯一值的锚点名。链接到锚点使用链接标记指向锚点，注意href属性值格式为：”#锚点名”，如：<ahref="#锚点名">标记文本</a>如果要跳转到其他页面的锚点位置，使用“目标页面URL#锚点名”，如：<ahref=“目标页面URL#锚点名”>标记文本</a>单击锚点链接时，将使锚点位置作为浏览器窗口首行内容，移动到浏览器顶端。但注意，只有当页面高度超出了浏览器窗口可视范围时（页面出现滚动条），单击锚点链接才有效。1.4其他链接（1）下载链接当链接目标是一个浏览器不能识别的文件类型时，例如zip、rar、docx、xlsx等文件类型，浏览器将提供对话框方式提供给用户下载或者选择合适的应用程序来打开，而HTML文件、图片文件，甚至PDF文件等这些浏览器能识别的文件将会直接在浏览器窗口打开。例如：<ahref="down/1.rar">下载1.rar文件</a>（2）邮件链接可以使用超链接来构建邮件的基本信息，在单击该链接时，将会启动本地邮件管理程序来发送邮件。以下面邮件为例，介绍邮件链接的用法：<ahref="mailto:191085153@?subject=问候！&body=大家好!&cc=111@;222@&bcc=333@">发送邮件</a>用法说明：href属性：以mailto：开始，冒号后面为邮件地址，即收件人电子邮箱。?(问号)：表示邮件参数，即邮件信息，多个参数使用&分隔。subject：邮件标题。&：问号后面各个参数信息分隔符。cc：抄送，同时发给其他收件人时的收件人邮箱列表，多个收件人邮箱使用分号（；）分隔。bcc：密送，不显示在发送列表中的收件人邮箱，多个密送邮箱使用分号（；）分隔。注意，单击邮件链接并不会自动发送邮件，而是通过本地安装的邮件管理程序来发送。1.5嵌入式框架如果要在一个页面的指定位置显示其他页面的内容，例如共享的导航页面、来自其他网站的视频文件、地图定位插件页面等，可以使用嵌入式框架iframe。iframe可以使其他页面的内容的与当前页面无缝结合在一起，因此如果多个页面使用相同的内容，可以将相同内容单独作为页面，然后使用iframe包含进来，从而实现共享页面。其用法如下：<iframesrc="初始页面"name="框架名"其他属性>你的浏览器不支持框架，无法看到框架的内容</iframe>用法说明：iframe：成对标记，标记之间的文本是在浏览器不支持框架时显示的提示信息。src属性：在嵌入式框架中初始显示的页面。name属性：框架唯一的名称。目的是让其他链接通过设置target属性为框架名，从而使目标页面在指定的框架窗口中打开。其他属性包括：frameborder：取值为yes或no，表示是否显示框架边框；scrolling：取值为yes或no，表示是否出现滚动条；width/height：框架的宽度和高度。marginwidth：框架左右边距，单位为px（像素）；marginheigh：框架上下边距，单位为px。二、图片热点在前面我们介绍了图片标记img用于在页面显示图片，而图片热点是指图片被划分为不同形状的区域，这些区域能够在被单击时跳转到不同的页面。例如我们可以实现单击地图不同省份区域，跳转到省份对应的页面查看当前省份的天气预报，这对用户而言有良好的操作体验。而这些能够被单击并响应跳转的图片区域，我们称之为图片热点区域。要实现图片热点功能，需要按照以下的步骤来实现：（1）显示源图片，并指定需要映射的热点区域<imgsrc=”图片URL”usemap=”#热点区域名”/>说明：图片URL：需要创建热点区域的源图片，该图片也将显示在页面中。usemap属性：已创建好的热点区域的名称，注意名称前带“#”号，下面将介绍如何创建热点区域。（2）创建热点区域，其用法如下：<mapname="热点区域名"><areashape="形状1"coords="坐标值"href="目标页面URL"/><areashape="形状2"coords="坐标值"href="目标页面URL"/></map>说明：map标记：表示这是图片对应的热点区域，name为该区域唯一名称。area标记：map的子标记，创建一个指定形状的热点区域。area标记包含以下属性：shape属性：设置热点区域形状，取值为：rect（矩形）、circle（圆）和poly（多边形）。coords：对应热点形状的坐标值，如果shape取值是rect，那么取左上角和右下角的坐标(x,y)，使用逗号连接起来作为coords值；如果是shape取值是circle，那么取值为圆心坐标和半径值；如果shape取值为poly，那么取多边形各个特征点的坐标值。注意coords每个取值都使用逗号分隔，且每个坐标值都是相对图片左上角为(0,0)距离。可以借助PS，或者Window中的画图程序来获取坐标点。href属性：热点区域对应的目标页面位置。title属性：鼠标悬停在热点区域时显示的提示信息。三音视频播放如果要在页面中播放视频或音频，可以使用HTML5中的新标记video和audio。（1）视频播放videovideo标记的用法如下：<videosrc="视频文件"其他可选属性>你的浏览器不支持video标记</video>用法说明：src属性：视频文件URL，可支持的视频格式类型有MP4、WebM和Ogg三种。目前主流浏览器均支持该三种视频格式文件的播放。其他可选属性包括：controls：单属性，表示是否显示播放器的控制面板（比如播放/暂停按钮）。如果要显示，则添加该属性，否则不要添加。所有的单属性用法都相同，即需要该功能时才加上。autoplay：单属性，表示是否自动播放。width：视频界面宽度。height：视频界面高度。preload：单属性，是否预加载视频。如果打开页面的同时加载视频，则加上该属性；如果添加了autoplay属性，那么该属性无效。muted：单属性，表示是否静音播放视频。poster：视频封面图片的URL。loop：单属性，是否循环播放。此外，标记之间的文本表示在浏览器不支持video标记时显示的提示文字。例如，下面标记片段在页面插入视频，视频不自动播放、设置视频封面、静音以及播放结束后循环播放。<videosrc="huwei_Mate_60.mp4"poster="huwei_Mate_60.png"width="400px"height="300px"controlsmutedloop>你的浏览器不支持video</video>页面打开的初始效果如图所示。（2）音频播放audioaudio支持的音频格式文件类型为MP3、Wav和Ogg，主流的浏览器都支持MP3格式的音频文件，其用法如下：<audiosrc="音频文件URL"其他可选属性>你的浏览器不支持Audio标记</auido>用法说明：src属性：音频文件URL。其他属性：control：单属性，是否显示播放器的控制面板，如果使用该属性，则向用户显示音频控件（比如播放/暂停按钮），如果不使用该属性，那么页面将隐藏播放界面，实现背景声音或背景音乐播放。autoplay：单属性，如果使用该属性，则音频在就绪后马上播放。muted：单属性，如果使用该属性，则音频静音播放。loop：单属性，音频是否循环播放。preload：网页加载时，视频是否同时加载。例如，下面标记片段在页面播放mp3文件，显示控制界面、自动并循环播放。<audiosrc="./1.mp3"controlsautoplayloop>你的浏览器不支持audio</audio>运行效果如图所示。本章目标：1.掌握链接分类；链接各个属性：href、target、name（锚点名）、title(通用属性）2.理解和掌握相对URL及其用法。3.掌握锚点链接的使用：跳转转到当前页面指定位置、外部页面指定位置4.掌握框架iframe属性：src、name;掌握链接的target属性中_top、_parent和框架名的使用5.理解图片热点概念，掌握当热点区域为矩形或圆时的用法。目标体现：熟悉并掌握本章示例；能独立完成本章所给出的练习本章练习3.1列表一、填空1.列表有三种类型，分别是_________,________和___________。2.ul是_____________列表标记，有序列表的标记是_________。3.ul的type属性取值有_______、________、________和________。4.ol中的type表示列表项的编号类型，start表示起始编号。5.dl是_______列表，包含子标记_______和_________。二、判断1.无序列表和有序列表的标记之间只能包含列表项标记（√）。2.列表项是一个容器标记，可以包含文本、图片、标题和段落等其他标记（√）。3.当type属性取值为none时，有序列表和无序列表效果相同（√）。4.无序列表中的列表项可以使用与其他列表项不同的符号（√）。5.无序列表中的列表项可以改变当前编号，其后续的列表项编号不会顺延（×）。3.2超链接一、填空1.按目标类型分，超链接可以分为：_______、_______、________、_______和________。2.按链接内容分，超链接可以分为______和_______。3.超链接的target属性取值可以有_____、_____、______、______和______。4.超链接路径中的./表示____________，../表示__________________。判断超链接的相对路径一般应用于指向本网站的其他页面（）。超链接的绝对路径一般应用于指向外部网站的页面（）空链接指向当前页面（）。可以使用超链接实现文件下载功能（）。邮件链接可以直接发送邮件（）。锚点链接只能跳转到当前页面的锚点位置（）。锚点链接可以跳转到外部网站页面的锚点位置（）。当链接属性href取值为#时，可以实现跳转到页面顶部功能（）。超链接路径中的./表示当前页面所在的目录，可以省略（）。如果要在一个页面包含其他页面的内容，可以使用嵌入式iframe（）。嵌入式框架iframe可以实现页面局部刷新的功能（）。3.3图片热点一、填空1.图片热点区域的形状可以有______、______和_______。2.假如shape=rectcoords=20,80,40,100，那么20,80表示______，40，100表示______。3.假如有shape=circlecoords=20,40,12，那么20,40表示______，12表示______。4.假如图片热点区域名称为ifrm，那么在图片中创建热点的用法是：<imgsrc=”图片URL”________________/>。3.4音视频播放一、填空1.视频播放的标记是_______；音频播放的标记是__________。2.音、视频播放标记中的属性controls表示______；autoplay表示_______；muted表示__________；loop表示__________；preload表示__________。拟融入课程思政/劳动教育/创新创业内容：万丈高楼平地起，强调基础重要性，通过京东网站结合本章内容，激发学生学习兴趣。教学后记：本章内容较多，强调课后多练习，通过模仿例子实现来加强记忆。说明：教案编写应以一次课（一般2学时）为单位编写，重复班授课可不另填写教案。注：填写后，所有涂黄提示应删去。

W3第5次课：实验一HTML文档格式化第5次课项目名称：文档格式化教学目标与要求：能够使用HTML基础标记和常用标记格式化文档。教学条件：（教学场地、设施、设备、软件等要求说明）：实验室：实验室；安装VSCODE、火狐、chrome等浏览器软件教学组织（分组轮换、讲解与训练安排等）：独立完成、教师指导。安全事项：勿擅自处理计算机及其相关设备的故障。有问题报告老师。教学重难点（关键技术）：基础标记：标题、段落、图片、水平线、换行；常用标记：字体、字形、字号；列表、超链接；教学内容及课堂设计(可续页)：按给出的素材，完成下图效果。一、文档排版1.标题3，文字居中：2023年中国本科生就业报告一览；2.段落，字体颜色为#999、文字居中；来源：/article/138881.html；3.段落，2023大小6号字，1158万大小6号字，红色，万字为上标】2023年高校毕业生估算为1158万人！创历史新高。让我们看看23年之前的本科生就业形势吧！；4.图片左对齐，文字环绕，括号中的文本为红色；5.单击图片，在新页面打开该图片。二、使用无序列表实现下图效果。图片：宽度100px，单击在新窗口打开原图。段落文字：品名加粗；段落文字：原价灰色、删除线；当前价红色。参考代码<h3align="center">2023年中国本科生就业报告一览</h3><palign="center"><fontcolor="#999">来源：/article/138881.html</font></p><p><p><fontsize="6"><b>2023</b></font>年高校毕业生估算为<fontsize="6"color=red>1158<sup>万</sup></font>人！创历史新高。让我们看看23年之前的本科生就业形势吧！</p></p><p><ahref="./分布图.png"target="_blank"><imgsrc="./分布图.png"align="left"width="300px"title="点击放大图片"/></a><fontcolor="#666">国家统计局数据显示，2022年全国城镇非私营单位、城镇私营单位就业人员年平均工资分别较上年名义增长6.7%、3.7%，增幅下降（<fontcolor="red">2021年城镇非私营单位：9.7%，城镇私营单位：8.9%</font>）。多重超预期因素影响下，大学生薪资增速明显放缓。2022届本科、高职毕业生平均月收入（<fontcolor="red">本科：5990元，高职：4595元</font>）较2021届分别增长了3%、2%，起薪增幅较上一届（<fontcolor="red">2021届本科、高职起薪增幅分别为7%、6%</font>）下降了57%、67%。近六成本科生、超八成高职生起薪在6000元以下。从应届大学生起薪分布来看，2022届本科、高职毕业生毕业半年后平均月收入在6000元以下的比例分别为57.7%、82.1%，在6000~8000元的比例分别为24.1%、11.9%，在8000元以上的比例分别为18.2%、6.0%。其中，2022届本科毕业生毕业半年后平均月收入在10000元以上的比例仅为6.9%，显示毕业即起薪过万的仅是较少数。不过对比2018届，2022届大学毕业生薪资在6000元以下的比例减少（<fontcolor="red">本科、高职分别减少了16.5个、7.3个百分点</font>），而在6000元及以上的比例增加。</font></p>拟融入课程思政/劳动教育/创新创业内容：教学后记：通过实验，个别学生对标记不够熟悉，环境不够熟悉，需要强调多动手实践。说明：教案编写应以一次课（一般2学时）为单位编写，重复班授课可不另填写教案。注：填写后，所有涂黄提示应删去。

W4第6次课：表格与表单第次课6课题表格与表单教学目标与要求：1.掌握设计表格所有标记和属性。2.掌握表格行标记的属性及设置方法。3.掌握表格单元格的跨行与跨列属性的设置方法。4.掌握表格的嵌套方法。5.学会使用表格进行简易网页布局授课类型(请打√)：理论课R讨论课□实验课□习题课□上机□辅导□其他□教学重点：1.表格及其属性的使用2.在表格中嵌入各种页面元素3.表单结构；4.表单元素的应用教学难点：表格行列合并；表单结构、属性的理解教学方法和手段：教学方法：课堂讲授、实例演示与实操教学手段：多媒体课件教学内容及课堂设计(可续页)：教学内容主要包括：1.表格；2.表单一表格表格主要用于展示数据，也可以用于页面布局，或者元素定位，例如使登录表单元素对齐。1表格结构和表格属性（1）表格结构一个完整表格的结构包含四个部分：表格标题、表头、表体和表尾。如图3.17所示。图3.17表格结构在HTML中，表格使用table标记表示，在table标记中只能包含表格标题caption、表头thead、表体tbody和表尾tfoot四个标记，不能有其他标记。其中表格标题自动居中显示，表头只有一行，代表列标题；而表体可以包含0行以上的数据；表尾也只有一行，表尾通常用来显示统计类数据，例如总计、平均值等。表格结构的HTML代码如下：<table><caption>表格标题</caption><thead></thead><tbody></tbody><tfoot></tfoot></table>说明：表格使用成对标记table，只能包含标题、表头、表体和表尾。除了表格标题，其他三部分都可以只包含行标记tr，而tr只包含一个或多个内容单元格标记td。表头thead表示表格的标题行，只包含一个tr行标记，而tr只能包含标题单元格标记th或内容单元格标记td，两者都是表格数据的容器。th与td的区别在于，th仅用于表头行，且文本是加粗的，目的是突出标题的效果。表体tbody是表格主体数据部分，包含一个或多个行标记tr。每一行对应一对tr标记，每个tr标记包含一个或多个内容单元格标记td。td用来包含具体数据，例如文本、段落、图片或其他元素，也可以没有数据（空单元格）。表尾tfoot通常用来显示表体数据的统计信息，位于表格末尾。表尾不是必须的。如果存在表尾，那么表尾通常只有一行，且只包含tr及其子标记td。表格结构示意图如图3.18所示、图3.18表格结构示意图下面是图3.17完整表格标记。<tableborder="1"><caption>学生成绩表</caption><thead><tr><th>姓名</th><th>班级</th><th>学号</th><th>平时成绩</th><th>期末成绩</th><th>总评</th></tr></thead><tbody><tr><td>张三</td><td>软工211</td><td>01</td><td>25</td><td>70</td><td>95</td></tr><tr><td>李四</td><td>软工211</td><td>02</td><td>20</td><td>75</td><td>95</td></tr></tbody><tfoot><tr><td></td><td></td><td>平均分：</td><td>22.5</td><td>72.5</td><td>95</td></tr></tfoot></table>注意：表格所有的数据只能放在td标记中，不能放在td之外。默认情况下，每一行单元格数都应该是相同的。表格标题、表头和表尾不是必须的，可以省略，这样，一个table标记通常只包含tr和td标记，如图3.19所示。图3.19简化结构的表格示意图图3.20就是一个简化结构的表格，仅用于列出数据项。图3.20简化结构的表格具体实现如下：<tableborder="1"><tr><td>姓名</td><td>班级</td><td>学号</td></tr><tr><td>张三</td><td>软工222</td><td>2022190301</td></tr><tr><td>李四</td><td>软工222</td><td>2022190302</td></tr></table>说明：thead和tbody、tfoot标记是可以省略的。所有的数据都应该放在td标记之间，标题行可以使用td来代替th，区别仅在于文本无加粗效果。如果需要，添加最后一行作为表尾行使用。表格默认无边框线，这里使用了表格属性border，目的是显示表格边框线。（2）表格属性常用的表格属性如下：border：表格边框，单位为px（像素），默认值为0，即为边框。cellpadding：单元格内边距，即文本离上、下、左、右的间距，单位为px。cellspacing：单元格外边距，即单元格与其他单元格之间的间隔，单位为px。width：表格宽度，单位为px或%（百分比），如果使用%，则相对父元素宽度的百分比值，当前指相对页面宽度。如果设置了宽度，则单元格宽度将按比例自动缩放。height：表格高度，单位为为px或%（百分比）。如果设置了高度，则单元格的高度将按比例缩放。align：表格在页面的对齐方式，取值为取值为left、right和center,分别代表左、右和居中对齐。background：表格背景图，值为图片文件的URL。bgcolor：表格背景色，取值可以使颜色关键字，或者16进制值。frame：表格外边框样式，可以指定表格的上、下、左、右边框线，边框粗细取决border值，默认为1px。取值为：none（无边框线）、above(只有上边框)、below(只有下边框)、vsides（只有上下垂直边框）、hsides（只有左右水平边框）、lhs(左侧边框)和rhs(右侧边框)。rules：行、列边框线样式。取值为：all（包含行、列边框）、rows（只有行边框）、cols（只有列边框）。演示与讲解制作一个课程表表格在页面居中，

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

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

《Web前端开发(HTML5+CSS3+JavaScript)》教案严健武第1-9次课：Web前端开发概述及HTML基础- 盒子模型、文本与背景

文档简介

温馨提示

最新文档

评论

《Web前端开发(HTML5+CSS3+JavaScript)》 教案 严健武 第1-9次课：Web前端开发概述及HTML基础- 盒子模型、文本与背景

文档简介

温馨提示

最新文档

评论

相关文档

《Web前端开发(HTML5+CSS3+JavaScript)》教案严健武第1-9次课：Web前端开发概述及HTML基础- 盒子模型、文本与背景