HTML初学笔记三

发表于

HTML表单

  • 表单用于获取不同类型的用户输入
  • 常用表单标签
<form> 表单
<input> 输入域
<textarea> 文本域
<label> 控制标签
<fieldset> 定义域
<legend> 域的标题
<select> 选择列表
<optgroup> 选项组
<option> 下拉列表中的选项
<button> 按钮

常用表单：

  • 复选框

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>表单</title>
            </head>
    <body>
          <form>
          你喜欢的宠物？
        狗<input type="checkbox">
        猫<input type="checkbox">
        兔子<input type="checkbox">
          </form>
    </body>
    </html>

  • 单选按钮

    1
    2
    3
    4
    <br/>
       请选择您的性别：
       男<input type="radio" name="sex">
       女<input type="radio" name="sex">

  • 下拉列表和创建按钮

    1
    2
    3
    4
    5
    6
    7
    8
    9
     <br/>
    请选择常用网站：
     <select>
            <option>www.edu.cn</option>
            <option>www.google.cn</option>
        </select>
        <input type="button" value="按钮">
        <input type="submit" value="提交">
          </form>

  • 文本域
    在<form>外填写
    <textarea cols="20" rows="20">请填写个人信息</textarea>

表单与PHP交互

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>表单与PHP进行交互</title>
        </head>
<body>
     <form action="" method="get">
            用户名：<input type="text" name="name">
            密    码：<input type="password" name="password">
            <br/>
             <input type="submit" value="提交">
    </form>
</body>
</html>

把php里面的地址放到action后面，method中get地址栏显示密码和用户名，post不会。

HTML框架

  • 标签框架(frame)
  • 框架集标签(<frameset>):

    框架集标签定义如何将窗口分割为框架
    每一个frameset定义一系列行或列
    rows/cols的值规定了每行或者每列占据屏幕的面积

  • 常用标签：
    noresize:固定框架大小
    cols: 列
    rows: 行
  • 内联框架：iframe

创建三个新页面，设置不同颜色，用src引入

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>框架</title>
        </head>
<frameset cols="20%,50%,30%">
    <frame src="framea.html"></frame>
    <frame src="frameb.html"></frame>
    <frame src="framec.html"></frame>
</frameset>
</html>

  • 内联框架

    taeget =_self 是在自己本身的页面打开
    taget=_blank 是在一个新的页面打开
    taget=_top 在顶级页面打开
    taget=_parent 在负极页面打开

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>框架</title>
        </head>
        <a href="http://jike.com" target="_self">即可</a>
<iframe src="framea.html" frameborder="0" width="400px" height="400px">
</iframe>
</html>

HTML背景

Background:设置背景图片
Bgcolor:设置背景颜色