HTML基础（补充）

最新推荐文章于 2024-10-14 16:05:05 发布

m0_55577215

最新推荐文章于 2024-10-14 16:05:05 发布

阅读量72

点赞数

分类专栏： html基础文章标签： html

本文链接：https://blog.csdn.net/m0_55577215/article/details/114670382

版权

html基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML基础（补充）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>09-基本表格</title>
</head>
<body>
<!--
    table:表格
        常用的属性:
            border:边框 单位为像素
            align:
            width:
        常用的子标签
            tr:行
                常用的属性:
                    align:
                常用的子标签
                    td:单元格
                        常用属性:
                            rowspan:跨行合并单元格
                            colspan:跨列合并单元格
                    th:表格的表头
                        默认加粗居中
         了解的子标签:
            caption:表格的标题
-->

<table border="1" width="40%" align="center" cellspacing="0" cellpadding="10">
    <caption>小崔说事</caption>
    <tr align="center">
        <td>姓名</td>
        <td>年龄</td>
        <td>属相</td>
    </tr>
    <tr align="center">
        <td rowspan="2">白云&黑土</td>
        <td>71</td>
        <td>鸡</td>
    </tr>
    <tr align="center">
        <!--<td>黑土</td>-->
        <td>75</td>
        <td>鼠</td>
    </tr>
    <tr align="center">
        <td align="right">小计</td>
        <td colspan="2">2人</td>
        <!--<td></td>-->
    </tr>
</table>

<hr/>
<table border="1" align="center" width="40%">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
</body>
</html>

09-基本表格

小崔说事
姓名	年龄	属相
白云&黑土	71	鸡
白云&黑土	75	鼠
小计	2人

1	2	3
4	5	6

## HTML表单 ## 表单介绍 HTML表单：用于采集用户数据，并发送给后端服务器 ## 表单控件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>11-表单控件</title>
</head>
<body>
<!--
    form:表单
        作用:用来通过浏览器收集用户的数据
        常用的属性:
            action:用来指定数据提交的路径 默认提交到当前页面
            method:用来指定数据提交方式
                表单支持get和post,默认是get
                get:会把数据以key=value的形式追加到url后面 多个key/value使用&隔开 url和数据参数之间使用?隔开,数据量有限制,一般就是几k
                post:会把数据以key=value的形式放到请求体中,多个key/value使用&隔开 相对get请求安全一些
        常用的子标签:
            input:输入框 空标签
            select:下拉选
            textarea:文本域
         共有的属性:
            name属性:
                要想把数据提交到web服务器,就必须有name属性
                可以将单选或复选 设置为一组
         -----------
         对于单选,复选,下拉选,一般会给他们设置value属性,当被选中的时候,对应的value值就会提交到web服务器上
         按钮上的value属性用来设置显示的内容
         对于文本框,密码框,日期选择框来说,value属性用来设置默认值

         对于单选和复选按钮,通过设置checked属性让它默认勾选

         对于下拉选来说,通过设置selected属性让某个下拉选选中
         ---------------
         input标签属性
            type:类型
                text:文本框 默认值
                password:密码框
                radio:单选框
                checkbox:复选框

                submit:提交按钮
                reset:重置按钮
                button:普通按钮

                file:文件选择框

                date:日期选择框
            readonly属性:只读
            disabled属性:禁用
          ---------------
          select:
            了解的属性:
                size:规定显示的选项数量
                multiple:规定可以多选
   -------------------------------
   <label> 标签的 for 属性应当与相关元素的 id 属性相同。

-->
    <form action="01-标题.html" method="post">
        姓名:<input type="text" name="name" value="tom" readonly/><br/>
        密码:<input type="password" name="pwd" value="123"/><br/>
        性别:
            <input type="radio" name="sex" value="male" id="sex_male"/><label for="sex_male">男</label>
            <input type="radio" name="sex" value="female" checked id="sex_female"/><label for="sex_female">女</label>
        <br/>
        爱好:
            <input type="checkbox" name="hobby" value="smoke"/>抽烟
            <input type="checkbox" name="hobby" value="drink"/>喝酒
            <input type="checkbox" name="hobby" value="makeHair" checked/>烫头
        <br/>
        头像:
            <input type="file" name="photo"/>
        <br/>
        生日:<input type="date" name="birthday" value="2020-08-07"/> <br/>
        城市:
            <select name="city" size="3" multiple>
                <option value="">-请选择-</option>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="sz" selected>深圳</option>
                <option value="gz">广州</option>
            </select>
        <br/>
        自我介绍:
            <textarea rows="3" cols="20" name="intr">very good</textarea>
        <br/>
        <input type="submit" value="保存">
        <input type="reset" disabled value="重置">
        <input type="button" value="普通">
    </form>
</body>
</html>