项目二食品企业web前端之列表制作

食品企业WEB前端设计基础项目二食品企业WEB前端之列表制作

食品企业WEB前端之列表制作项目任务描述综合运用表格、列表、HTML5新标签来优化“食品企业网站”列表标签HTML5新标签目录表格标签表格标签

依据下图的草图结构，使用HTML5表格、列表等标签来优化网站页面。表格标签表格标签1.表格的定义与属性table就是用来展示数据显示。举例：<table><tr><td></td><td></td><td></td></tr></table>HTML表格通过<table>标签来定义。简单的HTML表格由

table元素以及一个或多个

tr、th或td元素组成。tr元素定义表格行，th

元素定义表头，td元素定义表格单元。表格标签HTML表格也可能包括caption、thead、tbody以及tfoot等元素。<tfoot>标签用于对HTML表格中的表注（页脚）内容进行分组。<caption>标签定义表格的标题。<thead>标签定义表格的表头。该标签用于组合HTML表格的表头内容。<thead>元素应该与<tbody>

和<tfoot>元素结合起来使用。<tbody>标签用于对HTML表格中的主体内容进行分组。表格属性表格标签<table>有很多属性，最常用的属性。属性描述width/height表格的宽度（高度），值可以是数字或百分比，数字表示表格宽度（高度）所占的像素点数，百分比是表格的宽度（高度）占浏览器宽度（高度）的百分比align表格相对周围元素的对齐方式background表格的背景图片bgcolor表格的背景颜色，不赞成使用，后期通过样式控制背景颜色border表格边框的宽度（以像素为单位）bordercolor表格边框颜色cellspacing单元格之间的间距cellpadding单元格内容与单元格边界之间的空白距离的大小表格属性当表格设置border时，可以表格的边框包括上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态。frame的值描述frame的值描述box显示整个表格边框alove只显示表格的上边框void不显示表格边框below只显示表格的下边框hsides只显示表格的上下边框lhs只显示表格的左边框vsides只显示表格的左右边框rhs只显示表格的右边框表格属性2.单元格的设置数据标签<td>的常用属性属性描述属性描述width/height单元格的宽和高，接受绝对值（如80）及相对值（80%），不赞成使用，后期通过样式控制align单元格内容的水平对齐方式，可选值为：left、center、right等colspan规定单元格可横跨的列数valign单元格内容的垂直对齐方式，可选值为：top、middle、bottom等rowspan规定单元格可横跨的行数bgcolor单元格的背景颜色跨行或跨列的表格单元格。表格属性食品企业网站表格练习表格综合练习列表标签1.无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于<ul>标签。每个列表项始于<li>。HTML支持有序、无序和定义列表。语法：<ultype=编号类型><li>第一项</li><li>第二项</li><li>第三项</li></ul>type决定列表的图标类型disc表示实心圆circle表示空心圆square表示小方块默认情况下为实心圆列表标签列表标签2.

有序列表有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。语法：<oltype=编号类型start=value>

<li>第一项</li><li>第二项</li><li>第三项</li></ol>type类型描述type=1表示列表项目用数字标号（1,2,3…）type=A表示列表项目用大写字母标号（A,B,C…）type=a表示列表项目用小写字母标号（a,b,c…）type=Ⅰ表示列表项目用大写罗马数字标号（Ⅰ,Ⅱ,Ⅲ…）type=ⅰ表示列表项目用小写罗马数字标号（ⅰ,ⅱ,ⅲ…）列表标签3.嵌套列表有序列表和无序列表的使用格式基本相同。举例：<ultype="circle"><li>北京</li><li>上海</li>

<oltype="1"start="6"reversed="reversed">

<li>浦东新区</li>

<li>徐汇区</li>

<li>长宁区</li>

<li>普陀区</li>

</ol>

<li>广州</li>

<li>深圳</li></ul>列表标签4.定义列表使用<dl>标签定义了定义列表（definitionlist），定义列表多用于对术语或名词的描述，同时，定义列表项前面无任何项目符号。举例：<dl><dt>第1项</dt><dd>注释1</dd><dt>第2项</dt><dd>注释2</dd><dt>第3项</dt><dd>注释3</dd></dl>

<dd>

（描述列表中的项目）<dl>标签用于结合<dt><dd>实现

<dt>

