HTML初识
Date: August 29, 2022
Summary: HTML标签排版、文本格式化标签、媒体标签、链接标签
◆ 能够理解HTML的 基本语法 和标签的关系
◆ 能够使用 排版标签 实现网页中标题、段落等效果
◆ 能够使用 相对路径 选择不同目录下的文件
◆ 能够使用 媒体标签 在网页中显示图片、播放音频和视频
◆ 能够使用 链接标签 实现页面跳转功能
基础认知
目标:认识 网页组成 和 五大浏览器,明确 Web标准的构成,使用 HTML骨架 搭建出一个网页。
学习路径:
-
基础概念铺垫(了解)
-
认识网页
-
五大浏览器和渲染引擎
-
Web标准
-
HTML初体验
-
语法规范
总结:
- 前端基础概念铺垫:
- 网页的基本组成元素:文字、图片、音频、视频、超链接等
- 五大浏览器 + Web标准
- HTML初体验:
- HTML:超文本标记语言
- HTML骨架结构
- VS Code的使用
- 语法规范:
- HTML的注释
- 标签的构成:双标签 / 单标签
- 标签的属性: 属性名=“属性值”
- 标签的关系:父子 + 兄弟
➢ Web标准的构成有哪些?分别通过什么语言表示?
• 结构:HTML → 页面元素
• 表现:CSS → 页面样式
• 行为:JavaScript → 页面交互的动态效果
基础概念铺垫(了解)
认识网页(了解)
➢ 问题1:网页由哪些部分组成?
✓ 文字、图片、音频、视频、超链接
➢ 问题2:我们看到的网页背后本质是什么?
✓ 前端程序员写的代码
➢ 问题3:前端的代码是通过什么软件转换成用户眼中的页面的?
✓ 通过浏览器转化(解析和渲染)成用户看到的网页
五大浏览器和渲染引擎
五大浏览器:
➢ 浏览器:是网页显示、运行的平台,是前端开发必备利器
➢ 常见的五大浏览器:
• IE浏览器、火狐浏览器(Firefox)、谷歌浏览器(Chrome)、Safari浏览器、欧朋浏览器(Opera)
渲染引擎:
渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分
浏览器出品的公司不同,内在的渲染引擎也是不同的:
浏览器 | 内核 | 备注 |
---|---|---|
IE | Trident | IE、猎豹安全、360急速浏览器、百度浏览器 |
FireFox | Gecko | 火狐浏览器内核 |
Safari | Webkit | 苹果浏览器内核 |
Chrome/Opera | Blink | Blink其实是Webkit的分支 |
注意点:
渲染引擎不同,导致解析相同代码时的 速度、性能、效果也不同的
谷歌浏览器的渲染引擎速度快、性能高、效果好,所以更吸引用户的喜爱(推荐)
Web标准
目标:认识 网页组成 和 五大浏览器,明确 Web标准的构成,使用 HTML骨架 搭建出一个网页。
1.3.1 为什么需要Web标准?(了解)
不同浏览器的渲染引擎不同,对于相同代码解析的效果会存在差异
如果用户想看一个网页,结果用不同浏览器打开效果不同,用户体验极差!
Web标准:让不同的浏览器按照相同的标准显示结果,让展示的效果统一!
Web标准中分成三个构成:
构成 | 语言 | 说明 |
---|---|---|
结构 | HTML | 页面元素和内容 |
表现 | CSS | 网页元素的外观和位置等页面样式(如:颜色、大小等) |
行为 | JavaScript | 网页模型的定义与页面交互 |
HTML感知
HTML的概念
HTML(Hyper Text Markup Language)中文译为:超文本标记语言
专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
案例:文字变粗案例
体验构建一个网页,需要在网页中显示一个加粗的文字
网页体验-构建基本网页的步骤
-
在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为:文字变粗案例.txt
-
双击这个文件,输入代码等内容 → 记得保存!
-
在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为**.html**
-
双击文字变粗案例.html ,浏览器会自动打开文件并显示之前输入的内容
HTML页面固定结构
网页类似于一篇文章:
每一页文章内容是有固定的结构的,如:开头、正文、落款等……
网页中也是存在固定的结构的,如:整体、头部、标题、主体
网页中的固定结构是要通过特点的 HTML标签 进行描述的
HTML骨架结构由哪些标签组成?
• html标签:网页的整体
• head标签:网页的头部
• body标签:网页的身体
• title标签:网页的标题
语法规范:
HTML标签的结构
标签的结构图:
结构说明:
-
标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
-
常见标签由两部分组成,我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容
-
少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容。
总结:
常见标签由几部分组成?称之为?
两部分,双标签
少数标签由几部分组成?称之为?
一部分,单标签
双标签的属性需要写在开始标签还是结束标签中?
开始标签
HTML标签与标签之间的关系可分为
父子关系(嵌套关系)和 兄弟关系(并列关系)
VScode使用指南
为什么要使用 VS Code?
实际开发中,注重开发的 效率和便捷性 ,因此我们会使用一些开发工具
开发工具有很多: Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder
前端开发神器:VS Code → 速度快、体积小、插件多
VS Code使用前要求:
open in browser 直接打开浏览器插件安装完毕
VS Code创建网页的步骤
-
双击打开VS Code软件
-
将day01代码文件夹用鼠标左键按住不放,拖拽到VS Code窗口中,文件夹会显示在左侧目录上
-
点击目录上的**+新建文件按钮**创建页面,注意:文件后缀名需要是.html
VS Code的基本快捷键
-
快速生成标签:英文 + tab
-
保存文件:ctrl + s
- 注意1:写完文件之后务必需要保存文件,否则网页无变化
- 注意2:可以设置自动保存省去每次保存的麻烦
- 快速查看网页效果:右击 → Open in Default Browser
- 快捷键:alt + b
- 注意:必须安装了open in browser 插件
- 快速生成结构标签:! + tab
- 注意1:!必须是英文的,中文!无效
- 注意2:必须保证当前文件后缀名是.html,否则无效
- VS Code自动生成的骨架多了其他标签,之后会介绍
其他快捷键:
- 快速复制一整行:ctrl + c
- 快速粘贴一整行:ctrl + v
- 快速删除(剪切)一整行:ctrl + x
HTML标签学习
- 排版标签
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 文本格式化标签
- 媒体标签
- 图片标签
- 路径
- 音频标签
- 视频标签
- 链接标签
排版标签
标题标签:
场景:显示文章主题
语义:1~6级标题,重要程度依次递减
代码:h系列标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
特点:
文字都有加粗
文字都有变大,并且从h1 → h6文字逐渐减小
独占一行
注意点:
h1标签对于网页尤为重要,开发中有特定的使用场景,如:新闻的标题、网页的logo部分
段落标签:
场景:在新闻和文章的页面中,用于分段显示
语义:段落
代码:
<p>我是一段文字</p>
特点:
段落之间存在间隙
独占一行
效果:
换行标签:
场景:让文字强制换行显示
代码:
<br></br>
语义:换行
特点:
单标签
让文字强制换行
水平线标签:
场景:分割不同主题内容的水平线
代码:
语义:主题的分割转换
特点:
单标签
在页面中显示一条水平线
文本格式化标签
文本格式化标签的介绍:
加粗、下划线、倾斜、删除线标签:
标签 | 说明 | 标签 | 说明 |
---|---|---|---|
b | 加粗 | strong | 加粗 |
u | 下划线 | ins | 下划线 |
i | 倾斜 | em | 倾斜 |
s | 删除线 | del | 删除线 |
标签语义化:
什么是语义化标签:
能够直观表达内容的标签
比如、、
……
语义化标签好处:
对人:好理解,好记忆
对机器:有利于机器解析,对搜索引擎(SEO)有帮助
语义化标签推荐:
strong、ins、em、del,表示的强调语义更强烈!
媒体标签
图片标签
图片标签的介绍
场景:在网页中显示图片
代码:
<video src="movie.ogg" onerror="myFunction()" controls>
抱歉,加载视频失败
</video>
<!-- onerror执行某个方法,这里的方法可以自己定义-->
特点:
单标签
img标签需要展示对应的效果,需要借助标签的属性进行设置!
标签的完整结构图:
属性注意点:
-
标签的属性写在开始标签内部
-
标签上可以同时存在多个属性
-
属性之间以空格隔开
-
标签名与属性之间必须以空格隔开
-
属性之间没有顺序之分
拓展:
注意点:
视频标签目前支持三种格式:**MP4** 、WebM 、Ogg
---
---
## 链接标签
**链接标签的介绍**
场景:点击之后,从一个页面跳转到另一个页面
称呼: a标签、超链接、锚链接
代码:
```html
<a href = “./目标网页.html”>超链接</a>
特点:
双标签,内部可以包裹内容
如果需要a标签点击之后去指定页面,需要设置a标签的href属性
链接标签的href属性
属性名:href
属性值:点击之后跳转去哪一个网页(目标网页的路径)
案例:
外部链接:
<a href="https://www.baidu.com/">跳转到百度</a>
内部链接:
<a href="./01-标题标签.html">目标网页</a>
链接标签的显示特点(了解)
显示特点:
a标签默认文字有下划线
a标签从未点击过,默认文字显示蓝色
a标签点击过之后,文字显示为紫色(清除浏览器历史记录可恢复蓝色)
链接标签的target属性
属性名:target
属性值:目标网页的打开形式
取值 | 效果 |
---|---|
_self | 默认值,在当前窗口中跳转(覆盖原网页) |
_blank | 在新窗口中跳转(保留原网页) |
案例:
<a href = "https://www.baidu.com/" target="_blank">百度一下</a>
链接标签小结
如果需要实现点击之后,从一个页面跳转到另一个页面,需要使用什么标签?
链接标签:a标签
通过什么属性可以设置a标签的到底跳转去哪里?
href属性
通过什么属性可以设置a标签的跳转方式?取值有哪些?
target属性
取值1:_self:在当前窗口中跳转
取值2:_blank:在新窗口中跳转
空链接(拓展补充)
代码:
<a href = “#”>空链接</a>
功能:
点击之后回到网页顶部
开发中不确定该链接最终跳转位置,用空链接占个位置
总结:
-
排版标签:
- 标题h系列、段落p、换行br、水平线hr
-
文本格式化标签:
加粗strong、下划线ins、倾斜em、删除线del
-
图片标签:
img标签 + src属性 + alt属性 + title属性 + width属性 + height属性
-
路径:
相对路径:同级目录 + 下级目录 + 上级目录
-
音频标签、视频标签:
audio标签、 video标签 + src属性 + controls属性
-
链接标签:
a标签 + href属性 + target属性
综合案例
案例:尝试
<!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>
<h2>君不见黄河之水天上来</h2>
<img src="C:\Users\Administrator\Desktop\前端开发\HTML+CSS\photo\libai.jpg" alt="libai">
</body>
</html>
招聘案例-文本资料
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>
<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>
今日热词案例-效果图
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>
<h1>今日搜索热词</h1>
<hr>
<h2>1、阿卡贝拉</h2>
<p>阿卡贝拉(意大利:Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。音频示例: <a href="./14-综合案例-跳转/one.html" target="_blank">阿卡贝拉《千与千寻》</a></p>
<p>阿卡贝拉(意大利:Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。音频示例: <a href="./14-综合案例-跳转/two.html" target="_blank">有一种悲伤(翻唱)-《A Kind of Sorrow》</a></p>
</body>
</html>
参考:
黑马Web前端: