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>