Web前端基础学习——HTML5基础

最新推荐文章于 2022-10-07 14:23:03 发布

@ Salt

最新推荐文章于 2022-10-07 14:23:03 发布

阅读量513

点赞数 1

分类专栏： web前端开发文章标签：前端 html

本文链接：https://blog.youkuaiyun.com/weixin_61920612/article/details/121105519

版权

web前端开发专栏收录该内容

12 篇文章

订阅专栏

本文介绍了Web前端的基础概念，包括网页的定义、HTML的作用及结构，同时探讨了Web标准的重要性及其构成，适合Web前端初学者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：昨天第一次接触Web前端，和pink老师学还在图书馆借了一本书《Web前端开发技术》。C语言还是会继续学习的，只是现在想先巩固一下之前学的知识点，所以也借了一本有关C语言的书。

学习内容：

1.网页
1.1什么是网页
网站是指在因特网上根据定的规则,使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站中的——“页”,通常是HTML格式的文件,它要通过浏览器来阅读。
网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页。
常见以.htm或.html后缀结尾的文件,因此将其俗称为HTML文件。
1.2什么是HTML
HTML指的是超文本标记语言( Hyper Text Markup Language),它是用来描述网页的种语言。
HTML不是一种编程语言,而是一种标记语言( markup language)
标记语言是一套标记标签( markup tag)
所谓超文本,有2层含义:
1.它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。
2.它还可以从一个文件跳转到另—个文件,与世界各地主机的文件连接(超级链接文本)。

1.3网页的形成
网页是由网页元素组成的,这些元素是利用html标签描述出来,然后通过浏览器解析来显示给用户的。

前端人员开发代码-->浏览器显示代码(解析、渲染)-->生成最后的web页面

2.Web标准（重点）

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。
2.1为什么需要Web标准

浏览器不同,它们显示页面或者排版就有些许差异。

遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一外,还有以下优点：
1.让Web的发展前景更广阔。
2.内容能被更广泛的设备访问。
3.更容易被搜寻引擎搜索。
4.降低网站流量费用。
5.使网站更易于维护。
6.提高页面浏览速度。

3.2Web标准的构成
主要包括结构( Structure)、表现( Presentation)和行为( Behavior)三个方面。

Web标准提出的最佳体验方案:结构、样式、行为相分离。
简单理解:结构写到HTML文件中,表现写到CSS文件中,行为写到 JavaScript文件中。

3.HTML标签

3.1基本语法概述
HTML标签是由尖括号<>包围的关键词，例如<html>
通常是成对出现的
<html></html>双标签
开始标签<标签名> 结束标签</标签名>

<br />单标签（不需要结束标签）非常少见
<标签名 />

在标签名后加反斜杠"/",而且习惯性在标签名和"/"之间敲一个空格

3.2标签关系
包含关系（嵌套）和并列关系
<html>
<head></head>
<body></body>
在html的标签中包含着head和body的标签，所以html标签与head标签、body标签是包含关系

head标签和body标签是并列关系

4.HTML基本结构标签

4.1第一个HTML网页
每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档

下图的titile打错了，应该是title

下面用taobao的网页作解释（因为前不久刚在这里"剁手"……）

<head></head>定义的地方是：

<title></title>定义的地方：

<body></body>定义的地方：

下面实操一下

1.新建一个文本文档

文档的名字要有文件类型的扩展名显示（这样更方便修改文件类型）我的电脑没有显示就打开电脑文档，点击上方“查看”，点击最右边的“选项”，点击弹出的框中上方的“查看”，把“隐藏已知文件类型的扩展名”的勾选取消即可。这样新建的文本文档的名字是新建文本文档.txt

2.在文档里面打入下面的标记语言

<html>
     <head>
	<title> 学习语录 </title>
     </head>
     <body>
	键盘敲烂，月薪过万！
     </body>
</html>

3.保存文档，把文档的类型改为.html变成网页形式（直接重命名文档把txt改为html)

4.然后点击打开（它会在你的默认浏览器中打开）（推荐使用谷歌浏览器）

4.2基本结构标签总结html标签包含着head标签、body标签、title标签。

head标签包含着title标签

head标签与title标签是并列关系

5.使用VSCode工具来创建页面

5.1VSCode的使用

1.双击打开软件。
2.新建文件(Ctrl+N)。
3.保存(Ctr+S),注意一定要保存为.html文件
4.Ctr+加号键,Ctr+减号键可以放大缩小视图
5.生成页面骨架结构。
输入!按下Tab键。
6.利用插件在浏览器中预览页面:单击鼠标右键,在弹出出口中点击" Open In Default Browser"。

5.2推荐安装的插件

6.DOCTYPE和lang以及字符集的使用
输入!按下Tab键。软件自动生成下面这样的页面骨架结构。

<!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>
    
</body>
</html>

但是还是建议规范使用