前端课程 :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. &nbsp; 表示一个空格
2. &lt; less than表示 <
3. &gt; greater than 表示 >
4. &copy; 表示版权符号
5. &yen; 表示人民币符号¥
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. 必要时,../可以多次使用