一、HTML基础入门一、认识互联网 1.服务器是什么？服务器本质上也是一台类似于你电脑一样的主机服务器特点: 二十四

一、认识互联网

1.服务器是什么？

服务器本质上也是一台类似于你电脑一样的主机
服务器特点:
- 二十四小时不关机的（稳定运行）
- 没有显示器的
- 一般装的是Linux操作系统（比如centos）

2.互联网的基本原理

2.1 在本地开发，在服务器共享
- 程序开发人员->在本地开发(html,css,javascript)->上传到服务器->所有用户即可访问
2.2 HTTP协议
- HTTP 协议（HyperText Transfer Protocol）超文本传输协议，是互联网数据传输的常见协议
- HTTP是由"HTTP"请求和"HTTP"响应构成
- 网址前的http://表示用http协议请求页面
2.3 HTTP响应
- 用户通过各种终端发出HTTP请求 -> 服务器识别发过来的HTTP请求- > 返回给用户端a.html文件，一来一回就能看到当前的网页,返回的这个过程就是HTTP响应
2.4 前后端请求交互基本流程
1. 用户通过各种终端发出HTTP请求
2. 服务器上:Java，PHP，Python，NodeJS 等程序运行时执行数据库“增删查改” 等业务，他们就是后端语言
3. 服务器返回HTTP响应
4. 在浏览器中，HTML、CSS 和 JS 程序将运行，执行页面结构渲染、美化、交互效果等业务

二、基础入门

1.电脑配置（显示隐藏文件和扩展名）

首先先进行电脑设置，把"文件扩展名"设置为可见
- windows7操作点击工具->文件夹选项 -> 查看 -> 显示隐藏的文件

- windows10操作
点击查看-> 文件扩展名

2.HTML标签和属性

1.创建网页的两种方式

方式一:

新创建一个文件夹，在文件夹中，右键新建文本文件，在里面添加文字

保存文件，然后将文件后缀名.txt修改为 .html ，再使用Vscode 编辑器打开方式二:

创建一个空文件夹，直接使用 Vscode 打开文件夹

使用快捷键 Ctrl + N 新建文件，保存文件格式为 .html后缀名即可

或者点击新建文件按钮或在 Vscode 资源管理器中右键新建文件

3.生成HTML5框架

在 Vscode 中输入 ! 英文模式下，按 tab键，即可自动生成 HTML5 的骨架

4.预览网页的方式

直接双击网页图标

在 Vscode 中安装 Live Server插件（实时热更新）修改内容后，保存网页将自动刷新

三、浏览器和浏览器内核

浏览器最核心的部分是渲染引擎（Rendering Engine），一般也称为“浏览器内核
- 浏览器负责解析网页语法，并渲染网页
常用浏览器有 IE、火狐（Firefox）谷歌（Google）、Safari（苹果官方）、Opera 、Edge（微软）等

不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同内核的浏览器中的渲染效果也可能不同。

浏览器	内核	说明
IE	Trident（三叉戟）	IE 浏览器内核
Edge	WebKit	微软 Microsoft Edge（简称 ME 浏览器）
Chrome	Blink （眨眼）	由 Google 和 Opera Software 共同研发，Blink 其实是 WebKit 的分支，以前 Google 是 WebKit 内核、现在是 Blink
Firefox	Gecko（壁虎）	火狐浏览器内核
Safari	WebKit	苹果浏览器内核
Opera	Presto（急板乐曲 -> WebKit	欧朋浏览器原来内核是Presto，现在是webkit

四、网页的组成部分部分

网页主要由三部分组成：

结构（Structure）、表现（Presentation）和行为（Behavior）

标准	简介
HTML(结构)	网页的结构，对网页的元素进行整理和分类
CSS（表现）	网页的视觉效果，设置网页元素的排版、颜色、大小等外观样式
javascript（行为）	网页的交互处理

五、认识HTML标签

1.HTML是什么？

HTML 是用来描述网页的一种语言

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (markup language) 小知识

HTML文件的拓展名是.htm.html

因历史遗留问题，Win95\Win98系统的文件拓展名不能超过3字符，所以使用.htm

现在统一使用 .html

2.HTML标签

