day1 基础认识

杰瘦瘦

已于 2022-09-25 19:33:44 修改

阅读量974

点赞数

分类专栏：前端基础笔记文章标签： css html 前端 javascript

于 2022-05-21 23:01:39 首次发布

本文链接：https://blog.csdn.net/m0_70619994/article/details/124619912

版权

前端基础笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一、什么是网页？

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站中的“一页”，通常是HTML格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它主要通过由图片、链接、视频、文字、声音等元素构成，通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。

二、常用的浏览器有哪些？

目前市面上一些主流的浏览器分别有IE、火狐（Firefox）、谷歌（Chrome）、safan、Opera，不同浏览器拥有着不一样的内核，其处理速度也就不一样。其中谷歌浏览器是目前市场使用率最高的一款浏览器，同时深受开发人员的喜欢。

三、什么是web标准？

简单来说就是在我们实际使用浏览器的过程中，用户电脑中的浏览器可能各不一样。有的可能是谷歌浏览器，有的可能就是用的IE浏览器。由于上点所说，不同的浏览器它的渲染引擎也是不一样的，对于相同的代码，解析展示出来的效果可能是不一样的。而作为我们开发人员来说，我们所希望用户打开网页所看到的效果都是一样的，于是便有了web标准。

web标准的主要构成部分：

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如：颜色、大小等）
行为	JavaScript	网页模型的定义与页面交互

Web标准提出最佳方案：结构、表现、行为相分离
可以简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

光看文字可能没那么容易理解，自己也找了几张图，分别来表示HTML、CSS和JavaScript：

四、HTML的概念

HTML：Hyper Text Markup Language 超文本标记语言

1、HTML的固定结构

网页和我们平常所写的文章一样是有固定的结构的，例如文章的：开头、正文、落款等等...在我们网页中所展示的就是，如：整体、头部、标题、主体等...而在网页中的固定结构主要是通过特定的HTML标签来进行描述的。例：

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        网页的主体
    </body>
</html>

其中：

<html> 元素是 HTML 页面的根元素，代表的是网页的整体
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。代表的是网页的头部信息
<title> 元素描述了文档的标题，代表的是网页的标题
<body> 元素包含了可见的页面内容，代表的是网页的身体

五、开发工具

虽然说我们可以通过文本编辑器，如：记事本，完全可以编写网页源代码，但是我们的效率却很慢。而在实际开发中，作为一个开发人员，注重的是效率和便捷性，因此我们会使用一些开发工具，以此来提高开发的效率。

当前市面上的开发工具也有很多，如：Visual Studio Code、Webstorm、Sublime、Dreamweaver、Hbuilder。而在众多的工具当中，最流行就是VsCode（速度快、体积小、免费、支持很多的插件）。

1、下载

关于VSCode软件的下载与安装，首先我们需要打开浏览器进入它的官方网址：https://code.visualstudio.com/

由于它的版本显示是英文的，如果我们看不太明白或者是不方便可以自行翻译成中文模式，看个人需要。点击上面的Download for Windows后会跳转到一个新的界面

然后等待下载完成便安装即可

六、HTML语法

1、注释

注释标签用来在源文档中插入注释，注释不会在浏览器中显示。

我们经常要在一些代码旁做一些HTML注释,这样做的好处很多,比如:方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自己代码的理解与修改等等.

可以在HTML文档中加入自己的注释。注释不会显示在页面中，它可以用来提醒回忆相关的程序信息。注释行的写法如下：

是HTML的注释标签,使用 < 和 > 是符合HTML标签语法规则的

如：

注释的快捷键：Ctrl+/

2、HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
少数标签由一部分组成，我们称之为单标签，自成一体，无法包裹内容。如：《》

<标签>内容</标签>

3、HTML元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落。</p>

七、HTML标签学习

HTML标签分为4大类

排版标签（标题标签、段落标签、换行标签、水平线标签）
文本格式话标签
媒体标签（图片标签、路径、音频标签、视频标签）
链接标签

1、排版标签

