01HTML+CSS
今日正式开始学习前端,学习内容有
1.标签的写法:标签分为单标签和双标签,其中他们都是由尖括号组成<>,例如:加粗标签<strong></strong>,倾斜标签<em></em>,下划线标签<ins></ins>,删除线标签<del></del>。
2.HTML的基本骨架:HTML主要由<HTML></HTML>组成,在这里面有<head></head>head是给浏览器看的,<body></body>body是给用户看的,我们一般写代码都在这里,在VScode中可以使用!一键生成HTML的骨架。
3.标签的关系:标签的关系分为两类1.父级关系,类似于嵌套,html标签里面有head和body2.兄弟关系,类似于并列,就像body标签和head标签一样。
4.注释:注释可以直接用 / /,也可以使用ctrl+/ 更方便一些,方便自己和其他人理解代码。
5.标题标签:标题标签就是用来写一篇文章的标题的,用<h1></h1>~<h6><h6>这6种标题种类,h1只能有一个可以做主标题或logo,其余标题可以有多个,由1-6,标题样式逐渐减小。
6.段落标签:<p></p>是段落标签,用来包裹一段话,可以自动换行和加空行也可以在里面加入超链接,或文字加粗,下划线等。
7.换行和水平线标签:<br>是换行标签,这是一个单标签,就是用来主动的换行,作用像是键盘的enter。<hr>是水平线标签,作用就是在界面中加一个水平线。
8.文本格式化标签:就是1里面提到的,加粗,倾斜,下划线,删除线。
9.图像:要在界面中添加图像用到<img src=" 路径" />,在尖括号里面可以添加图片的属性,(alt=" " 以前网速慢,可能导致图片加载不出来,不想影响网页内容的浏览,用alt替换 ),(title=" " 将鼠标放到图片上,可以看到图片的名称),(width=," "heigth=" " 浏览器缩放图片,默认是等比例缩放).
10.路径:路径分为绝对路径和相对路径,一般来说我们使用相对路径,相对路径用法:. 表示当前目录,. . 表示上一级目录,/ 表示进入这个目录,/ 后面跟要引入的图片。绝对路径:就是图片在磁盘中的位置和一些超链接。我们在界面中给友情链接会使用超连接。
11音频:页面添加音频用到<audio src=" 路径" >也可以在里面添加属性,如果属性名和属性值一样,可以只把属性名写出就行,后面的属性都是。controls表示在页面中显示出来,一般都是需要的,loop循环播放, autoplay自动播放,一般浏览器是不会让自动播放的,加上也没用。
12.视频:页面添加需要用到<video src=" 路径"> 也可以在里面添加属性,controls页面显示, loop,循环播放 muted静音播放, autoplay自动播放。当有静音的时候视频可以自动播放。
13.超链接:超链接用到<a herf=" 路径" >超链接名字</a>,直接用这是在自己的窗口打开, target="_blank" 新窗口跳转页面,开发初期,不知道超链接的跳转地址,href属性值写#,表示空链接,不会跳转。
综合案例一代码。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>个人简介</title> 8 </head> 9 10 <body> 11 <h1>尤雨希</h1> 12 <hr> 13 <p>尤雨溪,前端框架<a href="./15综合案例二.html">Vue.js</a>的作者,<a href="#">HTML5</a> 版Clear的打造人,独立开源开发者。曾就职于Google Creative Labs和 14 Meteor Development Group。由于工作中大量接触开源的项目<a href="#">JavaScript</a>,最后自己也走上了开源之路,现全职 15 开发和维护<a href="./15综合案例二.html">Vue.js</a>。</p> 16 <img src="./cat.jpg" alt="尤雨希" title="尤雨希" width="270"> 17 <h2>学习经历</h2> 18 <p>尤雨溪毕业于上海复旦附中,在美国完成大学学业,本科毕业于Colgate University,后在Parsons设计学院获得Design & Technology艺术硕士学位, 19 任职于纽约Google Creative Lab</p> 20 <h2>主要成就</h2> 21 <p>尤雨溪<strong>大学专业并非是计算机专业</strong>,在大学期间他学习专业是室内艺术和 22 艺术史,后来读了美术设计和技术的硕士, <ins>正是在读硕士期间,他偶然 23 接触到了JavaScript ,从此被这 24 门编程语言深深吸引,开启了自己的前端生涯。</ins></p> 25 <p>2014年2月,开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架,是一个通过简洁的API提供高效的 26 数据绑定和灵活的组件系统。</p> 27 <h2>社会任职</h2> 28 29 <p>2016年9月3日,在南京的JSConf上,Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队,尤 30 雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 31 整合,目标是让大家能用 Vue 的语法跨三端。</p> 32 </body> 33 34 </html>
综合案例二代码。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Vue 简介</title> 7 </head> 8 <body> 9 <h1>Vue.js</h1> 10 <p>Vue (读音 /vjuː/,类似于 view) 是一 11 套用于构建用户界面的渐进式JavaScript 12 框架。 [5] 与其它大型框架不同的是, 13 Vue 被设计为可以自底向上逐层应用。 14 Vue 的核心库只关注视图层,不仅易于上 15 手,还便于与第三方库或既有项目整合。 16 另一方面,当与现代化的工具链以及各种 17 支持类库结合使用时,Vue 也完全能够为 18 复杂的单页应用(SPA)提供驱动。</p> 19 <p>其作者为 <a href="./14综合案例一.html" target="_blank">尤雨希</a></p> 20 <h2>主要功能</h2> 21 <p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p> 22 <p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p> 23 <p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时 [2] ,Vue.js 也能驱动复杂的单页应用。</p> 24 <video src="./media/vue.mp4" controls></video> 25 </body> 26 </html>
效果图:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