day02：列表、表格、表单

01-列表

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

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

无序列表

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

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ……
</ul>

注意事项：

  • ul 标签里面只能包裹 li 标签

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

有序列表

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

标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ……
</ol>

注意事项：

  • ol 标签里面只能包裹 li 标签

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

定义列表

标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

<dl>
  <dt>列表标题</dt>
  <dd>列表描述 / 详情</dd>
   ……
</dl>

注意事项：

  • dl 里面只能包含dt 和 dd

  • dt 和 dd 里面可以包含任何内容

02-表格

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

基本使用

标签：table 嵌套 tr，tr 嵌套 td / th。

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

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

表格结构标签-了解

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

提示：表格结构标签可以省略。

合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息。

合并单元格的步骤：

  1. 明确合并的目标

  2. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

    • 跨行合并，保留最上单元格，添加属性 rowspan

    • 跨列合并，保留最左单元格，添加属性 colspan

  3. 删除其他单元格

<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>100</td> -->
      <td>198</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总结</td>
      <td colspan="3">全市第一</td>
      <!-- <td>全市第一</td>
      <td>全市第一</td> -->
    </tr>
  </tfoot>
</table>

注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）。

03-表单

作用：收集用户信息。

使用场景：

  • 登录页面

  • 注册页面

  • 搜索区域

input 标签

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

<input type="..." >

input 标签占位文本

占位文本：提示信息，文本框和密码框都可以使用。

<input type="..." placeholder="提示信息">

单选框

常用属性

<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女

提示：name 属性值自定义。

上传文件

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

<input type="file" multiple>

多选框

多选框也叫复选框，默认选中：checked。

<input type="checkbox" checked> 敲前端代码

下拉菜单

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

<select>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
  <option selected>武汉</option>
</select>

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

文本域

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

<textarea>默认提示文字</textarea>

注意点：

  • 实际开发中，使用 CSS 设置 文本域的尺寸

  • 实际开发中，一般禁用右下角的拖拽功能

label 标签

作用：网页中，某个标签的说明文本。

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

  • 写法一

    • label 标签只包裹内容，不包裹表单控件

    • 设置 label 标签的 for 属性值 和表单控件的 id 属性值相同

<input type="radio" id="man">
<label for="man">男</label>

  • 写法二：使用 label 标签包裹文字和表单控件，不需要属性

<label><input type="radio"> 女</label>

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

按钮

<button type="">按钮</button>

<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
  用户名：<input type="text">
  <br><br>
  密码：<input type="password">
  <br><br>
​
  <!-- 如果省略 type 属性，功能是 提交 -->
  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button">普通按钮</button>
</form>

提示：按钮需配合 form 标签（表单区域）才能实现对应的功能。

04-语义化

无语义的布局标签

作用：布局网页（划分网页区域，摆放内容）

  • div：独占一行

  • span：不换行

<div>div 标签，独占一行</div>
<span>span 标签，不换行</span>

有语义的布局标签

05-字符实体

06-综合案例一-体育新闻列表

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

07-综合案例二-注册信息

<h1>注册信息</h1>
<form action="">
  <!-- 表单控件 -->
  <!-- 个人信息 -->
  <h2>个人信息</h2>
  <label>姓名：</label><input type="text" placeholder="请输入真实姓名">
  <br><br>
  <label>密码：</label><input type="password" placeholder="请输入密码">
  <br><br>
  <label>确认密码：</label><input type="password" placeholder="请输入确认密码">
  <br><br>
  <label>性别：</label>
  <label><input type="radio" name="gender"> 男</label>
  <label><input type="radio" name="gender" checked> 女</label>
  <br><br>
  <label>居住城市：</label>
  <select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
    <option>武汉</option>
  </select>
  <!-- 教育经历 -->
  <h2>教育经历</h2>
  <label>最高学历：</label>
  <select>
    <option>博士</option>
    <option>硕士</option>
    <option>本科</option>
    <option>大专</option>
  </select>
  <br><br>
  <label>学校名称：</label><input type="text">
  <br><br>
  <label>所学专业：</label><input type="text">
  <br><br>
  <label>在校时间：</label>
  <select>
    <option>2015</option>
    <option>2016</option>
    <option>2017</option>
    <option>2018</option>
  </select>
  --
  <select>
    <option>2019</option>
    <option>2020</option>
    <option>2021</option>
    <option>2022</option>
  </select>
  <!-- 工作经历 -->
  <h2>工作经历</h2>
  <label>公司名称：</label><input type="text">
  <br><br>
  <label>工作描述：</label>
  <br>
  <textarea></textarea>
  <br><br>
  <!-- 协议 和 按钮 -->
  <input type="checkbox"><label>已阅读并同意以下协议：</label>
  <ul>
    <li><a href="#">《用户服务协议》</a></li>
    <li><a href="#">《隐私政策》</a></li>
  </ul>
  <br><br>
  <button>免费注册</button>
  <button type="reset">重新填写</button>
