一.HTML基础知识
HTML 超文本标记语言——HyperText Markup Language
1.标签与语法
(1)含义
超文本:链接
标记:标签,带尖括号的文本
(2)标签结构
①标签要成对出现,中间包裹内容【分为开始标签和结束标签】
②里面放英文字母(标签名)
③结束标签比开始标签多 /
④标签分类:双标签和单标签
需要加粗的文字
是水平线(horizontal rule)的标签。这个标签用于在文档中创建一条水平分隔线
是换行(line break)的标签。这个标签用于在文本中创建一个换行,将文本分隔到下一行
(3)HTML骨架
html:整个网页
head:网页头部,用来存放给浏览器看的信息,例如 CSS
title:网页标题
body:网页主体,用来存放给用户看的信息,例如图片、文字
网页标题 网页主体 </html
提示
1.VS Code 可以快速生成骨架:在 HTML 文件(.html)中,!(英文)配合 Enter / Tab 键
2.在 VS Code 中,添加 / 删除注释的快捷键:Ctrl + /
(4)路径
概念:路径指的是查找文件时,从起点到终点经历的路线。
路径分类:
相对路径:从当前文件位置出发查找目标文件
绝对路径:从盘符出发查找目标文件 Windows 电脑从盘符出发 Mac 电脑从根目录出发
(5)文本格式化标签
作用:为文本添加特殊格式,以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等。
常用于左边表格的标签名(自带强调功能)
二.综合案例
通过黑马程序员前端视频学习,我深刻体会到了其高质量和实用性。课程内容设计合理,从基础知识到深入应用,贯穿了前端开发的方方面面。视频教程生动形象,讲解清晰,让我更容易理解和掌握前端技术。
在学习过程中,我获得了丰富的HTML、CSS和JavaScript等基础知识,同时也深入学习了React和Vue等主流前端框架,为我今后的项目开发打下了坚实的基础。视频中的实战案例让我更好地应用所学知识,提升了解决实际问题的能力。
以下是学习到的两个案例,希望能够更好地带大家一起入门前端web。
案例1——个人简介
1.重要运用知识
标题标签
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
特点与经验
1.文字加粗 字号逐渐减小 独占一行(换行)
2.h1 标签在一个网页中只能用一次,用来放新闻标题或网页的 logo
3.h2 ~ h6 没有使用次数的限制
段落标签
段落
特点:
独占一行 段落之间存在间隙
图像标签
src用于指定图像的位置和名称,是img的必须属性。
图像属性
属性语法
属性名="属性值"
属性写在尖括号里面,标签名后面,标签名和属性之间用空格隔开,不区分先后顺序
超链接标签
作用:点击跳转到其他页面。
跳转到百度
href 属性值是跳转地址,是超链接的必须属性。 超链接默认是在当前窗口跳转页面,添加 target="_blank" 实现新窗口打开页面。
拓展:开发初期,不确定跳转地址,则 href 属性值写为 #,表示空链接,页面不会跳转,在当前页面刷新一次
2.结果及源码
尤雨溪
尤雨溪,前端框架Vue.js的作者,HTML5版Clear的打造人,独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目JavaScript,最后自己也走上了开源之路,现全职开发和维护Vue.js。
学习经历
尤雨溪毕业于上海复旦附中,在美国完成大学学业,本科毕业于Colgate University,后在Parsons设计学院获得Design & Technology艺术硕士学位,任职于纽约Google Creative Lab。
主要成就
尤雨溪大学专业并非是计算机专业,在大学期间他学习专业是室内艺术和艺术史,后来读了美术设计和技术的硕士, 正是在读硕士期间,他偶然接触到了JavaScript ,从此被这门编程语言深深吸引,开启了自己的前端生涯 。
2014年2月,开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架,是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。
社会任职
2016年9月3日,在南京的JSConf上,Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队,尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合,目标是让大家能用 Vue 的语法跨三端。</p
案例2——Vue简介
1.重要运用知识
音频
常用属性
视频
常用属性
2.结果及源码
Vue.js
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。
其作者为尤雨溪
主要功能
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时 [2] ,Vue.js 也能驱动复杂的单页应用。