前端笔记-day02

已于 2024-05-11 20:54:12 修改
阅读量374 收藏 4
点赞数 8
文章标签： 前端 笔记
于 2024-05-11 15:53:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qyk666/article/details/138717923
版权

文章目录

01-无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>列表条目</li>
        <li>列表条目2</li>
        <li>列表条目3</li>
    
    </ul>
</body>
</html>

02-有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <Ol>
        <li>liebiao1</li>
        <li>2</li>
        <li>3</li>
    </Ol>
</body>
</html>

03-定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>服务中心</dt>
        <dd>shenqing</dd>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>

        <dt>申请售后</dt>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
        <dd>4</dd>
        <dd>5</dd>

        <dt>服务中心</dt>
        <dd>shenqing</dd>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>

        <dt>申请售后</dt>
        <dd>1</dd>
        <dd>2</dd>
        <dd>3</dd>
        <dd>4</dd>
        <dd>5</dd>
    </dl>
</body>
</html>

04-表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- table  table row    table head    table data -->
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>11</td>
                <td>22</td>
                <td>55</td>
    
            </tr>
    
            <tr>
                <td>张三</td>
                <td>11</td>
                <td>22</td>
                <td>55</td>
                
            </tr>
            <tr>
                <td>张三</td>
                <td>11</td>
                <td>22</td>
                <td>55</td>
                
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>全市第一</td>
                <td>全市第一</td>
                <td>全市第一</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

在这里插入图片描述

06-表格-合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- table  table row    table head    table data -->
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>11</td>
                <td>22</td>
                <td>55</td>
    
            </tr>
    
            <tr>
                <td>张三</td>
                <td>11</td>
                <!-- 跨行合并 -->
                <td rowspan="2">22</td>
                <td>55</td>
                
            </tr>
            <tr>
                <td>张三</td>
                <td>11</td>
                <!-- <td>22</td> -->
                <td>55</td>
                
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <!-- 跨列合并 -->
                <td colspan="3">全市第一</td>
                <!-- <td>全市第一</td> -->
                <!-- <td>全市第一</td> -->
            </tr>
        </tfoot>
    </table>
</body>
</html>

在这里插入图片描述

07-表单-input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    文本框：<input type="text"><br><br>
    密码框：<input type="password"><br><br>
    单选框：<input type="radio"><br><br>
    多选框：<input type="checkbox"><br><br>
    上传文件：<input type="file">
</body>
</html>

08-表单-input占位文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    文本框：<input type="text" placeholder="用户名"><br><br>
    密码框: <input type="password" placeholder="密码"><br><br>

</body>
</html>

09-表单-单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    性别：
    <input type="radio" name="gender">男
    <input type="radio" name="gender" checked>女
</body>
</html>

10-表单-上传多个文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    上传文件：<input type="file" multiple>
</body>
</html>

11-表单-多选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    兴趣爱好：
    <input type="checkbox">敲代码
    <input type="checkbox" checked>敲前端代码
    <input type="checkbox" checked>敲前端HTML代码
</body>
</html>

12-表单-下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    城市：
    <select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <!-- 默认选中   selected -->
        <option value="" selected>广州</option>
    </select>
</body>
</html>

13-表单-文本域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 右下角有拖拽功能未来进化掉 -->
    <textarea >请输入文字</textarea>
</body>
</html>

14-表单-label标签

点击旁边的也能选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 方法一 -->
    <label >
        <input type="radio">女
    </label>
    <input type="radio">男

<br>
<br>

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

</body>
</html>

15-表单-按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- form是表单区域 -->
    <!-- actions=“”是发送数据的地址 -->
    <form action="">
        用户名：<input type="text"><br><br>
        密码：<input type="password"><br><br>
        <button type="submit">提交</button>
        <!-- 去掉submit 默认依然是submit功能 -->
        <button>提交</button>
        <button type="reset">重置</button>
        <!-- button是以后配合javascript使用 -->
        <button type="button">普通按钮</button>
    </form>
</body>
</html>

16-无语义-span和div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>这是div</div>
    <div>这是div</div>

    <span>这是span</span>
    <span>这是span</span>
</body>
</html>

17-字体实体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    乾坤未定，你我皆是黑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;马。
    &lt;p&gt;
</body>
</html>

19-注册登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>注册信息</h1>
    <form action="">
        <h2>个人信心</h2>
        姓名：<input type="text" placeholder="请输入真实姓名"><br><br>
        密码：<input type="password" placeholder="请输入密码"><br><br>
        确认密码：<input type="password" placeholder="请输入确认密码"><br><br>
        性别：<input type="radio" name="gender">男
              <input type="radio" name="gender">女
        <br><br>
        居住城市：
        <select >
            <option >北京</option>
            <option value="" selected>上海</option>
        </select>
        <br><br>
        <h2>教育经历</h2>
        最高学历：
        <select name="" id="">
            <option value="">博士</option>
            <option value="">硕士</option>
            <option value="">本科</option>
            <option value="">专科</option>
        </select><br><br>
    
        学校名称：<input type="text"><br><br>
        所学专业：<input type="text"><br><br>
        在校时间：
        <select name="" id="">
            <option value="">2015</option>
            <option value="">2016</option>
        </select>
        --
        <select name="" id="">
            <option value="">2017</option>
            <option value="">2018</option>
        </select><br><br>
    
        <h2>工作经历</h2>
        公司名称：<input type="text"><br><br>
        工作描述：<br>
        <textarea ></textarea><br><br>
    
        <input type="checkbox">已阅读并同意一下条约
        <ul>
            <li><ins><a href="#">《用户服务协议》</a></ins></li>
            <li><ins><a href="#">《隐私政策》</a></ins></li>
        </ul>
        <button type="submit">免费注册</button>
        <button type="reset">重新填写</button>
    
    </form>
