https://www.cnblogs.com/hansha/p/10075017.html
介绍
html 相当于给网页设计骨架
css 添加漂亮效果
js 给页面添加动态效果
jquery 对js语言的封装
bootstrap 实对js和jquery的封装
网页显示数据的流程 浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面 html是什么? 超文本标记语言是一种用于创建网页的标记语言,是基于vs(浏览器)框架下的语言(仅此而已,不是编程语言) 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题） 网页文件的扩展名：.html或.htm
#html文档结构 1.<!DOCTYPE html> #声明为html5文档,向web浏览器声明提交的html版本,必须唯一<html>标签之前 2.<html lang="zh-CN"> #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en' 3.<html>、</html>是文档的开始标记和结束的标记。在它们之间是文档的头部（head）和主体（body） 4.<head>、</head>HTML文档的开头。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的。 5.<body>、</body>之间的文本是可见的网页主体内容。 6.<title>、</title>定义了网页标题，在浏览器标题栏显示。
注意
<meta charset="utf-8"> 声明编码,否则胡出现乱码.有些浏览器默认是gbk编码,需要这里设置为gbk编码
网页地址以file:/// 也是一种协议(打开本地文件的协议,仅限于相对路径)
HTML标签格式
- HTML标签是由尖括号包围的关键字，如
<html>, <div>等 - HTML标签通常是成对出现的，比如：
<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。 - 也有一部分标签是单独呈现的，比如：
<br/>、<hr/>、<img src="1.jpg" />等。 - 标签里面可以有若干属性，也可以不带属性。如果带属性，必须有属性值，属性值放到引号里
- 标签字母全部是小写
标签的语法：
- <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分
- <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
- 空白折叠
几个很重要的属性：
- id：定义标签的唯一ID，HTML文档树中唯一
- class：为html元素定义一个或多个类名（classname）(CSS样式类名)
- style：规定元素的行内样式（CSS样式）
HTML注释
<!--注释内容-->
head中的标签
head标签都放在头部分之间。这里面包含了：
<title>、<meta>、<link>，<style>
<title>：指定整个网页的标题，在浏览器最上方显示。(搜索引擎可以通过网页标题,迅速判断出当前网页的主题)
<meta>：提供有关页面的基本信息<link>：定义文档与外部资源的关系。(通常用于链接到样式表)<style>:定义内部样式表与网页的关系
头标签位于文档的头部，不包含任何内容。
提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
meta 标签
1、http-equiv属性
它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址，注意分号--> # http-equiv='refresh' 刷新 ; name='keywords' 是一些描述信息 <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com"> <!--指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge">
2、name属性
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做*SEO**（search engine optimization，搜索引擎优化）。*红框里的就是描述信息
body中的标签
基本标签 #都不独占一行 <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> #独占一个段落 <h1>标题1</h1> #h1~h6,标题标签(独占一行,显示的大小为降序)
<tr> #一行 <br> #换行 <hr> #水平线(单独的一个很长的线)
input标签(给用户输入信息)
type属性值介绍:
- text 单行输入文本 <input type=text" /> #"text","password","hidden"为数据框的初始值
- password 密码输入框（不显示明文）
- date 日期输入框
<form action="" method="get">
<p> <input type="date" name="date">
</P> </form> #出现一个让你选择日期的下拉选项,如果你没选,提交时就没有该框的数据
- checkbox 多选框 凡是用户选择的框,必须设置value键值对,否则后端无法识别选了什么,用户自己填写的不需要写value,只需要name键值对,用于上传时当key
<form action="" method="get"> <!--#一定要用get模式,否则地址栏看不到提交的数据--> <p> 爱好: <input type="checkbox" name="hobby" value="cy">抽烟 #这后面可以再添加个属性checked 设置默认选项
<input type="checkbox" name="hobby" value="hj">喝酒 </p> <input type="submit"> <!--所有的数据都要设置这个才能向浏览器提交--> </form>
- radio 单选框 凡是用户选择的框,必须设置value键值对,否则后端无法识别选了什么,用户自己填写的不需要写value,只需要name键值对,用于上传时当key
<form action="" method="get"> #一定要用get模式,否则地址栏看不到提交的数据 <p> 性别<input type="radio" name="gender" value="man">男 <!--name是为了让2个输入框产生关联,让用户2选1,加个value 为了页面能区分男女--> <input type="radio" name="gender" value="woman">女 </p> <input type="submit"> </form>
- submit 提交按钮 发送提交所有输入框中的内容，配合form表单使用，页面会刷新
会将form表单中所有用户输入的内容或者选择的内容（{name属性:值，}）都发给服务端（以我们自己写的那个socket举例，打印一下接收的内容），但是所有的输入标签必须有一个叫做name的属性。
特别是单选框,还要再写个nalue的键值对,否则没法区分用户选的哪个
- reset 重置按钮 将所有输入框里的内容清空
- button 普通按钮 就是普通按钮,点完但不提交,不做任何改变
有一个跟他同名的标签,跟submit提交按钮很相似.(了解) <button type="button">迁都</button> #当设置type='button'的时候,该标签不提交
- hidden 隐藏输入框 当用户选择提交的时候,会给浏览器发送,后面讲django会讲到它
- file 文本选择框 <input type="file" />
#用file类型的框,form的method(方法)必须是post,并且enctype(编码格式)也要写上 <form action="" method="post" enctype="multipart/form-data"> <input type="file" name="file"> #name是提交时,对应的key <p> <input type="submit" name="asdf"> </p> </form>
select 标签(下拉选择框)
- select标签
<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。select标签和ul、ol、dl一样，都是组标签。<select>标签的属性：multiple：可以对下拉列表中的选项进行多选。没有属性值。size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。
<option>标签的属性：selected：预选中。没有属性值。
- label标签
- 通过for属性，将lable和input标签绑定，为 input 元素定义标注（标记）。 #相关 勾选性别那个,直接点字不行,但是再input下继续写个这个标签,然后for绑定,就可以点字选择了
textarea 文本输入框,input的文本输入框只能输一行,这个可以输入多行.
textarea(多行的文本输入框):
参数:(rows:设置行数 cols:设置列数)
<form action=""> <!--<select name="school" id="1" >--> <select name="school" id="" multiple> <!--mutiple 设置为多选框--> <option value="qh">清华</option> <option value="jq" selected>剑桥</option> <!--selected 设置默认选项--> <option value="bd">北大</option> </select> <input type="submit" name="gg"> </form>
from 表单
功能：
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
一般里面放 <input>标签系列，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
属性 描述 accept-charset 在被提交表单中使用的字符集（默认：页面字符集）。 action="https://www.xiaodu.com/" 向何处提交表单的地址（URL）（提交页面）。 autocomplete 浏览器应该自动完成表单（默认：开启）。 enctype 被提交数据的编码（默认：url-encoded）。 method="post" 提交表单时用的 http 方法（默认：get,输入的账户密码以&分割,显示在地址栏,如果不想显示用post模式）。 name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 novalidate 规定浏览器不验证表单。 target 规定 action 属性中地址的目标（默认：_self）。
form表单提交数据的步骤 1.from 表单中的action 设置一个要提交到的url 2.input 输入框添加一个name属性,name属性时上传数据时,对应的key 3.要有一个提交按钮,例如input的type是submit,button标签 上传文件需要注意: 1.必须是post请求 2.form 标签上添加一个属性:enctype="multipat/from-data"
特殊字符
表示空格 > 表示> < 表示< & 表示& ¥ 表示 ¥ © 版权标识（写公司网站的时候会用到） ® 注册（一个圆圈里面有个R）
注释
写法( 注释的内容不会在网页上显示出来):
<!--注释内容-->
div 标签和span 标签
div：把标签中的内容作为一个块儿来对待。必须单独占据一行。
div标签的属性：
align="属性值"：设置块儿的位置。属性值可选择：left、right、 center
<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。
如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。
<body>
<div>
导航栏
</div>
<div>
中心banner
</div>
<span>路飞</span>
<span>alex</span>
</body>
div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。
div标签是一个容器级标签，里面什么都能放，当然也可以放div自己。
span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。
就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、ol、div。
span举例：
<p> 商品简介: <span> <a href="">详细信息</a> <a href="">生产日期</a> </span> </p>
div举例：
<div class="header"> <div class="logo"></div> <div class="nav"></div> </div> <div class="content"> <div class="guanggao"></div> <div class="shop"></div> </div> <div class="footer"></div>
img图片标签(引入图片)
img: 代表的就是一张图片。是单边标记。 img是自封闭标签，也称为单标签。 能插入的图片类型： 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。 不能往网页中插入的图片格式是：psd、ai HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。 src属性：指图片的路径。 在写图片的路径时，有两种写法：相对路径、绝对路径(网络路径) 相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。 <img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
img标签的常用其它属性
width：宽度height：高度title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。align：指图片的水平对齐方式，属性值可以是：left、center、rightalt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）
a标签(超链接标签)
1.超链接
介绍
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。 <a href="http://www.oldboyedu.com" target="_blank" >点我</a> #target的值有两个(_blank,_self)_blank 在新页面打开目标网页; _self 再当前页面打开目标网页
相对URL - 指当前站点中确切的路径（href="index.htm"） 锚URL - 指向页面中的锚（href="#top"），博客的目录经常用到，还可以跳转到 name属性为p1的a标签上，<a name='top'>xxx</a>
2、锚链接
指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。
首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字。
<div id="top1">这是div1</div> <div style="height: 2000px;"></div> <div id="top2">这是div2</div> <div style="height: 2000px;"></div> <a href="#top1">回到div1</a> <a href="#top2">回到div2</a>
超链接的属性
href：目标URLtitle：悬停文本。name：主要用于设置一个锚点的名称。target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：_self：在同一个网页中显示（默认值）_blank：在新的窗口中打开。_parent：在父窗口中显示_top：在顶级窗口中显示
ps:a是一个文本级的标签 比如一个段落中的所有文字都能够被点击，那么应该是p包含a； <p> <a href="">段落段落段落段落段落段落</a> </p> 而不是a包裹p： <a href=""> <p> 段落段落段落段落段落段落 </p> </a> a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。
列表
ul (无序列表#就是再前面只显示个黑点) <ul type="disc"> <li>第一项</li> <li>第二项</li> </ul> type属性： disc（实心圆点，默认值） circle（空心圆圈） square（实心方块） none（无样式）
ol (有序列表) <ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol> type属性： start是从数字几开始 1 数字列表，默认值 A 大写字母 a 小写字母 Ⅰ大写罗马 ⅰ小写罗马
dl(标题标签(就像大纲一样，有一个层级效果）)
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
table标签 (表格标签)
<tr></tr> #显示在一行
<th></th> #标题的单元格,有加粗的效果
<td></td> #身体和脚部行的一个单元格
<thead> #标题(头部)部分
<tboby> #内容(身体)部分
<tfoot> #末尾(脚部)部分 表格的基本结构： <table border='1'> <thead> #标题部分 <tr> #一行,下面的内容都在一行 <th>序号</th> #一个单元格 <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> #内容部分 <tr> #一行 <td>1</td> #一个单元格 <td>Egon</td> <td>杠娘</td> </tr> <tr> <td>2</td> <td>Yuan</td> <td>日天</td> </tr> </tbody> </table> 属性: border: 表格边框. cellpadding: 内边距 （内边框和内容的距离） cellspacing: 外边距.（内外边框的距离） 像素 百分比.（最好通过css来设置长宽） rowspan: 单元格竖跨多少行(向下) colspan: 单元格横跨多少列（即合并单元格）
css回顾
1.行内样式
直接再创建标签时,在标签中添加一个style属性,属性值写要设置的样式
2.内接样式
再head中,添加一个style属性,在标签中写要设置的样式
3.外界样式
再head中,添加一个link标签,在href中指定要导入的css样式文件的路径.
在css样式文件中写样式
基本选择器
1. 标签选择器
直接写标签名
2.id选择器
#id
3.class类选择器
.类名
socket 服务端写网页信息
import socket server = socket.socket() ip_port = ('127.0.0.1',8001) server.bind(ip_port) server.listen() conn,addr = server.accept() from_browser_msg = conn.recv(1024) print(from_browser_msg) conn.send(b'HTTP/1.1 200 ok ')#http/1.1 协议的版本,200 ok 给浏览器个(正常)状态码, ..后面写你要显示的内容 with open('01test01.html','rb') as f: data = f.read() conn.send(data)