文章目录
- 一、准备开发环境
-
- [1.1 安装软件](#1.1 安装软件)
- [1.2 软件的基本使用](#1.2 软件的基本使用)
- 二、标签语法01
-
- [1.1 HTML定义](#1.1 HTML定义)
- [1.2 标签语法](#1.2 标签语法)
- [1.3 HTML基本骨架](#1.3 HTML基本骨架)
- [1.4 标签的关系](#1.4 标签的关系)
- [1.5 注释](#1.5 注释)
- [1.6 标题标签](#1.6 标题标签)
- [1.7 段落标签](#1.7 段落标签)
- [1.8 换行和水平线](#1.8 换行和水平线)
- [1.9 文本格式化标签](#1.9 文本格式化标签)
- [1.10 图像标签](#1.10 图像标签)
- [1.11 路径](#1.11 路径)
- [1.12 超链接](#1.12 超链接)
- [1.13 音频标签](#1.13 音频标签)
- [1.14 视频标签](#1.14 视频标签)
- [1.15 综合案例一---个人简介](#1.15 综合案例一---个人简介)
- [1.16 案例二 --- vue.js简介](#1.16 案例二 --- vue.js简介)
一、准备开发环境
相关软件包以及上传至资源，如有需要可自行下载
1.1 安装软件
- VS Code + 谷歌浏览器
- VS Code：同意协议，选择安装路径，勾选上创建桌面快捷方式的协议，下一步，安装，等待进度条加载完成即可。回到桌面，双击快捷方式能够打开就是安装成功了。
- 谷歌浏览器：双击安装即可
1.2 软件的基本使用
-
VS Code基本使用
打开智能聊天对话的快捷键：ctrl + alt + i -
谷歌浏览器的基本使用：双击打开即可，将谷歌浏览器设置成默认浏览器的方法：
-
总结：
二、标签语法01
1.1 HTML定义
HTML超文本标记语言
- 超文本是什么？链接
- 标记是什么？标记也叫标签。带尖括号的文本
1.2 标签语法
-
语法：需要包裹内容的：双标签，不需要包裹内容的：单标签
-
加粗：
<strong></strong> -
实操：在VS Code里面新建一个网页文件：
.html结尾的，shift+ !（英文的!)回车补全内容。ctrl+ b可以折叠vscode左边的侧边栏
html
<!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>加粗文本</strong>
<br>
<hr>
</body>
</html>1.3 HTML基本骨架
1.4 标签的关系
1.5 注释
html
<!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>
<!-- Ctrl+/,变成注释，浏览器里面不会展示 -->
<!-- 这是文字，能看见吗？ -->
</body>
</html>1.6 标题标签
html
<!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>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>
</html>1.7 段落标签
1.8 换行和水平线
1.9 文本格式化标签
- 两个文本格式化标签是在一行里面显示的
1.10 图像标签
图片属性
浏览器缩放图片，默认是等比例缩放（设置一个宽度，但是高度和宽度都会等比例缩放）
1.11 路径
相对路径
绝对路径
1.12 超链接
想让要跳转的页面在新窗口打开：target="_blank"
1.13 音频标签
- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词（如controls/loop)
1.14 视频标签
- 在浏览器中，想要自动播放，必须有
autoplay属性
1.15 综合案例一---个人简介
- 网页制作思路：从上到下，先整体再局部，逐步分析制作
- 分析内容--->写代码--->保存--->刷新浏览器，看效果
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>
<h1>尤雨溪</h1>
<hr>
<p>尤雨溪，前端框架 <a href="./15-案例2-vue.js简介.html" target="_blank">Vue.js </a>的作者，HTML5 版 Clear 的打造人，独立开源开发者。曾就职于 Google Creative Labs 和 Meteor Development Group，由于工作中大量接触开源的项目 JavaScript，最后自己也走上了开源之路，现全职开发和维护<a href="./15-案例2-vue.js简介.html" target="_blank">Vue.js </a>。</p>
<img src="./imgs/壁纸22.png" alt="" width="400">
<h2>学习经历</h2>
<p>尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于 Colgate University，后在 Parsons 设计学院获得 Design & Technology 艺术硕士学位，任职于纽约的 Google Creative Lab。</p>
<h2>主要成就</h2>
<P>尤雨溪<b>大学专业并非是计算机专业</b>，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，是在读硕士期间，他偶然接触到了 JavaScript，从此被这门编程语言深深吸引，正开启了自己的前端生涯。</P>
<P>2014 年 2 月，<ins>开发了一个前端开发库 Vue.js，Vue.js 是构建 Web 界面的 JavaScript 框架，是一个通过简洁的 API 提供高效的数据绑定和灵活的组件系统。</ins> </P>
<H2>社会任职</H2>
<p>2016 年 9 月 3 日，在南京的 JSConf 上，Vue 作者尤雨溪正式宣布加盟阿里巴巴 Weex 团队，尤雨溪称他将以技术顾问的身份加入 Weex 团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。</p>
</body>
</html>1.16 案例二 --- vue.js简介
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js简介</title>
</head>
<body>
<h1>Vue.js</h1>
<p>Vue（读音 /vjuː/，类似于 view）是一套用于构建用户界面的渐进式 JavaScript 框架。[5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
<p>其作者为<a href="./14-案例一-个人简介.html" target="_blank">尤雨溪</a> </p>
<h2>主要功能</h2>
<p>Vue.js 是一套构建用户界面的渐进式框架，与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。</p>
<p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p>
<p>Vue.js 自身不是一个全能框架 ------ 它只聚焦于视图层，因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [2]，Vue.js 也能驱动复杂的单页应用。</p>
<video src="./video/测试视频.mp4" controls width="400" autoplay></video>
</body>
</html>