（定义列表中的项目）列表标签定义列表的使用。HTML5新标签HTML5结构性标签

HTML5结构性标签分组标签页面交互标签行内语义性标签HTML5的全局属性HTML5结构性标签传统DIV+CSS布局HTML5结构标签结构性标签其实就是语义化的html网页框架。结构性标签，标签本质上和div没有任何区别。借助id与class，通过CSS样式来实现页面布局，没有标准的规范，搜索引擎只能去猜测某部分的功能，文档结构和内容不够清晰。

HTML5结构性标签举例：2section标签定义和用法<section>标签用于对网页的内容进行分区、分块，定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般情况下，section标签通常由内容和标题组成。<section><h1>section是什么？</h1><p>用于对网页的内容进行分区、分块，定义文档中的节</p>

</section>文档中的区段，解释了“section的具体介绍”

HTML5结构性标签注意<section>标签表示一段专题性的内容，一般会带有标题，没有标题的内容区块不要使用section标签定义。根据实际情况，如果article标签、aside标签或nav标签更符合使用条件，那么不要使用section标签。当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div标签而非section。

HTML5结构性标签3article标签定义和用法<article>是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。<article>这是一篇介绍HTML5结构标签的文章</article>例如：新闻提供者的一篇新的文章、一篇博客、一个用户评价等。

HTML5结构性标签注意举例：<article><header><h1>这是一篇介绍HTML5结构标签的文章</h1><h2>HTML5的历史</h2><p>2017.02.20</p></header><p>文章内容详情</p></article>Article标签会有标题部分，通常包含在header内，有时也会包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论也可以以article的形式嵌入其中。

结构性标签4nav标签定义和用法nav标签代表页面的一个部分，是一个可以作为页面导航的链接组，是navigator的缩写。举例：<nav><ul><li><ahref="#">首页</a></li><li><ahref="#">企业新闻</a></li><li><ahref="#">单门设置</a></li><li><ahref="#">工程师队伍</a></li></ul></nav>nav标签可以应用于传统导航条、侧边栏导航、页内导航、翻页操作等场合。

结构性标签5aside标签定义和用法aside标签用来装载非正文的内容，被视为页面里面一个单独的部分。举例：aside标签可以被包含在article标签内作为主要内容的附属信息。<article><h1>文章标题</h1><p>文章内容</p><aside>附属信息部分</aside></article>也可以在article标签之外使用，作为页面或站点全局的附属信息部分。例如广告、友情链接、侧边栏、导航条等等。HTML5的全局属性标签6header标签定义和用法header标签定义文档的页眉，通常是一些引导和导航信息。举例：<header>标签不局限于写在网页头部，也可以写在网页内容里面。。<header><h1>网站标题</h1><h2>网站副标题</h2></header>通常<header>标签至少包含（但不局限于）一个标题标记（<h1>-<h6>），还可以包括<hgroup>标签，还可以包括表格内容、标识Logo、搜索表单、<nav>导航等。HTML5的全局属性标签7footer标签定义和用法footer标签定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。举例：作为页面的页脚时，一般包含了版权、相关文件和链接。<footer>Copyright@淮信科技有限公司</footer>footer标签和<header>标签使用基本一样，可以在一个页面中多次使用，也可以在article标签或者section标签中添加footer标签，那么它就相当于该区段的页脚了。结构性标签分组标签主要完成web页面区域的划分，确保内容的有效分隔。主要包括figure标签、hgroup标签、figcaption标签、dialog标签等。分组标签

分组标签1figure标签和figcaption标签figure标签用于定义独立的流内容，例如图像、图表、照片、代码等，一般指一个单独的单元。figcaption标签用于为figure标签组添加标题，一个figure标签内最多允许使用一个figcaption标签，该标签应该放在figure标签的第一个或者最后一个子标签的位置。

分组标签figure标签和figcaption标签的使用。

分组标签2hgroup标签hgroup标签可以将标题或者子标题进行分组，通常它与h1~h6标签组合使用，一个内容块中的标题可以通过hgroup标签组成一组。

分组标签hgroup标签。

分组标签3dialog标签dialog标签主要用于人与人之间的对话。该标签还包括dt和dd两个组合标签，他们常常同时使用。dt表示说话者，dd表示说话者说的内容。兼容性ChromeSafari目前只有Chrome和Safari6支持<dialog>标签。注意

