python开发网页界面的一些基础知识。前端开发三大核心技术：
(1)HTML负责将内容呈现到网页中去
(2)CSS负责美化页面
(3)JavaScript负责实现网页的一些特效
1、web网站介绍
网络系统软件开发包括两种结构：
(1)C/S是客户机(client)/服务器（server）(如：QQ、网络游戏、手游)
(2)B/S是浏览器（browser)/服务器。
B/S最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件
B/S软件的优势与劣势:
维护和升级方式简单。
成本降低，选择更多。
应用服务器运行数据负荷较重。 ---采用集群架构
动态网站与静态网站的区别：是否采用了数据库的开发模式
目前比较流行的WEB技术：Python、PHP、JavaEE、Ruby与ASP.NET
2、HTTP协议
超文本传输协议(HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。
所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。
HTTP是一个客户端和服务器端请求和应答的标准（TCP）。客户端是终端用户，服务器端是网站。
通过使用Web浏览器、网络爬虫或者其它的工具，客户端发起一个到服务器上指定端口（默认端口为80）的HTTP请求。
3、动态网站开发所需的Web构件
· 客户端浏览器
· Web前端：HTML、CSS、JavaScript、jQuery、BootStrap
· Web服务器
· 服务器端编程语言
· 数据库管理系统
4、HTML
· HTML 指的是超文本标记语言 (Hyper Text Markup Language)
· HTML 不是一种编程语言，而是一种标记语言 (markup language)
· 标记语言是一套标记标签 (markup tag)
· HTML 使用标记标签来描述网页
HTML 文档 = 网页
· HTML 文档描述网页
· HTML 文档包含 HTML 标签和纯文本
· HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
HTML是由：标签和内容构成
HTML标签（标记）的语法是由 < 和 > 括起来。
HTML标签有两种：
双标签：<标签名>....</标签名> 和 单标签：<标签名/>
HTML标签中还可以添加属性：
<标签名 属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>....</标签名>
HTML标签规范：标签名小写、属性使用双引号、标签要闭合。规范不遵守浏览器不会报错，会尽量解析，大不了不显示效果
5、HTML基本结构
HTML中head头部信息设置
1 | 设置网页编码： <meta charset="utf-8"/> |
6、HTML常用标签介绍
文本标签
<hn>...</hn> 其中n为1--6的值。 标题标签（加粗、独立行）
<i>...</i> 斜体
<em>...</em> 强调斜体
<b>...</b> 加粗
<strong>...</strong> 强调加粗
<cite></cite> 作品的标题（引用）
<sub>...</sub>下标 <sup>...</sup> 上标
<del>...</del> 删除线
格式化标签
<br/> 换行
<p>...</p> 换段
<hr /> 水平分割线
列表：
<ul>...</ul> 无序列表
<ol>...</ol> 有序列表 其中type类型值：A a I i 1 start属性表示起始值
<li>...</li> 列表项
<dl>...</dl> 自定义列表
<dt>...</dt> 自定义列表头
<dd>...</dd> 自定义列表内容
<div>...</div> 常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化
<span>...</span> 常用于包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。
图片标签
<img /> 在网页中插入一张图片
属性：
src： 图片名及url地址
alt: 图片加载失败时的提示信息
title：文字提示属性
width：图片宽度
height：图片高度
border：边框线粗细
超级链接标签
<a href=“ ”>...</a> 超级链接标签， 属性如下：
href: 必须，指的是链接跳转地址
target: 表示链接的打开方式：
_blank 新窗口
_parent 父窗口
_self 本窗口（默认）
_top 顶级窗口
framename 窗口名
title：文字提示属性（详情）
锚点链接：
定义一个锚点：<a id="a1"></a> 以前使用的是 <a name="a1"></a>
使用锚点： <a href="#a1">跳到a1处</a>
表格标签
<table>...</table> 表格标签: 属性：border、 width、 cellspacing、 cellpadding
<caption>...</caption> 表格标题
<tr>...</tr> 行标签
<th>...</th> 列头标签
<td>...</td> 列标签: 跨行属性：rowspan 跨列属性：colspan
<thead>...</thead> 表头
<tbody>...</tbody> 表体
<tfoot>...</tfoot> 表尾
表单标签
<form>...</form> 表单标签 get：明文提交，显示账号密码，post：隐藏账号密码提交
<input /> 表单项标签input定义输入字段，用户可在其中输入数据。
<select>...</select> 标签创建下拉列表。
<textarea>...</textarea> 多行的文本输入区域
<button>...</button> 标签定义按钮。
<fieldset> --</fieldset> 元素可将表单内的相关元素分组。
<legend></legend> 标签为 <fieldset>、<figure> 以及 <details> 元素定义标题。
<datalist> html5标签--<datalist> 标签定义可选数据的列表。
<optgroup> html5标签--<optgroup> 标签定义选项组。
行内框架标签
<iframe>...</iframe> 行内框架
属性：
src：规定在 iframe 中显示的文档的 URL
name：规定 iframe 的名称
height：规定 iframe 的高度。
width：定义 iframe 的宽度。
frameborder：规定是否显示框架周围的边框。
例如：<iframe src="1.html" name="myframe" width="700" height="500"></iframe>
多媒体标签
<audio>…</audio> 音频标签
<video>…</video> 视频标签
播放Flash的标签
<embed src="./images/haowan.swf" width="300" height="300" />
7、CSS样式
在网络头部中导入CSS文件：
<link type="text/css" rel="stylesheet" href="**.css"/>
CSS代码：<style type="text/css">嵌入css样式代码</style>
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示控制 HTML 元素,从而实现美化HTML网页。
样式通常存储在样式表中，目的也是为了解决内容与表现分离的问题
外部样式表(CSS文件)可以极大提高工作效率
多个样式定义可层叠为一，后者可以覆盖前者样式
CSS的语法
格式： 选择器 { 属性 : 值 ; 属性 : 值 ; 属性 : 值 ; .... }
案例如下：
其中选择器也叫选择符P{color:red;text-align:center; }
CSS中的注释
格式： /* … */
CSS的样式
共计有三种方式：
(1). 内联方式（行内样式）
(2). 内部方式（内嵌样式）
(3). 外部导入方式（外部链入）
优先级：
* 当样式冲突时，就采用就近原则，是值css属性离被修饰的内容最近的为主。
* 若没有样式冲突则采用叠加效果。
内联方式（行内样式）
就是在HTML的标签中使用style属性来设置css样式
格式： <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>
<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>
<!-- 特点：仅作用于本标签。-->
内部方式（内嵌样式）
在head标签中使用<style type=“text/css”>....</style>标签来设置css样式
<style type="text/css">
....css样式代码
</style>
<!-- 特点：作用于当前整个页面 -->
外部导入方式（外部链入）
3.1 (推荐）就是在head标签中使用<link/>标签导入一个css文件。在作用于本页面，实现css样式设置
<link href="文件名.css" type="text/css" rel="stylesheet"/>
3.2 还可以使用import在style标签中导入css文件。
<style type="text/css">
@import "style.css";
</style>
特点：作用于当前整个网站
