HTML视频教程|HTML超文本(下)

弹指间学会HTML admin 506浏览

第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标签

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超文本(下)