HTML——列表、表格、表单

列表

作用:布局内容排列整齐的区域。

列表分类:无序列表、有序列表、定义列表。

无序列表 

作用:布局排列整齐的不需要规定顺序的区域。

标签:ul 嵌套 liul 是无序列表,li 是列表条目。

注意事项:

  • ul 标签里面只能包裹 li 标签
  • li 标签里面可以包裹任何内容

 技巧

  • <!-- ait + 上箭头  上移动一行 -->

  •  <!-- ait + 下箭头  下移动一行 -->

  •  <!-- ui>li 快速生成代码 -->

  • <!-- ui>li*4 快速生成4行列表 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>
<body>
    <h1>你喜欢的水果</h1>
    <ul>
        <li>苹果</li>
        <li>橘子</li>
        <li>凤梨</li>
        <li>香蕉</li>
        <li>橙子</li>
    </ul>
    <ui>
        <li> <a href="http://www.baidu.com">百度</a> </li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ui>

    <ui>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ui>
    <!-- ait + 上箭头  上移动一行 -->
    <!-- ait + 下箭头  下移动一行 -->
    <!-- ui>li 快速生成代码 -->
    <!-- ui>li*4 快速生成4行列表 -->
</body>
</html>

练习——四大名著

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四大名著</title>
</head>
<body>
<ul>
    <li>
<h3>《水浒传》</h3>
<p>《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说,以宋江领导的起义军为主要题材,通过一系列梁山英雄反抗压迫、英勇斗争的生动故事,暴露了北宋末年统治阶级的腐朽和残暴,揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。</p>
    </li>
    <li>
        <h3>《三国演义》</h3>
        <p>《三国演义》是综合民间传说和戏曲、话本,结合陈寿的《三国志》、范晔《后汉书》、元代《三国志平话》、和裴松之注的史料,以及作者个人对社会人生的体悟写成。现所见刊本以明嘉靖本最早,分24卷,240则。清初毛宗岗父子又做了一些修改,并成为现在最常见的120回本</p>
    </li>
    <li>
        <h3>《西游记》</h3>
<p>西游记以民间传说的唐僧取经的故事和有关话本及杂剧(元末明初杨讷作)基础上创作而成。</p>
    </li>
    <li>
<h3>《红楼梦》</h3>
<p>《红楼梦》是一部章回体长篇小说。早期仅有前八十回抄本流传,八十回后部分未完成且原稿佚失。原名《脂砚斋重评石头记》。程伟元邀请高鹗协同整理出版百二十回全本,定名《红楼梦》。亦有版本作《金玉缘》。
</p>
    </li>
</ul>

</body>
</html>

有序列表

作用:布局排列整齐的需要规定顺序的区域。

标签:ol 嵌套 liol 是有序列表,li 是列表条目。

注意事项:

与无序列表相似

定义列表

标签:dl 嵌套 dt dddl 定义列表dt 是定义列表的标题dd 是定义列表的描述 / 详情

注意事项:

  • dl 里面只能包含dt 和 dd
  • dt 和 dd 里面可以包含任何内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义列表</title>
</head>
<body>
    <dl>
        <dt>选购指南</dt>
        <dd> <a href="#">手机</a> </dd>
        <dd> <a href="#">电视</a> </dd>
        <dd> <a href="#">笔记本</a> </dd>
        <dd> <a href="#">平板</a> </dd>
    </dl>
    <dl>
        <dt>选购指南</dt>
        <dd> <a href="#">服务中心</a> </dd>
        <dd> <a href="#">申请售后</a> </dd>
        <dd> <a href="#">售后政策</a> </dd>
        <dd> <a href="#">维修服务</a> </dd>
    </dl>
    <dl>
        <dt>关注我们</dt>
        <dl> <a href="#">新浪博客</a> </dl>
        <dl> <a href="#">官方微信</a> </dl>
        <dl> <a href="#">联系我们</a> </dl>
    </dl>
