HTML自主学习 - 2

coding_yzh

已于 2023-02-22 19:41:36 修改

阅读量599

点赞数 1

分类专栏： # HTML 文章标签：学习 html 前端

于 2023-02-15 21:10:14 首次发布

本文链接：https://blog.csdn.net/qq_66095714/article/details/129049280

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、表格

基本语法

<table>

    <tr>
        <td>单元格内容1</td>
        <td>单元格内容2</td>
        <td>单元格内容3</td>
    </tr>

</table>

1、<table> </table>标签用于定义表格

2、<tr> </tr>标签用于定义表格的行，需嵌套在<table> </table>标签中

3、<td> </td>标签用于定义表格的单元格，需嵌套在<tr> </tr>标签中

4、td指table data

表头单元格标签

表头单元格标签即<th> </th>

表头单元格一般位于表格的第一行或第一列

使用<th> </th>标签可使文本内容加粗居中显示

表格相关属性

align：规定表格的对齐方式

border：规定表格单元格是否有边框

cellpadding：规定表格单元格边沿和其内容之间的空白大小

cellspacing：规定表格单元格之间的空白大小

width：规定表格的宽度

height：规定表格的高度

表格结构标签

表格可能很长，可将表格划分为表格头部和表格主体两大部分

<thead> </thead>标签包含表格头部，<tbody> </tbody>标签包含表格主体

合并单元格

合并单元格的方式

1、跨行合并：rowspan = "合并单元格的个数"

2、跨列合并：colspan = "合并单元格的个数"

目标单元格

应将合并单元格代码写在目标单元格内

1、跨行合并：最上侧单元格为目标单元格

2、跨列合并：最左侧单元格为目标单元格

合并单元格的步骤

1、确定合并单元格的方式

2、确定目标单元格，将合并单元格代码写在目标单元格内

3、删除冗余单元格

表格示例一

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表格测试</title>
</head>

<body>
    <table align="center" border="1" cellpadding="6" cellspacing="0" width="50">

        <thead>
             <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>班级</th>
                <th>学号</th>
                <th>成绩</th>
             </tr>
        </thead>
       
        <tbody>
             <tr>
                <td>小刚</td>
                <td>男</td>
                <td>1809</td>
                <td>18123456</td>
                <td>86</td>
            </tr>
             <tr>
                <td>小红</td>
                <td>女</td>
                <td>1706</td>
                <td>17123465</td>
                <td>88</td>
            </tr>
        </tbody>

    </table>
</body>

</html>

二、列表

无序列表

基本语法

<ul>
    
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    
</ul>

1、无序列表的各个列表项是并列的，没有高低级别之分

2、<ul> </ul>标签中只能嵌套<li> </li>标签，<li> </li>标签中可以嵌套其他标签

有序列表

基础语法

<ol>

    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    
</ol>

<ol> </ol>标签中只能嵌套<li> </li>标签，<li> </li>标签中可以嵌套其他标签

自定义列表

基本语法

<dl>

    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    <dd>名词1解释3</dd>
    
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    <dd>名词2解释3</dd>

</dl>

1、自定义列表常用于对术语或名词进行解释或描述

2、<dl> </dl>标签中只能嵌套<dt> </dt>标签和<dd> </dd>标签

3、<dt> </dt>标签和<dd> </dd>标签中可以嵌套其他标签

4、<dt> </dt>标签和<dd> </dd>标签的个数没有限制，通常是一个dt对应多个dd

列表示例一

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>列表测试</title>
</head>

<body>

    <h3>今日事务</h3>
    <ul>
        <li>接见顾客</li>
        <li>参加会议</li>
        <li>修改项目</li>
    </ul>

    <h3>今日安排</h3>
    <ol>
        <li>起床</li>
        <li>跑步</li>
        <li>洗漱</li>
        <li>早餐</li>
        <li>英语</li>
        <li>数学</li>
        <li>中餐</li>
        <li>中休</li>
    </ol>

    <dl>
        <dt>联系我们</dt>
        <dd>发送邮件</dd>
        <dd>发送短信</dd>
        <dd>拨打电话</dd>
        <dd>关注公众号</dd>
    </dl>

</body>

</html>

三、表单控件（表单元素）

表单组成

表单通常由表单域、表单控件（也称为表单元素）和提示信息三部分组成

表单基本语法

<form action="url地址" method="提交方式" name="表单域名称">

    各种表单控件

</form>

<!--
1、action用于指定接收并处理表单数据的服务器程序的url地址
2、提交方式method有两个取值，即get和post
-->

input表单控件

基本语法

<form action="url地址" method="提交方式" name="表单域名称">

    <input type="控件类型" name="input表单元素的名称" value="值" />

</form>

