Blogger Information
Blog 16
fans 0
comment 0
visits 12610
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html基础语法
如花似玉的小牛牛的博客
Original
947 people have browsed it

今天第一天上课,感觉还不错,有点多,上完了就基本上不记得了好赖凭着我聪明的大脑,过人的智慧完成了这次作业。

学习使我快乐 实际效果

写笔记 表格

<table>   </table>  表格定义标签
<thead>   </thead>  表头
<tbody>   </tbody>  表格主体
<tfoot>   </tfoot>  表底
<tr>      </tr>     表行
<td>      </td>     表格
rowspan="3"  合并表格 <td colspan="3">

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        .blackund:red;
    </style>
</head>
<body>

<h1 align="center">表格学习</h1>
<table border="1"  cellspacing="0" align="center">
    <thead>

    <tr>
        <th width="50">序号</th>
        <th width="80">名词</th>
        <th width="50">数量</th>
        <th width="50">金额</th>
        <th width="50">总计</th>
        <th width="50" rowspan="3">合并</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>邓紫棋</td>
        <td>3</td>
        <td>100</td>
        <td>300</td>
    </tr>
    <tr>
        <td>2</td>
        <td>范冰冰</td>
        <td>4</td>
        <td>500</td>
        <td>2000</td>
    </tr>
    <tr>
        <td>3</td>
        <td>杨幂</td>
        <td>4</td>
        <td>100</td>
        <td>400</td>
    </tr>
    <tr>
        <td>4</td>
        <td>李冰冰</td>
        <td >3</td>
        <td>100</td>
        <td>300</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3" align="center">合计:14</td>

        <td colspan="2">总额:1000元</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

表单 我觉得这是今天最难搞的一个了,看完以后我已经忘了讲的什么东西了,好赖凭着我聪明的大脑,过人的智慧完成了这次作业。

表单写笔记

<form>
action 发送数据到文件
method 提交方式
</form>

autofocus 自动光标 丨  placeholder 提示文字丨  required 必选丨  min 最小 丨 max 最大
input中使用

<select  size="1" >   </select> 下拉框 size 默认选择

<optgroup label="学习:"> </optgroup>  分组

 <option value="1" selected>学习</option> selected默认选择

<input type="checkbox" name="meizhi" value="meizhi">小姐姐 checkbox复合选框

<input type="radio" name="nvren" value="nvren" id="nvren" checked><label for="nvren">保密</label>    checked默认选择

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>

<h1 align="center" style="color: deeppink">注册页面</h1>
<!--input  输入控件标签,type
type:单行文本框
pasword:密码
email:邮箱
age:年龄
date:日期标签

required必须填写
placeholder文字提示
autofocus光标移入
min最小输入
max 最大-->
<div id="main">
    <form action="index.html" method="post" align="center" style="color:deeppink;"  id="form">
        <p>
            <label   name="username" id="username" >账号:</label>
            <input type="text" id="username" name="username" placeholder="账号" required autofocus>
        </p>
        <p>
            <label  name="password" id="password" >密码:</label>
            <input type="password" id="password" name="password" required; autofocus placeholder="密码">
        </p>
        <p>
            <label  name="email" id="email" >邮箱:</label>
            <input type="password" id="email" name="email" placeholder="邮箱">
        </p>
        <p>
            <label  name="age" id="age" >年龄:</label>
            <input type="number" id="age" name="age" placeholder="年龄" min="18" required>
        </p>
        <p>
            <label  name="shengri" id="shengri"  >生日:</label>
            <input type="date" id="shengri" name="shengri"  autofocus placeholder="生日" >
        </p>
        <p>
            <label  name="xuexi" id="xuexi"  >学习:</label>
            <select id="xuexi">
                <option value="1">php</option>
                <option value="2">jsp</option>
                <option value="3" selected>asp</option>
            </select>
        </p>
        <p>
            <label for="meizhi">爱好:</label>
            <input type="checkbox" name="meizhi" value="meizhi" id="meizhi"><label for="meizhi">小姐姐</label>
            <input type="checkbox" name="dafeiji" value="dafeiji" id="dafeiji"><label for="dafeiji">打飞机</label>
            <input type="checkbox" name="kanpian" value="kanpian" id="kanpian"><label for="kanpian">看片</label>
        </p>
        <p>
            <label for="nanren">性别: </label>

            <input type="radio" name="nanren" value="nanren" id="nanren"><label for="nanren">男生</label>
            <input type="radio" name="nvren" value="nvren" id="nvren"><label for="nvren">女生</label>
            <input type="radio" name="nvren" value="nvren" id="nvren" checked><label for="nvren">保密</label>
        </p>

        <p>
            <button type="submit" value="提交">提交</button>
            <button type="reset" value="重置" >重置</button>

        </p>
    </form>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


后台 凭着我聪明的大脑,过人的智慧完成了这次作业。

后台写笔记

target 定义name属性标签

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
</head>
<body>
<h3>后台管理</h3>
<hr>
<ul style="float: left;">
    <li><a href="biaoge.html" target="xuexi">表单</a> </li>
    <li><a href="reg.html"target="xuexi">注册会员</a> </li>
    <li><a href="index.html"target="xuexi">会员登录</a> </li>
</ul>
<iframe srcdoc="后台管理" frameborder="" width="300" height="500" style="float:left" name="xuexi"></iframe>
<br>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post