</body>
</html>

目前常用快捷键

表格

基本用法

网页中的表格与 Excel 表格类似,用来展示数据

标签:table 嵌套 trtr 嵌套 td / th

提示:在网页中,表格默认没有边框线,使用 border 属性可以为表格添加边框线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <td>100</td>
            <td>198</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>全市第一</td>
            <td>全市第一</td>
            <td>全市第一</td>
        </tr>
    </table>
</body>
</html>

表格结构标签

作用:用表格结构标签把内容划分区域,让表格结构更清晰,语义更清晰。

提示:

表格结构标签可以省略

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td>100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>100</td>
                <td>198</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>全市第一</td>
                <td>全市第一</td>
                <td>全市第一</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

合并单元格

  1. 作用:将个单元格合并成个单元格,以合并同类信息

合并单元格的步骤:

  • 明确合并的目标
  • 保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量
  •         –跨行合并,保留最上单元格,添加属性 rowspan
  •         –跨列合并,保留最左单元格,添加属性 colspan
  • 删除其他单元格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>99</td>
                <td rowspan="2">100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>198</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td colspan="3">全市第一</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

表单

作用:收集用户信息。

  • 使用场景:
  • 登录页面
  • 注册页面
  • 搜索区域

input 标签基本使用

input 标签 type 属性值不同,则功能不同

input 标签占位文本

文本框和密码框都可以使用。

单选框 radio

常用属性:

提示:name 属性值自定义。

上传文件 - file

默认情况下,文件上传表单控件只能上传一个文件,添加 multiple 属性可以实现文件多选功能。

多选框 - checkbox

  • 多选框也叫复选框
  • 默认选中:checked

下拉菜单

标签:select 嵌套 option,select 是下拉菜单整体,option是下拉菜单的每一项。

 默认显示第一项,selected 属性实现默认选中功能

文本域

作用:多行输入文本的表单控件。

标签:textarea,双标签。

注意点:

  • 实际开发中,使用 CSS 设置 文本域的尺寸
  • 实际开发中,一般禁用右下角的拖拽功能

label 标签

经验:用 label 标签绑定文字和表单控件的关系,增大表单控件的点击范围

label 标签 – 增大点击范围

写法一

  • label 标签包裹内容不包裹表单控件
  • 设置 label 标签的 for 属性值 和表单控件的 id 属性值相同

写法二

  • 使用 label 标签包裹文字和表单控件,不需要属性

提示:支持 label 标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <form action="">
        <!-- text 文本框  placeholer 占位文字-->
    <label for="姓名">姓名: </label>
    <input type="text" placeholder="请您输入姓名" id="姓名">  <br>

    <!-- password 密码框 -->
     <label>密码: <input type="password" placeholder="请您输入密码"></label> <br>

    <!-- radio 单选框 name 属性 给相同的值就可以单选 -->
     性别:<input type="radio" name="sex" checked="checked"> 男
     <input type="radio" name="sex">女 <br>

     <!-- checkbox 多选框 复选框 -->
      爱好:<input type="checkbox">舞蹈
      <input type="checkbox">唱歌
      <input type="checkbox">游戏
      <input type="checkbox" checked="checked">写代码<br>

      <!-- 文件域 上传文件表单 multiple 可以多选文件 -->
      上传头像:<input type="file" multiple> <br>

      <!-- 下拉表单 select 选择 option 选项 selected 默认选中 -->
       籍贯:
       <select name="" id="">
        <option value="">北京</option>
        <option value="" selected>浙江</option>
        <option value="">山东</option>
        <option value="">河北</option>
       </select><br>

       <!-- 文本域 rows 行数 cols 列数 -->
        请您留言:<br>
        <textarea name="" id="" cols="30" rows="10">评论</textarea><br>

        <!-- 按钮 -->
         <button type="button">搜索</button>
         <button type="submit">提交</button>
         <button type="reset">重置</button>
    </form>
