前端课程 ：HTML CSS JavaScript
1. WEB
1. 什么是Web
其实就是网页，网页是一种基于B/S模式的应用程序
B/S :
浏览器与服务器交互模式（Browser / Server）
C/S :
客户端与服务器交互模式（Client / Server）
2. Web 的组成
1. 浏览器 : 代替用户向服务器发送请求，解析数据并呈现
2. 服务器 ：接收用户请求并响应
3. 通信协议 ：http / https / ftp / file...
规范数据在网络中是如何打包和传递的
http : 超文本传输协议
https : 加密的超文本传输协议
3. Web 服务器
1. 作用 ：
1. 存储数据
2. 接收请求并响应
3. 具备安全性功能
2. 产品 ：
1. Apache
2. Tomcat
3. IIS - Internet Information Service
4. Nginx
...
3. 技术
1. JSP - Java Server Pages (Java 服务器页面)
2. PHP
3. ASP.net
4. Python Web (Flask Django...)
4. 浏览器
1. 作用 ：
1. 代替用户向服务器发请求，也叫用户代理user agent
2. 作为响应数据的解释引擎，向用户呈现图形化界面
2. 产品 ：
1. Google Chrome - webkit(内核)
2. Opera Opera
3. Mozilla FireFox
4. Apple Safari - webkit(内核)
5. Microsoft IE 、Edge
浏览器内核（引擎）：
1. 渲染引擎：解析 HTML CSS，控制页面的渲染效果
2. JS引擎：解析JS脚本
3. 技术
1. HTML
2. CSS
3. JS
4. 前端框架（Angular Vue Node.js React...）
2. HTML 概述
1. 什么是HTML
HyperText Markup Language
超文本 标记 语言
1. 超文本 ：
网页中一切的内容：文本 ，图片，音视频等都是超文本
2. 标记 ：
也叫标签/元素，主要用来标记网页中的内容，结合CSS实现
网页的布局和排版
2. HTML 在计算机中的表现
所有的网页都是HTML格式的文件
文件后缀使用.html / .htm 表示
3. 运行工具
使用浏览器打开html文件，使用chrome作为默认浏览器
4. 调试工具
浏览器自带的调试工具（开发者工具），使用F12打开，或者
右键检查
3. HTML的基础语法
1. HTML是标签语法，标签以<>为标志
分类 ：
1. 双标签
有开始标签，有结束标签，成对出现
<标签名> 标签内容 </标签名>
2. 单标签
只有开始标签，没有结束标签
1. <标签名>
2. <标签名/>
实例 ：
<html>
<head>
<title>第一个网页</title>
</head>
<body></body>
</html>
2. 标签的嵌套
1. 在双标签中嵌套使用其他标签，都是嵌套结构
2. 外层元素成为父元素，内层元素成为子元素
3. 多层嵌套结构中，外层元素称为祖先元素，内层元素
称为后代元素
3. 文档基本结构
1. 最外层<html></html>标签，表示文档的开始和结束，
网页中所有的内容都必须写在html标签中
2. <head></head>标签，表示网页的头部，可以设置网页的
标题，字符集，引入外部文件等。
3. <body></body>标签，表示网页的主体，所有呈现在
网页窗口中的内容，都应该写在body标签中
4. 标签属性
标签属性用来修饰或补充当前的标签内容
语法 ：
<标签名 属性名="属性值"></标签名>
每个标签中都可以添加一个或多个标签属性，多个属性之间
使用空格隔开
<标签名 属性1="属性值" 属性2="属性值">
5. HTML 语法规范
1. HTML 标签不区分大小写的，BODY Body body 标签名
可以使用大写，但是推荐使用纯小写字母
2. 在涉及标签嵌套时，保持内部标签适当缩进，增加
代码可读性
3. 添加适量注释
6. HTML的注释
语法 ：
<!--
注释内容
-->
注意 ：
1. HTML的注释不能嵌套
2. 标签名中不能嵌套使用注释
练习 ：
创建html文件
在head中设置网页标题和字符集
在body中添加网页内容，内容不限
在不同的浏览器中查看运行效果
4. HTML 常用标签
1. 文档类型声明
使用<!doctype html>,对当前的文档类型及版本做出指定
这种声明方式是HTML5使用的声明方式
关系到页面元素的渲染效果
书写在<html>之前，文档开篇
2. 文档基本结构
3. 设置网页标题，字符集，和选项卡图标
<link rel="shortcut icon" href="" type="image/x-icon">
4. 标题标签
<h1>一级标题</h1>
...
<h6>六级标题</h6>
标题标签的内容，与普通文本相比，自带文本加粗效果，
从h1 ~ h6 字体大小逐渐减小
5. 常用文本标签
1. 段落标签
<p>标签内容</p>
2. <span></span> 行分区标签
3. <label></label> 文本标签
4. <b></b> <strong></strong> 加粗标签
h5之后推荐使用有语义标签 strong 表示强调
5. <s></s> 删除线
6. <i></i> 斜体显示
7. <u></u> 为文本添加下划线
8. 上下标 标签
上标 ：
x<sup>2</sup>
下标 ：
x<sub>1</sub>
6. 字符实体
1. HTML文档中会忽略多余的空格和换行，只显示为一个空格
2. 针对HTML文档的特殊性，比如对空格，<>的处理，需要
采用特殊的语法表示空格和<>等其他符号
3. 字符实体 ：
1. 表示一个空格
2. < less than表示 <
3. > greater than 表示 >
4. © 表示版权符号
5. ¥ 表示人民币符号￥
7. 格式标签
1. 换行标签 <br>
2. 水平线标签 <hr>
8. 标签分类
1. 行内元素：
可以与其他元素共行显示 ： span b strong label i s
u sub sup...
2. 块级元素：
独占一行，不与其他元素共行
h1 ~ h6 p div
div ：是容器标签，一般用于网页结构划分
5. 列表标签
列表 ：一种结构，将数据按照从上到下进行排列显示
分类 ：
1. 有序列表
按照数字或字母依次标识每一条数据
语法 ：
1. 有序列表(ordered list)
<ol></ol>
2. 列表项标签(list item)
<li></li>
每一组li元素都标识一条列表项
et :
<ol>
<li></li>
</ol>
标签属性 ：
有序列表默认使用数字标识列表项，从1开始
也可以在ol标签中添加属性进行设置
1. type 属性
指定项目符号的类型
可取的值 ：1 a A i I
希腊数字 ：i ii iii iv v vi..
2. start 属性
指定从第几个项目符号开始标识数据
取值 ：无单位的数值
2. 无序列表 (unordered list)
语法 ：
<ul>
<li></li>
</ul>
属性 ：
默认情况下，无序列表以实心原点标识列表项
可以通过属性修改
type 属性，指定项目符号类型
取值 ：disc(默认) square(实心正方形) circle(
空心圆) none
3. 自定义列表
语法 ：
<dl>
<dt>订单跟踪</dt>
<dd>物流查询</dd>
<dd>联系客服</dd>
<dt>加入我们</dt>
<dd>门店查询</dd>
<dd>联系客服</dd>
</dl>
4. 列表的嵌套
列表标签 ol / ul 中除了可以嵌套li元素，也可以嵌套
其他元素
下拉菜单 ：
结构 ：
我的电脑
桌面
文件夹1
文件夹2
C盘
练习 ：
1. 使用列表标签显示四大名著中的1~2部
2. 外部列表写名称
3. 内部嵌套列表，列出当前名著中三个主要人物
水浒传
1. 宋江
2. 大郎
3. 莲莲
6. 图像与超链接
1. URL
Uniform Resource Locator 统一资源定位符
俗称路径，有本地路径，有网络路径
组成 ：
完整的URL 由 协议 域名 文件目录 文件名组成
分类 ：
1. 绝对路径
从根目录开始逐级查找，直到找到文件名
通常用于网络资源文件
C:/Users/Python/Desktop/Day01/day01.txt
windows 操作系统上绝对路径以盘符开头
mac os 操作系统上绝对路径以/开头
2. 相对路径
是从当前所在的目录文件夹开始查找
2. 图片标签
1. 语法 ：
<img src="url">
在网页中插入一张图片,默认按照原始尺寸显示
使用相对路径时，一定要注意 ：
1. 从当前所在目录文件夹开始查找
2. 可以使用../返回上一级目录
3. 必要时，../可以多次使用