一叶知秋

外观

001

01_开发环境 + HTML 语法 + 文字排版 + 多媒体标签 ​

01_开发环境 ​

01_准备开发环境 ​

01_在哪里写代码? 在哪里看效果?

002

02_VSCode 安装

003004

03_谷歌浏览器安装

双击 ChromeSetup.exe 谷歌浏览器安装包, 即可

005

04_VSCode 基本使用

打开文件夹 任意文件夹 ==> 拖拽至 VSCode 空白位置即可

安装插件

  • 扩展 ==> 搜索插件 ==> 安装 ==> 重启 VSCode
  • 打开网页插件: open in browser
  • 汉化菜单插件: Chinese
006

缩放代码字号

  • 放大: Ctrl + 加号
  • 缩小: Ctrl + 减号

05_设置默认浏览器

Windows ==> 设置 ==> 应用 ==> 默认应用 ==> Web 浏览器

007

02_HTML 语法 ​

01_标签语法 ​

01_HTML 定义

HTML 超文本标记语言 -- HyperText Markup Language

  • 超文本是什么? 链接
  • 标记是什么? 标记也叫标签, 带尖括号的文本
008

02_标签语法

009
  • 标签 成对 出现, 中间包裹内容
  • < > 里面 放英文字母 (标签名)
  • 结束标签比开始标签多 /
html
<!-- /code/test.html -->

<!-- 1.标签语法 -->
<strong>文字内容</strong>

拓展

  • 双标签: 成对出现的标签
  • 单标签: 只有开始标签, 没有结束标签
010
html
<!-- /code/test.html -->

<!-- 1.双标签: 成对出现的标签 -->
<strong>文字内容</strong>

<!-- 2.单标签: 只有开始标签, 没有结束标签 -->
<hr>

03_总结

保存 HTML 标签的文件扩展名是什么?

  • .html

HTML 标签名要放到什么括号里面?

  • 尖括号 < >

结束标签比开始标签多什么?

  • /

标签包裹的内容放在什么位置?

  • 开始标签和结束标签之间
011

02_HTML 基本骨架 ​

01_HTML 基本骨架

HTML基本骨架是 网页模板

012
  • html: 整个网页
  • head: 网页头部, 存放给 浏览器 看的代码, 例如 CSS
  • body: 网页主体, 存放给 用户 看的代码, 例如 图片, 文字
  • title: 网页标题

VSCode 快速生成骨架:

  • 在 HTML 文件 (.html) 中, ! (英文) 配合 Enter / Tab 键
013
html
<!-- /code/test.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 2.网页标题 -->
  <title>网页标题</title>
</head>

<!-- 1.网页主体: 存放给 用户 看的代码, 例如 图片, 文字 -->
<body>
  给用户看的, 能看见吗
</body>

</html>

02_总结

VSCode 如何快速生成 HTML 骨架?

  • ! (英文) 配合 Enter 或 Tab
014
  • html ==> 整个网页
  • head ==> 网页头部
  • title ==> 网页标题
  • body ==> 网页主体

03_标签的关系 ​

01_标签的关系

作用: 明确代码的书写位置

  • 父子关系 (嵌套关系)
  • 兄弟关系 (并列关系)
015
html
<!-- /code/test.html -->

<!-- 1.父子关系 (嵌套关系) -->
<html>
  <!-- 2.兄弟关系 (并列关系) -->
  <header></header>
  <body></body>
</html>

02_总结

标签之间有 2 种关系? 分别是什么关系?

  • 父子 关系 (嵌套)
  • 兄弟 关系 (并列)
016
  • 向 后 缩进: Tab
  • 向 前 缩进: Shift + Tab

04_注释 ​

01_注释

  • 注释就是对代码的解释和说明, 其目的是让人们能够更加轻松地了解代码; 注释是编写程序时, 写程序的人给一个语句, 程序段, 函数等的解释或提示, 能提高程序代码的可读性
  • 在编写 HTML 代码时, 我们经常要在一些关键代码旁做一下注释, 这样做的好处很多, 比如: 方便理解, 方便查找或方便项目组里的其它程序员了解你的代码, 而且可以方便以后你对自己代码进行修改
  • 学习和工作中, 关键代码都要加注释

