从零开始学前端，浅谈HTMLDay01

KangVe

已于 2023-07-30 00:37:11 修改

阅读量137

点赞数 2

文章标签：前端 html html5

于 2023-07-27 16:35:39 首次发布

本文链接：https://blog.csdn.net/weixin_51541146/article/details/131961264

版权

一、前序知识

1.计算机界的先驱人物

图灵

二战时期，破译了德军的战争编码-英格玛。
让二战提前两年结束，拯救了上千万人的生命。
设立图灵奖，被后人誉为：人工智能之父。

冯诺伊曼

制定了现代计算机标准——冯诺伊曼体系结构。
提出：计算机要采用二进制、明确计算机组成部分。
被后人誉为：现代计算机之父。

2.计算机基础知识

1.计算机俗称电脑，是现代用于一种高速计算的电子计算机器，可以进行数值计算逻辑计算，还具有存储记忆功能。

2.计算机构成

硬件：看得见摸得着的物理部件。
软件：指挥硬件工作的指令。

3.软件的分类

1.系统软件：Windows、Liniux、Android、Harmony等。

2.应用软件：微信、QQ、王者荣耀、PS等。

4.整体图示

3.C/S架构与B/S架构

1.应用软件又分为两大类：

C/S架构：需要安装，偶尔更新、不跨平台、开发更具有针对性。
B/S架构：不需要安装、不需要更新、跨平台、开发更具有通用性。

名词解释：C-client（客户端）、B-browser（浏览器）、S-server（服务器）。

服务器：为软件提供数据的设备。

2.前端工程师主要负责编写B/S架构中的网页（呈现界面、实现交互）

备注：大数据时代，我们可以用前段的技术栈，做出一个C/S架构的应用、甚至搭建一个服务器。

4.网页

网址：我们在浏览器中输入的网址。
网页：浏览器所呈现的每一个页面。
网站：每一个网页构成网站。
网页标准：

结构表现行为

HTML CSS JavaScript

二、HTML简介

1.什么是HTML?

全称：Hyper Text Markup Language（超文本标记语言）.

超文本：“超级的文本”，和普通的文本相比，内容更丰富。

标记：文本要变成超文本，就要用到各种标记符号。

语言：每一个标记的写法、读音、使用规则，组成了一个标记语言。

2.相关国际组织

IFTF
W3C
WHATWF

3.HTML发展史

三、准备工作

1.常用电脑配置

查看文件的几种布局。
展示文件扩展名（后缀）。
使用指定程序打开文件。
配置文件的默认打开方式。

2.安装Chrome（谷歌）浏览器

下载地址：https://www.google.com/chrome

四、HTML入门

1.HTML初体验

1.第一步：鼠标右键→新建→文本文档→输入以下内容，保存

<marquee>HTML初体验</marquee>

2.第二步：修改后缀.html，双击打开。（.htm也可以，使用.html更标准）

3.程序员写的叫源代码，交给浏览器进行渲染。

4.借助浏览器卡看网页的源代码，具体操作：

在网页空白处：鼠标右键→查看网页源代码。

2.HTML标签

1. 标签又称元素，是HTML的基本组成单位。
2. 标签分为：双标签与单标签（绝大多数都是双标签）。
3. 标签名不区分大小写，但推荐小写，因为小写更规范。
4. 双标签：

示例代码：
<marquee>HTML初体验</marquee>

5.单标签：

示例代码：
<input/>

6.标签之间的关系：并列关系、嵌套关系，可以使用 tab 键进行缩进：

<marquee>
    HTML初体验
    <input>
</marquee>
<input>

3.HTML标签属性

1. 用于给标签提供 附加信息。
2. 可以写在：起始标签 或 单标签中，形式如下:

示例代码：

<marquee loop="1" bgcolor="orange">HTML初体验</marquee>
<input type="password">

3. 有些特殊的属性，没有属性名，只有属性值，例如：

<input disabled>

4. 注意点：

