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
用来设置显示文件加载失败提示

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




巴黎香榭
+关注
目录
打赏
0
0
0
0
740
分享
相关文章
如何在Python Web开发中确保应用的安全性?
如何在Python Web开发中确保应用的安全性?
学习Python Web开发的安全测试需要具备哪些知识?
学习Python Web开发的安全测试需要具备哪些知识?
41 4
Python Web 框架 FastAPI
FastAPI 是一个现代的 Python Web 框架,专为快速构建 API 和在线应用而设计。它凭借速度、简单性和开发人员友好的特性迅速走红。FastAPI 支持自动文档生成、类型提示、数据验证、异步操作和依赖注入等功能,极大提升了开发效率并减少了错误。安装简单,使用 pip 安装 FastAPI 和 uvicorn 即可开始开发。其优点包括高性能、自动数据验证和身份验证支持,但也存在学习曲线和社区资源相对较少的缺点。
33 15
Python 爬虫必备杀器,xpath 解析 HTML
【11月更文挑战第17天】XPath 是一种用于在 XML 和 HTML 文档中定位节点的语言,通过路径表达式选取节点或节点集。它不仅适用于 XML,也广泛应用于 HTML 解析。基本语法包括标签名、属性、层级关系等的选择,如 `//p` 选择所有段落标签,`//a[@href=&#39;example.com&#39;]` 选择特定链接。在 Python 中,常用 lxml 库结合 XPath 进行网页数据抓取,支持高效解析与复杂信息提取。高级技巧涵盖轴的使用和函数应用,如 `contains()` 用于模糊匹配。
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
54 6
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
49 5
从零开始:使用Docker容器化你的Python Web应用
从零开始:使用Docker容器化你的Python Web应用
72 1
使用Python和Flask构建简易Web API
使用Python和Flask构建简易Web API
145 3
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等