注释的写法

  • <!--...--> 注释标签用来在源文档中插入注释, 注释不会在浏览器中显示
  • 在 VSCode 中, 添加 / 删除 注释的快捷键: Ctrl + /
html
<!-- /code/test.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>
  <!-- 1.这是文字, 能看见吗? 变成了注释, 浏览器不显示 -->
  <strong>这是加粗的 strong</strong>
</body>

</html>

02_总结

在 VSCode 中, 添加 / 删除 注释的快捷键是什么?

  • Ctrl + /

浏览器会展示注释的内容吗?

  • 不显示 注释的内容

03_文字排版 ​

01_标题标签 + 段落标签 ​

01_标题标签

一般用在新闻标题, 文章标题, 网页区域名称, 产品名称 等等

017

标签名: h1 ~ h6 (双标签)

显示特点:

  • 文字加粗
  • 字号逐渐减小
  • 独占一行 (换行)
018
html
<!-- /code/test.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>
  <!-- 1.标题标签: 文字加粗, 字号逐渐减小, 独占一行 (换行) -->
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
</body>

</html>

经验分享:

  • h1 标签在一个网页中 只能用一次, 用来放 新闻标题 或 网页的 logo
  • h2 ~ h6 没有使用次数的限制
019

02_总结

标题标签一共有 6 级别? 标签名分别是什么?

  • h1 ~ h6

在浏览器中, 各个标题标签的显示效果有什么特点?

  • 文字加粗
  • 字号逐渐减小
  • 独占一行

哪个标题标签有使用次数的限制?

  • h1: 一个网页就用一次, 用来放 新闻标题 或 网页 Logo

03_段落标签

一般用在新闻段落, 文章段落, 产品描述信息 等等

020

标签名: p (双标签)

显示特点:

  • 独占一行
  • 段落之间存在间隙
