Web前端入门

文章目录

前言
1 Web前端概述
- 1.1 网站和网页
- 1.2 HTML语言
- 1.3 网页的形成
- 1.4 常用浏览器
- 1.5 浏览器内核（渲染引擎)
- 1.6 web标准
2 HTML标签
- 2.1 开发工具
- 2.2 HTML语法规则
- 2.3 标签的关系
- 2.4 HTML注释标签
- 2.5 结构标签
3 常用标签
- 3.1 标题标签
- 3.2 段落标签
- 3.3 换行标签
- 3.4 文本格式化标签
- 3.5 div和span标签

前言

“贾谊上书忧汉室，长沙谪去古今怜” —刘长卿《自夏口至鹦鹉洲夕望岳阳寄源中丞》

在这里插入图片描述

1 Web前端概述

1.1 网站和网页

网站：是使用 HTML等制作的用于展示特定内容相关的网页集合。
网页：是网站中的一页，通常是 HTML格式的文件，它要通过浏览器来阅读。
网页构成：通常由图片、链接、文字、声音、视频等元素组成。

1.2 HTML语言

HTML：指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
超文本：即超越了文本限制，可以加入图片、声音、动画、多媒体等内容
标记语言：语法是由一套标记标签构成的。

注意：HTML 不是一种编程语言，而是一种标记语言 (markup language)。

1.3 网页的形成

前端人员开发代码
浏览器解析显示代码（也称为渲染）
生成最后的 Web 页面

1.4 常用浏览器

浏览器是网页显示、运行的平台。常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平时称为五大浏览器。
在这里插入图片描述

1.5 浏览器内核（渲染引擎)

浏览器内核(渲染引擎)：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

浏览器	内核	备注
IE	Trident	IE、360极速浏览器、百度浏览器
firefox	Gecko	火狐浏览器
Safari	Webkit	苹果浏览器
chrome/Opera	Blink	chrome/opera浏览器

1.6 web标准

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

1. 为什么需要Web标准？

浏览器不同，它们显示页面或者排版就有些许差异
遵循 Web 标准可以让不同的开发人员写出的页面更标准、更统一。

2. web标准的构成

主要包括《结构Structure》、《表现（Presentation）》和《行为（Behavior）》三个方面。

标准	说明	备注
结构	结构主要是即网页的整体框架，即HTML	结构类似于身体
表现	表现主要是网页的外观样式，即CSS	表现类似于外观
行为	行为主要是网页的交互，及JavaScript	行为类似于行为

在这里插入图片描述

2 HTML标签

2.1 开发工具

web前端的开发工具推荐使用微软公司的VSCode，使用步骤如下：

1.下载open in browser插件。

2.新建文件，以.html结尾。

3.生成页面骨架结构。输入!按下 Tab/enter键。

4.保存（Ctrl + S ）,记住每次写完代码必须保存。

5.空白位置单击鼠标右键，在弹出窗口中点击“Open In Default Browser”。

2.2 HTML语法规则

HTML标签：是由尖括号包围的关键词，例如 <html>
双标签：HTML标签通常是成对出现的，例如 <html> 和 </html> ，标签中第一个是开始标签，第二个是结束标签
单标签：有些特殊的标签必须是单个标签（极少情况），例如<br/>

2.3 标签的关系

双标签关系可以分为两类：包含关系和并列关系

// 1.包含标签
<head>  <title> </title> 
</head>// 2.并列标签
<head> </head>
<body> </body>

2.4 HTML注释标签

HTML注释标签：

快捷键：Ctrl + /

2.5 结构标签

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写

1. 标签说明

标签名	说明
<html></html>	根标签
<head></head>	文档的头部
<title></title>	文档的标题
<body></body>	文档的主体

2. 代码演示

<!-- 1.文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.-->
<!DOCTYPE html>
<!-- 2.用来定义当前文档显示的语言。en定义语言为英语zh-CN定义语言为中文-->
<html lang="en"><head><!-- 3.指定文档编码为UTF-8--><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title>
</head><body>流光飒沓,世事朦胧
</body></html>

3. 图片演示

在这里插入图片描述

3 常用标签

3.1 标题标签

标题标签有6个，即<h1>~<h6>,字体依次变小，代码示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title>
</head><body><h1>一号标题</h1><h2>二号标题</h2><h3>三号标题</h3><h4>四号标题</h4><h5>五号标题</h5><h6>六号标题</h6>
</body></html>

3.2 段落标签

在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落,代码示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title>
</head><body><p>我是一个段落标签</p>
</body></html>

3.3 换行标签

在HTML中，换行标签是一个但标签，即<br/>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title>
</head><body>我很想看到渐次泛白的黎明时分的天宇，<br/>想喝热气腾腾的牛奶，<br/>想闻树木的清香，<br/>想翻晨报的版面。<br/>山川寂寥，<br/>街市井然，<br/>居民相安无事。<br/>可惜人无身影，<br/>无记忆，<br/>无心。
</body></html>

3.4 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

1. 文本格式化标签

语义	标签	说明
加粗	<strong></strong>或者<b></b>	建议使用<strong></strong>
倾斜	<em></em>或者<i></i>	建议使用<em></em>
删除线	<del></del>或者<s></s>	建议使用<del></del>
下划线	<ins></ins>或者<u></u>	建议使用<ins></ins>

2. 代码演示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title>
</head><body><strong>举世皆浊我独清，众人皆醉我独醒</strong><br /><em>举世皆浊我独清，众人皆醉我独醒</em><br /><del>举世皆浊我独清，众人皆醉我独醒</del><br /><ins>举世皆浊我独清，众人皆醉我独醒</ins>
</body></html>

3.5 div和span标签

在HTML中，<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的

特点：大盒子：<div>标签一行只能一个；

小盒子：<span>标签一行可以多个；

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title>
</head><body><div>从别后，忆相逢，几回魂梦与君同。</div><span>从别后，忆相逢，几回魂梦与君同。</span><span>从别后，忆相逢，几回魂梦与君同。</span>
</body></html>