HTML学习2

CC_XX1

已于 2022-04-21 17:59:19 修改

阅读量89

点赞数

文章标签： html5

于 2022-04-21 17:39:29 首次发布

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

版权

个人学习

一、表格标签

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

基本语法

<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>

dl中只能出现dt，dt；
一个dt多个dd，可以不止一个dt

三、表单标签

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要对应
点中文字光标会自动转到对应表单元素，增加用户体验

(3)select下拉表单元素

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

(4)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

关注

0
点赞
踩
0

收藏

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

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

扫一扫