Python全栈 Web(概述、HTML基础语法)

简介:
Web:
什么是Web?
Web就是网页  是一种基于B/S的应用程序
                 Web应用程序是由多个Servlet、JSP页面、HTML文件以及图像文件等组成
B:Browser   浏览器
S:Server    服务器
——————————————————
C/S
C:client  客户端
S:Server 服务器
Web组成:
浏览器:代替用户向服务器发送请求
服务器:接受用户响应
通信协议:规范数据在网络中是如何打包即传递的
HTTP:HyoerText transfer portocal
      超文本传输协议
Web服务器:
作用;
接受用户请求并且响应
存储Web信息
具备安全性
产品:
Apache
Tomcat
IIS  -Internet Information Server
Nginx
....
技术:
JSP - Java  Server page
PHP
ASP.net
Python Web (Django、Flask..)
Web浏览器:
作用:
代替用户向服务器发送请求
作为响应用户的解释引擎,向用户呈现界面
主流产品:
根据浏览器内核/引擎划分
Microsoft  IE
Google    Chrome
Mozilla    FireFox
Apple      Safari
Opera      Opera
浏览器引擎:
渲染引擎 - 解析 HRML、CSS  控制页面渲染效果
JS引擎 - 解释网页脚本文件
前段开发技术:
HTML  CSS  JavaScript

HTML:

HTML概述:
什么是HTML?
HyperText Markup language
超文本标记语言
作用:
书写网页结构
超文本:
具备特殊功能的文本 例如超链接

标记:
也叫标签 主要是用来标记网页中的内容
实现网页的布局和JS操作
HTML在技术算中的表现:
所有的网页文件在计算机中都是以.html、.htm文件储存的

开发工具:
记事本
Editplus、DreamWeaver
sublime、Webstorm、Hbuilder、VSCode、Atom
运行工具:
Chrome  浏览器
调试工具:
开发者工具  快捷键:F12

HTML基础语法:
标签/标记/元素:
在网页中具有特殊功能的符号
HTML所有的标签都以<>为标致区分
标签分类:
双标记:
成对出现  有开始有结束
语法:
<开始> 内容 </结束>
<h1> hello world </h1>
单标记:
只有开始没有结束 可以手动添加/表示结束
语法:
<标签名>
<标签名/>
<br> --- <br/>
<hr> --- <hr/>
标签的嵌套:
在双标记中出现其他的标记
超链接:
<a>首页</a>
文本加粗:
<b>首页</b>
加粗超链接:
<a>
<b>首页</b>
</a>

嵌套结构中 外层元素成为父元素 内层元素叫子元素

文档结构:
<html>
<head> </head>
<body>
hello world!
</body>
</html>
书写规范:
HTML不区分大小写
推荐用小写
保持适当的缩进 增强代码可读性
标签属性:
主要用来修饰标签的显示效果
语法:
属性由属性名和属性值组成:
属性名=“属性值”
属性的声明须写在开始标签中
<开始 属性名=“属性值”> ... </结束>
每个标签都可以设置多个属性, 属性之间使用空格隔开
HTML注释:
<!--
注释内容
-->
注意:
注释不能写在标签里  注释不能嵌套
HTMl的换行于空格:
HTML会忽略多余的 空只显示一个空格
如果需要多个空格或者<>
都需要使用特殊符号来代替

HTML结构组成:
文档类型声明:
<!doctype html> //H5的声明方式
作用:
告诉浏览器当前使用的HTML版本
以便浏览器能正确解析HTML的标签和渲染样式
书写位置:
文档的第一行代码
文档的开始和结束:
在文档类型声明之后使用 <html></html> 表示文档的开始和结束
在HTML标签中包含连个子元素
<head> </hesd>:
网页的头部信息 包含网页的标题,选项卡的图标
网页的关键字 作者 描述信息等 还可以引用外部的资源文件
子元素:
1.设置网页的标题:
<title> 我的第一个网页 </title>
2.设置字符编码:
<meta charset="utf-8">
浏览器按照utf-8编码格式解析网页
<body> </body>:
网页的主体信息 网页所呈现的内容
都要写在body里

