web前端-3-HTML标签
5.27 周三
6、列表
1.有序列表ul和无序列表ol
注：<ul><li>…</></>是组合标签，其他标签不允许组合
<li></>是一个容器，可以容纳所有元素
列表自带样式属性
<ul><li>的属性type 拥有的选项
disc 默认是心愿
circle 空心圆
square 小方块
none 不显示
<ol><li>的属性type 所具有的选项
l 表示列表项目用数字标号（1,2,3.。。）
a 表示列表项目用小写字母标号（a，b，。。。）
A 表示。。。。。。。。。大写字母标号（A，B,。。。、）
I 。。。。。。。。。。。。。小写罗马字母标号（i，ii，iii。。。。）
I 。。。。。。。。。。。。。大写罗马字母标号（I，II，III。。。。。）
2.自定义列表（三层标签）
<dl>
<dt>第一项</>
<dd>注释1</>（可多个，用于对dt术语、名词解释的）
<dt>第二项</>
<dd>注释2</>
<dt>三</>
<dd>3</>
</>（实例：网页下端内容详列 关于我们
联系我们
加入我们
。。。。。。。）
7、表格
用于数据处理
Table标签常用属性
行：height：行高
Align： 行内容的水平对齐
Valign ：行内容的垂直对齐
Bgcolor： 行的背景颜色
列
|
属性 |
描述 |
|
width/height |
单元格的宽高 |
|
align |
设置水平对齐方式：left、center、right |
|
valign |
设置垂直对齐方式：top、middle、bottom |
|
bgcolor |
单元格背景颜色 |
|
colspan |
单元格跨列（合并单元格） |
|
rowspan |
单元格跨行 |
实例操作：
8、iframe内联框架
作为Body子集
属性：width/height 内联框架高宽
Name 框架名
Src设置页面路径
Scrolling规定是否在if中显示滚动条（yes，no，auto）
Frameborder 规定是否显示框架周围边框（0/1 =无/有）
<iframesrc="http://www.baidu.com"scrolling="auto"name="topiframe"frameborder="0"width=100% height="150px"></iframe> <!--<a href="http://www.baidu.com"target="topiframe">baidu</a>--> <!--<a href="http://www.sina.com.cn"target="topiframe">新浪</a>--> <iframe src="menu.html" name="leftframe" width=30% height="500px"></iframe> <iframe src="rightframe.html" name="rightframe" width=65% height="500px"></iframe>
注：Iframe是行内元素，
9、form表单
1.网页数据采集，是网页具有交互功能。如：登录注册、搜索框。
由窗体和控件组成
<form action=”url” method=get|post name=””></>
Get和post区别：
数据提交方式，get提交的数据url可以看到，post不能
Get一般用于少量数据提交，最多1k，post大量，理论无上限
Get提交数据在浏览器历史记录中，安全性不好。
表单由三部分组成：表单标签<form>、表单域（一般input标签，包括文本域、下拉列表、单选、复选框）、表单按钮（把表单域中收集信息提交）。
2.Input标签：单标签，通过type属性改变形状，具体属性如下：
文本框、密码：
<p>文本框: <input type="text" name="username" value="admin"></p>
<p> 密码 <input type="password"value="12345"></p>
单、复选框：
<p> 单选框(性别) <input type="radio">男 <input type="radio">女</p>
<!--必须通过相同的name属性值来达到单选效果 value默认检查初始项是否被选中-->
<p> 单选框(性别) <input type="radio" name="sex" checked value="男">男 <input type="radio" name="sex">女</p>
<p> 复选框 <input type="checkbox"> 吃饼干 <input type="checkbox">睡觉觉 <input type="checkbox">喝水水</p>
<!--文件：要求：form表单method属性要为post
form要加enctype=“multipart/form-data”此结构说明我们的文件以二进制形式传输，-->
<form action=""method="post"enctype="multipart/form-data">
上传 <input type="file"></form>
<!--隐藏域：hidden-->
<p>隐藏域 <input type="hidden"name="" value=""></p>
按钮
<p> 普通按钮 <input type="button"value="注册"></p>
<p> 提交按钮 <input type="submit"></p>
<p> 提交按钮 <input type="submit"value="tijiao"></p>
<p>重置按钮 <input type="reset"></p>
<p> 图片图像按钮 <input type="image"src="image/5cd3e87d43e25.jpg"width="30px"height="40px"></p>
<p> 按钮 <button>下一步</button></p>
效果图如下：
3.下拉列表：select
Name:列表框名称
Multiple：多选，不用赋值
Size：下拉列表可见选项的数目（显示几行）
Disabled：规定禁用该下拉列表
Option属性：
Selected：指定默认选项
Value：用来给option制定的那一个选项赋值，这个值要传送到服务器上的，
服务器通过条用select区域的名字的value属性来获得该区域所选中的数据项的。
4.多行文本：textarea
<textarea name="" id="" cols="30" rows="10">个人介绍</textarea> <textarea>个人介绍</textarea>
5.Label标签：是input的描述，
本身无特殊效果，但和其他input标签可提升用户体验，点击文字即可选中文本框。
Label标签包裹input
或通过label的for志向按钮的ID来绑定，for和ID属性值要相同。
<form> <label for="male">male</label> <input type="radio" name="sex" id="male"> </form>
Label标签一般与radio、checkbox类型一起使用。
6.Fieldset元素集：
将表单内相关元素分组，一般和legend标签一起使用，legend定义fieldset的提示信息，fieldset是块级元素。
7.表单域：将各标签涵盖起来的大框
三个域：文本域：textarea 个人介绍
文件域：<input type=”file”> s上传文件
表单域：form 收集控件信息并提交
<form action="" method="get"> <!-- get快但是不安全，提交必须有对象名name，不然提交失败--> <p> 用户名 <input type="text" name="username"></p> <p> 密码 <input type="password" name="pwd"></p> <input type="submit"> <input type="reset"> </form>