博客列表 >html基础语法

html基础语法

如花似玉的小牛牛的博客
如花似玉的小牛牛的博客原创
2019年04月24日 00:24:14941浏览

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

学习使我快乐 实际效果

写笔记 表格

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

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议