文本相关的标签:
字符实体(具有 特殊意义的符号
&nbsp; 表示一个空格
&lt;         表示小于号 <
&gt; 表示大于号 >
&copy; 表示版权符号 @
&yen; 表示人民币符号 ¥
文本样式标签:
斜体显示文本:
<i> </i>    斜体显示
<u> </u> 文本添加下划线
<b> </b> 文本加粗
<s> </s> 删除线
<sup> </sup>上标
<sub> </sub>下标
这些标签可以与其他的标签或文本共行显示
标题标签:
可以以不同的文字大小和加粗方式显示文本
语法:
<hn> </hn>  n:取值1~6
可以改变文字大小和自动加粗
每个标题都会具备垂直的空白距离
每个标题都独占一行 不与其他元素共行显示
每个标题都可以添加属性align
取值:
left   center  right
默认左对齐
段落标签:
突出显示一段文本 每一段的文本都独占一块/行
不与其他元素共行 并且具备垂直空白距离
语法:
<p> </p>
属性:
align  设置文本水平对齐方式
       left   center  right
格式标签:
<br> --- <br/> 换行标签
<hr> --- <hr/> 水平线
分区标签:
块分区:
<div> </div>
划分页面结构 配合CSS实现页面布局
独占一块/行显示
行内分区元素:
<span> </span>
设置同一行文本的不同样式(结合CSS)
可以与其他元素或文本共行显示
允许一行文本中使用span元素
标签分类:
块级元素:
只要是在网页中独占一行 不予其他元素共行显示
的元素都是块级元素
都可以来做布局
所有的块级元素都可以添加align属性设置内容的水平对齐方式 
行内元素:
可以与其他元素共行显示

列表标记:
按照重是上到下的方式排列数据
并且能够显示项目符号在数据前面
列表的组成:
列表的类型:
有序列表  <ol> </ol>(ordered list)
默认按照数字排列
无序列表  <ul> </ul> (unordered list)
默认以实心原点作为标识
列表项:
列表中的每一天数据都是一个列表项
语法:
<li> </li>
列表项需要嵌套在列表标签中使用
列表属性:
有序列表--- ol
type属性:设置项目符号
1:按照数字排列(默认)
a:按照小写字母顺序排列
A:按照大小字母顺序排列
i:罗马数字排列(分大小写)
start属性:设置从第几个字符开始排列
只能取值数字
无序列表--- ul
type属性:设置项目符号
disc:实心原点(默认)
circle:空心圆的
square:空心方框
none:不显示项目符号
列表嵌套:
在一个列表中又出现了其他的列表
图像与超链接:
URL(Uniform resource Locator)
统一资源定位符
用来表示网络中资源的位置 俗称路径
URL的组成:
协议、域名、主机名、文件
URL分类:
绝对路径:
从根目录开始查找
常用于网络文件路径
相对路径:
从当前所在的目录开始查找
根相对路径:
从Web程序所在的目录开始查找资源文件
URL中不能出现中文
URL严格区分大小写
图像标签:
在网页中插入一张图片
语法:
<img>
属性:
src:指定文件路径
width:设置宽度以像素为单位px
height:设置高度(px)
sorc必填 宽高可以省略
省略为图片默认大小
title:
用来设置图片的标题
当鼠标悬停在图片上方时显示
alt
用来设置显示文件加载失败提示

非常简单没什么东西.............




相关文章
|
1月前
|
存储 Web App开发 移动开发
HTML5 Web 存储详解
HTML5 Web存储提供了两种客户端数据存储机制:**Local Storage**和**Session Storage**。Local Storage用于长期存储数据,即使关闭浏览器数据也依然存在,适用于保存用户偏好设置等信息。Session Storage则在标签或窗口关闭时清除数据,适合存储临时信息。两者均提供了简单的API进行数据的存取操作,但需要注意的是,Web存储并非加密存储,不应存放敏感信息。现代浏览器普遍支持Web存储,合理利用这两种存储方式可提升Web应用的用户体验。
|
1月前
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
|
1月前
|
SQL 关系型数据库 数据库
优化Web开发流程:Python ORM的优势与实现细节
【10月更文挑战第4天】在Web开发中,数据库操作至关重要,但直接编写SQL语句既繁琐又易错。对象关系映射(ORM)技术应运而生,让开发者以面向对象的方式操作数据库,显著提升了开发效率和代码可维护性。本文探讨Python ORM的优势及其实现细节,并通过Django ORM的示例展示其应用。ORM提供高级抽象层,简化数据库操作,提高代码可读性,并支持多种数据库后端,防止SQL注入。Django内置强大的ORM系统,通过定义模型、生成数据库表、插入和查询数据等步骤,展示了如何利用ORM简化复杂的数据库操作。
58 6
|
1月前
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
|
1月前
|
移动开发 JavaScript 前端开发
HTML5 Web Workers详解
HTML5 Web Workers 允许在后台线程中运行 JavaScript,实现复杂计算而不影响用户界面,提升应用性能。其主要特性包括并行处理、异步通信、独立作用域及多数据类型支持。通过创建和使用 Worker 文件,如 `worker.js`,可执行后台任务,并与主线程通过消息传递机制通信。适用于数据处理、图像处理、复杂计算及网络请求并行等场景。需要注意的是,Web Workers 在浏览器兼容性、安全性限制、调试及资源消耗方面需特别关注。合理利用 Web Workers 可显著增强 Web 应用的流畅度和响应速度。
|
1月前
|
SQL 存储 移动开发
HTML5 Web SQL 数据库详解
Web SQL 数据库是 HTML5 中的一种本地存储技术,允许在浏览器中使用 SQL 语言操作本地数据,支持离线访问和事务处理,适用于缓存数据和小型应用。然而,其存储容量有限且仅部分现代浏览器支持,标准已不再积极维护,未来可能被 IndexedDB 和 localStorage 等技术取代。使用时需谨慎考虑兼容性和发展前景。
|
1月前
|
存储 移动开发 缓存
HTML5 Web 存储详解
HTML5 Web 存储包括 `localStorage` 和 `sessionStorage`,前者提供持久存储且无过期时间,后者仅在会话期间有效。两者均支持键值对形式存储数据,容量约为 5-10 MB。`localStorage` 适用于用户偏好设置、登录状态保持及离线应用缓存;`sessionStorage` 则用于临时数据如表单输入。数据以字符串形式存储,可通过 `JSON` 方法处理对象。由于数据存储于本地,不适合存放敏感信息。示例代码展示了如何使用按钮将输入框内容保存至 `localStorage` 并进行清除操作。
|
29天前
|
移动开发 前端开发 JavaScript
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
19 0
|
2月前
|
安全 API 开发者
Web 开发新风尚!Python RESTful API 设计与实现,让你的接口更懂开发者心!
在当前的Web开发中,Python因能构建高效简洁的RESTful API而备受青睐,大大提升了开发效率和用户体验。本文将介绍RESTful API的基本原则及其在Python中的实现方法。以Flask为例,演示了如何通过不同的HTTP方法(如GET、POST、PUT、DELETE)来创建、读取、更新和删除用户信息。此示例还包括了基本的路由设置及操作,为开发者提供了清晰的API交互指南。
107 6
|
2月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
60 19

热门文章

最新文章