（1）标题标签

场景：在发布的文章页面中，都离不开标签，标签的作用也主要是用来突出显示文章的主题

代码：

<h1>一级标题<h1>
<h2>二级标题<h2>
<h3>三级标题<h3>
<h4>四级标题<h4>
<h5>五级标题<h5>
<h6>六级标题<h6>

h系列标签分为1~6级标题，重要重读一次递减

特点：文字都有加粗变大，并且从h1~h6逐渐变小

运行效果：

（2）段落标签

场景：用于文章内容分段显示

代码：

<p>我是段落标签</p>

（3）换行标签

场景：用于对文章内容进行强制换行

代码：

<br>

（4）水平线标签

场景：分割不同主题内容的水平线

代码：

<hr>

2、文本格式化标签

场景：需要让文字加粗、下划线、倾斜、删除线等的效果

代码：

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

两种类型标签的作用是一样的，只不过后表中更能突出标签作用的语境

3、媒体标签

（1）图片标签

代码：

示例：

<body>
    <img src="图片.jpg" alt="">
</body>

alt属性：当图片加载失败时，才会显示alt的文本，而当图片加载成功时，alt属性文本不会显示

示例：

<body>
    <img src="图片.jpg" alt="图片加载失败">
</body>

title属性：当鼠标悬停时，才会显示的文本

示例：

<body>
    <img src="图片.jpg" alt="图片加载失败" title="这是title属性">
</body>

width和height属性：width和height分别表示宽度和高度（数字）

注意点：如果只设置width或height中的一个，另一个没设置的会自动等比例缩放。如果同时设置了width和height两个，若设置不当此时图片可能会变形。

示例：

<body>
    <img src="图片.jpg" alt="图片加载失败" title="这是title属性" width="200" height="100">
</body>

（2）路径

场景：页面需要加载图片，就需要先找到对应的图片。路径又分为：绝对路径、相对路径

绝对路径：

<body>
    <img src="D:\图片文件夹\图片.jpg" alt="图片加载失败" title="这是title属性" width="200" height="100">
</body>

相对路径：相对路径又分为同级目录、上级目录和下级目录

<-- 同级目录 -->
<body>
    <img src="./图片.jpg" alt="图片加载失败" title="这是title属性" width="200" height="100">
</body>

其中./代表当前目录下（也可以省略不写）

<-- 上级目录 -->
<body>
    <img src="../图片.jpg" alt="图片加载失败" title="这是title属性" width="200" height="100">
</body>

其中../代表上级目录（而下级目录直接后面加路径即可）

（3）音频标签

场景：在页面中插入音频

代码：

<audio src="./音频.mp3" controls></audio>

常见属性：

属性名	功能
src	音频的路径
controls	显示播放的控件
atuoplay	自动播放（部分浏览器不支持）
loop	循环播放

目前音频标签所支持的格式有：MP3、Wav、Ogg

（4）视频标签

场景：在页面中插入视频

代码：

<video src="./视频.mp4" controls></video>

属性名	功能
src	音频的路径
controls	显示播放的控件
atuoplay	自动播放（谷歌浏览器中需配合muted实现静音播放）
loop	循环播放

视频标签目前支持的三种格式：MP4、WebM、Ogg

4、链接标签

场景：点击之后，从当前页面跳转到另一个页面

代码：

<a href="https://www.baidu.com">点击一下，你就知道</a>

target属性：目标网页的打开形式

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转

代码：

<a href="https://www.daidu.com" target="_blank">点击一下，你就知道</a>

杰瘦瘦

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
day1 基础认识

1、什么是网页？（1）网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。（2）网页是网站中的“一页”，通常是HTML格式的文件，它要通过浏览器来阅读。（3）网页是构成网站的基本元素，它主要通过由图片、链接、视频、文字、声音等元素构成，通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。2、常用的浏览器有哪些？目前市面上一些主流的浏览器分别有IE、火狐（Firefox）、谷歌（Chrome）、saf...
复制链接

扫一扫