WEB
WEB Basic : HTML + CSS + JavaScript
Django :
================================================
1、WEB
1、什么是WEB
web就是互联网上的一种应用程序 - 网页
典型的应用：
1、C / S
Client : 客户端
Server : 服务器
2、B / S
B ：Browser 浏览器
S ：Server 服务器
2、WEB的组成 & 运行流程
由服务器，浏览器 和 通信协议组成
服务器：处理用户的请求(request)和响应(response)
浏览器：代替用户向服务器发送请求(User Agent)
通信协议：规范了数据是如何打包以及传递的 - http
http : Hyper Text Transfer Protocal
超级 文本 传输 协议
3、WEB服务器
1、作用
接受用户的请求并给出响应
存储WEB信息
具备安全性功能
2、产品
1、APACHE
2、TOMCAT
3、IIS - Internet Information Service
4、Nginx
3、技术
1、JSP - Java Servre Page
2、Php
3、ASP.NET
4、Python Web (Django，Flask，... ...)
4、WEB浏览器
1、作用
1、代替用户向服务器发送请求
2、作为响应数据的解释引擎
2、主流浏览器产品
1、Micosoft 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></a>
语言：语言有自己的语法规范
W3C：World Wide Web Consortium
万维网联盟
2、HTML在计算机中的表现
所有的网页在计算机中都是以 .html 或 .htm 作为结尾的文件来进行表示的
开发工具：所有的文本编辑类软件都可以作为开发工具
1、记事本
2、Editplus，Sublime
3、Dreamweaver,WebStorm,... ...
运行工具：浏览器
推荐使用：Google Chrome
3、HTML 基础语法（重点）
1、标记的语法
1、什么是标记
在网页中，用于表示功能的符号称为 "标记/标签/元素"
2、语法
所有的标记，在使用时必须用<>括起来
标记分为 双标记 和 单标记
1、双标记
由开始标记 和 结束标记组成
<标记>...</标记>
ex:
1、<a>...</a>
2、<b>...</b>
3、div 标记
<div>....</div>
4、p 标记
<p>....</p>
注意：双标记，有开始，必须要有结束，否则显示效果会出错
2、单标记
只有一个标记，既能表示开始，又能表示结束。
单标记自己就是个独立的功能，没有文本或其他内容可以控制
<标记> 或 <标记/>
ex:
1、<br> 或 <br/> : 换行
2、<hr> 或 <hr/> : 一条水平线
3、<img> 或 <img/> : 显示图片
2、标记的嵌套
在一对标记中，再出现另外一对标记，目的是为了实现功能的嵌套
超链接 ： <a></a>
加粗 ：<b></b>
加粗的超链接：
1、<a><b>....</b></a>
2、<b><a>....</a></b>
为了良好的可读性，被嵌套的内容尽量独占一行，并添加缩进
<a>
<b>... ...</b>
</a>
练习：
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
注释内容2
-->
注意：
1、注释不能出现在<>中
<p<!-- -->>... ...</p>
以上写法是错误的
2、注释不能嵌套
<!--
这是注释内容
<!--
这是注释内容
-->
-->
以上写法是错误的
5、HTML中不区分大小写
<p></p>
<P></P>
<P></p>
4、HTML 文档结构
1、文档类型声明
出现在网页最顶端的第一个标记
作用：告诉浏览器使用HTML的哪个版本
<!doctype html>
2、HTML页面
在文档类型声明之下，使用一对 html 标记来表示网页的开始和结束
<html></html>
在 html 中，包含两对子元素
1、<head></head>
表示网页头部信息
2、<body></body>
表示网页主体信息
练习：
1、创建01-page.html 网页文件
2、搭建网页结构
1、增加文档类型声明
2、增加html根标记
3、在 html 中增加头部 和 主体
4、增加适当的注释
3、<head> 标记
作用：描述网页的头部信息，对于网页起到控制的作用
子元素：
1、<title>标题内容</title>
2、指定网页编码
<meta charset="utf-8">
告诉浏览器按照utf-8的编码方式进行网页解析
注意：必须要保证网页文件的编码方式也是utf-8
5、文本相关标记
1、HTML中特殊字符处理
1、 表示一个空格
2、< 表示一个 <
3、> 表示一个 >
4、© 表示一个 ©
5、¥ 表示 ￥
2、文本样式标记
1、作用
修改文本在网页中的表现形式
2、标记
1、<i></i> : 斜体显示文本
2、<u></u> : 下划线显示文本
3、<s></s> : 删除线显示文本
4、<b></b> : 加粗显示文本
5、<sup></sup> : 上标方式显示文本
6、<sub></sub> : 下标方式显示文本
练习：
这是一段有加粗，斜体，删除线，下划线，上标 和 下标的文本
特点：
该组标记能够与其他的标记或文本在一行内显示
3、标题标记
1、作用
以不同的文字大小以及加粗方式显示文本
2、语法
<h#></h#>
# : 1-6
<h1></h1> :一级标题
<h2></h2> :二级标题
... ...
练习：
静夜思
李白
床前明月光
疑是地上霜
举头望明月
低头思故乡
特点：
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、块元素
只要在网页中能独占一行/一块的元素都称为块级元素，简称为块元素
p,h1,h2,h3,h4,h5,h6,div
作用：都可以做布局
所有的块元素都会具备align属性
2、行内元素
多个元素能够在一行内显示的，就是行内元素
span,i,b,s,u,sub,sup
作用：处理文本的样式
6、列表标记
1、作用
按照从上到下的方式来进行数据排列
并能够显示列表的标识在内容的前面
2、列表的组成
1、列表的类型
1、有序列表 - <ol></ol> (Order List)
2、无序列表 - <ul></ul> (Unordered List)
2、列表项
<li></li> (List Item)
ex:
<ol>
<li>内容1</li>
<li>内容2</li>
</ol>
练习：
1、创建03-list.html
2、搭建网页结构
3、在body中创建一个有序列表，用四个列表项分别表示四大名著的名称
4、在body中创建一个无序列表，用四个列表项分别表示四大天王的名称
3、列表的属性
1、有序列表 - ol
1、type
取值：
1、1：按数字方式排列显示，默认值
2、A：按大写英文字符显示
3、a：按小写英文字符显示
4、I：按大写罗马数字显示
5、i：按小写罗马数字显示
2、start
指定有序的字符是从 几 开始显示
2、无序列表 - ul
1、type
取值：
1、disc : 实心圆点，默认值
2、circle : 空心圆点
3、square : 实心方块
4、none : 不显示任何标识
4、列表的嵌套
在一个列表项中，又出现一个列表
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
练习：
1.水浒传
a.西门庆
b.潘金莲
c.武大郎
2.三国演义
i.吕布
ii.貂蝉
iii.董卓
<div> .......... ....
.......
</div>
<div>
.... ....
</div>
2521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
