前端笔记-day1

heibut不相信眼泪2024-05-13 0:31

文章目录

01-标签的写法

python 复制代码 
<strong>文字内容</strong>
<hr>

02-HTML的基本骨架

python 复制代码 
<!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-注释

python 复制代码 
<!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-标题标签

python 复制代码 
<!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-段落标签

python 复制代码 
<!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-换行与水平线标签

python 复制代码 
<!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-文本格式化标签

python 复制代码 
<!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-图像的基本使用

python 复制代码 
<!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-图像的属性

python 复制代码 
<!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-绝对路径

python 复制代码 
<!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-超链接

python 复制代码 
<!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-音频

python 复制代码 
<!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-视频标签

python 复制代码 
<!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-招聘案例

python 复制代码 
<!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-个人简历

python 复制代码 
<!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简介

python 复制代码 
<!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>
相关推荐
齐 飞1 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹18 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
丫头，冲鸭！！！35 分钟前
B树（B-Tree）和B+树（B+ Tree）
笔记·算法
听忆.1 小时前
手机屏幕上进行OCR识别方案
笔记
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库（更新中）
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10091 小时前
ffmpeg重复回听音频流，时长叠加问题
前端
Selina K2 小时前
shell脚本知识点记录
笔记·shell
王大锤43912 小时前
golang通用后台管理系统07（后台与若依前端对接）
开发语言·前端·golang
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解