前端学习-第一天

最新推荐文章于 2024-07-30 16:49:30 发布

变化大不大

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量49

点赞数

分类专栏：前端学习--html+css 文章标签：前端学习 html

本文链接：https://blog.csdn.net/2201_75297270/article/details/128979640

版权

前端学习--html+css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学习目标：

1、理解HTML的基本语法和标签关系
2、使用排版标签实现网页中标题、段落等效果
3、使用相对路径选择不同目录下的文件
4、使用媒体标签在网页中显示图片、播放音频和视频
5、使用链接标签实现页面跳转功能

学习内容：

一、基础认知
二、HTM标签学习
三、综合案例

一、基础认知

（一）基础概念

1、认识网页

1.1网页的组成

网页由文字、超链接、图片、音频、视频等组成。

1.2网页的本质

前端程序员写的代码，通过浏览器转化（解析和渲染）成用户看到的网页。

2、五大浏览器和渲染引擎

浏览器是显示、运行网页的平台。

2.1常见五大浏览器

IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera)。

2.2渲染引擎

浏览器中，对代码进行解析渲染的部分就叫渲染引擎（浏览器内核）。浏览器出品的公司不同，渲染引擎也不同。渲染引擎不同，导致解析相同代码的速度、性能、效果不同。谷歌浏览器速度快、性能高、效果好，在开发中，推荐使用谷歌浏览器。

3、Web标准

3.1制定Web标准的原因

让不同的浏览器按照相同的标准显示结果，让展示的效果统一

3.2Web标准的构成

结构：用HTML实现
表现：用CSS实现
行为：用JS实现

3.3小结

在这里插入图片描述

（二）HTML初体验

1、HTML感知

1.1HTML的概念

HTML，超文本标记语言，专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片等进行描述。注意：HTML是标记语言，不是开发语言。

2、HTML骨架结构

2.1HTML页面固定结构

在这里插入图片描述

2.2HTML标签

html标签：网页的整体
head标签：网页的头部
body标签：网页的主体
title标签：网页的标题

2.3开发工具

有多种开发工具可用，例如：Visual Studio Code、Dreamweaver 、Sublime、Hbuilder。
其中Visual Studio Code为前端开发神器，其特点如下：速度快、体积小、插件多。
Visual Studio Code的基本快捷键如下：
在这里插入图片描述

（三）语法规范

1、HTML注释

注释可用帮助开发人员理解代码，并且浏览器执行代码时会忽略所有的注释信息。
注释的快捷键：ctrl+/

2、HTML标签的构成

2.1双标签

在HTML中大多数为双标签。双标签即：
开始标签+中间包裹内容 +结束标签，例如：
在这里插入图片描述

2.2单标签

在HTML中少数为单标签，例如在这里插入图片描述

2.3HTML标签的关系

父子关系（嵌套关系）
在这里插入图片描述

兄弟关系（并列关系）
在这里插入图片描述

二、HTML标签学习

（一）排版标签

1、标题标签

在这里插入图片描述

2、段落标签

在这里插入图片描述

3、换行标签

在这里插入图片描述

4、换行标签

在这里插入图片描述

（二）文本格式标签

1、给文字加加粗、下划线、倾斜、删除线效果

1.1加粗

在这里插入图片描述

1.2下划线

在这里插入图片描述

1.3倾斜

在这里插入图片描述

1.3删除线

在这里插入图片描述

（三）媒体标签

1、图片标签

在这里插入图片描述

2、路径

在这里插入图片描述

3、音频标签

在这里插入图片描述

4、视频标签

在这里插入图片描述

（四）链接标签

在这里插入图片描述

三、综合案例（使用HBuilder)

（一）案例一

1、代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>腾讯科技高级web前端开发岗位</h2>
		<hr>
		<h3>职位描述</h3>
		<p>负责重点项目的前端技术方案和架构的研发和维护工作；</p>
		<h3>岗位要求</h3>
		
		<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>
		
		<h3>工作地址</h3>
		<p>上海市-徐汇区-腾云大厦</p>
		<img src="./imgs/map.jpg" >
	</body>
</html>

2、结果图

在这里插入图片描述

（一）案例二（有页面的跳转）

1、index.html页面

1.1代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>今日搜索热词</h1>
		<hr>
		<h3>1、阿卡贝拉</h3>
		<p>阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：<a href="./music.html">阿卡贝拉《千与千寻》</a></p>
		<h3>2、翻唱</h3>
		<p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来
		不一样的风格。视频示例：<a href="./video.html"> 有一种悲伤（翻唱）-《A Kind of Sorrow》</a></p>
	</body>
</html>

1.2结果图

在这里插入图片描述

2、music.html页面

2.1代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>阿卡贝拉《千与千寻》-AZA微唱团</h1>
		<hr>
		<h3>音频</h3>
		<audio src="imgs/music.mp3" controls></audio>
	</body>
</html>

2.2结果图

在这里插入图片描述

3、video.html页面

3.1代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>有一种悲伤（翻唱）-《A Kind of Sorrow》-Madilyn</h1>
		<hr >
		<h3>视频</h3>
		<video src="imgs/video.mp4" controls></video>
	</body>
</html>