分组标签交互性标签主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础，主要包括details标签、menu标签、commond标签等。页面交互标签页面交互标签1details标签和summary标签details标签用于描述文档或文档某个部分的细节。summary标签经常与details标签配合使用，作为details标签的第一个子标签，用于为details定义标题。标题是可见的，当用户单击标题时，会显示或隐藏details中的其他内容。页面交互标签对details标签和summary标签的用法进行演示。页面交互标签2menu标签与commond标签<menu>标签定义命令的列表或菜单，<menu>标签用于上下文菜单、工具栏以及用于列出表单控件和命令。

例如menu<menutype="toolbar"><li><menulabel="文件"><buttontype="button"onclick="file_new()">新建</button><buttontype="button"onclick="file_open()">打开</button>

</li></menu>

<li>其他项</li></menu>页面交互标签command元素表示用户能够调用的命令。<command>标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当command元素位于menu元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。

例如command<menu><commandonclick="alert('HelloWorld')">测试点击!</command></menu>注意：目前所有主流浏览器都不支持<command>和<menu>标签。页面交互标签1progress标签progress标签表示任务的进度或进程。例如：<progressvalue="60"max="100"></progress>需要注意的是value和max属性的值必须大于0，且value的值要小于或等于max属性的值。progress元素的常用属性值有两个，value表示已经完成的工作量，max表示总共有多少工作量。通常

<progress>标签与Javascript一同使用，来显示任务的进度。行内语义性标签progress标签的用法演示。行内语义性标签2meter标签meter标签定义度量衡，为已知范围或分数值内的标量测量。也被称为gauge（尺度）。例如，显示硬盘容量、对某个选项的比例统计等，都可以使用meter元素。meter标签的属性属性说明属性说明high定义度量的值位于哪个点被界定为高的值min定义最小值，默认值是0low定义度量的值位于哪个点被界定为低的值optimum定义什么样的度量值是最佳的值。如果该值高于high属性，则意味着越高越好。如果该值低于low属性的值，则意味着值越低越好。max定义最大值，默认值是1value定义度量的值行内语义性标签例如：<metervalue="148"min="0"max="160"low="20"high="110"title="148票"optimum="120"></meter><meter>标签不应用于指示进度，如果标记进度条，请使用<progress>标签。注意：Firefox,Chrome,Opera以及Safari6支持<meter>标签，而IE浏览器不支持该标签。行内语义性标签meter标签用法演示。行内语义性标签3time标签time标签表示时间值，主要加强了html的语义化结构。而是让网页的代码有条理，让计算机，例如百度或者谷歌搜索机器人能够理解网页的意思。例如：<timedatetime="2017-3-2">2017年3月2日</time><!--datetime属性中日期与时间之间要用“T”文字分隔，“T”表示时间--><timedatetime="2017-3-2T21:00">2017年3月2日21:00</time><!--时间加上“Z”表示给机器编码时使用UTC标准时间--><timedatetime="2017-3-2T21:00Z">2017年3月2日21:00</time>行内语义性标签4video标签和audio标签video标签定义视频。例如：<videosrc="video/movie.mp4"controls="controls"autoplaywidth="400">

您的浏览器不支持video标签。</video>video标签用法演示。行内语义性标签4video标签和audio标签audio标签定义音频。例如：<audiosrc="music/bgmusic.mp3"autoplaycontrolsloop>

您的浏览器不支持audio标签。</audio>audio标签用法演示。行内语义性标签1contenteditable属性contenteditable属性规定标签的内容是否可编辑。例如：<ulcontenteditable="true"><li><ahref="#">首页</a></li><li><ahref="#">学校新闻</a></li><li><ahref="#">院系设置</a></li></ul>contenteditable属性是一个布尔值属性，可以被设置为true和false，属性值为true时，元素被指定为允许编辑；属性值为false时，元素被指定为不允许编辑。同时，该属性还有个隐藏的inherit（继承）状体。当未指定true或false时，则有inherit状态来决定，如果父元素为可编辑的，则该元素也为可编辑的。HTML5的全局属性标签contenteditable属性的用法演示。<meter>标签不应用于指示进度，如果标记进度条，请使用<progress>标签。注意：前提是该元素必须可以获得鼠标焦