<!--
控件类型

text：文本框
password：密码框
radio：单选按钮
checkbox：复选框
submit：提交按钮
reset：重置按钮
file：文件域
button：可点击按钮（结合JS使用）
-->

<!--
部分属性说明

1、name和value是每个表单元素都有的属性，主要给后台人员使用
2、使用单选按钮和复选框时，要求input表单元素的名称相同
3、使用单选按钮和复选框时，可以设置checked属性，表示默认选中该项
4、使用文本框时，可以设置maxlength属性，该属性用于规定字符的最大长度
-->

label标签

基本语法

<form action="url地址" method="提交方式" name="表单域名称">

    <label for="sex">男</label>
    <input type="radio" name="gender" value="male" id="sex" />

</form>

<!--
label标签说明

1、<label> </label>标签用于绑定表单控件
2、当点击<label> </label>标签内的文本时，浏览器会选中与之绑定的表单控件，用户体验更佳
3、注意！for属性的值应和id属性的值相同
-->

select表单控件

基本语法

<form action="url地址" method="提交方式" name="表单域名称">

    <select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <option>选项4</option>
        <option selected="selected">选项5</option>
    </select>

</form>

<!--
select表单控件说明

1、使用select表单控件可以有效节省页面空间
2、<select> </select>标签中至少包含一个选项
3、<option selected="selected">选项5</option>表示默认选中选项5
-->

文本域标签

基本语法

<form action="url地址" method="提交方式" name="表单域名称">

    <textarea cols="60" rows="6">
        此处可以书写默认显示内容
    </textarea>

</form>

<!--
textarea文本域标签说明

1、<textarea> </textarea>标签可以创建多行文本输入框
2、cols="60"表示每行可以输入60个字符
3、rows="6"表示输入框显示6行
-->

表单控件示例一

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表单控件测试</title>
</head>

<body>
    <h3>模拟APP注册界面</h3>
    <table>
        <tr>
            <td> <h5>昵称</h5> </td> <td> <input type="text"> </td>
        </tr>
        <tr>
            <td> <h5>年龄</h5> </td> <td> <input type="text"> </td>
        </tr>
        <tr>
            <td> <h5>绑定手机</h5> </td> <td> <input type="text"> </td>
        </tr>
        <tr>
            <td> <h5>设置密码</h5> </td> <td> <input type="password"> </td>
        </tr>
        <tr>
            <td> <h5>性别</h5> </td> <td> <label for="male">男</label> <input type="radio" name="sex" id="male"> <label for="female">女</label> <input type="radio" name="sex" id="female"> </td>
        </tr>
        <tr>
            <td> <h5>家乡</h5> </td>
            <td>
                <select>
                    <option>请选择家乡</option>
                    <option>湖南</option> <option>湖北</option>
                    <option>河北</option> <option>山西</option> <option>黑龙江</option> <option>吉林</option>
                    <option>辽宁</option> <option>江苏</option> <option>浙江</option> <option>安徽</option>
                    <option>福建</option> <option>江西</option> <option>山东</option> <option>河南</option>
                    <option>广东</option> <option>海南</option> <option>四川</option> <option>贵州</option>
                    <option>云南</option> <option>陕西</option> <option>甘肃</option> <option>青海</option>
                    <option>台湾</option> <option>内蒙古</option> <option>广西</option> <option>西藏</option>
                    <option>宁夏</option> <option>新疆</option> <option>北京</option> <option>天津</option>
                    <option>上海</option> <option>重庆</option> <option>香港</option> <option>澳门</option>
                </select>
            </td>
        </tr>
        <tr>
            <td> <h5>兴趣</h5> </td>
            <td>
                穿搭 <input type="checkbox" name="interest">
                美食 <input type="checkbox" name="interest">
                手工 <input type="checkbox" name="interest">
                读书 <input type="checkbox" name="interest">
                科技 <input type="checkbox" name="interest">
                军事 <input type="checkbox" name="interest">
                音乐 <input type="checkbox" name="interest">
                绘画 <input type="checkbox" name="interest">
                护肤 <input type="checkbox" name="interest">
                摄影 <input type="checkbox" name="interest">
                学习 <input type="checkbox" name="interest">
                旅行 <input type="checkbox" name="interest">
                情感 <input type="checkbox" name="interest">
                影视 <input type="checkbox" name="interest">
            </td>
        </tr>
        <tr>
            <td> <h5>自我简介</h5> </td>
            <td> <textarea cols="90" rows="6">让大家认识一下你吧！</textarea> </td>
        </tr>
        <tr>
            <td> <input type="reset" value="重置信息"> </td>
            <td> <input type="submit" value="免费注册"> </td>
        </tr>
    </table>
</body>

</html>