HTML视频教程,第4章 HTML超文本(下)

课程目录：
1 HTML列表
2 HTML块元素
3 HTML布局
4 HTML表单
5 HTML文本和密码输入框
6 HTML文本域
7 HTML单选框和复选框的使用
8 HTML下拉列表框
9 HTML下拉列表框多选
10 HTML表单提交按钮
11 HTML重置按钮
12 form表单中的label标签

1 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>

2 HTML块元素

什么是块元素，什么是内联元素？块级元素（block属性）可定义宽width，高height及边框，边距，独占一行；内联元素(inline属性)与之相反。
①标签div
①-1：用来定义文档中的分区或节（division/seltion），没有特定含义，可以用来组合其他html元素的容器
①-2：由于它属于块级元素，浏览器会在其前后折行
①-3：容器、文档布局，取代table传统定义布局，表格table主要是用来显示表格的数据
②标签span
②-1：它用来组合文档中的其他行内元素，无特定含义，与css一起使用
②-2：它用来部分文本设置样式属性

3 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>

4 HTML表单

网站如何与用户进行交互？使用html表单(form)，表单是可以把浏览器输入的数据传送到服务器端，这样服务器端就可以处理表单传送过来的数据
①语法<form method="传送方式" action="服务器文件"></form>
②释义：
②-1：form标签成对出现
②-2：其中action为浏览者输入的数据，被传送到的地方，比方php页面(save.php)
②-3:其中method数据传送的方式为get或者post

5 HTML文本和密码输入框

①语法

<form method="传送方式" action="服务器文件">
    <input type="text/password" name="名称" id="" value="文本" />
</form>

②释义
②-1：当type值为text时，文本输入框；当type值为password时，密码输入框
②-2:位文本框命名name属性，方便后台程序（asp、php）使用
②-3：位文本框设置默认值通过value属性值，一般起提示作用

6 HTML文本域

支持多行文本输入，当用户需要在表单中输入大段文字时，要用到文本输入框
①语法<textarea cols="列数" rows="行数">文本</textarea>
注意在文本域中输入默认值后，其中的cols域rows分别可以通过width域height代替

7 HTML单选框和复选框的使用

在使用表单设计调查表时，为了减少用户的操作，使用选择框是不错选择，html有2种选择框，即单选框和复选框
①语法
<input type="radio/checkbox" value="值" name="名称" checked="checked" />
②释义
②-1:当type为radio时，控件为单选框；当type为checkbox时，控件为复选框；
②-2：value提交数据到服务器端的值
②-3：name属性为控件命名
②-4：checked=“checked”，默认选中
注意：同一组的单选框按钮，neme取值一定要一致，这样才可以起到单选框作用

8 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”为默认选中

9 HTML下拉列表框多选

<select name="" multiple="multiple">
    <option value="">选项卡一</option>
    <option value="">选项卡二</option>
    <option value="">选项卡三</option>
</select>

在标签select中设置multiple=”multiple”属性，当windoes操作系统下多选为ctrl+单击

10 HTML表单提交按钮

<input type="submit" name="" id="" value="提交" />

11 HTML重置按钮

<input type="reset" name="" id="" value="重置" />

12 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属性的前后变化）

相关文章