前端基础——HTML傻瓜式入门（1）

前端基础——HTML傻瓜式入门（1）
该文章Github地址：https://github.com/AntonyCheng/html-notes

在此介绍一下作者开源的SpringBoot项目初始化模板（Github仓库地址：https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址：https://blog.csdn.net/AntonyCheng/article/details/136555245），该模板集成了最常见的开发组件，同时基于修改配置文件实现组件的装载，除了这些，模板中还有非常丰富的整合示例，同时单体架构也非常适合SpringBoot框架入门，如果觉得有意义或者有帮助，欢迎Star & Issues & PR！

1.前端开发主要技术介绍

 1.1.HTML5

搭建网页结构的语言，增加了很多移动端的支持，简单好学。

1.2.CSS3

样式表，美化网页的语言，增加了很多动画、过渡等新特性，要记的英语单词非常多，不过非常有意思。

1.3.JavaScript

前端开发工程师最重要的“看家语言”，JS功底的好坏决定了职业高度，学习需要下苦功。

1.4.Vne.js/React.js

从2016年开始流行的前端框架，采用模块化开发，数据驱动，声明式编程。

2.什么是IDE

IDE是指集成开发环境，是含代码变价、关键字高亮、智能感应、只能纠错、格式美化、版本管理等功能于一身的“高级代码编辑器”。

IDE名称公司
Visual Studio Code 微软公司
Sublime 个人开发者
Atom GitHub
WebStorm Jet brains
HBuidler DCloud

3.互联网基本原理

 3.1.在本地开发，在服务器共享

在本地把诸如.html / .css / .js文件全部写好，然后将这些文件上传到某一个服务器上，此时这个文件就拥有了网址：www.name.com/file/filename.html, 然后所有用户都能访问这个网址。

3.2.HTTP协议

定义：HTTP协议（Hypertext Transfer Protocol，超文本传输协议）是互联网数据传输的常见协议。一次HTTP事务是由“HTTP请求”和“HTTP响应”构成。网址前的http:// 就表示用http协议请求页面。

用户通过输入网址访问一个网站，需要用户向服务器发出一个HTTP请求，服务器会正确识别用户所发来的HTTP请求，分析出正确的文件夹中的文件。

服务器接收到HTTP请求后，后向用户做出一个HTTP响应，让用户看到文件夹里的内容。

3.3.什么是前端，什么是后端

用户和服务器的流程：
1. 用户向服务器发出HTTP请求。
2. 在服务器上，Java、PHP、Python等程序将运行，执行数据库“增删查改”等业务，它们就是后端语言。
3. 服务器向用户做出HTTP响应。
4. 在浏览器中，HTML、CSS和JS程序将运行，执行页面结构渲染、美化、交互效果等业务，他们就是前端语言。
4.创建第一个网页

 4.1.文件创建方法

方法一：先新建一个文件夹，然后把文件夹拖入 VS code 或者选择进 VS code ，然后新建（ctrl+n）一个新的.html文件。

方法二：先创建一个文件夹，在文件夹中直接点击鼠标右键“新建文本文档”，然后将后缀 .txt 改成 .html。

4.2.HTML骨架的生成

输入 ! （英文模式下的感叹号），按下tab键，即可自动生成HTML5的骨架。

5.浏览网页的方法

方法一：直接双击文件夹中双击网页图标，即可查看网页。

方法二：给 VS code 安装Live Server插件，让网页实时更新，安装完成后按CTRL+shift+p，选择“open with live server”即可，使用这个方法之前需要把网页放在一个文件夹里（即第一种文件创建方式），且 VS Code 已经打开了这个文件夹。

6.认识HTML5骨架

 6.1.基本框架
```
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>Documenttitle>
head>
<body>
 
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
```
6.2.分块分析

 6.2.1.W3C组织

该组织是万维网的主要国际标准组织，负责制定Web标准，主要是HTML和CSS。

