HTML 前端 实例与教程 3_第1页
HTML 前端 实例与教程 3_第2页
HTML 前端 实例与教程 3_第3页
HTML 前端 实例与教程 3_第4页
HTML 前端 实例与教程 3_第5页
已阅读5页，还剩22页未读， 继续免费阅读

下载本文档

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

文档简介

单元3HTML5排版HTML5+CSS3+JavaScriptWeb前端开发实例教程（慕课版）【目录】3.1HTML5表格3.1.1表格属性3.1.2<th>和<td>的属性3.2HTML5框架3.3HTML5列表3.3.1有序列表3.3.2无序列表3.3.3自定义列表3.3.4列表嵌套【商业实例】“仿写淘宝首页”项目——

编写“猜你喜欢”模块任务一开发商品卡片任务二开发商品列表【综合实训】制作新闻列表页【单元小结】目录【学习导读】每一个网站都有其独特的风格，良好的网页布局和排版是吸引用户浏览网站的重要因素之一。HTML5提供了一些现成的标签来控制文本的布局，只有合理运用这些标签才能搭建出干净整洁的网页。学习HTML排版是进行网页布局和设计的基础，HTML5排版涉及使用HTML5来控制文本、图像和其他内容在网页中的位置和样式。本单元将详细介绍HTML5的表格、框架和列表的使用方法。学习导读【学习目标】知识目标1．掌握HTML5表格的基本使用方法。2．掌握HTML5框架的使用方法。3．掌握HTML5列表的使用方法。能力目标1．能够独立开发HTML5表格。2．能够使用HTML5框架实现嵌套。3．能够创建有序列表和无序列表。素质目标1．培养学生排版组合的能力。2．培养学生良好的思维能力。学习目标思维导图3.1HTML5表格HTML5表格是一种用于展示和组织数据的强大工具。表格用<table>标签定义。每个表格均有若干行（用<tr>标签定义），每行被分割为若干单元格（用<td>标签定义）。字母td指tabledata（表格数据），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。常用的表格标签标签描述<table>表格<th>表格的表头单元格<tr>表格的行<td>表格单元格<caption>表格标题<thead>表格的头部区域<tbody>表格的中间主体部分<tfoot>表格的底部区域表格结构3.1HTML5表格创建一个2行3列的表格，第一行是表头，第二行是表格数据，表格默认是没有边框的。代码如下所示（实例位置：单元3/3-1.html）。运行效果3.1HTML5表格利用表格属性，我们可以定义表格的宽高、背景颜色和对齐方式等，让表格呈现出不同的视觉效果。3.1.1表格属性常用的表格属性属性值描述border像素，默认值1规定表格单元是否拥有边框。3.1HTML5表格3.1.1表格属性创建一个受理统计系统的表格，表头包括受理员、受理数、自办数、直接解答、同意、比例、数量、建议件、诉求件和咨询件，为表头和表格内容设置不同的背景颜色。代码如下所示（实例位置：单元3/3-2.html）。运行效果3.1HTML5表格3.1.2<th>和<td>的属性<th>和<td>常用属性属性值描述colspan列数规定单元格可横跨的列数rowspan列数设置单元格可纵跨的行数下面使用HTML5表格制作一个计算器，计算器包含数字、运算符和计算结果显示屏。代码如下所示（实例位置：单元3/3-3.html）。3.1HTML5表格3.1.2<th>和<td>的属性运行效果3.2HTML5框架HTML5中有很多框架标签，但是大多数都弃用了，沿用至今的是<iframe>标签。使用<iframe>