HTML标记也可以称为HTML标签

HTML标签是由左、右尖括号所包围,比如<html>

HTML标签通常是成对出现的，例如 <p></p>

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

HTML标签可以分为双标签和单标签

有的标签不是成对出现的，而是只有起始标签，称之为单标签 <meta charset="UTF-8" /> 在 HTML4 中，单标签必须写一个结尾的反斜杠，HTML5 就不用写

3、完整的HTML骨架

DTD文档声明
HTML元素
- head元素
- body元素

<!-- 文档声明DTD -->
<!DOCTYPE html>
<!-- <html>标签对</html> -->
<html lang="en">
  <!-- <head>标签对</head> -->
<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">
  <meta name="Keywords" content="艾编程,WEB前端,Java架构师,Python课程" />
  <meta
  name="description"
  content="艾编程连接了国内外一线互联网公司整合一线师资和企业项目研发解决方案，面向互联网企业开发者提供Web前端、Java、Python、大数据、人工智能等技术在实际企业应用中的项目研发解决方案体系化在线课程。"
/>
  <title>这是我的第一个网页</title>
</head>
<!-- <body>标签对</body> -->
<body>
  Hello World!!! 你好，世界!!!
</body>
</html>

HTML代码解读

<!DOCTYPE html>

<!DOCTYPE html> 声明不是 HTML 标签,它告诉浏览器是使用哪个 HTML 版本进行编写的指令

让浏览器用HTML5的标准去解析识别内容

必须放在HTML文档的最前面，不能省略，省略了会引发浏览器的一些兼容问题

不同版本的 HTML 有不同的 DTD 写法

在 HTML5 中只有一种：

<!DOCTYPE html>

HTML4.01 严格版(了解)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML4.01 过渡版(了解)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML4.01 框架版(了解)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html lang="en"></html> 根元素

`属性:lang 表示网页的语言，en表示英语，zh-CN表示中文

<head></head>标签对，规定文档相关的配置信息，包括文档的标题，引用的文档样式和脚本等

<meta charset="UTF-8"> meta元标签，设置网页的编码

charset 字符集，字符集有UTF-8，gbk,gb2321等

Live Serve 插件不支持 gb2312、gbk 字符集，只支持 UTF-8 字符集，文件编码集与 meta 标签编码不一致网页会出现乱码，同样的内容，不同的编码所占字节数也不同

网页三要素

title：网页的标题（30 字以内）

文字会显示在浏览器的标题栏上

title 也是搜索引擎收录网站时显示的标题，为了吸引用户点击，合理的标题设置有利于 SEO 优化=

keywords：网页的关键词（关键词之间用英文状态下的逗号 "," 分隔）

description：网页的描述（150 字以内） <meta http-equiv="X-UA-Compatible" content="IE=edge">告诉浏览器什么版本 IE 就用什么版本的标准模式渲染

viewport主要用作移动端适配

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：用来设置 layout viewport 的宽度

device-width ：设置成设备的实际宽度

initial-scale=1.0 ：防止浏览器对页面进行缩放 1:1 显示，即不缩放 <body></body>标签对中书写网页的内容，包括网页的头部、主要内容、页脚等各个部分

一、HTML基础入门

一、认识互联网

1.服务器是什么？

2.互联网的基本原理

二、基础入门

1.电脑配置（显示隐藏文件和扩展名）

2.HTML标签和属性

3.生成HTML5框架

4.预览网页的方式

三、浏览器和浏览器内核

四、网页的组成部分部分

五、认识HTML标签

1.HTML是什么？

2.HTML标签

3、完整的HTML骨架

HTML代码解读

六、HTML常用标签和属性

1.标题标签

一、HTML基础入门

一、认识互联网

1.服务器是什么？

2.互联网的基本原理

二、基础入门

1.电脑配置（显示隐藏文件和扩展名）

2.HTML标签和属性

3.生成HTML5框架

4.预览网页的方式

三、 浏览器和浏览器内核

四、网页的组成部分部分

五、认识HTML标签

1.HTML是什么？

2.HTML标签

3、完整的HTML骨架

HTML代码解读

六、HTML常用标签和属性

1.标题标签

三、浏览器和浏览器内核