7.17 HTML初学（续）

最新推荐文章于 2024-09-12 18:22:06 发布

yangyue012345

最新推荐文章于 2024-09-12 18:22:06 发布

阅读量89

点赞数

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

本文链接：https://blog.csdn.net/qq_51967148/article/details/118859435

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学习内容：

table表格的基本框架

<table >(定义表格标签)

<tr>（定义表格中的行）

<th> 表头单元格内的文字</th>（定义表头居中加粗显示）

<td>单元格内的文字</td>（定义表格中的单元格）

</tr>

</table>

以下标签应该写到table里面但是不提倡区别cellpadding和 cellspacing单词记住。

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对其方式
border	1或“”	规定表格单元是否拥有边框，默认为“”,周围没有边框。1为有边框
cellpadding	像素值	规定单元边沿与其内容直接的空白，默认1像素
cellspacing	像素值	规定单元格之间的孔把，默认2像素
width	像素值或百分比	规定表格的宽度

结构标签

<thead></thead> 标签表格的头部区域

<tbody></tbody> 标签表格的主体阶段

合并单元格方式

跨行 rowspan=”合并单元格的个数” 最上侧单元格作为目标单元格写合并代码

跨列 colspan=”合并单元格的个数” 最左侧单元格作为目标单元格写合并代码

合并单元格三步曲：

先确定是跨行还是跨列合并。
找到目标单元格，写上合并方式=合并单元格数量，比如：<td colspan="2"></td>。
删除多余单元格。

表单标签

一个表单由表单域，表单控件，提示信息三个部分构成。

表单域 <form></form>

input输入表单元素

input中的type类型

text 文本框，用户可以输入任意文字

password 密码框用户看不见输入的密码

radio 定义单选按钮可以实现多选一，要有相同的名字，才可以实现多选一

checkbox 复选框可以实现多选要有相同的名字

submit 提交按钮把表单域form表单元素中的数据发送到服务器

例：<input type=”submit” value=”免费注册”>

reset 重置按钮可以还原表单元素的初始状态<input type=”reset” value=”重新填写”>

button 普通按钮例<input type=”button” value=”获取短信验证码”>

file 上传文件例<input type=”file”>

<label>标签

<select>下拉表单元素

</select>

至少包括一对”option”

默认也是 <option selected=”selected”> </option>

文本域 <textarea> 可以定义多行文本输入的控件

今日反馈

checked 单选按钮和复选框可以设置，当当页面打开的时候，就可以默认选中这个按钮checked=“checked”
其他标签

name名称属性针对后台人员使用

value 表单元素的值针对后台人员使用。value=“请输入用户名”默认显示

maxlength 规定输入字段中字符的最大长度。

相关查阅文档

w3cschool 网站https://www.w3cschool.cn/

MDN网站https://developer.mozilla.org/zh-CN/

都可以查看相关文档

学习产出：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <table width=“100”>
        <tr>
            <td>性别</td>
            <td>
               <input type="radio" name="sex" id="nan"> <label for="nan" checked="checked">男</label>
               <input type="radio"   name="sex" id="nv"> <label for="nv">女</label>
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
               <select>
                   <option>请选择年</option>
                   <option>1995年</option>
                   <option>1996年</option>
                   <option>1997年</option>
                   <option>1998年</option>
               </select>
               <select>
                <option>请选择月</option>
                <option>一月</option>
                <option>二月</option>
                <option>三月</option>
                <option>四月</option>
            </select>
            <select>
                <option>请选择日</option>
                <option>十日</option>
                <option>二十日</option>
                <option>三十日</option>
                <option>二十一日</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td>
               <input type="text" value="请输入所在地区">
            </td>
        </tr>
        <tr>
           <td>婚姻状况</td> 
           <td>
               <input type="radio" name="marry" id="yihun"><label for="yihun">已婚</label>
               <input type="radio" name="marry" id="weihun" checked="checked"><label for="weihun">未婚</label>
               <input type="radio" name="marry" id="sangou"><label for="sangou">丧偶</label>
           </td>
        </tr>
        <tr>
            <td> 学历</td>
            <td>
                <input type="text"value="请输入学历">
            </td>
        </tr>
        <tr>
            <td>喜欢的类型</td>
            <td>
                
                <input type="checkbox" name="like" id="1"><label for="1">妩媚的</label>
                
                <input type="checkbox" name="like" id="2"><label for="2">可爱的</label>
               
                <input type="checkbox" name="like" id="3"> <label for="3">小鲜肉</label>
               
                <input type="checkbox" name="like" id="4"> <label for="4">老腊肉</label>
                <input type="checkbox" name="like" id="5"> <label for="5">都喜欢</label>
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td>
                <input type="textarea" value="自我介绍">
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册">
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked">我同意注册条款和会员加入标准
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
            
        </tr>
        <tr>
            <td></td>
            <td>
                <h4>我承诺</h4>
                <ul>
                  <li>年满十八岁、单身</li>
                  <li>抱着严肃的态度</li>
                  <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>