6.2.2.文档类型声明DTD
```
DOCTYPE html>	
1
```
HTML文件第一行必须是DTD（Document Type Definition，文档类型声明

不写DTD会引起浏览器的一些兼容问题

6.2.3.标签对
```
<html lang="en">
html>
1
2
```
lang属性表示网页的语言，en 表示英文，zh 表示中文，学习期间改不改没所谓

6.2.4.和
```
<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>Documenttitle>
head>
<body>
 
body>
1
2
3
4
5
6
7
8
9
```
标签对是网页的配置，并不是网页的头部

标签对是书写网页的内容，包括网页的头部，主要内容，页脚等各个部分

7.字符集

 7.1.字符编码方式
```
<meta charset="UTF-8">
1
```
meta表示‘元标签’，charset表示’字符集‘，UTF-8表示’字符编码方式‘
```
<meta charset="gb2312">
1
```
gb2312表示’字符编码方式‘，也称gbk，其中收录了所有的汉字字符（繁体和简体）和英语，少量韩文，日文和少量的图形字符，编写出来的网页比utf-8编写出来的网页所占空间少。

7.2.更改字符编码方式

无论使用哪种字符集，一定要在VS Code编辑器中将文件也设置为相同字符集，否则会出现乱码，然后更改meta标签，但是要注意，live server插件仅支持utf-8。

8.title、关键字以及页面描述

 8.1.title设置出现的位置
```
<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>Documenttitle>		
head>
1
2
3
4
5
6
7
8
```
网页的标题在title标签中插入，此时插入后的效果如下：

title标签会以文字的形式出现在网页名字上

8.2.网页关键词和页面描述

合理设置网页的管检测和页面描述，也是SEO（搜索引擎优化）的重要手段，目的是拉高有关搜索引擎中的自然排名。

使用meta标签设置网页关键词和描述，name属性非常关键，用来设置meta的具体功能。

meta属性中的name/content的属性可以重复设置。

如下俩个例子：
```
<meta name="Keywords" content="keywords1，keywords2……">

1
2
```
```
<meta name="Description" content="des1,des2……">

1
2
```
也有直接的骨架例子：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1
```
这里就描述了一个viewport的一个属性：

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
1. width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
2. height：和 width 相对应，指定高度。
3. initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
4. maximum-scale：允许用户缩放到的最大比例。
5. minimum-scale：允许用户缩放到的最小比例。
6. user-scalable：用户是否可以手动缩放。
9.认识标签

 9.1.标签对

标签通常是成对出现的：
```
dididip>
1
```
不同功能的标签有不同的功能：
```
p>		
<h1>h1>	
1
2
```
9.2.单标签

最常见的就是meta标签：
```
1
```
10.标题和段落标签

 10.1.标题标签

h系列标签表示“标题”语义，h是headline的意思

标签语义
h1 一级标题
h2 二级标题
h3 三级标题
h4 四级标题
h5 五级标题
h6 六级标题

搜索引擎非常看重 h标签应该把重点内容放到

里。

但是只能设置一个，否者会被搜索引擎视为作弊，从而不会抓取。

10.2.段落标签

标签表示段落标签，p是paragraph的意思。

任何段落都要放在
标签中，因为HTML中即使代码换行了，页面显示效果也不会换行，必须写在
中。

标签中不能嵌套 h系列标签和其他 p系列标签。

11.div标签

 11.1.div定义

div是英语division“分割”的缩写，顾名思义，
标签对用来将相关的内容组合在一起，以和其他内容分割，是文档结构更加清晰。

比如，网页的头部要放到一个
标签对当中，轮播图也要放到一个
标签对当中，文章内容也要放到一个
标签对中。

是最常见的HTML标签，因为它可以结合CSS使用，实现网页的布局，这种布局形式叫做“DIV+CSS”。

像是一个容器，什么都可以容纳，因此工程师也习惯称呼
为“盒子”。

11.2.div的常见类名
标签可以添加class属性表示“类名”，类名服务于CSS

区域类名
页头 header
logo logo
导航条 nav
横幅 banner
内容区域 content
页脚 footer

12.HTML特性

 12.1.空白折叠现象

文字和文字之间的多个空格，换行会被折叠成一个空格

例如下：
```
<body>
 你 		 好 啊 ！p>
