Web之HTML（下）

「已注销」

已于 2022-05-16 23:50:28 修改

阅读量105

点赞数 1

文章标签： html 前端 webview

于 2022-05-15 08:40:46 首次发布

本文链接：https://blog.csdn.net/Zxy_zzz/article/details/124778133

版权

一、表格标签

二、列表标签

三、表单标签

一、表格标签

1.基本语法

<table>用于定义表格的标签
<tr>定义表格中的行，嵌套在<table>中
<td>定义表格中的单元格，嵌套在<tr>中

实例：

<!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>Document</title>
</head>

<body>
    <!-- 这些属性要写到表格标签table 里面去 -->
    <table align="center">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>刘德华</td>
            <td>男</td>
            <td>56</td>
        </tr>
    </table>

</body>

</html>

2.表头单元格标签

<th>表头部分，文字会加粗、居中

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表头单元格标签</title>
</head>
<body>
    <table>
        <tr><th>姓名</th>  <th>性别</th> <th> 年龄 </th></tr>
        <tr><td>刘德华</td>  <td>男</td> <td> 56 </td></tr>
        <tr><td>张学友</td>  <td>男</td> <td> 58 </td></tr>
        <tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr>
        <tr><td>黎明</td>  <td>男</td> <td> 57 </td></tr>
    </table>
</body>
</html>

3.表格属性

align="center" 规定对齐方式
border="" 规定是否有边框，默认“”无边框
cellpadding="" 规定单元边沿与其内容之间的空白，默认1像素
cellspacing="" 规定单元格之间的空白，默认2像素
width="" 规定表格的宽度
height="" 规定表格的高度

4.表格结构标签

<thead>表格头部区域标签，内部必须有<tr>，一般位于第一行
<tbody>表格主题区域标签，主要放数据本体

5.合并单元格

跨行：最上侧单元格为目标单元格，<td rowspan="单元格个数">
跨列：最左侧单元格为目标单元格，<td colspan="单元格个数">

步骤：
确定合并方式
找到目标单元格，写上目标单元格
删除多余单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>合并单元格</title>
</head>
<body>
    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
           
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

二、列表标签

用来布局

无序列表

<ul>（里边只能放<li>）
<li>列表项</li>（里边放什么都可以）
</ul>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>无序列表</title>
</head>
<body>
    <h4>您喜欢的食物?</h4>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>
            <p>123</p>
        </li>
    </ul>
</body>
</html>

有序列表

<ol>（里边只能放<li>）
<li>列表项</li>（li里边放什么都可以）
（列表项要按顺序）
</ol>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>有序列表(理解)</title>
</head>
<body>
    <h4>粉丝排行榜</h4>
    <ol>
        <li>刘德华 10000</li>
        <li>刘若英 1000</li>
        <li>pink老师 1</li>
    </ol>
</body>
</html>

自定义列表

通常用于对术语或名词进行解释和描述
<dl>
<dt>名词</dt>
<dd>名词解释</dd>
（dt,dd是并列关系，dd围绕着解释说明）
</dl>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义列表(重点)</title>
</head>
<body>
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>
</body>
</html>

三、表单标签

1.表单组成

表单域，表单控件，

2.表单域

是一个包含表元素的区域

<from>把它范围内的表单元素信息提交给服务器
<from action="页面" method="" name="名字">（现阶段不用管）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单域(了解)</title>
</head>
<body>
   <form action="demo.php" method="POST" name="name1">

   </form>
</body>
</html>

3.表单控件（表单元素）

<input>标签：
<input>输入元素，表单元素中用于收集用户信息
<input>标签中包含一个type属性（必须写）
<input type=“属性值”/>

4.type属性值

text 文本框用户可以里面输入任何文字
password 密码框用户看不见输入的密码
radio 单选按钮可以实现多选一
checkbox 复选框可以实现多选一
submit 点击了提交按钮,可以把表单域 form 里面的表单元素里面的值提交给后台服务器
reset 重置按钮可以还原表单元素初始的默认状态
button 普通按钮 button 后期结合js 搭配使用
<input type="file" > 文件域使用场景上传文件使用的

5.input其他属性

name ：是表单元素名字这里性别单选按钮必须有相同的名字name 才可以实现多选1
value：规定input元素的值
两个主要给后台人员使用
单选按钮和复选框要有相同的name值
checked：单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮
maxlength：规定输入字段中的字符的最大长度

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>input 表单元素</title>
</head>
<body>
    <form action="xxx.php" method="get">
         <!-- text 文本框 用户可以里面输入任何文字 -->
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br> 
        <!-- password 密码框 用户看不见输入的密码 -->
        密码: <input type="password" name="pwd" >  <br> 
        <!-- radio 单选按钮  可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
        性别: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"> 人妖   <input type="radio" name="sex" value="人妖">   <br> 
        <!-- checkbox 复选框  可以实现多选 -->
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"> 
        <br> 
        <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button  后期结合js 搭配使用-->
        <input type="button" value="获取短信验证码"> <br>
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像:  <input type="file" >
    </form>
</body>
</html>

6.<label>标签

绑定一个标签元素。点击时光标转到对应的表单元素上
<label for="名称"> 用户名</label> <input type="属性" id="名称" >
<label for="nan">男</label><input type="radio" id="nan" name="sex">
for属性与id属性相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>label标签</title>
</head>
<body>
   <label for="text"> 用户名:</label> <input type="text" id="text" >
   <input type="radio" id="nan" name="sex"> <label for="nan">男</label>
   <input type="radio" id="nv"  name="sex"> <label for="nv">女</label>
</body>
</html>

7.select下拉表单元素

下拉列表，至少包含一对option选择
在option中定义selected=“selected”，默认选定状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>select下拉表单</title>
</head>
<body>
    <form>
    籍贯: 
    <select>
        <option>山东</option>
        <option>北京</option>
        <option>天津</option>
        <option selected="selected">火星</option>
    </select>
</form>
</body>
</html>

8.textarea文本域元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>textarea 文本域</title>
</head>
<body>
    <form>
        今日反馈:
        <textarea cols="50" rows="5">pink老师,我知道这个反馈留言是textarea来做的 </textarea>
    </form>
</body>
</html>

「已注销」

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web之HTML（下）

目录一、表格标签1.基本语法2.表头单元格标签3.表格属性4.表格结构标签5.合并单元格二、列表标签无序列表有序列表自定义列表三、表单标签1.表单组成2.表单域3.表单控件（表单元素）4.type属性值5.input其他属性6.标签7.select下拉表单元素8.textarea文本域元素一、表格标签1.基本语法<table>用于定义表格的标签<tr>定义表格中的行，嵌套在<tab
复制链接

扫一扫