第4章HTML超文本(下)
- HTML列表
- HTML块元素
- HTML布局
- HTML表单
- HTML文本和密码输入框
- HTML文本域
- HTML单选框和复选框的使用
- HTML下拉列表框
- HTML下拉列表框多选
- HTML表单提交按钮
- HTML重置按钮
- form表单中的label标签
HTML列表
①有序列表ol>li，默认排序方式以数字开头，通过type属性定义其他排序，添加start属性决定起始位置
<ol start="6">
<li>测试文本1</li>
<li>测试文本2</li>
<li>测试文本3</li>
</ol>
<ol type="a">
<li>测试文本1</li>
<li>测试文本2</li>
<li>测试文本3</li>
</ol>
②无序列表ul>li,设置属性disc实心圆，circle空心圆，square方块等
③定义列表dl>dt>dd
<dl><dt>文本</dt><dd>说明补充</dd></dl>
HTML块元素
什么是块元素，什么是内联元素？块级元素（block属性）可定义宽width，高height及边框，边距，独占一行；内联元素(inline属性)与之相反。
①标签div
①-1：用来定义文档中的分区或节（division/seltion），没有特定含义，可以用来组合其他html元素的容器
①-2：由于它属于块级元素，浏览器会在其前后折行
①-3：容器、文档布局，取代table传统定义布局，表格table主要是用来显示表格的数据
②标签span
②-1：它用来组合文档中的其他行内元素，无特定含义，与css一起使用
②-2：它用来部分文本设置样式属性
HTML布局
大多数网页布局需要配合css来完成，css常用来对元素定位或者为网页面创建背景以及色彩丰富的外观
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<container>
<header>
</header>
<pagebody>
<sidebar></sidebar>
<mainbody></mainbody>
</pagebody>
<footer></footer>
</container>
</body>
</html>
HTML表单
网站如何与用户进行交互？使用html表单(form)，表单是可以把浏览器输入的数据传送到服务器端，这样服务器端就可以处理表单传送过来的数据
①语法<form method="传送方式" action="服务器文件"></form>
②释义：
②-1：form标签成对出现
②-2：其中action为浏览者输入的数据，被传送到的地方，比方php页面(save.php)
②-3:其中method数据传送的方式为get或者post
HTML文本和密码输入框
①语法
<form method="传送方式" action="服务器文件">
<input type="text/password" name="名称" id="" value="文本" />
</form>
②释义
②-1：当type值为text时，文本输入框；当type值为password时，密码输入框
②-2:位文本框命名name属性，方便后台程序（asp、php）使用
②-3：位文本框设置默认值通过value属性值，一般起提示作用
HTML文本域
支持多行文本输入，当用户需要在表单中输入大段文字时，要用到文本输入框
①语法<textarea cols="列数" rows="行数">文本</textarea>
注意在文本域中输入默认值后，其中的cols域rows分别可以通过width域height代替
HTML单选框和复选框的使用
在使用表单设计调查表时，为了减少用户的操作，使用选择框是不错选择，html有2种选择框，即单选框和复选框
①语法
<input type="radio/checkbox" value="值" name="名称" checked="checked" />
②释义
②-1:当type为radio时，控件为单选框；当type为checkbox时，控件为复选框；
②-2：value提交数据到服务器端的值
②-3：name属性为控件命名
②-4：checked=“checked”，默认选中
注意：同一组的单选框按钮，neme取值一定要一致，这样才可以起到单选框作用
HTML下拉列表框
<select name="city">
<option value="北京" name="beijing">北京</option>
<option value="上海" name="shanghai" selected="selected">上海</option>
<option value="广州" name="guangzhou">广州</option>
</select>
有效节省网页空间，可单选也可多选；当设置option选项时，其中的selected=”selected”为默认选中
HTML下拉列表框多选
<select name="" multiple="multiple">
<option value="">选项卡一</option>
<option value="">选项卡二</option>
<option value="">选项卡三</option>
</select>
在标签select中设置multiple=”multiple”属性，当windoes操作系统下多选为ctrl+单击
HTML表单提交按钮
<input type="submit" name="" id="" value="提交" />
HTML重置按钮
<input type="reset" name="" id="" value="重置" />
form表单中的label标签
语法<label for="控价名称"></label>
<form action="" method="post">
<label>性别</label>
<input type="radio" name="sex" id="" value="boy"/><label for="boy">男孩</label>
<input type="radio" name="sex" id="" value="girl"/><label for="girl">女孩</label>
<input type="radio" name="sex" id="" value="wz"/ checked="checked"><label for="wz">未知</label>
</form>
说明：标签的for属性应该与相邻的控件id属性一致，标签label不会向用户展示任何特殊效果，它的作用是为鼠标改进了可用性；如果你在label标签内点击文本，就会触发控件，浏览器会自动将焦点转到和标签相关的表单控件，自动选中（对别添加label标签for属性的前后变化）
转载请注明：大灰牛博客 » HTML视频教程|HTML超文本(下)