HTML学习 4.16

CC_XX1

已于 2022-04-16 14:42:56 修改

阅读量893

点赞数 1

文章标签： html5

于 2022-04-16 13:01:00 首次发布

本文链接：https://blog.csdn.net/m0_58383878/article/details/124211805

版权

个人学习

一、表格标签
表格的主要作用
显示、展示数据

基本语法
<table></table>表格框架
<tr></tr>单元行
<td></td>单元格内的数据（可以代替列的概念？）
<th></th>加粗居中表头的单元格

<thead>头部区域（方便区分）
<tbody>主体区域
以上都是放在<table>中

表格属性（不建议，以后css再用）
align规定对齐方式（放在table后面）left,center,right
border规定是否有边框（同上）1(有边框)或者""(无边框)
cellpadding规定单元边沿与内容之间的空白
cellspacing规定单元格之间的空白
width设定宽 height设置高度

合并单元格
rowspan 跨行合并（写在目标的最上侧单元格）
colspan 跨列合并（写在目标的最左侧单元格）
语法<td colspan="2"></td>
tips：需删除多余的单元格

二、列表标签
1、列表的主要作用
布局
2、最大特点
整齐、有序、作为布局会更加自由和方便
三种：无序列表(重点)、有序列表、自定义列表

无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
中间只能放li标签，不能放<p> or 文字(li标签什么都能放)
</ul>

有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
注意事项同上
</ol>
放置顺序直接会排序

自定义列表
<dl>
<dt>小标题</dt>
<dd>对dt进行说明</dd>
<dd>同上</dd>
dl中只能出现dt，dt；
一个dt多个dd，可以不止一个dt
</dl>

三、表单标签
1、主要作用：用于收集用户信息
2、组成：1.表单域(全部区域) 2.表单控件(也称为表单元素)(可以填信息的框框or按钮) 3.提示信息(提示填什么东西的)

1.表单域
<form>标签用于定义表单域，以实现用户信息的收集传递
（form会把范围内的表单元素信息提交给服务器）
<form action="url地址" method="提交方式" name="表单域名称">
action 用于指定接收并处理表单数据的服务器程序的url地址
method 用于设置表单数据的提交方式，取值为get或post
name 用于指定表单的名称，以区分一个页面中的多个表单域

2.表单控件
(1)input输入表单元素
<input type="属性值" name="方便后台看"/>
input是单标签；
type属性设置不同的属性值来指定不同的控件类型
1、text 文本框
2、password 被掩盖的文本
3、radio 单选按钮(两个按钮相同name就行)
4、checkbox 复选框(可以打勾多选的)
name和value是每个表单元素的属性,主要给后台人员使用
value="请输入用户名"，每次打开都有这句
name是表单元素的名字,要求按钮和复选框要有相同
单选按钮和复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮
checked="checked"
maxlength="6"最多输入6个字符

<input type="submit" value="改按钮名字">提交按钮
<input type="reset" value="重新填写">重置按钮
<input type="button" value="获取短信验证码">(后期结合js)
<input type="file"> 文件域上传文件使用的
其他百度

(2)<label>标签
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
for和id要对应
点中文字光标会自动转到对应表单元素，增加用户体验

(2)select下拉表单元素
<form>
籍贯：
<select>
<option selected="selected"(默认选中)>湖南</option>
<option>江苏</option>
</select>
</form>
一连串多个select中间不要写<td>！！

(3)textarea文本域元素
文本域标签，如留言板、评论
<form>
<textarea rows="3" cols="20">行、列
//文本内容（这里写啥，一打开就有啥）
</textarea>
</form>

实做效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11</title>
</head>
<body>
    <h4>欢迎注册</h4>
    <table width="500"> 
        <form>
        <tr>
            <td>昵称:</td>
            <td><input type="text" name="id"></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" id="sex1"><label for="sex1">男</label>
                <input type="radio" name="sex" id="sex2"><label for="sex2">女</label>
            </td>
        </tr>
        <tr>
            <td>生日:</td>
            <td>
            <select>
                <option selected="selcted">年</option>
                <option>2001</option>
                <option>2002</option>
            </select>
            <select>
                <option selected="selcted">月</option>
                <option>1</option>
                <option>2</option>
            </select>
            <select>
                <option selected="selcted">日</option>
                <option>11</option>
                <option>12</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>地区:</td>
            <td>
                <input type="text" value="湖南长沙市XXXX">
            </td>
        </tr>
        <tr>
            <td>学历:</td>
            <td>
                <select>
                    <option>中学</option>
                    <option selected="selected">本科</option>
                    <option>硕士</option>
                    <option>博士</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>个人性格:</td>
            <td>
                <input type="checkbox" name="xg" id="hp"><label for="hp"> 活泼</label>
                <input type="checkbox" name="xg" id="zx"><label for="zx"> 自信</label>
                <input type="checkbox" name="xg" id="sl"><label for="sl"> 善良</label>
            </td>
        </tr>
        <tr>
            <td>个人简介:</td>
            <td>
                <textarea rows="3" cols="15">个人简介</textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked">我同意注册条款
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="确认提交">
            </td>
        </tr>
        </form>
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员立即登录</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>遵守法律</li>
                    <li>积极向上</li>
                </ul>
            </td>
        </tr>
    </table>

</body>
</html>

实际界面

附学习文档（在线）

HTML 系列教程 (w3school.com.cn)

CC_XX1

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML学习 4.16

一、表格标签表格的主要作用显示、展示数据基本语法<table></table>表格框架<tr></tr>单元行<td></td>单元格内的数据（可以代替列的概念？）<th></th>加粗居中表头的单元格<thead>头部区域（方便区分）<tbody>主体区域以上都是放在<table>中表格属性（不建议，以后css再用）align规定对齐方式（放在tabl
复制链接

扫一扫