body>
1
2
3
```
打印效果如下：
```
你 好 啊 ！
1
```
标签的“内壁”和文字之间的空格是会被忽略的。

例如下：
```
<body>
 你好啊！p>
body>
1
2
3
```
打印效果如下：
```
你好啊！
1
```
12.2.转义字符

常见的转义符号：

转义字符意义
< 小于号 <
> 大于号 >
空格（不会被折叠）
© 版权符号 ©
& 和号 &
" 引号 "
' 撇号 '

首先，我们来看看我们如何在网页上显示：我们今天学习了
标签的功能是段落。
```
<body>
 我们今天学习了标签的功能是段落。
body>
1
2
3
```
打印如下：
```
我们今天学习了p>标签的功能是段落。
1
```
12.3.HTML注释

写法如下：
```
1
```
用 VS Code 可以使用 ctrl+/ 键入。

13.项目开发(了解)

13.1.项目起步

创建文件夹，主要文件夹如下：

文件夹名 意义
images 存放图片
css 存放样式表
js 存放js文件

13.2.网站首页index.html

绝大多数服务器默认的网站首页名为index.html

14.列表的使用

 14.1.三种列表
标签语义

无序列表

有序列表

定义列表
14.2.无序列表
14.2.1.
标签和
标签
无序列表使用
标签，每个列表项都是

IDE名称	公司
Visual Studio Code	微软公司
Sublime	个人开发者
Atom	GitHub
WebStorm	Jet brains
HBuidler	DCloud

标签	语义
h1	一级标题
h2	二级标题
h3	三级标题
h4	四级标题
h5	五级标题
h6	六级标题

区域	类名
页头	header
logo	logo
导航条	nav
横幅	banner
内容区域	content
页脚	footer

转义字符	意义
<	小于号 <
>	大于号 >
	空格（不会被折叠）
©	版权符号 ©
&	和号 &
"	引号 "
'	撇号 '

文件夹名	意义
images	存放图片
css	存放样式表
js	存放js文件

标签	语义
	无序列表
	有序列表
	定义列表

标签。

<ul>
	<li>面包li>
	<li>牛奶li>
	<li>鸡蛋li>
	<li>水果li>
ul>
1
2
3
4
5
6

实例如下：

面包
牛奶
鸡蛋
水果

无序列表是一个父子组合标签，

需要同时出现。

并且这种父子组合标签（嵌套结构），必须注意代码的缩进（Tab键）。

标签必须放在
和
中作为子标签。同时
和
的子标签只能是
标签。

标签是容器，内部可以放任何其他标签，例如下：

<ul>
	<li>
		面包
		<p>全麦面包p>
	li>
	<li>
		牛奶
		<p>脱脂牛奶p>
	li>
	<li>
		鸡蛋
		<p>卤制品p>
	li>
	<li>
		水果
		<p>富含较多的维生素Cp>
	li>
ul> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

打印结果如下：

面包
全麦面包
牛奶
脱脂牛奶
鸡蛋
卤制品
水果
富含较多的维生素C

14.2.2.无序列表的嵌套

直接先来看例子：

<ul>
    <li>
        <p>四川省p>
        <ul>
            <li>
                <p>成都市p>
                <ul>
                    <li>武侯区li>
                    <li>高新区li>
                ul>
            li>
            <li>绵阳市li>
            <li>德阳市li>
        ul>
    li>
    <li>
        <p>福建省p>
        <ul>
            <li>福州市li>
            <li>厦门市li>
            <li>宁德市li>
        ul>
    li>
ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

打印效果如下：

四川省
- 成都市
  - 武侯区
  - 高新区
- 绵阳市
- 德阳市
福建省
- 福州市
- 厦门市
- 宁德市

一定要记住：

li不能散着放
ul的子标签只能是li
li里面可以放任何东西

14.2.3.无序列表的TYPE属性

无序列表有type属性，可以定义前导符号的样式，但是在HTML5中已经被废弃了，建议用CSS替代。

值	描述
disc	默认值，实心圆
circle	空心圆
square	实心方块

用法：

<ul type="disc">
    <li>1li>
    <li>2li>
ul>
<ul type="circle">
    <li>1li>
    <li>2li>
ul>
<ul type="square">
    <li>1li>
    <li>2li>
ul>
1
2
3
4
5
6
7
8
9
10
11
12

打印如下：

14.3.有序列表

14.3.1.
标签和
标签

无序列表使用

标签，每个列表项都是
标签。

<ol>
    <li>面包li>
    <li>牛奶li>
    <li>鸡蛋li>
    <li>水果li>
ol>
1
2
3
4
5
6

打印效果如下：

面包
牛奶
鸡蛋
水果

14.3.2.
标签的注意事项与
相同

我们在写一个

的基本demo：

<ol>
    <li>
        <p>美国p>
        <ol>
            <li>纽约li>
            <li>洛杉矶li>
            <li>旧金山li>
        ol>
    li>
    <li>
        <h2><b>中国b>h2>
        <ol>
            <li><b>上海b>li>
            <li><b>北京b>li>
            <li><b>广州b>li>
        ol>
    li>
    <li>
        <p>日本p>
        <ol>
            <li>东京li>
            <li>大阪li>
            <li>横滨li>
        ol>
    li>
ol>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

打印效果如下：

美国
1. 纽约
2. 洛杉矶
3. 旧金山
中国
1. 上海
2. 北京
3. 广州
日本
1. 东京
2. 大阪
3. 横滨

14.3.3.
标签的TYPE属性

type属性值	意义
a	表示小写英文字母编号
A	表示大写英文字母编号
i	表示小写罗马字母编号
I	表示大写罗马字母编号
1	表示数字编号

我们来试试：

<ol type="a">
    <li>就是玩li>
    <li>就是玩li>
ol>
<ol type="A">
    <li>就是玩li>
    <li>就是玩li>
ol>
<ol type="i">
    <li>就是玩li>
    <li>就是玩li>
ol>
<ol type="I">
    <li>就是玩li>
    <li>就是玩li>
ol>
<ol type="1">
    <li>就是玩li>
    <li>就是玩li>
ol>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

打印效果如下：

就是玩
就是玩

就是玩
就是玩

就是玩
就是玩

就是玩
就是玩

就是玩
就是玩

14.3.4.
标签的start属性

start属性值必须是一个整数，指定了列表编号的起始值。
此属性的值应为阿拉伯数字，尽管列表条目的编号类型type属性可能指定为了罗马数字编号等其它类型的编号。

此时，start属性所设置的就是一个排序起始值，和type属性并不矛盾。

例如下：

<ol type="a" start="5">
    <li>就是玩li>
    <li>就是玩li>
    <li>就是玩li>
    <li>就是玩li>
    <li>就是玩li>
    <li>就是玩li>
    <li>就是玩li>
    <li>就是玩li>
    <li>就是玩li>
ol>
1
2
3
4
5
6
7
8
9
10
11

此时的起始序数应该是小写字母的第五位——e。

打印效果如下：

就是玩
就是玩
就是玩
就是玩
就是玩
就是玩
就是玩
就是玩
就是玩

14.3.5.
标签的reversed属性

reversed属性指定列表中的条目是否是倒叙排列。
reversed属性不需要值，只需要写reversed单词即可。

例如下：

<ol type="a" reversed>
    <li>就是玩li>
    <li>就是玩li>
    <li>就是玩li>
    <li>就是玩li>     
    <li>就是玩li>
    <li>就是玩li>
    <li>就是玩li>
    <li>就是玩li>
    <li>就是玩li>
ol>
1
2
3
4
5
6
7
8
9
10
11

打印效果如下：

就是玩
就是玩
就是玩
就是玩
就是玩
就是玩
就是玩
就是玩
就是玩

注意：有 reversed 时，尽量不要用 start 属性，避免混乱。

14.4.定义列表

14.4.1.示例

<dl>
    <dt>北京dt>
    <dd>我国首都，政治中心，文化中心dd>
    <dt>上海dt>
    <dd>国际经济、金融、科技创新中心dd>
    <dt>深圳dt>
    <dd>经济特区，国际化都市dd>
dl>
1
2
3
4
5
6
7
8

打印效果如下：

北京

我国首都，政治中心，文化中心

上海

国际经济、金融、科技创新中心

深圳

经济特区，国际化都市

14.4.2.代码解释

全称 ”definition list“ 定义列表。
全称 ”data term“ 数据项。
全称 ”data definition“ 数据定义。

14.4.3.
和
、
标签

是定义列表标签，内容交替出现
、
标签，例子如上例。

但也允许 dt 和 dd 不交替出现，而是分别处于不同的定义列表中。这样有利于我们向里面添加更多样式的CSS元素。

例如下：

<dl>
    <dt>HTML5dt>
    <dd>超文本标记语言dd>
dl>
<dl>
    <dt>CSSdt>
    <dd>叠层式样式表dd>
dl>
<dl>
    <dt>JavaScriptdt>
    <dd>脚本程序dd>
dl>
1
2
3
4
5
6
7
8
9
10
11
12

打印效果如下：

HTML5

超文本标记语言

CSS

叠层式样式表

JavaScript

脚本程序

14.4.4.什么时候要去使用定义列表

是用什么样的标签，应该看语言。
只要语义上有解释说明含义的文字，且形态为列表，应该使用定义列表。

1.前端开发主要技术介绍

1.1.HTML5

1.2.CSS3

1.3.JavaScript

1.4.Vne.js/React.js

2.什么是IDE

3.互联网基本原理

3.1.在本地开发，在服务器共享

3.2.HTTP协议

3.3.什么是前端，什么是后端

4.创建第一个网页

4.1.文件创建方法

4.2.HTML骨架的生成

5.浏览网页的方法

6.认识HTML5骨架

6.1.基本框架

6.2.分块分析

6.2.1.W3C组织

6.2.2.文档类型声明DTD

6.2.3.标签对

6.2.4.和

7.字符集

7.1.字符编码方式

7.2.更改字符编码方式

8.title、关键字以及页面描述

8.1.title设置出现的位置

8.2.网页关键词和页面描述

9.认识标签

9.1.标签对

9.2.单标签

10.标题和段落标签

10.1.标题标签

10.2.段落标签

11.div标签

11.1.div定义

11.2.div的常见类名

12.HTML特性

12.1.空白折叠现象

12.2.转义字符

12.3.HTML注释

13.项目开发(了解)

13.1.项目起步

13.2.网站首页index.html

14.列表的使用

14.1.三种列表

14.2.无序列表

14.2.1.标签和标签

14.2.2.无序列表的嵌套

14.2.3.无序列表的TYPE属性

14.3.有序列表

14.3.1.标签和标签

14.3.2.标签的注意事项与相同

中国

14.3.3.标签的TYPE属性

14.3.4.标签的start属性

14.3.5.标签的reversed属性

14.4.定义列表

14.4.1.示例

14.4.2.代码解释

14.4.3.和、标签

14.4.4.什么时候要去使用定义列表

下一章：前端基础——HTML傻瓜式入门（2）

14.2.1.
标签和
标签

14.3.1.
标签和
标签

14.3.2.
标签的注意事项与
相同

14.3.3.
标签的TYPE属性

14.3.4.
标签的start属性

14.3.5.
标签的reversed属性

14.4.3.
和
、
标签