本总结学习自:最新前端开发入门教程,web前端零基础html5 +css3+前端项目视频教程
⭐️HTML初识⭐️
☀️一、基础认知
📚目标:
认识 网页组成
和 五大浏览器
,明确 Web标准的构成
,使用 HTML骨架
搭建出一个网页。
⚡️1. 前端基础概念铺垫
🚀1.1 认识网页
➢ 问题1:网页由哪些部分组成?
✓ 文字、图片、音频、视频、超链接
➢ 问题2:我们看到的网页背后本质是什么?
✓ 前端程序员写的代码
➢ 问题3:前端的代码是通过什么软件转换成用户眼中的页面的?
✓ 通过浏览器转化(解析和渲染)成用户看到的网页
🚀1.2 五大浏览器和渲染引擎
🍀1.2.1 五大浏览器
➢ 浏览器:是网页显示、运行的平台,是前端开发必备利器。
➢ 常见的五大浏览器:
• IE浏览器、火狐浏览器(Firefox)、谷歌浏览器(Chrome)、Safari浏览器、欧朋浏览器(Opera)
➢ 浏览器市场份额
谷歌浏览器最高
🍀1.2.2 渲染引擎(了解)
➢ 渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分
➢ 浏览器出品的公司不同,内在的渲染引擎也是不同的。
➢ 注意点:
• 渲染引擎不同,导致解析相同代码时的 速度、性能、效果也不同的
• 谷歌浏览器的渲染引擎速度快、性能高、效果好,所以更吸引用户的喜爱(推荐)
🚀1.3 Web标准
🍀1.3.1 为什么需要Web标准?(了解)
➢ 不同浏览器的渲染引擎不同,对于相同代码解析的效果会存在差异
- 如果用户想看一个网页,结果用不同浏览器打开效果不同,用户体验极差!
➢ Web标准:让不同的浏览器按照相同的标准显示结果,让展示的效果统一!
🍀1.3.2 Web标准的构成
➢ Web标准中分成三个构成:
🍀1.3.3 Web标准的记忆方法
➢ Web标准要求页面实现:结构、表现、行为三层分离
🍀1.3.4 小结
➢ Web标准的构成有哪些?分别通过什么语言表示?
• 结构:HTML → 页面元素
• 表现:CSS → 页面样式
• 行为:JavaScript → 页面交互的动态效果
⚡️2. HTML初体验
🚀2.1 HTML的感知
🍀2.1.1 HTML的概念
➢ HTML(Hyper Text Markup Language)中文译为:超文本标记语言
• 专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
➢ 案例:文字变粗案例
• 体验构建一个网页,需要在网页中显示一个加粗的文字
🍀2.1.2 网页体验-构建基本网页的步骤
🍀2.1.3 小结
➢ HTML的中文译名叫做?
• 超文本标记语言
➢ HTML中是通过什么来对网页中的文本、图片、音频、视频等内容进行描述的?
• HTML标签
🚀2.2 HTML骨架结构
➢ 网页类似于一篇文章:
• 每一页文章内容是有固定的结构的,如:开头、正文、落款等……
• 网页中也是存在固定的结构的,如:整体、头部、标题、主体
➢ 网页中的固定结构是要通过特点的 HTML标签 进行描述的
🍀2.2.2 小结
➢ HTML骨架结构由哪些标签组成?
• html标签:网页的整体
• head标签:网页的头部
• body标签:网页的身体
• title标签:网页的标题
🚀2.3 开发工具的使用
🍀2.3.1 为什么要使用 VS Code?
➢ 刚刚通过文本编辑器,如:记事本,完全可以编写网页源代码
• 但是效率……不忍直视
➢ 实际开发中,注重开发的 效率和便捷性 ,因此我们会使用一些开发工具
•开发工具有很多: Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder
➢ 前端开发神器:VS Code → 速度快、体积小、插件多
🍀2.3.2 VS Code使用前要求
🍀2.3.3 VS Code创建网页的步骤
🍀2.3.4 VS Code的基本快捷
-
快速生成标签:英文 + tab
-
保存文件:ctrl + s
• 注意1:写完文件之后务必需要保存文件,否则网页无变化
• 注意2:可以设置自动保存省去每次保存的麻烦
-
快速查看网页效果:右击 → Open in Default Browser
• 快捷键:alt + b
• 注意:必须安装了open in browser 插件
-
快速生成结构标签:! + tab
• 注意1:!必须是英文的,中文!无效
• 注意2:必须保证当前文件后缀名是.html,否则无效
• VS Code自动生成的骨架多了其他标签,之后会介绍
🍀2.3.5 VS Code的其他快捷键
- 快速复制一整行:ctrl + c
- 快速粘贴一整行:ctrl + v
- 快速删除(剪切)一整行:ctrl + x
……
➢ 其他快捷键会在学习过程中用到一个介绍一个,先需要把基础快捷键操作记牢!
⚡️3. 语法规范
🚀3.1 HTML的注释
🍀3.1.1 什么是注释?
➢ 在以前的学习过程中,我们都会在书本段落间记录内容的注解,方便下次看到此处理解
- 问题:同学们在书本段落间记录下的注解是为了给谁看的?
- 下次的阅读课本者(自己)
➢ 程序员在写代码时也会添加注释,方便下次看到此处时方便想起功能和含义
🍀3.1.2 注释的作用和写法
➢ 注释的作用:
- 为代码添加的具有解释性、描述性的信息,主要用来帮助开发人员理解代码
- 浏览器执行代码时会忽略所有的注释
➢ 注释的快捷键:
- 在VS Code中:ctrl + /
🍀3.1.3 小结
➢ 注释的快捷键是?
- Ctrl + /
➢ 浏览器会执行注释吗?
- 不会,浏览器执行代码时会忽略所有的注释
🚀3.2 HTML标签的构成
➢ 结构说明:
- 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
- 常见标签由两部分组成,我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容
- 少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容。
🍀3.2.2 小结
➢ 常见标签由几部分组成?称之为?
• 两部分,双标签
➢ 少数标签由几部分组成?称之为?
• 一部分,单标签
➢ 以下标签按照结构划分,分别属于哪一类标签?
<p>我是标签</p>//双标签
<h1>我是标签</h1>//双标签
<hr>//单标签
<br>//单标签
🚀3.3 HTML标签的关系
🍀3.3.1 HTML标签与标签之间的关系可分为:
➢ 父子关系(嵌套关系)
<head>
<title>网页的标题</title>
</head>
<head></head>
<body></body>
⚡️4. 第一节总结
☀️二、HTML标签学习
⚡️1. 排版标签
🚀1.1 标题标签
➢ 场景:在新闻和文章的页面中,都离不开标题,用来突出显示文章主题
➢ 代码:h系列标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
➢ 语义:1~6级标题,重要程度依次递减
➢ 特点:
• 文字都有加粗
• 文字都有变大,并且从h1 → h6文字逐渐减小
• 独占一行
➢ 注意点:h1标签对于网页尤为重要,开发中有特定的使用场景,如:新闻的标题、网页的logo部分
🚀1.2 段落标签
➢ 代码:
<p>我是一段文字</p>
➢ 语义:段落
➢ 特点:
• 段落之间存在间隙
• 独占一行
🚀1.3 换行标签
➢ 场景:让文字强制换行显示
➢ 代码:
<br>
➢ 语义:换行
➢ 特点:
• 单标签
• 让文字强制换行
🚀1.4 水平线标签
➢ 场景:分割不同主题内容的水平线
➢ 代码:
<hr>
➢ 语义:主题的分割转换
➢ 特点:
• 单标签
• 在页面中显示一条水平线
⚡️2. 文本格式化标签
🚀2.1 文本格式化标签的介绍
➢ 场景:需要让文字加粗、下划线、倾斜、删除线 等效果
➢ 代码:
标签 | 说明 |
---|---|
b | 加粗 |
u | 下划线 |
i | 倾斜 |
s | 删除线 |
标签 | 说明 |
---|---|
strong | 加粗 |
ins | 下划线 |
em | 倾斜 |
del | 删除线 |
➢ 语义:突出重要性的强调语境
📚演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>加粗</b>
<strong>加粗</strong>
<u>下划线</u>
<ins>下划线</ins>
<i>倾斜</i>
<em>倾斜</em>
<s>删除线</s>
<del>删除线</del>
</body>
</html>
🚀2.2 标签语义化(了解)
➢ 实际项目开发中选择标签的原则:标签语义化
• 即:根据语义选择对应正确的标签
• 如:需要写标题,就使用h系列标签
• 如:需要写段落,就使用p标签
• ……
➢ 好处:
• 对人:好理解,好记忆
• 对机器:有利于机器解析,对搜索引擎(SEO)有帮助
➢ 推荐:
• strong、ins、em、del,表示的强调语义更强烈!
⚡️3. 媒体标签
🚀3.1 图片标签
🍀3.1.1 图片标签的介绍
➢ 场景:在网页中显示图片
➢ 代码:
<img src="" alt="">
➢ 特点:
• 单标签
• img标签需要展示对应的效果,需要借助标签的属性进行设置!
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
🍀3.1.2 图片标签的src属性
➢ 属性名:src
➢ 属性值:目标图片的路径
➢ 注意点:
• 当前网页和目标图片在同一个文件夹中,路径直接写目标图片的名字即可(包括后缀名)
• 路径的情况有很多,稍后会详细介绍
🍀3.1.3 图片标签的alt属性
➢ 属性名:alt
➢ 属性值:替换文本
- 当图片加载失败时,才显示alt的文本
- 当图片加载成功时,不会显示alt的文本
🍀3.1.4 图片标签的title属性
➢ 属性名:title
➢ 属性值:提示文本
- 当鼠标悬停时,才显示的文本
➢ 注意点:title属性不仅仅可以用于图片标签,还可以用于其他标签
🍀3.1.5 图片标签的width和height属性
➢ 属性名:width和height
➢ 属性值:宽度和高度(数字)
➢ 注意点:
- 如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)
- 如果同时设置了width和height两个,若设置不当此时图片可能会变形
🍀3.1.6 图片标签小结
➢ 在页面中展示一张图片,需要使用什么标签?
- img标签
➢ 图片的常见属性有哪些?
属性 | 说明 |
---|---|
src | 指定需要展示图片的路径 |
alt | 替换文本,当图片加载失败时,才显示的文字 |
title | 提示文本,当鼠标悬停时,才显示的文字 |
width | 图片的宽度 |
height | 图片的高度 |
📚演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- alt : 替换文本, 当图片不显示的时候显示的文字 -->
<!-- width和height属性只需要给出一个值, 另一个等比例缩放 -- 好处就是图片不变形 -->
<img src="cat.gif" alt="这是一只猫" title="这是title文字, 鼠标悬停的时候显示" width="200" height="150">
</body>
</html>
🚀3.2 路径(很重要)
🍀3.2.1 路径的介绍
➢ 场景:页面需要加载图片,需要先找到对应的图片
➢ 类似于:生活中两个人,我要去找你,需要通过一定的路径才能找到!
➢ 同理:页面需要找到图片,也是需要通过路径才能找到
➢ 路径可分为:
• 绝对路径(了解)
• 相对路径(常用)
🍀3.2.2 绝对路径(了解)
➢ 绝对路径:指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径
➢ 例如:
• 盘符开头:D:\day01\images\1.jpg
• 完整的网络地址:https://www.itcast.cn/2018czgw/images/logo.gif(了解)
➢演示:
<img src="D:\day01\images\1.jpg" alt="">
🍀3.2.3 相对路径(常用)
➢ 概念普及:
• 当前文件:当前的html网页
• 目标文件:要找到的图片
➢ 相对路径:从当前文件开始出发找目标文件的过程
➢ 相对路径分类:
• 同级目录
• 下级目录
• 上级目录
🍀3.2.4 相对路径-同级目录
➢ 同级目录:当前文件和目标文件在同一目录中
➢ 类似于:我(当前文件)和你(目标文件)都在大厅(一个文件夹中)
- 生活中:两个人独处一室,我想找你,直接喊名字即可!
➢ 代码步骤:直接写目标文件的名字即可
- 方法一:
<img src="目标图片.gif">
- 方法二:
<img src="./目标图片.gif">
➢ VS Code快捷操作:直接敲./后,会自动提示同级目录中有哪些文件,直接选择即可!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="cat.gif" alt="">
<img src="./cat.gif" alt="">
</body>
</html>
🍀3.2.5 相对路径-下级目录
➢ 下级目录:目标文件在下级目录
<img src="images/目标图片.gif" alt="">
➢ 类似于:我在大厅,你累了去卧室休息了,我现在要找到你!
- 先知道你去了哪一个房间 → 房间名:卧室
- 进入这个房间 → 进入
- 此时又独处一室 → 直接喊你名字
➢ 代码步骤:
- 先知道在哪个文件夹里面 → 文件夹名字
- 进入这个文件夹 → /
- 此时看到目标文件直接喊她 → 直接写目标文件名字
🍀3.2.6 相对路径-上级目录
➢ 上级目录:目标文件在上级目录中
<img src="../目标图片.gif">
➢ 类似于:乾坤大挪移,我在卧室,你还在大厅,我现在要找到你!
- 先要出卧室,来到大厅 → 出去
- 此时又独处一室 → 直接喊你名字
➢ 代码步骤:
- 先出当前文件夹,到上一级目录 →
../
(若再想往上一级则写:../../
) - 此时看到目标文件直接喊她 → 直接写目标文件
🍀3.2.7 路径小结
➢ 相对路径有哪三种情况:
• 同级目录:直接写:目标文件名字!
• 下级目录:直接写:文件夹名/目标文件名字!
• 上级目录:直接下:../
目标文件名字!
➢ VSCode中路径的快捷操作?
• 同级和下级目录:./
之后选择即可
• 上级目录:../
之后选择即可
🚀3.3 音频标签
🍀3.3.1 音频标签的介绍
➢ 场景:在页面中插入音频
➢ 代码:
<audio src=" ./music.mp3" controls></audio>
➢ 常见属性:
属性名 | 功能 |
---|---|
src | 音频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
➢ 注意点:
• 音频标签目前支持三种格式:MP3、Wav、Ogg
🍀3.3.2 小结
➢ 要在网页中插入音频使用什么标签?
- audio标签
➢ 音频标签有哪些常见属性?
- src:音频路径
- controls:音频控件
- autoplay:自动播放
- loop:循环播放
🚀3.4 视频标签
➢ 场景:在页面中插入视频
➢ 代码:
<video src=" ./video.mp4" controls></video>
- 视频标签目前支持三种格式:MP4 、WebM 、Ogg
⚡️4. 链接标签
🚀4.1 链接标签的介绍
➢ 场景:点击之后,从一个页面跳转到另一个页面
➢ 称呼: a标签、超链接、锚链接
➢ 代码:
<a href="./目标网页.html">超链接</a>
➢ 特点:
• 双标签,内部可以包裹内容
• 如果需要a标签点击之后去指定页面,需要设置a标签的href属性
🚀4.2 链接标签的href属性
➢ 属性名:href
➢ 属性值:点击之后跳转去哪一个网页(目标网页的路径)
- 外部链接:
<a href="https://www.baidu.com/">百度一下</a>
- 内部链接:
<a href="./目标网页.html">目标网页</a>
🚀4.3 链接标签的显示特点(了解)
➢ 显示特点:
- a标签默认文字有下划线
- a标签从未点击过,默认文字显示蓝色
- a标签点击过之后,文字显示为紫色(清除浏览器历史记录可恢复蓝色)
🚀4.4 链接标签的target属性
➢ 属性名:target
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
🚀4.5 链接标签小结
➢ 如果需要实现点击之后,从一个页面跳转到另一个页面,需要使用什么标签?
- 链接标签:a标签
➢ 通过什么属性可以设置a标签的到底跳转去哪里?
- href属性
➢ 通过什么属性可以设置a标签的跳转方式?取值有哪些?
- target属性
- 取值1:_self:在当前窗口中跳转
- 取值2:_blank:在新窗口中跳转
🚀4.6 空链接(拓展补充)
➢ 代码:
<a href="#">空链接, 不知道跳到哪里去</a>
➢ 功能:
• 点击之后回到网页顶部
• 开发中不确定该链接最终跳转位置,用空链接占个位置
☀️三、 综合案例
⚡️综合案例一
🍀文本资料:
腾讯科技高级web前端开发岗位
职位描述
负责重点项目的前端技术方案和架构的研发和维护工作;
岗位要求
5年以上前端开发经验, 精通html5/css3/javascript等 web开发技术;
熟悉bootstrap,vue,angularjs,reactjs等框架,熟练掌握一种以上;
代码⻛格严谨,能⾼保真还原设计稿,能兼容各种浏览器;
对web前端的性能优化以及web常见漏洞有一定的理解和相关实践;
具备良好的分析解决问题能力,能独立承担任务,有开发进度把控能力;
责任心强,思路路清晰,抗压能力好,具备良好的对外沟通和团队协作能力。
工作地址
上海市-徐汇区-腾云大厦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>腾讯科技高级web前端开发岗位</h1>
<hr>
<h2>职位描述</h2>
<p>负责重点项目的前端技术方案和架构的研发和维护工作;</p>
<h2>岗位要求</h2>
<p>5年以上前端开发经验, <strong>精通html5/css3/javascript等</strong> web开发技术;</p>
<p>熟悉bootstrap,vue,angularjs,reactjs等框架,熟练掌握一种以上;</p>
<p>代码⻛格严谨,能⾼保真还原设计稿,能兼容各种浏览器;</p>
<p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践;</p>
<p>具备良好的分析解决问题能力,能独立承担任务,有开发进度把控能力;</p>
<p>责任心强,思路路清晰,抗压能力好,具备良好的对外沟通和团队协作能力。</p>
<h2>工作地址</h2>
<p>上海市-徐汇区-腾云大厦</p>
<img src="./images/map.jpg" alt="">
</body>
</html>
⚡️综合案例二
做出如下的三个网页(需要跳转功能):
音频大家可以自己选取自己喜欢的。
🍀代码:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>今日搜索热词</h1>
<hr>
<h2>1、阿卡贝拉</h2>
<p>阿卡贝拉(意大利:Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。音频示例: <a href="./one.html" target="_blank">阿卡贝拉《千与千寻》</a></p>
<h2>2、翻唱</h2>
<p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱,包括重新填词,编曲。现在已有不少明星,都在翻唱他人的歌,不断在翻唱中突破自己,给大家带来不一样的风格。视频示例: <a href="./two.html">有一种悲伤(翻唱)-《A Kind of Sorrow》</a></p>
</body>
</html>
one.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>阿卡贝拉《千与千寻》-AZA微唱团</h1>
<hr>
<h2>音频</h2>
<audio src="./images/music.mp3" controls></audio>
</body>
</html>
two.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>有一种悲伤(翻唱)-《A Kind of Sorrow》-Madilyn</h1>
<hr>
<h2>视频</h2>
<video src="./images/video.mp4" controls></video>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/199743.html