pythonweb day01
程序员文章站
2022-06-13 12:30:09
...
目录
1,web
- 什么是web
web就是网页,是一种基于B/S的应用程序
B:Browser 浏览器
S :Server 服务器
C:Client 客户端 - web 组成
浏览器:代替用户向服务器发送请求
服务器:接收用户请求并响应
通信协议:规范数据在网络中是如何打包即传递的
http:HyperText transfer protocal
超文本传输协议 - web服务器
- 作用:
接收用户请求并响应
存储web信息
具备安全性功能 - 产品:
1,Apache
2,Tomcat
3,IIS - Internet Information Service
4,Nginx
... - 技术
1,JSP - Java Sever Page
2,PHP
3,ASP.net
4,Python web(Django Flask...)
- 作用:
- web浏览器
- 作用:
代替用户向服务器发送请求
作为响应数据的解释引擎,向用户呈现界面 - 主流浏览器产品
根据浏览器的内核/引擎进行划分
1,Microsoft IE
2,Google Chrome
3,Mozilla FireFox
4,Apple Safari
5,Opera Opera
浏览器引擎- 渲染引擎 - 解析HTML,CSS,控制界面的渲染效果
- JS引擎 - 解释网页脚本文件
- 前端开发技术
HTML CSS JavaScript
- 作用:
2,HTML概述
- HTML介绍
- 什么是HTML
HyperText Markup language
超文本 标记 语言
作用:书写网页结构 - 超文本
具备特殊功能的文本就是超文本
et:
普通文本 a:普通字符
超级文本 a:表示超链接功能
普通文本 a:普通字符
超级文本 b:表示加粗功能 - 标记
也叫标签,主要是用来标记网页中的内容,以实现网页的布局和JS操作
- 什么是HTML
- HTML 在计算机中的表现
所有的网页文件在计算机中都是以.html/.htm文件存储的
开发工具:
1,记事本
2,Editplus,Dreamweaver
3,sublime,Webstorm,Hbuilder,VSCode,Atom...
运行工具:
Chrome浏览器
调试工具:
开发者工具,F12打开
3,HTML 基础语法
- 标签/标记
在网页中具有特殊功能的符号- HTML 中所有的标签都以<>为标志,区分普通文本
- 标签分类
- 双标签:成对出现,有开始有结束
<开始标签>标签内容</结束标签>
et:
<h1>一级标题</h1> - 单标签:只有开始标签,没有结束标签,可以手动添加/表示结束
<标签名>
<标签名/>
et:
<br>换行标签--等同于<br/>
<hr>水平线--等同于<hr/>
- 双标签:成对出现,有开始有结束
- 标签嵌套
- 在成对的标签中出现其他标签
超链接标签:<a>首页</a>
文本加粗标签:<a>首页</b>
---加粗的超链接文本--<a> <b>首页</b> </a> <b> <a>首页</a> </b>
- 嵌套结构中,外层元素称为父元素,内层元素称为子元素
- 在成对的标签中出现其他标签
- 文档结构
- 新建文件,保存为.htm / .html格式
- 书写一对html标签<html></html>
- 在html标签中嵌套一对head标签
- 在html标签中嵌套一对body标签
- 为body标签添加文本内容,内容不限
<html> <head></head> <body> Hello </body> </html>
- 书写规范
- HTML不区分大小写<HTML></Html>
推荐使用小写 - 保持适当缩进,增强代码可读性
- HTML不区分大小写<HTML></Html>
- 标签属性
标签属性主要用来修饰标签的显示效果
语法:- 属性由属性名和属性值组成
属性名=‘属性值’ - 属性的声明必须写在开始标签中
<开始标签 属性名=‘属性值’>..</结束标签> - 每个标签都可以设置多个属性,属性之间使用空格隔开
<开始标签 属性名=‘属性值’ 属性名=‘属性值’ 属性名=‘属性值’>..</结束标签> - 练习
再body标签添加一对p标签,内容不限
为p标签增加属性align,取值 center
为p标签增加属性id,取值p1<html> <head></head> <body> Hello <p id='p1' align="center">延禧攻略</p> </body> </html>
- 属性由属性名和属性值组成
- HTML 注释
注意:<!-- 注释内容 -->
- 注释不能写在标签里的
错误:
<p <!-- -->></p> - 注释不能嵌套
- 注释不能写在标签里的
- HTML中的换行与空格
HTML文档会忽略掉多余的空格,只显示为一个空格,如果需要显示多个空格或者 < > ,都需要使用特殊符号代替
4,HTML结构组成
- 文档的类型声明
<!doctype html> h5的声明方式
作用:告诉浏览器当前使用的HTML版本,以便浏览器能正确解析HTML标签和渲染样式
书写位置:文档最开始的位置 - 文档开始和结束
- 在文档类型声明之后,使用一对<html></html> 标签标示文档的开始和结束
- 在HTML标签中,包含了两对子元素
<html> <head></head> <body></body> </html> <head>标签标示网页的头部信息,包含网页的标题,选项卡的图标,网页的关键字,作者,描述等信息,还可以引入外部的资源文件 <body>标签表示网页的主体信息,网页所呈现的内容都要写body里
- <head>标签中包含的子元素
- 设置网页的标题
<title>我的第一个网页</title> - 设置网页的字符编码
<meta charset='utf-8'>
浏览器按照utf-8的编码方式解析网页
- 设置网页的标题
5,文本相关的标签
- 字符实体(具有特殊意义的符号)
-  ;表示一个空格
- &it;表示小于号 <
- >;表示大于号
- ©;表示版权符号 ©
- ¥;表示人民币符号 ¥
<!--文档类型声明 --> <!doctype html> <!--表名文档开始 --> <html> <head> <!-- 网页标题设置 --> <title>我的第一个网页</title> <!-- 字符编码方式 --> <meta charset='utf-8'> <!-- 设置选项卡小图标 --> <link rel='shortcut icon' href='web.ico' type='image/x-icon'> </head> <body> <!-- 网页的主体内容 --> <如 懿 传> <b> 版本所有©达内科技 价格:¥10000.00 </body> <!-- 表明文档结束 --> </html>
- 文本样式标记
- 斜体显示文本:<i></i>
- 文本添加下划线:<u></u>
- 文本加粗效果:<b></b>
- 文本添加删除线:<s></s>
- 上标显示文本:<sup></sup>
- 下标显示文本:<sub></sub>
练习:
这是一段有加粗,斜体,删除线,下划线,上标和下标的文本
特点:这些标签可以与其他标签或文本工行显示
- 标题标签
- 作用
以不同的文字大小和加粗方式显示文本 - 语法
<hn></hn> n取值 1-6,字体大小是逐级递减
<h1></h1> 一级标题
...
<h6></h6> 六级标题
练习:
咏鹅
骆宾王
鹅,鹅,鹅
曲项向天歌
白毛浮绿水
红掌拨清波
特点:- 会改变文字的大小并且具有加粗效果
- 每个标题都会具备垂直的空白距离
- 每个标题都独占一行,不与其他元素共行显示
- 每个标题都可以添加属性align
取值:left / center / right
设置文本的水平对齐方式,默认居左对齐
- 作用
- 段落标签
- 作用
突出显示一段文本,每段文本都独占一行或一块,不予其他元素共行显示,并且也具备垂直的空白距离 - 语法
<p></p>
属性 align 设置文本的水平对齐方式
取值 left / center / right
- 作用
- 格式标签
换行标签 <br> 等同于 <br/>
水平线标签 <hr> 等同于 <hr/>
作业1:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <h1 align="center">HTML <Day01></h1> <!-- 水平线 --> <hr> <h2>1. HTML 文档片段</h2> <h3>1.1 问题</h3> <p>创建如图-1所示的HTML页面</p> <h3>1.2 方案</h3> <p>使用HTML完成效果</p> <h3>1.3 实现</h3> <p>创建index.html,完成操作</p> </body> </html>
-
分区标签
-
块分区
标签:<div></div>
作用:划分页面结构,配合CSS实现网页布局
特点:独占一行显示(独占一块) -
行内分区元素
标签:<span></span>
作用:设置同一行文本的不同样式(结合CSS)
特点:可以与其他元素或文本共行显示
<!doctype html> <html> <head> <title>文本样式</title> <meta charset="utf-8"> </head> <body> 这是一段有<b>加粗</b>,<i>斜体</i>,<u>下滑线</u>,<s>删除线</s>,<sup>上</sup>标,<sub>下</sub>标 <!-- 标题标签 --> <h1 align="center">咏鹅</h1> <h2 align="right">骆宾王</h2> <h3 align="center">鹅鹅鹅</h3> <h4 align="center">曲项向天歌</h4> <h5 align="center">白毛浮绿水</h5> <h6 align="center">红掌拨清波</h6> <!-- 段落标签 --> <p align="center">我们一起学猫叫</p> <p align="right">一起喵喵喵</p> <!-- 换行标签 --> 西湖美景三月天,<br> 春雨无度柳如烟 <!-- 块分区标签 --> <div>块分区元素</div> <div>块分区元素</div> <!-- 行内分区元素 --> <h1><span>红色</span>文本</h1> <p>这是一段文本,包含<span>绿色</span>文本</p> <div><span>DIV</span>标签</div> </body> </html>
-
-
标签分类
-
块级元素
只要在网页中是独占一行,不予其他元素工行显示的元素都是块级元素,简称块元素,
例如:h1 h2 h3 h4 h5 h6,p,div ul ol li...
作用:都可以做布局
特点:都可以添加algin属性,设置内容的水平对齐方式 -
行内元素 / 内联元素
可以与其他元素共行显示的元素
例如:i b u s sub sup span
-
6,列表标签
- 作用
按照从上到下的方式来排列数据,并且能够显示项目符号在数据的前面 - 列表的组成
- 列表的类型
- 有序列表<ol></ol>(ordered list)
默认是按照数字排列 - 无序列表<ul></ul>(unordered list)
默认以实心原点作为标识
- 有序列表<ol></ol>(ordered list)
- 列表项
列表中的每一条数据都是一个列表项
语法:<li></li>
注意:列表项要嵌套在列表标签中使用
et:<ol> <li>Java</li> <li>PHP<li> <li>Python</li> <ol>
练习:
-
创建新的HTML文件
-
搭建网页结构
-
在body中创建有序列表,分别展示四大名著
-
再创建一个无序列表,展示四大天王
<!doctype html> <html> <head> <title>列表练习</title> <meta charset="utf-8"> </head> <body> <!-- 使用有序列表展示四大名著 1.xxx 2.xxx--> <ol> <li>红楼梦</li> <li>西游记</li> <li>水浒传</li> <li>三国演义</li> </ol> <ul> <li>刘德华</li> <li>黎明</li> <li>巨人网络</li> <li>盛大网络</li> </ul> </body> </html>
-
-
列表属性
-
有序列表 --ol
-
type属性:设置项目符号
取值:-
1:按照数字排列显示,默认值
-
a:按照小写字母顺序排列
-
A:按照大写字母排列
-
i:按照罗马数字排列
-
I:按照罗马数字排列
罗马数字:i ii iii iv v vi vii...
-
-
start属性:设置从第几个字符开始排列
取值:数字
-
- 无序列表 -ul
- type属性:设置项目符号
取值:- disc 实心原点(默认)
- circle 空心圆点
- square 实心方块
- none 不显示项目符号
- type属性:设置项目符号
-
- 列表嵌套
- 在一个列表中又出现了其它的列表
<ul> <li> 列表属性 <ol> <li>type属性</li> <li>type属性</li> </ol> <li> </ul>
每一部名著中都列出三个主要任务
-
水浒传
-
武松
-
西门庆
-
潘金莲
-
-
西游记
-
大师兄
-
二师兄
-
沙师弟
<!doctype html> <html> <head> <title>列表练习</title> <meta charset="utf-8"> </head> <body> <!-- 使用有序列表展示四大名著 1.xxx 2.xxx--> <!-- type --> <ol type='a' start="3"> <li>红楼梦</li> <li>西游记</li> <li>水浒传</li> <li>三国演义</li> </ol> <ul type='square'> <li>刘德华</li> <li>黎明</li> <li>巨人网络</li> <li>盛大网络</li> </ul> <!-- 列表嵌套 --> <ol> <li> 西游记 <ol> <li>大师兄</li> <li>二师兄</li> <li>沙师弟</li> </ol> </li> <li> 红楼梦 <ol> <li>贾宝玉</li> <li>林黛玉</li> <li>薛宝钗</li> </ol> </li> </ol> <!-- 不推荐下面写法 --> <ul> <li> 西游记 <ol> <li>大师兄</li> <li>二师兄</li> <li>沙师弟</li> </ol> </li> </ul> </body> </html>
-
-
- 在一个列表中又出现了其它的列表
- 列表的类型
7,图像与超链接标签
- URL
Uniform Resource Locator
统一资源定位符:用来标识网络中资源的位置,俗称路径
URL组成:协议 域名 文件目录及文件名
URL分类:- 绝对路径
从根目录开始查找
常用于网络文件路径
et:访问网络资源
http://www.baidu.com
http://www.baidu.com/img/logo.png - 相对路径
从当前文件所在的文件夹开始查找 - 跟相对路径(了解)
从web程序所在的跟目录开始查找资源文件
注意:- URL中不能出现中文
- URL严格区分大小写的
- 绝对路径
- 图像标签
- 在网页中插入一张图片
- 语法:<img>
- 属性:
- src:指定要显示的图片路径
- width:设置图片的宽度,以像素px为单位,也可以省略单位
- height:设置图片的高度
注意:src为必填属性,宽高可以省略,省略宽高的话,图片将以原始尺寸显示在网页中 - title:用来设置图片的标题,当鼠标悬停在图片上方时出现
- alt:用来设置图片加载失败之后提示文本
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <!-- 图片标签 --> <!-- 绝对路径加载网络文件 --> <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1535620319&di=d01e46bb6b462c5ad9538a54c7989d55&src=http://img4q.duitang.com/uploads/item/201504/18/20150418H4122_zk8BM.jpeg"> <!-- 绝对路径加载本地文件 1. windows电脑上绝对路径都是以盘符开始的 2. 需要手动补全文件名 3. Windows电脑两种斜杠都可以识别,需要手动修改路径中的斜杠为/ \ 是转义字符的标志 --> <img src="C:/Users/Python/Desktop/day01/web.ico"> <!-- 相对路径 --> <img src="web.ico"> <img src="timg.jpg"> <!-- ../ 表示返回上一级目录文件夹 --> <!-- 图片属性 宽高属性,如果只设置一个值,另外一个会等比缩放--> <img src="img/cat.jpg" width="300px"> <img src="img/cat.jpg" width="300px" height="300"> <img src="img/cat.jpg" width="300px" title="猫" alt="猫咪消失了"> <img src="img/ca.jpg" width="300px" title="猫" alt="猫咪消失了"> </body> </html>