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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

巴黎香榭 2018-08-30 22:11:26 浏览1043
展开阅读全文
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/500
评论
巴黎香榭
+ 关注