01-HTML认知
基础认知
网页由文字、图片、音频、视频、超链接组成。
我们看到的网页本质是前端代码经过浏览器转换(解析和渲染)后的样子
五大浏览器
浏览器是网页显示、运行的平台,是前端必备的软件
常见的浏览器主要有:
- IE浏览器
- 火狐浏览器(Firefox)
- 谷歌浏览器(Chrome)
- Safari浏览器
- 欧朋浏览器(Opera)
当前大部分IE浏览器已经升级为Edge浏览器
渲染引擎
不同公司出品的浏览器有不同的浏览器内核,浏览器内核即浏览器中专门用于对代码进行解析渲染的部分
注意:
- 渲染引擎不同,导致解析相同代码时的速度、性能和效果也不同
- 谷歌浏览器的渲染引擎速度快、性能高、效果好,所以更吸引用户的喜爱
Web标准
为了让不同的浏览器对同一代码有相同的展示效果,因此制定了Web相关标准,同一展示效果
image-20240722205315851
Web标准的实现要求为:结构、表现、行为三层分离,由HTML搭建页面结构、CSS渲染页面样式,JavaScript完善页面动态交互效果。
HTML概念
HTML(Hyper Text Markup Language
)中文译为:超文本标记语言,专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
搭建网页基本步骤
-
创建文本文档
之所以是文本文档,是因为该文档没有文件头、文件尾之类的结构,可以直接编写代码
-
输入代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01-加粗文本</title> </head> <body> <strong>Hello World</strong> </body> </html>
-
修改后缀名为.html
**注意:**若看不到文件扩展名,则随便选一个文件夹勾选上文件扩展名选项
- 打开该文件
HTML骨架结构
HTML有一定的固定结构,这些固定结构通过特定的HTML标签进行描述
HTML骨架结构如下:
- html标签—网页的整体
- head标签—网页的头部
- body标签—网页的身体
- title标签—网页的标题
开发工具的使用
常用的前端开发工具主要有VScode、WebStrom和HBuildX
VScode安装教程参考博客:https://blog.csdn.net/msdcp/article/details/127033151
WebStrom安装教程参考博客:https://blog.csdn.net/qq_17584941/article/details/123497141
HBuild安装教程参考博客:https://blog.csdn.net/leah126/article/details/131443818
本人博客编写用的是WebStrom
,后续代码截图基本上都来自于WebStrom
HTML标签学习
HTML注释
注释是程序员为了方便代码理解,添加在代码中,给自己或其他程序员看的内容
注释可以使得代码更具解释性,浏览器执行代码时会忽略所有注释
WebStrom注释快捷键:Ctrl + /
HTML标签的构成
标签结构图:
- HTML标签由
<、>、/、
英文单词或字母组成,并且<>
包裹起来的英文单词或字母称为标签名 - 常见标签由两部分组成,我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容
- 少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容
HTML标签的关系
HTML标签的关系主要分为两种:
-
父子关系
<父标签> <子标签></子标签> </父标签>
-
兄弟关系
<兄弟标签1></兄弟标签1> <兄弟标签2></兄弟标签2>
排版标签
标题标签
HTML中一共有六级标题,重要程度一次递减
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
六级标签文字都存在加粗,并且从1到6,文字大小逐渐减小
h1标签对于网页尤为重要,开发中存在特定的使用场景
HTML有一个特点,那就是“是什么,就是什么”,即标题就是标题,段落就是段落
段落标签
段落标签在新闻和文章的页面中,用于分段显示。段落之间存在间隙,并且段落独占一行
<p>
我是一段文字
</p>
换行标签
让文字强制换行显示,单标签,让文字强制换行。
换行<br/>
水平线标签
水平线是一条用于分割不同主题内容的水平线,单标签,在页面中显示为水平线
这是一条水平线
<hr/>
文本格式化标签
文本格式化标签主要用于文字的加粗、下划线、倾斜和删除等效果,突出重要性的强调语境
在实际项目开发中,有一个重要的原则,即:标签语义化。因此相比于<b/>
、<u/>
之类的标签,我们更推荐使用<strong/>
、<ins/>
之类的标签
媒体标签
图片标签
在网页中显示图片,单标签,img标签对标签的属性进行设置,其中src是图片的路径、alt是图片加载失败时的替换文本。
<img src="" alt="">
还可以设置width
和height
属性,来限制图片的宽度和高度
如果只设置一个,则另一个没设置的会进行自动等比例缩放
如果同时设置两个,图片可能会变形
图片属性总结
路径
路径主要分为绝对路径和相对路径,在实际开发中,我们尽量使用相对路径,而不使用绝对路径,因为项目的地址很有可能会进行移动。
绝对路径指的是目录下的绝对位置,可直接到达目标位置,通常是从盘符开始的路径,例如::D:\day01\images\1.jpg
相对路径是从当前文件开始出发找目标文件的过程
./文件1
—当前文件夹下的文件1../文件2
—上一个文件夹下的文件2../文件夹1/文件3
—上一层文件夹下的文件夹1下的文件3
音频标签
可以采用音频标签在页面中插入音频
<audio src=""></audio>
**注意:**目前音频只支持三种格式:MP3、Wav和Ogg
音频常用标签如下
视频标签
可以用视频标签在页面中插入视频
<video src=""></video>
**注意:**视频标签目前支持三种格式:MP4、WebM、Ogg
视频标签常用属性如下
链接标签
可以使用链接标签点击跳转到另一个页面,双标签内部可以包裹内容;如果需要a标签点击之后去指定页面,需要设置a标签的href属性
<a href=""></a>
a标签可以通过target的不同属性确定值
综合案例
案例一:招聘页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML综合案例</title>
</head>
<body>
<h1>腾讯科技高级web前端开发岗位</h1>
<hr>
<h2>职位描述</h2>
<p>负责重点项目的前端技术方案和架构的研发和维护工作;</p>
<h2>岗位要求</h2>
<p>5年以上前端开发经验,精通html5/css3/javascript等web开发技术;</p>
<p>熟悉bootstrap,vue,angularjs,reactjs等框架,熟练掌握一种以上;</p>
<p>代码⻛格严谨,能⾼保真还原设计稿,能兼容各种浏览器;</p>
<p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践;</p>
<p>具备良好的分析解决问题能力,能独立承担任务,有开发进度把控能力;</p>
<p>责任心强,思路路清晰,抗压能力好,具备良好的对外沟通和团队协作能力。</p>
<h3>工作地址</h3>
<p>上海市-徐汇区-腾云大厦</p>
<img src="./img/map.jpg" alt="上海市-徐汇区-腾云大厦位置图">
</body>
</html>
案例二:今日热词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今日热词案例</title>
</head>
<body>
<h1>今日搜索热词</h1>
<hr>
<h2>1、阿卡贝拉</h2>
<p>
阿卡贝拉(意大利:Acappella)即无伴奏合唱。其起源可追溯至中世纪的教会音乐,当时的教会音乐只以人声清唱,并不应用乐器。音频示例:
<a href="./03-music.html" target="_blank">阿卡贝拉《千与千寻》</a>
</p>
<h2>2、翻唱</h2>
<p>
“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱,包括重新填词,编曲。现在已有不少明星,都在翻唱他人的歌,不断在翻唱中突破自己,给大家带
来不一样的风格。视频示例:
<a href="./03-video.html" target="_blank">有一种悲伤(翻唱)-《A Kind of Sorrow》</a>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿卡贝拉《千与千寻》-AZA微唱团</title>
</head>
<body>
<h1>阿卡贝拉《千与千寻》-AZA微唱团</h1>
<hr>
<h2>音频</h2>
<audio src="./img/music.mp3" controls loop></audio>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>有一种悲伤(翻唱)-《A Kind of Sorrow》-Madilyn</h1>
<hr>
<h2>视频</h2>
<video src="./img/video.mp4" controls autoplay></video>
</body>
</html>