</body>
</html>

在这里插入图片描述

heibut不相信眼泪
关注
  • 8
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
笔记-day09-前端基础CSS第七天.pdf
10-11
前端基础CSS第七天笔记 在本笔记中，我们主要讨论了前端基础CSS的第七天学习目标，包括使用精灵图、字体图标、写出CSS三角、写出常见的CSS用户界面样式、说出常见的布局技巧等。 精灵图 精灵图是一种CSS技术，...
笔记-day07-前端基础CSS第五天.pdf
10-11
【CSS属性书写顺序】 在编写CSS样式时，良好的代码组织和规范性对于代码的可读性和维护性至关重要。属性的书写顺序能体现一个开发者...掌握这些切图方法，结合CSS属性书写规范，能有效提高前端开发的效率和代码质量。
笔记-day08-前端基础CSS第六天.pdf
10-11
CSS 定位基础知识 CSS 定位是 CSS 布局中非常重要的一部分，它可以让我们更灵活地控制页面元素的位置和布局。今天，我们将学习 CSS 定位的基础知识，包括为什么需要使用定位、定位的组成部分、定位模式的分类和特点...
2020/2/19学习笔记-day01
01-20
【Java学习笔记-day01】 Java是一门广泛应用于软件开发的高级编程语言，自1995年诞生以来，经历了多次版本更新，逐渐发展成为现代软件工程的重要支柱。本篇笔记主要介绍了Java学习的一些基础知识，包括XML、面向...
FE21-JS-DAY02-Vendula-Bettina
03-04
【描述】"FE21-JS-DAY02-Vendula-Bettina"的描述为空，但我们可以推测这是针对前端开发者（FE）的2021年课程系列的一部分，特别是针对JavaScript语言的第二天教学内容。可能涉及了前一天的基础知识回顾，并深入介绍...
如何搭建互联网医院系统源码？医疗陪诊APP开发实战详解
meihusdk的博客
07-11 246
希望本文能够为正在或即将从事相关开发的技术人员提供一些参考和帮助。通过不断的努力和创新，我们可以为患者提供更优质的医疗服务，推动医疗行业的数字化转型。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 193
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 883
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 780
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 1045
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
vue父子组件通信实现模糊搜索功能
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
07-09 768
模糊搜索功能 每个网站都要用得到
Webkit简介以及工作流程
读心悦
07-10 320
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
​​ 翻页 上一页/下一页
szzlh123456789的博客
07-09 380
【代码】​​ 翻页 上一页/下一页。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 256
通过sm4对文件进行加解密，用户输入密码
ctfshow-web入门-文件上传（web166、web167）&（web168-web170）免杀绕过
Welcome To Myon'Blog !
07-11 858
查看源码，前端只让传 zip上传 zip 成功后可以进行下载随便搞一个压缩包，使用记事本编辑，在其内容里插入一句话木马：上传该压缩包，上传成功后点击下载文件，使用 burpsuite 抓包：我这里木马内容用的 request ，就在 get 里执行 ls 没什么问题，但是读取 flag 时识别有点问题，最好使用 post 请求，因此将请求方法改为 post ，将 file 的内容还原到上面。
Web 性能入门指南-1.2 分析在线零售 Web 性能及优化方向
weixin_43303603的博客
07-11 389
性能优化入门：分析是什么拖慢了你的页面速度，从图片和第三方到样式表和自定义字体，以及你可以采取哪些措施
前端JS特效第34波：jQuery支持拖拽图片上传的图片批量上传插件
最新发布
wangtianming88的专栏
07-13 161
jQuery支持拖拽图片上传的图片批量上传插件
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 196
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
前端如何让网页页面完美适配不同大小和分辨率屏幕
rolling_kitten的博客
07-09 467
安装postcss，项目根目录新建配置文件postcss.config.js，记得别用exclude排除node_modules，否则postcss无法将包里的px样式也一起转为vw；对于el-message组件，单独在项目的index.html文件的style里，设置 .el-message { font-size: 16px;推荐使用postcss插件，它会自动将项目所有的px单位统一转换为vw（包括npm安装的第三方组件），从而实现适配
前端Bootstrap+Es6+vue学习笔记
06-10
通过路由来实现单页面应用的页面切换------------前端Bootstrap Es6 vue学习笔记，内容围绕着前端开发的三大核心技术：Bootstrap、Es6和Vue.js展开。 首先，介绍了Bootstrap框架的基础环境配置。通过开发者工具的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值