</form>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/335322.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【信号与系统】【北京航空航天大学】实验四、幅频、相频响应和傅里叶变换

【信号与系统】【北京航空航天大学】实验四、幅频、相频响应和傅里叶变换

一、实验目的 1、 掌握利用MATLAB计算系统幅频、相频响应的方法&#xff1b; 2、 掌握使用MATLAB进行傅里叶变换的方法&#xff1b; 3、 掌握使用MATLAB验证傅里叶变换的性质的方法。 二、实验内容 1、 MATLAB代码&#xff1a; >> clear all; >> a [1 3 2]; …
阅读更多...
rabbitmq的介绍、使用、案例

rabbitmq的介绍、使用、案例

1.介绍 rabbitmq简单来说就是个消息中间件&#xff0c;可以让不同的应用程序之间进行异步的通信&#xff0c;通过消息传递来实现解耦和分布式处理。 消息队列&#xff1a;允许将消息发到队列&#xff0c;然后进行取出、处理等操作&#xff0c;使得生产者和消费者之间能够解耦&…
阅读更多...
C++初阶--自我实现vector

C++初阶--自我实现vector

实现模板 #include<assert.h> #include<string.h> #include<iostream> #include<list> using namespace std; namespace fnc {template<class T>class vector{public:typedef T* iterator;typedef const T* const_iterator;//构造函数vector(){…
阅读更多...
五、模 板

五、模 板

1 泛型编程 以往我们想实现一个通用的交换函数&#xff0c;可能是通过下面的方式来实现的&#xff1a; void Swap(int& left, int& right) {int temp left;left right;right temp; } void Swap(double& left, double& right) {double temp left;left ri…
阅读更多...
递归、搜索与回溯算法（专题一：递归）

递归、搜索与回溯算法（专题一：递归）

往期文章&#xff08;希望小伙伴们在看这篇文章之前&#xff0c;看一下往期文章&#xff09; &#xff08;1&#xff09;递归、搜索与回溯算法&#xff08;专题零&#xff1a;解释回溯算法中涉及到的名词&#xff09;【回溯算法入门必看】-CSDN博客 接下来我会用几道题&#…
阅读更多...
【深度学习每日小知识】Artificial Intelligence 人工智能

【深度学习每日小知识】Artificial Intelligence 人工智能

人工智能 (AI) 是一个快速发展的领域&#xff0c;有潜力改变我们的生活和工作方式。人工智能已经为从自动驾驶汽车到个性化医疗等各个行业做出了重大贡献。然而&#xff0c;与任何新技术一样&#xff0c;人工智能也存在许多问题和担忧。在这里&#xff0c;我们将探讨有关人工智…
阅读更多...
【Qt开发】初识Qt

【Qt开发】初识Qt

文章目录 1. Qt的背景1.1 Qt是什么1.2 Qt的发展史1.3 Qt支持的平台 2. Qt开发环境的搭建2.1 Qt SDK下载2.2 Qt SDK的安装 3. 一个简单的Qt模板程序的创建4. Qt模板程序的代码讲解4.1 main.cpp4.2 widget.h4.3 widget.cpp4.4 widget.ui4.5 test_1_18.pro4.6 一些中间文件 5. Qt在…
阅读更多...
算法训练 day24 | 77. 组合

算法训练 day24 | 77. 组合

77. 组合 题目链接:组合 视频讲解:带你学透回溯算法-组合问题 回溯其实和递归是密不可分的&#xff0c;解决回溯问题标准解法也是根据三部曲来进行的。 1、递归函数的返回值和参数 对于本题&#xff0c;我们需要用一个数组保存单个满足条件的组合&#xff0c;还需要另一个结果数…
阅读更多...
分布式搜索引擎ElasticSearch——深入elasticSearch

分布式搜索引擎ElasticSearch——深入elasticSearch

分布式搜索引擎ElasticSearch——深入elasticSearch 文章目录 分布式搜索引擎ElasticSearch——深入elasticSearch数据聚合聚合的分类DSL实现Bucket聚合DSL实现Metric聚合RestAPI实现聚合 自动补全DSL实现自动补全查询修改酒店索引库数据结构RestAPI实现自动补全查询实现酒店搜…
阅读更多...
elasticsearch6.6.0设置访问密码

elasticsearch6.6.0设置访问密码

elasticsearch6.6.0设置访问密码 第一步 x-pack-core-6.6.0.jar第二步 elasticsearch.yml第三步 设置密码 第一步 x-pack-core-6.6.0.jar 首先破解 x-pack-core-6.6.0.jar 破解的方式大家可以参考 https://codeantenna.com/a/YDks83ZHjd 中<5.破解x-pack> 这部分 , 也可…
阅读更多...
Labview局部变量、全局变量、引用、属性节点、调用节点用法理解及精讲