021
html
<!-- /code/test.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>
  <!-- 1.段落标签: 独占一行, 段落之间存在间隙 -->
  <p>
    Vue (读音 /vju: /, 类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 [5] 与其它大型框架不同的是,
    Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。
    另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用 (SPA) 提供驱动。
  </p>
  <p>
    Vue (读音 /vju: /, 类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 [5] 与其它大型框架不同的是,
    Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。
    另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用 (SPA) 提供驱动。
  </p>
</body>

</html>

04_总结

段落标签名是什么?

  • p (双标签)

在浏览器中, 段落标签的显示效果是什么?

  • 独占一行
  • 段落之间有间隙

02_换行标签 + 水平线标签 ​

01_换行标签

换行: <br> (单标签)

022
html
<!-- /code/test.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>
  <!-- 1.换行标签: 浏览器不识别代码中的 Enter 键换行 -->
  第一行内容
  <br>
  <br>
  第二行内容
</body>

</html>

02_水平线标签

水平线: <hr> (单标签)

023
html
<!-- /code/test.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>
  <!-- 1.水平线标签 -->
  <hr>
</body>

</html>

03_总结

代码中敲 Enter 换行, 在浏览器中有换行的效果吗?

  • 没有换行效果

强制换行的标签是什么?

  • <br> 单标签

水平线标签是什么?

  • <hr> 单标签

03_文本格式化标签 ​

01_文本格式化标签

作用: 为文本添加特殊格式, 以 突出重点; 常见的文本格式: 加粗, 倾斜, 下划线, 删除线 等

024

strong, em, ins, del 标签自带 强调含义 (语义)

025
html
<!-- /code/test.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>
  <!-- 1.加粗标签 -->
  <strong>strong 加粗</strong>
  <b>b 加粗</b>

  <!-- 2.倾斜标签 -->
  <em>em 倾斜</em>
  <i>i 倾斜</i>

  <!-- 3.下划线标签 -->
  <ins>ins 下划线</ins>
  <u>u 下划线</u>

  <!-- 4.删除线标签 -->
  <del>del 删除线</del>
  <s>s 删除线</s>
</body>

</html>

02_总结

两个文本格式化标签是换行还是在一行显示?

  • 在一行显示

下列标签的作用分别是什么?

  • strong 加粗
  • em 倾斜

04_多媒体标签 ​

01_图像标签 ​

01_基本使用

作用: 在网页中插入图片

026

src 用于指定 图像的位置和名称, 是 <img> 的 必须属性

027
html
<!-- /code/test.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>
  <!-- 1.图像标签: src 用于指定 图像的位置和名称 -->
  <img src="./cat.jpg">
  <img src="./dog.jpg">
</body>

</html>

02_总结

在网页中, 嵌入图片的标签是什么?

  • <img> 单标签

图像标签的必须属性是什么? 作用是什么?

  • src, 用来指定图像的位置和名称
  • 以 ./ 开头, VSCode 有提示功能
028

03_属性

029
html
<!-- /code/test.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>
  <!-- 1.alt 替换文本: 以前网速慢, 可能导致图片加载不出来, 不想影响网页内容的浏览, 用 alt 替换 -->
  <img src="./cat1.jpg" alt="这是一只猫">

  <!-- 2.title 提示文本: 鼠标悬停在图片上面的时候显示的文字 -->
  <img src="./dog.jpg" title="这是一只狗">

  <!-- 3.width 图片的宽度: 浏览器缩放图片, 默认是等比例缩放 -->
  <img src="./cat.jpg" width="100">

  <!-- 4.height 图片的高度: 浏览器缩放图片, 默认是等比例缩放 -->
  <img src="./dog.jpg" height="600">
</body>

</html>
030
  • 属性名="属性值"
  • 属性写在 尖括号里面, 标签名后面, 标签名和属性之间用 空格 隔开, 不区分先后顺序

02_相对路径 + 绝对路径 ​

01_路径

031
  • 路径指的是查找文件时, 从 起点到终点 经历的路线

路径分类:

  • 相对路径∶ 从 当前文件位置 出发查找目标文件
  • 绝对路径: 从 盘符 出发查找目标文件
    • Windows 电脑从盘符出发
    • Mac 电脑从根目录出发

02_相对路径

相对路径 - 从 当前文件位置 出发查找目标文件

032
  • / 表示 进入某个文件夹里面 文件夹名字/
  • . 表示 当前 文件所在文件夹 ./
  • .. 表示当前文件的 上一级 文件夹 ../
html
<!-- /code/相对路径/相对路径.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>
  <!-- 1.jpg, 当前 文件所在的文件夹 -->
  <img src="./1.jpg">

  <!-- 2.gif, 进入某个文件夹里面 -->
  <img src="./images/2.gif">

  <!-- 3.jpg, 当前文件的 上一级 文件夹 -->
  <img src="../3.jpg">
</body>

</html>

03_总结

在路径写法中, 以下符号表示什么含义?

  • . 当前 文件所在文件夹
  • .. 当前文件 上一级 文件夹
  • / 进入某个文件夹里面

04_绝对路径

绝对路径 - 从 盘符 出发查找目标文件

  • Windows 电脑从 盘符 出发
  • Mac 电脑从 根目录 (/) 出发
033
  • Windows 默认是 , 其他系统是 /, 建议统一写为 /
034
035
html
<!-- /code/绝对路径.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>
  <!-- 1.绝对路径: 从 盘符 出发查找目标文件 -->
  <img src="C:\Users\18123\Desktop\code\mao.jpg">

  <!-- 2.Windows 默认是 \, 其他系统是 /, 建议统一写为 / -->
  <img src="C:/Users/18123/Desktop/code/mao.jpg">

  <!-- 3.文件的在线网址 -->
  <img src="https://www.itheima.com/images/logo.png">
</body>

</html>

03_超链接标签 ​

01_超链接

036
  • 作用: 点击跳转到其他页面
037
  • href 属性值是 跳转地址, 是超链接的 必须属性
  • 超链接默认是在当前窗口跳转页面, 添加 target="_blank" 实现 新窗口 打开页面。
  • 拓展: 开发初期, 不确定跳转地址, 则 href 属性值写为 #, 表示 空链接, 页面不会跳转, 在当前页面刷新一次
html
<!-- /code/test.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>
  <!-- 1.超链接: href 属性值是 跳转地址 -->
  <a href="https://www.baidu.com/">跳转到百度</a>

  <!-- 2.跳转到本地文件: 相对路径查找 -->
  <a href="./01_标签的写法.html">跳转到01_标签的写法</a>

  <!-- 3.target="_blank" 新窗口 打开页面 -->
  <a href="./01_标签的写法.html" target="_blank">跳转到01_标签的写法</a>

  <!-- 4.开发初期, 不确定跳转地址, 则 href 属性值写为 #, 表示 空链接, 页面不会跳转, 在当前页面刷新一次 -->
  <a href="#">空链接</a>
</body>

</html>

02_总结

超链接标签的作用是什么?

  • 单击跳转到其他页面

开发初期, 不确定跳转地址, 如何书写 href 属性值?

  • # 空链接

target="_blank" 属性的作用是什么?

  • 在 新窗口 打开页面

04_音频标签 + 视频标签 ​

01_音频标签

038

常见属性

039
html
<!-- /code/test.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>
  <!-- 1.在 HTML5 里面, 如果属性名和属性值完全一样, 可以简写为一个单词 -->
  <audio src="./media/music.mp3" controls loop autoplay></audio>
</body>

</html>

02_视频标签

040

常见属性

041
html
<!-- /code/test.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>
  <!-- 1.在浏览器中, 想要自动播放, 必须有 muted 属性 -->
  <video src="./media/vue.mp4" controls loop muted autoplay></video>
</body>

</html>

05_综合案例 ​

01_个人简介 ​

01_个人简介

  • 网页制作思路: 从上到下, 先整体再局部, 逐步分析制作
  • 分析内容 ==> 写代码 ==> 保存 ==> 刷新浏览器, 看效果
042
html
<!-- /code/个人简介.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="./Vue简介.html">Vue.js</a> 的作者, <a href="#">HTML5</a> 版 Clear 的打造人, 独立开源开发者。
    曾就职于 Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目 <a href="#">JavaScript</a>,
    最后自己也走上了开源之路, 现全职开发和维护 <a href="#">Vue.js</a>。
  </p>

  <img src="./photo.jpg" alt="尤雨溪的照片" title="尤雨溪">

  <h2>学习经历</h2>
  <p>
    尤雨溪毕业于上海复旦附中, 在美国完成大学学业, 本科毕业于 Colgate University,
    后在 Parsons 设计学院获得 Design & Technology 艺术硕士学位, 任职于纽约 Google Creative Lab。
  </p>

  <h2>主要成就</h2>
  <p>
    尤雨溪<strong>大学专业并非是计算机专业</strong>, 在大学期间他学习专业是室内艺术和艺术史,
    后来读了美术设计和技术的硕士, <ins>正是在读硕士期间, 他偶然接触到了 JavaScript, 从此被这门编程语言深深吸引, 开启了自己的前端生涯</ins>。
  </p>
  <p>
    2014 年 2 月, 开发了一个前端开发库 Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架, 是一个通过简洁的 API 提供高效的数据绑定和灵活的组件系统。
  </p>

  <h2>社会任职</h2>
  <p>
    2016 年 9 月 3 日, 在南京的 JSConf 上, Vue 作者尤雨溪正式宣布加盟阿里巴巴 Weex 团队, 尤雨溪称他将以技术
    顾问的身份加入 Weex 团队来做 Vue 和 Weex 的 JavaScript runtime 整合,目标是让大家能用 Vue 的语法跨三端。
  </p>
</body>

</html>

02_Vue 简介 ​

01_Vue 简介

  • 从上到下, 先整体再局部, 逐步分析制作
043
html
<!-- /code/Vue简介.html -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 简介</title>
</head>

<body>
  <h1>Vue.js</h1>
  <p>
    Vue (读音 /vju:/, 类似于 view) 是一套用于构建用户界面的渐进式 JavaScript 框架。 [5] 与其它大型框架不同的是,
    Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。
    另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用 (SPA) 提供驱动。
  </p>
  <p>其作者为<a href="./个人简介.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="./media/vue.mp4" controls></video>
</body>

</html>

更新时间: