WEB基础
HTML,CSS,JAVASCRIPT
PYTHON WEB
PYTHON + HTML + CSS + JAVASCRIPT
(Django)
1、WEB概述
1、什么是WEB
WEB就是互联网上的一种应用程序 - 网页
典型的程序：
1、C / S
C : Client(客户端)
S : Server(服务器)
2、B / S
B : Browser(浏览器)
S : Server(服务器)
2、WEB的组成 & 运行流程
由服务器，浏览器 和 通信协议 组成
服务器：处理用户的请求和响应
浏览器：代替用户向服务器发送请求(User Agent)
通信协议：规范了数据是如何打包和传递的 - http
http: Hyper Text Transfer Protocal
超级 文本 传输 协议
3、WEB服务器
1、作用
用于接受用户的请求并给出响应
存储WEB的信息
具备基本的安全功能
2、产品
1、APACHE
2、TOMCAT
3、IIS
3、技术
1、JSP
2、php
3、ASP.NET
4、ASP
5、Python WEB（Django，Flask）
4、WEB 浏览器
1、作用
1、代替用户向服务器发送请求
2、作为响应数据的解释和执行引擎
2、主流浏览器产品
1、Microsoft Internet Explorer (IE)
2、Google Chrome
3、Mozilla Firefox
4、Apple Safari
5、Opera Opera
浏览器靠内核处理数据，内核包含两部分：
1、内容排版引擎 - HTML，CSS
2、脚本解释引擎 - JS
3、浏览器技术
HTML，CSS，JavaScript
2、HTML概述
1、HTML介绍 和 基本语法
1、什么是HTML
HTML:Hyper Text Markup Language
超级 文本 标记 语言
编写网页的一款语言
超文本：具备特殊功能的文本就是超文本
普通文本 a : 普通字符 a
超文本 a : 表示超链接的功能
普通文本 b : 普通字符 b
超文本 b : 表示文字加粗的功能
标记：超文本的组成形式
普通文本：a
超文本a ：<a></a>
超文本b ：<b></b>
语言：语言有自己的语法规范
2、HTML在计算机中的表现
所有的网页(HTML)文件在计算机中都是以 .html 或 .htm 作为结尾的文件
开发工具：所有的文本编辑软件都是开发工具
1、记事本
2、Editplus，Sublime
3、Dreamweaver,... ...
运行工具：浏览器
推荐使用 Google Chrome
3、HTML 基础语法(重点)
1、标记的语法
1、什么是标记
在网页中，用于表示功能的符号称为"标记/标签/元素"
2、语法
所有的标记在使用时，必须用 <> 括起来
标记分为 双标记 和 单标记
1、双标记
有显示的开始 和 显示的结束
<标记>内容</标记>
ex:
1、…
2、…
3、
…
4、
注意：双标记，有开始，必须有结束，否则会出错
2、单标记
只有一个标记，既能表示开始，也能表示结束
<标记> 或 <标记/>
ex:
1、
或
: 换行
2、
或
: 水平线
3、
2、标记的嵌套
在一对标记中，再嵌套其他的标记，相当于是功能的嵌套
ex：加粗的超链接
百度
百度
为了良好的可读性，被嵌套的内容尽量独占一行，并添加缩进
练习：
1、编写一对 html 标记
2、在 html 标记内部嵌套一对 head 标记
3、在 html 标记内部嵌套一对 body 标记
<html> -- 父元素 / 父标记
<head></head> -- 子元素 / 子标记
<body></body> -- 子元素 / 子标记
</html>
3、标记的属性和值
1、什么是属性
在标记中，用来修饰标记显示效果的内容就是属性
2、语法
1、属性必须声明在开始标记中
<标记 属性的声明位置处></标记>
2、属性和标记名称之间要用空格隔开
<标记 属性名称></标记>
3、属性和值之间是哦用那个=连接，属性值要用"" 或 '' 引起来
<标记 属性名称='值'>
4、一个元素允许有多个属性，并且排名不分先后，多属性之间使用 空格 隔开即可
<标记 属性1='值1' 属性2='值2'>
练习：
1、创建一对 p 标记，内容随意
2、增加属性，属性名为 align,值为 center
3、增加属性，属性名为 id 值为 p1
<p align='center' id='p1'>xxx</p>
4、HTML中的注释
<!-- 注释内容 -->
注意：
1、注释不能出现在 <> 中
<p <!-- --> ></p>
以上写法是错误的
2、注释不能嵌套
<!--
这是一段注释
<!--
又是一段注释
-->
-->
以上写法是错误的
4、HTML 文档结构
1、文档类型声明
出现在网页的最顶端的第一个标记
作用：告诉浏览器使用HTML的哪个版本
<!doctype html> --使用HTML5的版本
--效果同上
2、HTML页面
在文档类型声明之下，使用一对html根标记组成
在html中包含两对子元素
1、
表示网页的头部
2、
表示网页的主体
练习：(3~5分钟)
1、创建 01-page.html 网页文件
2、搭建网页结构
1、增加文档类型声明
2、增加 html 根标记
3、在 html 中增加头部和主体
4、增加适当的注释
3、<head></head>
表示网页的头部信息，通常会指定些控制级别的信息如：编码，
允许包含两个子元素：
1、<title>标题内容</title>
2、指定网页编码格式
<meta charset='utf-8'>
告诉浏览器按照utf-8的编码进行网页解析
注意：保证网页文件的编码也是utf-8
4、W3C - 万维网联盟
World Wide Web Consortium
5、文本相关标记
1、HTML中特殊字符
1、 表示一个空格
2、< 表示 <
3、> 表示 >
4、© 表示©
5、¥ 表示 ￥
2、文本样式标记
1、作用
修改文本在网页中的表现形式
2、标记
1、 : 斜体显示文本
2、 : 下划线显示文本
3、 : 删除线的方式显示文本
4、 : 加粗显示文本
5、 : 以上标的形式显示文本
6、 : 以下标的形式显示文本
练习：(3分钟)
这是一段有加粗，斜体，删除线，下划线，
上标 和 下标的文本
将以上文本使用对应的标记将对应的效果体现出来
特点：
该组标记能够与其他标记和文本在一行内显示
3、标题标记
1、作用
以不同的文字大小以及加粗的方式显示文本
2、语法
<h#></h#>
# : 1-6
h1 : 一级标题，文字最大
... ...
h6 : 六级标题，文字最小
练习：
静夜思
李白
床前明月床
疑是地上霜
举头望明月
低头思故乡
特点：
1、会改变文字大小以及加粗效果
2、每个标题都会具备垂直的空白距离
3、每个标题独占一行
4、每个标题都具备一个属性
属性：align
作用：控制文本的水平对齐方式
取值：
1、left ：左对齐
2、center ：居中对齐
3、right ：右对齐
4、段落元素
1、作用
突出显示一段文本，每段文本独占一行/块，并且每个段落都会具备一小段的垂直空白距离
2、语法
<p></p>
属性：align
取值：left / center / right
练习：
天长地久有时尽
此恨绵绵无绝期
5、换行元素
语法：<br> 或 <br/>
6、分区元素
1、块分区元素
标记：<div></div>
特点：独占一行/块
作用：在网页中做布局(配合css)
2、行内分区元素
标记：<span></span>
作用：设置同一行文本的不同样式(配合css)
特点：允许在一行内显示多个span，并能够与其他的文本在一行内显示
7、行内元素 与 块级元素
1、块元素
只要在网页中能独占一行的元素就都是块元素
div,p,h1,h2,h3,h4,h5,h6
所有的块元素都具备 align 属性，取值为 left / center / right
2、行内元素
多个元素能够在一行内显示的，就是行内元素
span,i,b,s,u,sup,sub
6、列表
1、列表的组成
1、列表的类型
1、有序列表 -
2、无序列表 -
2、列表项
ex:
<ol>
<li>内容1</li>
<li>内容2</li>
</ol>
练习：
1、创建一个网页03-list.html
2、在body中创建一个有序列表，四个列表项分别显示四大名著的名称
3、在body中创建一个无序列表，四个列表项分别显示四大天王的名称
2、列表的属性
1、<ol>
属性：type
取值：
1、1:按数字方式排列，默认值
2、A:按大写英文字符方式排列
3、a:按小写英文字符方式排列
4、I:按大写罗马数字方式排列
5、i:按小写罗马数字方式排列
2、<ul>
属性：type
取值：
1、disc:实心圆点，默认值
2、circle:空心圆点
3、square:实心方块
4、none:不显示任何标识
3、列表的嵌套
在一个列表项中，又出现一个列表
<ul>
<li>
<ol>
<li></li>
</ol>
</li>
<li></li>
</ul>
练习：
1.水浒传
a.西门庆
b.潘金莲
c.武大郎
2.三国演义
i.吕布
ii.貂蝉
iii.关羽
7、图像 和 超链接
1、URL
Uniform Resource Locator
统一资源定位器，用于标识网络中资源的位置，俗称路径
1、URL分类
1、绝对路径
访问互联网上的资源时，使用绝对路径
ex:
http://www.baidu.com
http://www.baidu.com/img/bd_logo.png
2、相对路径
从当前文件所在的位置处去查找资源文件所经过的路径
1、同目录下
2、在子目录下
3、在父目录下
3、根相对路径
从WEB站点所在的根目录查找资源文件
注意：
1、url中不能出现中文
2、url是严格区分大小写
2、图像
1、标记
<img>
2、属性
1、src
指定要显示的图片的URL
2、width
宽度，以px为单位的数值(允许省略px)
3、height
高度，以px为单位的数值(允许省略px)
注意：
如果宽度 和 高度只设定一个属性值的花，那么另外一个属性值也跟着等比缩放
xxx