表单结构
表单是收集用户的信息和反馈意见，是前端和后端数据的传递媒介
表单的组成
<form action="url" method="get/post" name="value">
填入表单域和表单按钮等
</form>
|
action：表示接受并处理表单数据的服务器程序的url地址
method：get为默认，表单数据和URL一起发送，提交的数据显示在浏览器地址栏中，保密性差，有数据量限制；post保密性好，并且无数据量限制，表单数据和URL分开发送，保密性好
name：指定表单名称，以区分一个页面中的多个表单
表单域常用属性
| 属性 |
说明 |
| name |
控件名称（公共属性，与每个表单域对应） |
| type |
控件类型，如radio，text等 |
| size |
指定控件的宽度 |
| value |
用于设定输入默认值（公共属性，可用来指定输入区域默认值） |
| maxlength |
在单行文本时允许输入的最大字符数 |
| src |
插入图像的地址 |
表单按钮
普通按钮:触发提交表单的动作，配合JavaScript使用
<input type="button" name="name值"/>
|
提交按钮：将表单中的信息提交给表单中action指向的文件
<input type="submit" name="button_name" id="button_id" value="提交">
|
图片式提交按钮：指可以在按钮位置上放置图片，这幅图片具有提交按钮的功能
重置按钮：指清除已填写的表单内容，恢复为默认内容，重新填写
H5结构性标签
网页页眉的结构标签，位于网页的最上端，一般header标签至少包含但不局限于一个标题，还可以包括hgroup标签，包括表格内容，网页封面，logo图案，搜索表单和nav等。
nav
网页中的导航条，是navigator的缩写，常用无序列表的形式加上css外观配置实现，一般置于header下方。
nav标签可以应用于传统导航条，侧边栏导航，页内导航，翻页操作等场合
section
用于对网页中的内容进行分区分块，定义文档中的节。一般情况下，section标签常由标题和内容组成。
注意：
- section标签表示一段专题性的内容，一般会带有标题，没有标题的区块不要用section定义
- 根据实际情况来看，若是article标签，aside标签或是nav标签更符合使用条件，那么不要使用section标签
- 当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div标签而不是section
article
一个特殊的section标签，比section具有更明确的语义，代表一个独立的，完整的相关内容块，可独立于页面其他内容使用
注意：
- article标签会有标题部分，通常可以包含header，有时也会包含footer
- article可以嵌套，内层的article对外层的article标签有着隶属关系，如博客的文章可以用article显示，一些评论也可以以article的形式嵌入其中
aside
aside标签用来装载非正文的内容，被视为页面里单独的一个部分，作为页面或站点全局的附属信息部分，例如广告，友链，侧边栏，导航条等等，可以被article包含在内
footer定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说作者和日期。
作为页面页脚时，一般包括版权，相关文件和链接
footer和header标签使用基本一样，可以在一个页面中多次使用，也可以在article或section中添加，相当于该区段的页脚
框架示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>叮叮书店</title>
</head>
<body>
<div id="logo" style="">
<header class="container">
<div id="logo">
<h1>网站logo·叮叮书店(div)</h1>
</div>
<div id="search">
<form>
<input type="search"/>
<input type="button" name="search" value="搜索"/>
</form>
</div>
</header>
</div>
<div id="nav" style="">
<nav>
<div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">书籍分类</a></li>
<li><a href="#">特刊降价</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
<div id="cart"><a href="#">购物车</a></div>
</nav>
</div>
<div>
<main>
<div id="adv">
此处用于添加广告
</div>
<section id="recommend">
<h2>本周推荐</h2>
<section class="recommend-book">
<h3>书1标题</h3>
<div class="content">
<div class="cover-1"><img src="img/prod2.jpg"></div>
<div class="description-1"><p><mark>书1</mark>简介</p></div>
</div>
<div class="cart-more"><a href="#">加入购物车</a><a href="#">详细内容</a></div>
</div>
</section>
<section class="recommend-book">
<h3>书2标题</h3>
<div class="content">
<div class="cover-1"><img src="img/prod3.jpg"></div>
<div class="description-1"><p>书2简介</p></div>
</div>
<div class="cart-more"><a href="#">加入购物车</a><a href="#">详细内容</a></div>
</div>
</section>
</section>
<section id="new">
<h2>最近新书</h2>
<div class="content">
<section class="new-book">
<h3>书3标题</h3>
<div class="effect-1">
<div class="cover-2"><img src="img/prod4.jpg"></div>
<div class="description-2">
<h3>书3标题</h3>
<p>书3简介</p>
</div>
</div>
<div class="cart-more"><a href="#">加入购物车</a><a href="#">详细内容</a></div>
</div>
</section>
<section class="new-book">
<h3>书4标题</h3>
<div class="effect-1">
<div class="cover-2"><img src="img/prod1.jpg"></div>
<div class="description-2">
<h3>书4标题</h3>
<p>书4简介</p>
</div>
</div>
<div class="cart-more"><a href="#">加入购物车</a><a href="#">详细内容</a></div>
</div>
</section>
</div>
</section>
<section id="sale">
<h2>最近促销</h2>
<div class="content">
<section id="sale-book">
<h3>书5标题</h3>
<div class="effort-1">
<div class="pic"><img src="img/prod1.jpg"></div>
<div class="sale"><img src="img/sale.jpg"></div>
</div>
</section>
<section id="sale-book">
<h3>书6标题</h3>
<div class="effort-1">
<div class="pic"><img src="img/prod3.jpg"></div>
<div class="sale"><img src="img/sale.jpg"></div>
</div>
</section>
</div>
</section>
</main>
</div>
<div>
<aside>
<div id="advert"><img src="img/ad1.jpg"><img src="img/ad2.jpg"><img src="img/ad3.jpg"></div>
<section id="best-selling">
<h2>畅销图书</h2>
<ul>
<li><a href="#">书1</a>
<div class="curr">
<div class="c-pic"><img src="img/selling1.jpg"></div>
<div class="c-text"><a href="#">书1名</a><strong>书1现价</strong><del>书1原价</del></div>
</div>
</li>
<li><a href="#">书2</a>
<div class="curr">
<div class="c-pic"><img src="img/selling2.jpg"></div>
<div class="c-text"><a href="#">书2名</a><strong>书2现价</strong><del>书2原价</del></div>
</div>
</li>
<li><a href="#">书3</a>
<div class="curr">
<div class="c-pic"><img src="img/selling3.jpg"></div>
<div class="c-text"><a href="#">书3名</a><strong>书3现价</strong><del>书3原价</del></div>
</div>
</li>
<li><a href="#">书4</a>
<div class="curr">
<div class="c-pic"><img src="img/selling4.jpg"></div>
<div class="c-text"><a href="#">书4名</a><strong>书4现价</strong><del>书4原价</del></div>
</div>
</li>
<li><a href="#">书5</a>
<div class="curr">
<div class="c-pic"><img src="img/selling5.jpg"></div>
<div class="c-text"><a href="#">书5名</a><strong>书5现价</strong><del>书5原价</del></div>
</div>
</li>
</ul>
</section>
<div id="classify-partner">
<section id="classify">
<h2>图书分类</h2>
<ul>
<li><a href="#">编程语言</a></li>
<li><a href="#">数据库</a></li>
<li><a href="#">图形图像</a></li>
<li><a href="#">网页制作</a></li>
<li><a href="#">考试认证</a></li>
</ul>
</section>
<section id="partner">
<h2>合作伙伴</h2>
<ul>
<li><a href="#">中国电子商务研究中心</a></li>
<li><a href="#">清华大学出版社</a></li>
<li><a href="#">中国人民大学出版社</a></li>
<li><a href="#">中国社会科学出版社</a></li>
</ul>
</section>
</div>
<section id="about">
<h2>关于书店</h2>
<div class="picture"><img src="img/about.gif"></div>
<div class="content">
<p>书店介绍</p>
</div>
</section>
</aside>
</div>
<div id="footer-wrapper">
<footer class="container">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务条款</a></li>
<li><a href="#">隐私策略</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</footer>
</div>
<div id="copyright" class="container">
<div>copyright内容<img src="img/vcss.gif"></div>
<address>通讯地址：
电话：
</address>
</div>
</div>
</body>
</html>
|
