HTML第二天——表格标签

瑶瑶的猫

已于 2024-08-09 16:49:06 修改

阅读量525

点赞数 7

文章标签： html 前端 java

于 2024-08-09 11:31:07 首次发布

本文链接：https://blog.csdn.net/qq_43527058/article/details/140960386

版权

一、表格标签

表格主要用来展示数据的，使页面显得很有条理

<body>
    </table> <!-- 表格标签 -->
        <tr><td>姓名</td> <td>年龄</td> <td>性别</td> </tr><!-- 行标签  -->
        <tr><td>刘德华</td> <td>56</td> <td>男</td> </tr>
    </table>
</body>

表头单元格标签

th：作用是使文字加粗居中显示

表格属性：直观感受表格的外观形态（了解）

属性要写到table标签里面，这些外观设置后面用CSS来设置，这里先暂时了解一下。

课堂案例

<!DOCTYPE html>
<html lang="CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" border="1" cellpadding="0" cellspacing="0"> <!-- 表格标签 -->
        <tr>
            <th>排名</th> 
            <th>关键词</th> 
            <th>趋势</th> 
            <th>今日搜索</th> 
            <th>最近七天</th> 
            <th>相关链接</th>
        </tr> <!-- 行标签 -->
        <tr>
            <td>1</td> 
            <td>鬼吹灯</td> 
            <td><img src="image/down.jpg"></td> 
            <td>345</td> 
            <td>123</td> 
            <td><a href="http://www.tieba.com">贴吧</a> <a href="http://www.baidu.com">百度</a></td> 
        </tr>
    </table>
</body>
</html>

表格结构标签

在表格分为head和body两个区域。

<thead></thead>用于定义表格的头部，内部必须有tr标签
<tbody></tbody>用于定义表格的主体，存放数据

合并单元格

合并单元格方式：（写到靠上和靠左的单元格）

rowspan= “合并单元格的个数”

colspan= "合并单元格个数"

注意：合并完单元格要把多余的给删掉

二、列表标签——用来布局页面，整齐

可分为3类：有序列表、无序列表、自定义列表

无序列表（重要）

基本语法格式：

    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>西瓜</li>
    </ul>

注意事项：

无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul></ul>中智能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签和文字是不可以的。
<li></li>之间相当于一个容器，可以容纳所有元素。
无序列表会有自己的样式属性，在CSS中再设置。

有序列表（理解）：每一项是123。。。。排列的

基本语法格式

<body>
    <h4>粉丝排行榜</h4>
    <ol>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>西瓜</li>
    </ol>

</body>

注意事项：遵循无序列表的规则。

自定义列表

对术语或名词进行解释和描述，定义列表的列表项没有任何项目符号

基本语法：

<body>
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>微信</dd>
        <dd>抖音</dd>
    </dl>
</body>

注意事项：

一个<dl>里面可以包含多组<dt>和<dd>。
<dl>标签里只能存放<dt>和<dd>，<dt>和<dd>里面可以放任何标签。

三、表单标签

在注册账号页面经常出现，该标签目的就是收集用户信息。组成部分：表单域、表单控件、提示信息。

input标签

包括整个表单区域。表单域中的每一行都是一个input标签，它的具体使用方法和属性见如下代码

<body>
    <form> 
        <!-- text 文本框 用户可以在里面输入任何文字 -->
        用户名<input type="text" name = "username" value="请输入用户名" maxlength="6"> <br>
        <!-- password 密码框 用户可以输入看不见的密码 -->
        密码<input type="password" name="pwd"><br>
        <!-- radio 单选按钮 可以实现实现多选 -->
        <!-- name 是表单元素的名字，性别这里的单选按钮必须有相同的name才可以实现多选一 -->
        性别: 男<input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女 "><br>
        <!-- chexkbox 复选框 可以实现多选 -->
        爱好：吃饭<input type="checkbox" name="hobby" value="看电视"> 
            睡觉<input type="checkbox"   name="hobby"value="睡觉">
            打游戏<input type="checkbox"   name="hobby" value="打游戏">
        <br>
        <!-- button普通按钮 后期结合js搭配使用 -->
        <input type="button" value="获取短信验证码"/>
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像：<input type="file"/> 
        <!-- submit 提交按钮，可以把表单域里面的表单元素的值提交给后台服务器 -->
        <input type="submit" value="免费注册"/><br>
        <!-- reset 重置按钮 可以还原表单初始的默认状态 -->
         <input type="reset" value="获取短信验证码"/>
    </form>

label标签：

用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会转到选择对应表单上的元素，增加用户体验。

<label for="text">用户名</label><input type="text" id="text">

for和id必须一致，想让用户点击谁实现选择就把谁放入label标签里；

label和input一起使用。

下拉表单元素：select

<body>
    <form>
    籍贯
    <select>
        <option selected="selected">吉林</option>
        <option>上海</option>
        <option>湖南</option>
    </select>
    </form>
</body>

注意：select标签中至少有一个option，selected = “selected"初始默认选项

textarea表单元素

使用场景：用户输入多行文本的地方。

    <textarea>简单介绍   文字初始显示再文本框里
    </textarea>

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <table cellspacing="20">
        <tr>
            <td>性别</td>
            <td>
            <input type="radio" name="sex" value="男"><img src="image/down.jpg"/>男
            <input type="radio" name="sex" value="女"><img src="image/down.jpg"/>女
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td>
            <select>
                <option>---请选择年---</option>
                <option>1999</option>
                <option>2000</option>
            </select>
            <select>
                <option>---请选择年---</option>
                <option>1999</option>
                <option>2000</option>
            </select>
           
            <select>
                <option>---请选择年---</option>
                <option>1999</option>
                <option>2000</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td><input type="text"></td>
        </tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marry" value="nomarrried" checked="checked"/>未婚
                <input type="radio" name="marry" value="getmarrried"/>已婚  
                <input type="radio" name="marry" value="divoiced"/>离婚    
            </td>
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" value="妩媚的" id="1"/><label for="1">妩媚的</label>
                <input type="checkbox" value="可爱的"/>可爱的
                <input type="checkbox" value="性感的"/>性感的
                <input type="checkbox" value="都喜欢"/>都喜欢
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td><textarea>自我介绍</textarea></td>
        </tr>
        <tr>
            <td></td>
            <td>
            <input type="button" value="免费注册"><br>
            <input type="checkbox" value="我同意注册条款"><br>
            <a href="http://www.baidu.com" target="_blank">我是会员，立即登录</a>
            </td>
        </tr> 
    </table>
    <h4>我承诺</h4>
    <ul>
        <li>年满18岁</li>
        <li>严肃的态度</li>
        <li>真诚寻找另一半</li>
    
    </ul>
    
</body>
</html>