</iframe>可以将框架置于一个HTML文件内，实现HTML网页的嵌套展示。使用<iframe>时需要提供一个嵌套的网页地址，并将地址赋给src属性，语法如下。常用的表格标签<iframesrc="URL"></iframe>属性值描述namename规定<iframe>的名称。srcURL规定在<iframe>中显示的文档的URL。3.2HTML5框架我们可以修改<iframe>链接的网页，必须使用name属性来修改。比如可以动态改变<iframe>的src属性的值，在<iframe>标签上添加name属性，在<a>标签上设置target属性的值为name属性的值，并将<a>标签的href属性值设置为第三方网站的链接。代码如下所示（实例位置：单元3/3-4.html）。运行效果3.3HTML5列表3.3.1有序列表常用的有序列表标签标签描述<ol>有序列表<li>有序列表和无序列表的一个列表项有序列表的type属性值属性描述type="1"数字序号type="a"有小写字母序号type="A"大写字母序号type="i"小写罗马序号type="I"大写罗马序号3.3HTML5列表3.3.1有序列表例如设置不同类型的有序列表，前面的序号标识符会递增，代码如下所示（实例位置：单元3/3-5.html）。运行效果3.3HTML5列表3.3.2无序列表常用的无序列表标签无序列表的type属性值标签描述<ul>无序列表<li>有序列表和无序列表的一个列表项属性描述type="circle"空心圆type="disc"实心圆type="square"实心方块3.3HTML5列表3.3.2无序列表无序列表项前面的标识符有实心圆、空心圆和实心方块，例如分别设置3种不同类型的无序列表，代码如下所示（实例位置：单元3/3-6.html）。运行效果3.3HTML5列表3.3.3自定义列表常用的自定义列表标签标签描述<dl>自定义列表<dt>自定义列表的标题<dd>自定义列表的内容自定义列表前面没有标识符，但是有固定长度的间距。例如设置一个自定义列表，分别设置标题和内容，代码如下所示（实例位置：单元3/3-7.html）。3.3HTML5列表3.3.3自定义列表<!DOCTYPEhtml><html><head> <metacharset="utf-8"> <title>定义列表</title></head><body> <dl> <dt>自定义列表</dt> <dd>自定义列表的内容（前面有固定长度的间距）</dd> </dl></body></html>运行效果3.3HTML5列表3.3.4列表嵌套运行效果列表和其他标签一样，可以相互嵌套，并且可以实现不同的效果，以满足不同的布局需求。例如在自定义列表中嵌入无序列表和有序列表，代码如下所示（实例位置：单元3/3-8.html）。【商业实例】“仿写淘宝首页”项目——编写“猜你喜欢”模块任务一开发商品卡片01OPTION结构分析从图中

我们可以发现商品卡片主要由3个部分构成，采用左右布局。左边展示商品的图片，右边为上下结构，上面是商品名称和商品活动标签，下面是商品的价格。可以用<div>标签作为商品卡片的容器，使用<img>标签插入商品图片。使用<div>标签定义商品名称，标题里面使用<img>标签在商品名称中插入商品活动标签图片，商品名称使用<a>标签包裹，因为单击商品名称可跳转到商品详情页。商品价格部分使用<div>标签定义，其中的货币符号使用<span>标签定义，因为货币符号字体比价格小，且这样方便后续采用不同的样式。【商业实例】“仿写淘宝首页”项目——编写“猜你喜欢”模块任务一开发商品卡片02OPTION编写代码<divclass="item_link"><imgsrc="imgs/goods.jpg_.webp"/><divclass="goods_info"><imgsrc="imgs/12_12.png"/><ahref="#"target="_blank">厚味小巷烤鱼料<br/>200g纸包鱼家用商用烤鱼酱三种口味万州烤鱼料</a></div><divclass="goods_price"><span>¥</span>14.6</div></div>【商业实例】“仿写淘宝首页”项目——编写“猜你喜欢”模块任务二开发商品列表01OPTION结构分析从图中我们可以发现淘宝“猜你喜欢”模块分为上下两个部分，上面是“猜你喜欢”标题和一个活动标签，下方是商品列表，而商品列表由一个个商品卡片组合而成。我们可以用<div>标签将整个“猜你喜欢”模块包裹在一起，“猜你喜欢”标题用<h3>标签定义，里面分别用<span>标签和<img>标签包裹标题文字和活动标签，因为它们的样式不一样，需要使用不同标签进行区分。商品列表部分使用<div>标签定义，将所有商品卡片的布局内容放在商品列表里面即可，商品列表中可以放任意数量的商品卡片。【商业实例】“仿写淘宝首页”项目——编写“猜你喜欢”模块任务二开发商品列表02OPTION编写代码【综合实训】制作新闻列表页二、实训内容一、实训目的掌握HTML5列表的排版方法。掌握无序列表标签的用法。ACB创建HTML5模板创建无序列表作为新闻列表的容器编写新闻，包括新闻

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

温馨提示

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

最新文档

评论

0/150

提交评论