1. 不同的标签，有不同的属性；也有一些通用属性（在任何标签内都能写，后面会详细
总结）。
2. 属性名、属性值不能乱写，都是W3C规定好的。
3. 属性名、属性值，都不区分大小写，但推荐小写。
4. 双引号，也可以写成单引号，甚至不写都行，但还是推荐写双引号。
5. 标签中不要出现同名属性，否则后写的会失效，例如：
<input type="text" type="password">

4. HTML 基本结构

1. 在网页中，如何查看某段结构的具体代码？—— 点击鼠标右键，选择“检查”。
2. 【检查】和【查看网页源代码】的区别：

【查看网页源代码】看到的是：程序员编写的源代码。

【检查】看到的是：经过浏览器 “处理” 后的源代码。

备注：日常开发中，【检查】用的最多。

3. 网页的基本结构如下:

1. 想要呈现在网页中的内容写在 body 标签中。
2. head 标签中的内容不会出现在网页中。
3. head 标签中的 title 标签可以指定网页的标题。

4.图示：

5.代码：

<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
   ......
  </body>
</html>

5. 安装 VSCode

1. 安装中文语言包。
2. 使用 VSCode打开文件夹的两种方式。
3. 调整字体大小。
4. 设置主题。
5. 安装图标主题： vscode-icons 。

备注：详细安装步骤请参考视频。

6. 安装 Live Server 插件

1. 可以更加方便的打开网页。
2. 打开网页的方式更贴近项目上线。
3. 代码出现改动后，可以自动刷新。
4. 根据自己的情况，去配置一下 VSCode 的自动保存。

注意1：务必使用VSCode打开的是文件夹，否则 Live Server 插件无法正常工作！

注意2：打开的网页必须是标准的HTML结构，否则无法自动刷新！

7. HTML 注释

1. 特点：注释的内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见。
2. 作用：对代码进行解释和说明。
3. 写法：

<!-- 下面的文字只能滚动一次 -->
<marquee loop="1">HTML初体验</marquee>
<!-- 下面的文字可以无限滚动 -->
<marquee>HTML初体验</marquee>

4. 注释不可以嵌套，以下这么写是错的（反例）。

<!--
我是一段注释
  <!-- 我是一段注释 -->
-->

8. HTML 文档声明

1. 作用：告诉浏览器当前网页的版本。
2. 写法：

旧写法：要依网页所用的HTML版本而定，写法有很多。

具体有哪些写法请参考：W3C官网-文档声明

新写法：一切都变得简单了！W3C 推荐使用 HTML 5 的写法。

<!DOCTYPE html> 
或 
<!DOCTYPE HTML>
或 
<!doctype html>

3. 注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。

9. HTML 字符编码

1. 计算机对数据的操作：

存储时，对数据进行：编码。
读取时，对数据进行：解码。

2. 编码、解码，会遵循一定的规范 —— 字符集。
3. 字符集有很多中，常见的有（了解）：

1. ASCII ：大写字母、小写字母、数字、一些符号，共计128个。
2. ISO 8859-1 ：在 ASCII 基础上，扩充了一些希腊字符等，共计是256个。
3. GB2312 ：继续扩充，收录了 6763 个常用汉字、682个字符。
4. GBK ：收录了的汉字和符号达到 20000+ ，支持繁体中文。
5. UTF-8 ：包含世界上所有语言的：所有文字与符号。—— 很常用。

4. 使用原则是怎样的？

原则1：存储时，务必采用合适的字符编码。
否则：无法存储，数据会丢失！

原则2：存储时采用哪种方式编码，读取时就采用哪种方式解码。
否则：数据错乱（乱码）！

5.总结

平时编写代码时，统一采用 UTF-8 编码（最稳妥）。
为了让浏览器在渲染 html 文件时，不犯错误，可以通过 meta 标签配合 charset 属性指定字符编码。

<head>
<meta charset="UTF-8"/>
</head>

10.HTML设置语言