Labview局部变量、全局变量、引用、属性节点、调用节点用法理解及精讲

写本章前想起题主初学Labview时面对一个位移台程序&#xff0c;傻傻搞不清局部变量和属性节点值有什么区别&#xff0c;概念很模糊。所以更新这篇文章让大家更具象和深刻的去理解这几个概念&#xff0c;看完记得点赞加关注喔~ 本文程序源代码附在后面&#xff0c;大家可以自行下…
阅读更多...
原型设计 Axure RP 9

原型设计 Axure RP 9

Axure RP 9是一款专业的原型设计和协作工具&#xff0c;让用户快速创建高保真度的交互原型&#xff0c;模拟真实的用户界面和交互体验。该软件界面布局合理&#xff0c;易于使用&#xff0c;提供丰富的交互功能和效果&#xff0c;如动态面板、变量、条件逻辑、动画等。同时支持…
阅读更多...
C#，字符串匹配（模式搜索）有限自动机（Finite Automata）算法的源代码

C#，字符串匹配（模式搜索）有限自动机（Finite Automata）算法的源代码

一、有限状态自动机 图中两个圆圈&#xff0c;也叫节点&#xff0c;用于表示状态&#xff0c;从图中可以看成&#xff0c;它有两个状态&#xff0c;分别叫0和1。从每个节点出发&#xff0c;都会有若干条边。当处于某个状态时&#xff0c;如果输入的字符跟该节点出发的某条边的内…
阅读更多...
如何在Java中加载两个类全限定名相同的类？

如何在Java中加载两个类全限定名相同的类？

我们知道在Java中类全限定名由两部分组成&#xff0c;包名和类名&#xff0c;当然网上也有说法是由三部分组成&#xff0c;包名、子包名以及类名&#xff0c;这里我把包相关的统称为包名。 比如说在某个Java项目中com.knight包下有一个类A&#xff0c;那么这个类A的类全限定名…
阅读更多...
解决一个mysql的更新属性长度问题

解决一个mysql的更新属性长度问题

需求背景&#xff1a; 线上有一个 platform属性&#xff0c;原有长度为 varchar(10)&#xff0c;但是突然需要填入一个11位长度的值&#xff1b;而偏偏这个属性在线上100张表中有50张都存在&#xff0c;并且名字各式各样&#xff0c;庆幸都包含 platform&#xff1b;例如 platf…
阅读更多...
创建非模态的静态文本并更改它的位置

创建非模态的静态文本并更改它的位置

我是写在钩子里&#xff0c;动态显示静态文本的哦&#xff0c;效果我放在下面了&#xff0c;不知道怎么做动态图片&#xff0c;你们可以教我一下&#xff0c;哈哈。 //这个就是放在钩子里跟随鼠标动态显示坐标信息&#xff0c;或者提示信息 HWND statichandleNULL; HWND NXha…
阅读更多...
php isset和array_key_exists区别

php isset和array_key_exists区别

在PHP中&#xff0c;可以使用array_key_exists函数或者isset函数来判断一个字典&#xff08;关联数组&#xff09;中是否存在某个下标。 使用 array_key_exists 函数: $myArray array("key1" > "value1", "key2" > "value2",…
阅读更多...
网络爬虫采集工具

网络爬虫采集工具

在当今数字化的时代&#xff0c;获取海量数据对于企业、学术界和个人都至关重要。网络爬虫成为一种强大的工具&#xff0c;能够从互联网上抓取并提取所需的信息。本文将专心分享关于网络爬虫采集数据的全面指南&#xff0c;深入探讨其原理、应用场景以及使用过程中可能遇到的挑…
阅读更多...
校园水电抄表系统

校园水电抄表系统

校园水电抄表系统是一种现代化的水电管理方式&#xff0c;它通过高科技手段实现对校园内水电使用情况的实时监测和数据化管理&#xff0c;从而提高水电资源的利用效率&#xff0c;降低管理成本&#xff0c;为构建绿色、环保、节约型校园奠定基础。 一、系统概述 校园水电抄表…
阅读更多...
【富文本编辑器实战】03 Vuex 的配置编写

【富文本编辑器实战】03 Vuex 的配置编写

Vuex 的配置编写 目录 Vuex 的配置编写Vuex 是什么&#xff1f;什么是“状态管理模式”&#xff1f;什么情况下我应该使用 Vuex&#xff1f;安装 Vuex开始使用 VuexAction 文件Mutations-types 文件Mutation 文件Index Vuex 是什么&#xff1f; 这里我们来看看官方网站是如何介…
阅读更多...
最新文章

Copyright @ 2022~2023