前端笔记-day1

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

文章目录

01-标签的写法

<strong>文字内容</strong>
<hr>

02-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>
    给用户看的，能看见吗？
</body>
</html>

03-标签的关系

父子关系
兄弟关系

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>
    <!-- AKLJKFNKLSACKCKKnKknknknkNKkNkn没那么 -->
    <strong>zhegskfj</strong>
</body>
</html>

05-标题标签

<!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>
    <h2>jfn</h2>
    <h3>jfj</h3>
    <h4>sjfnkj</h4>
    <h5>fj</h5>
    <h6>djsb</h6>
</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>
    <p>hkjfsbfjhbkfccccccccccccccccccccccccccccckjjjjjjjjjjjjjjjjjjjjjjjjfb</p>
    <p>hkjfsbfjhbkfccccccccccccccccccccccccccccckjjjjjjjjjjjjjjjjjjjjjjjjfb</p>
    <p>hkjfsbfjhbkfccccccccccccccccccccccccccccckjjjjjjjjjjjjjjjjjjjjjjjjfb</p>
   
</body>
</html>

07-换行与水平线标签

<!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>
    第一行<br><br>
    第二行<br><br>
    <hr>
</body>
</html>

08-文本格式化标签

<!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>
    <strong>jiacu</strong> <br>
    <b>kshf</b>

    <br>
    <em>jhcsjd</em>
    <i>ckjnc</i>
    <br>
    <ins>ncjksdnc</ins>
    <u>xiahuaxian</u>
    <br>
    <del>shanchu</del>
    <s>shanchu</s>
</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>
    <img src="./1111.jpg" >
    <img src="./22222.jpg" alt="">
</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>
    <img src="./2222.jpg" alt="黑大衣">
    <img src="./1111.jpg" title="这是院人">
    <img src="./22222.jpg" width="100">
    <img src="./1111.jpg" height="300">
</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>
    <img src="D:/anaconda/JupyterNotebook/images/bird_small.png" alt="">
    <img src="https://t9.baidu.com/it/u=1541335328,1353667972&fm=3035&app=3035&size=f242,150&n=0&f=JPEG&fmt=auto?s=23540B6E2BF0A8CE195C11190000E0C1&sec=1713891600&t=09ab085029a1e66d280228fc2e80a68a" alt="">
</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>超链接</title>
</head>
<body>
    <!-- 跳转到本地文件：相对路径查找 -->
    <!-- target="_blank" 新窗口跳转页面 -->
    <a href="https://www.baidu.com">百度</a>
    <a href="./01-标签的写法.html" target="_blank">01标签写法</a>
    <!-- 开发初期，不知道超链接的地址，href属性值写# 表示她的空连接，不会跳转 -->
    <a href="#">空链接</a>
</body>
</html>

14-音频

<!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>
    <!-- 在HTML5里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
    <audio src="./media/music.mp3" controls loop autoplay></audio>
    <!-- controls:显示播放的控件 loop:循环播放 autoplay:自动播放-->
</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>视频标签</title>
</head>
<body>
    <video src="./media/video.mp4" controls loop muted autoplay></video>
    <!-- controls:显示播放的控件 loop:循环播放 autoplay:自动播放（必须添加muted） muted:静音播放-->

</body>
</html>

16-招聘案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-案例综合案例1-招聘案例</title>
</head>
<body>
   <h1>腾讯科技高级web前端开发岗位</h1> 
   <hr>
   
   <h2>职位描述</h2>
   <p>负责重点项目的前端技术方案和架构的研发和维护工作；</p>

   <h2>岗位要求</h2>
   <p>
        5年以上前端开发经验，
        <strong>精通html5/css3/javascript等</strong>
        web开发技术；<br>
    </p>
    <p>
        熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上；
    </p>

    <p>
        代码⻛格严谨，能⾼保真还原设计稿，能兼容各种浏览器；
    </p>

    <p>
        对web前端的性能优化以及web常见漏洞有一定的理解和相关实践；
    </p>

    <p>
        具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；
    </p>
    <p>
        责任心强，思路路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。
    </p>

    <h2>工作地址</h2>
    <p>上海市-徐汇区-腾云大厦</p>

    <img src="./image.png" alt="">
</body>
</html>

在这里插入图片描述

18-个人简历

