Html前端基础（select下拉选标签、table表格标签）

最新推荐文章于 2024-01-28 22:45:26 发布

鸿蒙Next

最新推荐文章于 2024-01-28 22:45:26 发布

阅读量4k

点赞数 1

分类专栏：前端开发(js,css,html) 文章标签： css checkbox html 经验分享程序人生

本文链接：https://blog.csdn.net/Viewinfinitely/article/details/105733004

版权

前端开发(js,css,html) 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

文章目录

继续前两篇的Html前端基础的内容，本文主要关于 <select>下拉选标签和 <table>表格标签

一、select 下拉选标签

1、form表单补充

checked 会默认选择一个
disabled 使用户在选框上无法进行操作
<textarea></textarea> 可调大小的文本框

<p> Hobby:  <input type="checkbox" >game <input type="checkbox"  checked="checked">music </p>

<p>Username:<input type="text" placeholder="user" disabled="disabled"> </p>

简介<textarea name="description"></textarea>

（1）第一行代码表示一个Hobby的多选框，有game和music两个选项，因为在music属性里有checked属性，因此会默认选择music
（2）第二行代码表示一个Username的输入框，但是无法进行输入和选中等操作，因为被disable了
（3）第三行代码表示一个可以调节大小的文本框

2、select属性

mutiple 设置成多选
size 设置显示的个数

省份<select name="province" id="" multiple="2" size="3">
	<option value="">四川省</option>
    <option value="">云南省</option>
    <option value="">福建省</option>
    <option value="">广东省</option>
    <option value="">河北省</option>

该段代码表示一个省份的选择框，可以选择两个选项，直接显示的是3个选项，总共有5个选项

3、<option> 选项标签

selected 默认选中
optgroup 选项组

二、table表格标签

1、<table>标签属性

border 边框大小属性
cellpadding 边框内边距
cellspacing 边框外边距

<table border="1px" cellpadding="20px" cellspacing="5px">

此行代码表示边框大小为1px，边框内边距为20px，边框外边距为5px的一个表格

2、<tr>与<th><td>的属性

表格头
表格主体
是行；是列
rowspan 单元格占的行数（占几行）
colspan 单元格占的列数（占几列）

三、练习代码

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Zahuw</title>
	<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 
	<link rel="icon" href="http://www.jd.com/favicon.ico">
</head>


<body>

<h1>Register</h1>

<form action="http://192.168.43.247:8080/index method="post" enctype="multipart/form-data">
	<p>Username:<input type="text" placeholder="user" disabled="disabled"> </p>
	<p>Password:<input type="password" name="pwd" placeholder="pwd"> </p>
	<p> Hobby:  <input type="checkbox" name="hobby" value="game">game <input type="checkbox" name="hobby" value="music" checked="checked">music </p>
	<p> Sex:  <input type="radio" name="gender" value="male">male <input type="radio" name="gender" value="female">female </p>

	<p> <input type="submit" > </p>
	<p> <input type="button" value="Register"> </p>
	<p> <input type="reset" value="Reset"> </p>
	<p> <input type="file" name="put_file"> </p>

    省份<select name="province" id="" multiple="2" size="3">
    <option value="">四川省</option>
    <option value="">云南省</option>
    <option value="">福建省</option>
    <option value="">广东省</option>
    <option value="">河北省</option>
</select>

    简介
    <textarea name="description"></textarea>

</form>

</body>

<table border="1px" cellpadding="20px" cellspacing="5px">
    <thead>
        <tr>
            <th>鸡蛋</th>
            <th>土豆</th>
            <th>玉米</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>10kg</td>
            <td>20kg</td>
            <td rowspan="2">30kg</td>
        </tr>

        <tr>
            <td>10kg</td>
            <td>20kg</td>
<!--            <td>30kg</td>-->
        </tr>

        <tr>
            <td colspan="2">10kg</td>
<!--            <td>20kg</td>-->
            <td>30kg</td>
        </tr>
    </tbody>
</table>

</html>

select和table

鸿蒙Next

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html前端基础（select下拉选标签、table表格标签）

文章目录一、select 下拉选标签二、table表格标签三、练习代码继续前两篇的Html前端基础的内容，本文主要关于 <select>下拉选标签和 <table>表格标签一、select 下拉选标签1、form表单补充checked 会默认选择一个disabled 使用户在选框上无法进行操作<textarea></textarea> ...
复制链接

扫一扫