</body>
</html>

语义化

无语义的布局标签

作用:布局网页(划分网页区域,摆放内容)

  • div:独占一行
  • span:不换行

有语义的布局标签

字符实体

作用:在网页中显示预留字符

提示:

  • lt less than 的缩写
  • gt greater than 的缩写 
  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>字符实体</title>
    </head>
    <body>
        &nbsp;现场画面:伊朗防空系统密集拦截袭击
    央视曝光电动自行车解限速乱象
    中国农村公路总里程可绕赤道115圈
    伊媒称伊朗已准备好回应以色列侵略
    房价跌了100万后 如何与自己和解
    台军基地深夜传枪响 一哨兵中弹身亡
    郑钦文2-0击败施耐德 晋级决赛
    流浪猫被喂食物后带孩子找上门
    段落标签是&lt;p&gt;
    </body>
    </html>

案例一:体育新闻列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体育新闻列表</title>
</head>
<body>
    <ul>
        <li> 
            <img src="./images/1.jpg" alt="" >
             <h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3>
        </li>
        <li>
            <img src="./images/2.jpg" alt=""> 
            <h3>梅州主帅:申花有强有力的教练组 球员体能水平高</h3>
        </li>
        <li>
            <img src="./images/3.jpg" alt="">
            <h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3>
        </li>
    </ul>
</body>
</html>

 案例二:注册信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册信息</title>
</head>
<body>
    <h1>注册信息</h1>
    <h2>个人信息</h2>
    <form action="">
        <label> 
            姓名:<input type="text" placeholder="请您输入姓名"></label><br><br>
        <label>
            密码:<input type="password" placeholder="请您输入密码">
        </label><br><br>
    
        <label>
            确认密码:<input type="password" placeholder="请输入确认密码">
        </label><br><br>

        <label>
            <input type="radio" checked>男
        </label>
        <label>
            <input type="radio">女
        </label><br><br>

        居住城市:
        <label>
            <select name="" id="">
                <option value="">北京</option>
                <option value="" selected>浙江</option>
                <option value="">天津</option>
                <option value="">上海</option>
            </select>
        </label>

        <h2>教育经历</h2>
        最高学历:
        <select name="" id="">
            <option value="">博士</option>
            <option value="">硕士</option>
            <option value="">本科</option>
            <option value="">大专</option>
        </select><br><br>

        <label>学校名称:<input type="text"> </label><br><br>
        <label>所学专业:<input type="text"> </label><br><br>
        在校时间:
        <select name="" id="">
            <option value="">2010</option>
            <option value="">2011</option>
            <option value="">2012</option>
            <option value="">2013</option>
            <option value="">2014</option>
            <option value="">2015</option>
            <option value="">2016</option>
            <option value="">2017</option>
            <option value="">2018</option>
            <option value="">2019</option>
            <option value="">2020</option>
            <option value="">2021</option>
            <option value="">2022</option>
        </select>--
        <select name="" id="">
            <option value="">2010</option>
            <option value="">2011</option>
            <option value="">2012</option>
            <option value="">2013</option>
            <option value="">2014</option>
            <option value="">2015</option>
            <option value="">2016</option>
            <option value="">2017</option>
            <option value="">2018</option>
            <option value="">2019</option>
            <option value="">2020</option>
            <option value="">2021</option>
            <option value="">2022</option>
        </select>

        <h2>工作经历</h2>
        <label>公司名称:<input type="text"></label><br><br>
        <label>工作描述:<br><textarea name="" id="" cols="30" rows="10"></textarea></label><br>

        <label><input type="checkbox">已阅读并同意以下协议</label><br><br>
        <ul>
            <li> <a href="#">《用户服务协议》</a> </li>
            <li> <a href="#">《隐私政策》</a></li>
        </ul>
        <button type="submit">免费注册</button> &nbsp; 
        <button type="reset">重新填写</button>
    </form>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值