<!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>
    <hr>
    <p>巨大化BJCJCMN ，。。。， <a href="./01-标签的写法.html" target="_blank">HTML5</a></p>
    <img src="./33333.jpg" alt="">
    <h2>学习经历</h2>
    <p>就你上次你看</p>
    <h2>主要成就</h2>
    <p>jnjsdhbc
        <strong>大学专业是计算机专业</strong>
        变成精神病的持久化
        <em>开启了自己的前端生涯</em>
        <br>
        <p>dcnknk </p>
    </p>
    <h2>社会任职</h2>
    <p>女性角色本场比赛</p>

</body>
</html>

19-vue简介

<!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>Vue.js</h1>
    <p>dsjbvbvjb mcnb                 b hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
    <br>
    <p>其作者是
        <a href="./个人简历.html" target="_blank">刘雨欣</a>
    </p>

    <h2>主要功能</h2>
    <p>此技术的集成技术成就jhhhhhhhhhhhhhhhhhhhhhhhhhkkkkkkkkkkscnnnnn</p>
    <br>
    <p>bcjs cm mcksjnkcsdkckkkkkkkkk</p>
    <br>
    <p>cmjnvnnkvvkfkfk</p>

    <video src="./video.mp4" controls></video>



</body>
</html>
heibut不相信眼泪
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
笔记-day09-前端基础CSS第七天.pdf
10-11
前端基础CSS第七天笔记 在本笔记中，我们主要讨论了前端基础CSS的第七天学习目标，包括使用精灵图、字体图标、写出CSS三角、写出常见的CSS用户界面样式、说出常见的布局技巧等。 精灵图 精灵图是一种CSS技术，...
笔记-day07-前端基础CSS第五天.pdf
10-11
1. **布局定位属性**：这部分属性主要决定了元素的位置和展示方式。首先是`display`，它决定了元素的渲染模式，如块级元素、行内元素或Flexbox。接着是`position`，决定元素的定位方式，如静态、相对、绝对或固定。...
前端笔记-day05
qyk666的博客
05-11 427
01-结构伪类选择器 02-结构伪类选择器-公式用法 03-伪元素选择器 04-盒子模型-组成 05-盒子模型-边框线 06-盒子模型-单方向边框线 07-盒子模型-内边距 08-盒子模型-padding多值写法 09-盒子模型-尺寸计算 10-盒子模型-版心居中 11-清除默认样式 12-元素溢出overflow 13-外边距合并现象 14-外边距塌陷问题 15-行内元素的垂直内外边距 16-圆角的基本使用 17-圆角-特殊场景 18-扩展-盒子阴影 19-综合案例-产品卡片 20-综合案例-新浪新闻1
前端笔记-day02
qyk666的博客
05-11 375
01-无序列表 02-有序列表 03-定义列表 04-表格 06-表格-合并单元格 07-表单-input 08-表单-input占位文本 09-表单-单选框 10-表单-上传多个文件 11-表单-多选框 12-表单-下拉菜单 13-表单-文本域 14-表单-label标签 15-表单-按钮 16-无语义-span和div 17-字体实体 19-注册登录页面
前端笔记-day07
qyk666的博客
05-20 374
学成在线网站
前端笔记-day04
qyk666的博客
05-11 434
01-后代选择器 02-子代选择器 03-并集选择器 04-交集选择器 05-伪类选择器 06-拓展-超链接伪类 07-CSS特性-继承性 08-CSS特性-层叠性 09-CSS特性-优先级 11-Emmet写法 12-背景图 13-背景图平铺方式 14-背景图位置 15-背景图缩放 16-背景图固定 17-background属性 18-显示模式 19-显示模式转换 20-综合案例-热词 21-综合案例-banner效果
前端笔记-day03
qyk666的博客
05-11 313
01-初始CSS 02-CSS引入方式 03-标签选择器 04-类选择器 05-id选择器 06-通配符选择器 07-画盒子 08-字体大小 09-文字粗细 10-字体倾斜 11-行高 12-行高垂直居中 13-字体族 14-font复合属性 15-文本缩进 16-文本对齐方式 17-图片对齐方式 18-文本修饰线 19-文字颜色 20-调试工具 21-综合案例 22-CSS简介
Web前端学习笔记--day1
qq_44515207的博客
02-03 207
Web前端学习笔记–初始 1.开发工具：visual studio code 2.安装插件：live server 二、html基础 1.新建一个html文件：快捷键!+Tab键生成模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
前端笔记-day06
qyk666的博客
05-13 361
01-浮动-基本使用 02-浮动-产品布局 03-浮动-清除浮动带来的影响 04-清除浮动-额外标签法 05-清除浮动-单伪元素法 06-清除浮动-双伪元素法 单伪元素和双伪元素CSS 07-清除浮动-overflow 08-flex布局-体验 09-flex布局-组成 10-flex布局-主轴对齐方式 11-flex布局-侧轴对齐方式 13-flex布局-修改主轴方向 14-flex布局-弹性伸缩比 15-flex布局-弹性换行 16-flex布局-行对齐方式 17-综合案例-抖音解决方案
武职302303笔记-day02
长安紫薯的专栏
06-20 565
亿级高并发架构：nginx+redis+springjdbc+rabbitmq/rocketmq+es+docker+k8s。例如：qq登录，输入用户名和密码。它去后台系统中查询此用户名是否存在，去验证输入密码是否正确。企业级框架：SpringtBoot+SpringMVC+Spring+MybatisPlus。后端：java(SUN、Oracle）+企业级框架+亿级高并发架构+大数据+人工智能。大数据+hadoop+spark+storm+flink+clickhouse。前端技术它的作用：给客户展现。
笔记-day08-前端基础CSS第六天.pdf
10-11
CSS 定位基础知识 CSS 定位是 CSS 布局中非常重要的一部分，它可以让我们更灵活地控制页面元素的位置和布局。今天，我们将学习 CSS 定位的基础知识，包括为什么需要使用定位、定位的组成部分、定位模式的分类和特点...
2020/2/19学习笔记-day01
01-20
【Java学习笔记-day01】 Java是一门广泛应用于软件开发的高级编程语言，自1995年诞生以来，经历了多次版本更新，逐渐发展成为现代软件工程的重要支柱。本篇笔记主要介绍了Java学习的一些基础知识，包括XML、面向...
SpringBoot-jt-day01
05-28
通过这个"课堂笔记"，我们将探索其主要特性，以便于理解和应用。 1. **Spring Boot概述**： - Spring Boot是由Pivotal团队提供的全新框架，目标是简化Spring应用的初始搭建以及开发过程。 - 它采用“约定优于配置...
如何搭建互联网医院系统源码？医疗陪诊APP开发实战详解
最新发布
meihusdk的博客
07-11 246
希望本文能够为正在或即将从事相关开发的技术人员提供一些参考和帮助。通过不断的努力和创新，我们可以为患者提供更优质的医疗服务，推动医疗行业的数字化转型。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 193
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 884
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 781
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
python学习笔记-day8-2-【python 异常处理 try except】
05-17
在Python中，异常处理是非常重要的一部分。当程序运行时如果出现错误，如果没有异常处理，程序就会崩溃。为了避免这种情况，Python提供了异常处理机制。 在Python中，异常处理语句使用 `try` 和 `except` 关键字来实现。`try` 语句块中包含可能会发生异常的代码，如果这段代码出现了异常，则会跳转到 `except` 语句块中执行异常处理代码。 下面是一个简单的例子： ```python try: num = int(input("请输入一个整数：")) print(10/num) except ZeroDivisionError: print("除数不能为0") except ValueError: print("输入的不是整数") ``` 在上面的代码中，我们尝试将用户输入的字符串转换为整数，并将其用作除数计算 10/num。如果用户输入的是 0，则会触发 ZeroDivisionError 异常。如果用户输入的不是整数，则会触发 ValueError 异常。如果发生异常，则会跳转到对应的 except 语句块中执行处理代码。 除了可以指定具体的异常类型，也可以使用 `except Exception` 来捕获所有异常。例如： ```python try: num = int(input("请输入一个整数：")) print(10/num) except Exception as e: print("发生异常：", e) ``` 在上面的代码中，如果发生任何异常，都会跳转到 `except` 语句块中执行处理代码，并将异常信息打印出来。 除了 `try` 和 `except`，还有 `finally` 关键字，它指定的代码块无论是否发生异常都会执行。例如： ```python try: num = int(input("请输入一个整数：")) print(10/num) except Exception as e: print("发生异常：", e) finally: print("程序执行完毕") ``` 在上面的代码中，无论是否发生异常，都会执行 `finally` 中的代码，即输出“程序执行完毕”。 总之，在Python中，异常处理是非常重要的一部分，它可以有效避免程序崩溃，提高程序的健壮性和可靠性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值