1.主要作用

让浏览器显示对应的翻译提示。
有利于搜索引擎优化。

2. 具体写法：

<html lang="zh-CN" ></html>

11.HTML标准结构

HTML标准结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML标准结构</title>
</head>
<body>
</body>
</html>

输入 ! ，随后回车即可快速生成标准结构。
配置 VScode 的内置插件 emmet ，可以对生成结构的属性进行定制。
在存放代码的文件夹中，存放一个 favicon.ico 图片，可配置网站图标。

五、HTML 基础

1. 开发者文档

W3C官网： www.w3c.org
W3School： www.w3school.com.cn
MDN： developer.mozilla.org —— 平时用的最多。

2. 排版标签

标签名	标签含义	单/双标签
h1-h6	标题	双
p	段落	双
div	没有任何含义，用于整体布局（生活中的包装袋）。	双

h1 最好写一个， h2~h6 能适当多写。
h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了。
p 标签很特殊！它里面不能有： h1~h6 、 p 、 div 标签（暂时先这样记，后面会说规律）。

3. 语义化标签

概念：用特定的标签，去表达特定的含义。
原则：标签的默认效果不重要（后期可以通过 CSS 随便控制效果），语义最重要！
举例：对于 h1 标签，效果是文字很大（不重要），语义是网页主要内容（很重要）。
优势：
- 代码结构清晰可读性强。
- 有利于 SEO（搜索引擎优化）。
- 方便设备解析（如屏幕阅读器、盲人阅读器等）。

4. 块级元素与行内元素

块级元素：独占一行（排版标签都是块级元素）。
行内元素中能写 行内元素，但不能写块级元素。
使用原则：

1. 块级元素中能写行内元素和块级元素（简单记：块级元素中几乎什么都能写）。

2. 行内元素中能写行内元素，但不能写块级元素。

3. 一些特殊的规则： h1~h6 不能互相嵌套。 p 中不要写块级元素。

5.文本标签_常用的

用于包裹：词汇、短语等。
通常写在排版标签里面。
排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。
文本标签通常都是行内元素。

标签名	标签语义	单 / 双标签
em	要着重阅读的内容	双
strong	十分重要的内容（语气比em要强）	双
span	没有语义，用于包裹短语的通用容器	双

通俗的说：div 是大包装袋， span 是小包装袋。

6.文本标签_不常用的

标签名	标签语义	单 / 双标签
cite	作品标题（书籍、歌曲、电影、电视节目、绘画、雕塑）	双
dfn	特殊术语，或专属名词	双
del 与 ins	删除的文本【与】插入的文本	双
sub 与 sup	下标文字【与】上标文字	双
code	一段代码	双
samp	从正常的上下文中，将某些内容提取出来，例如：标识设备输出	双
kbd	键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中	双
abbr	缩写，最好配合上 title 属性	双
bdo	更改文本方向，要配合 dir 属性，可选值: ltr （默认值）、 rtl	双
var	标记变量，可以与 code 标签一起使用	双
small	附属细则，例如：包括版权、法律文本。—— 很少使用	双
b	摘要中的关键字、评论中的产品名称。—— 很少使用	双
i	本意是：人物的思想活动、所说的话等等。现在多用于：呈现字体图标（后面要讲的内容）。	双
u	与正常内容有反差文本，例如：错的单词、不合适的描述等。—— 很少使用	双
q	短引用 —— 很少使用	双
blockquote	长引用 —— 很少使用	双
address	地址信息	双

备注：

这些不常用的文本标签，编码时不用过于纠结（酌情而定，不用也没毛病）。
blockquote 与 address 是块级元素，其他的文本标签，都是行内元素。
有些语义感不强的标签，我们很少使用，例如： small 、 b 、 u 、 q 、 blockquote
HTML标签太多了！记住那些：重要的、语义感强的标签即可；截止目前，有这些： h1~h6 、 p 、 div 、 em 、 strong 、 span