HTML基础一
我们之前学过socket相关的知识，所以不能理解所有基于网络的应用程序都离不开它，web服务也不例外，我们可以将服务器和浏览器理解为，socket实现的一个 过程，正如下面的代码，当我们使用socket写一个服务器启动时，当浏览器访问我这台电脑上的正确端口是（也就是我服务器进程端口），浏览器再发出请求后，也会接收到我这台服务器的消息，但是需要注意的是：是否浏览器承认我的消息合法（正如，之前FTP项目我们自定义的网络协议一般，都是有约束的）学习网址
import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)
while True:
conn, addr = sk.accept()
data = conn.recv(8096)
conn.send(b"HTTP/1.1 200 OK\r\n\r\n") #这个头文件能让浏览器通过，这也是我们学的http协议的一部分
conn.send(b"<h1>Hello world!</h1>")
conn.close()
浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
-
什么是HTML？
1、超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
2、本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个 标签可能会有不同的解释。（兼容性问题）
3、网页文件的扩展名：.html或.htm
#注意：Html是一种标记语言（markup language），它不是一种编程语言。
HTML使用标签来描述网页。不像python编程语言一样，有逻辑什么的，这个标记语言是没有逻辑的 -
HTML文档结构
<!DOCTYPE html> <html lang="zh-CN"> #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en' <head> <meta charset="UTF-8"> <title>css样式优先级</title> </head> <body> </body> </html> 1、<!DOCTYPE html>声明为HTML5文档。用于向浏览器说明当前.html文件使用的是哪种HTML或者XHTML标准规范。浏览器会按照此处指定的规范对html文件进行解析。比如这里是html文档 2、<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。 3、<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的。 4、<title>、</title>定义了网页标题，在浏览器标题栏显示。（修改一下title中的内容，然后看一下浏览器，你就会发现title是什么了） 5、<body>、</body>之间的文本是可见的网页主体内容。 #注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
-
pycharm中创建一个html文件，你就会发现，整个结构都给你直接生成好了，因为不管什么浏览器，这个文档结构都是这样的。通过pycharm可以设置整个文档，html文件可以在pycharm中的
这个位置就能打开，你会发现地址栏是种file:///这也是一个协议，浏览器打开自己本地文件的协议。
-
HTML 标签格式，严格封闭
1、HTML标签是由尖括号包围的关键字，如<html>, <div>等 2、HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。 3、也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。 4、标签里面可以有若干属性，也可以不带属性。 #标签的语法 <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名> <标签名 属性1=“属性值1” 属性2=“属性值2”…… /> 注意：有些属性是没有特殊的效果的，而有些属性是有效果的，比如 <h1 s='name'>xxx<h1/>，其中s='name'是没什么效果的，而<a src='http://www.baidu.com'>xxx</a>，你会看到一些效果，可以点击，有下划线，有颜色。 几个重要的属性： 1、id：定义标签的唯一ID，HTML文档树中唯一，将来页面上的标签有很多，例如：来几个a标签，然后怎么区分这些标签呢，可以通过<a id='a1'>xxx</a>，id不能重复，将来我们想找这个标签的时候，可以通过这个id的值来找到这个标签 2、class：为html元素定义一个或多个类名（classname）(CSS样式类名) #将css的是再说 3、style：规定元素的行内样式（CSS样式） #简单来个示例：<h1 style="color:red;">xx</h1>你会发现变成红色了，其他的讲css的时候再讲
-
HTML注释
<!--注释内容--> #找到一行内容ctrl+/就能注释，注释的内容不会在网页上显示出来
-
<!DOCTYPRE> 标签
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。 <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。声明我发过来的html的版本。
二、HTML标签
-
head内常用的标签
-
基本格式 :
<标签名 属性1=”属性值1“ 属性2=”属性值2“></标签名>
-
Meta 标签
1、<meta>元素可提供有关页面的元信息（meta-information）,针对搜索引擎和更新频度的描述和关键词。 2、<meta>标签位于文档的头部，不包含任何内容。 3、<meta>提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
-
http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址，注意引号--> <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> #如果把URL和后面的内容去掉，就是2秒钟刷新一次，这些内容了解一下就行 <!--指定文档的编码类型--> <meta http-equiv="content-Type" charset=UTF8"> <!--告诉IE以最高级模式渲染文档--> <meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微软的一个全新的浏览器,其实就是告诉IE浏览器，你按照最高标准来渲染我的页面，了解一下就可以啦
-
name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> #关键字，也就是别人是可以通过这些关键字搜索到我的这个文章的，搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的 #SEO就是做这个的，就是怎么让你们公司的网站在别人搜索的时候能够靠前显示，不算那个花钱的，百度是充值的，你冲个20w，别人可能一天就给你点击完了，特别的贵 <meta name="description" content="xxxxxpythonxxx学习"> #是对这个文档的描述，在百度一些内容的页面上，f12打开看看
-
-
浏览器内核（渲染引擎）
浏览器内核： 浏览器 -- 内核 IE -- trident （和其他引擎不一致） chrome -- blink 火狐 --- gecko Safari --- webkit 浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因。
三、body内常用标签（HTML重点）
-
基本标签（块级标签和内联标签）
不加标签的纯文字也是可以在body中写的 <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> #独占一个段落 <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--换行--> <br> <!--水平线--><hr> #就是单独个一个水平线 每次加上一些内容，别忘了刷新一下页面，才能看到新添加的效果或者内容，其实上面这些标签很少用 刚才学的标签分类： 块级标签：p、h1--h6、hr、div 内联标签：b、i、u、s
-
特殊字符( 还有好多其他的，可以直接百度搜HTML特殊符号对照表）
-
容器标签 <div></div> 和 <span></span>（常用）
-
这两个标签是没有特别的样式的。<div>xxxx</div>，但是这是两个标签最大的特点，可以通过CSS来控制，就像咱们画画一样，在一个白纸上画好，还是在一个报纸上画好啊，对不对。打开个网页通过f12看一下，就发现多数都是div和span。
div 标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。 span 标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。（是没有换行符) 块级元素与行内元素的区别： 所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。 -
关于标签嵌套：
通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。div是可以包含div的。注意：p标签比较特殊，不能包含块级标签，p标签也不能包含p标签。可以试一下p标签套p标签，f12你会发现三个p标签
-
-
<img />标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)"> src的路径又分为两种：网上的一个图片路径和本地的一个相对图片路径
-
-
超链接标签<a></a>
超链接标签： 所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序 什么是URL？ URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。 URL举例 http://www.sohu.com/stu/intro.html http://222.172.123.33/stu/intro.html URL地址由4部分组成： 第1部分：为协议：http://、ftp://等 第2部分：为站点地址：可以是域名或IP地址 第3部分：为页面在站点中的目录：stu 第4部分：为页面名称，例如 index.html 各部分之间用“/”符号隔开。 <a href="http://www.oldboyedu.com" target="_blank" >点我</a> #注意target='_blank' 表示另起一个窗口 target参数： _blank表示在新标签页中打开目标网页 _self表示在当前标签页中打开目标网页 #href属性指定目标网页地址。该地址可以有几种类型： 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）必须加 http 或 https 相对URL - 指当前站点中确切的路径（href="index.htm"） #学django的时候会用的比较多 锚URL - 指向页面中的锚（href="#top"），博客的目录经常用到，还可以跳转到 name属性为p1的a标签上，<a name='top'>xxx</a>，可以跳转到#号的同名id上
-
<base> 标签
-
标签可以限定同一页面内所有 超链接 的打开方式。
-
设置 <base> 之后依旧可以为某个单独的超链接设置打开方式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>base 标签</title> <!--指定页面中所有超链接的默认打开方式为 blank --> <base target="_blank"> </head> <body> <a href="https://www.jianshu.com/u/414acf7abc2b" >CnPeng简书</a> <br/> <!--虽然 head 中设置了base,但此处依旧可以单独指定打开方式为 self,实现重载--> <a href="https://blog.csdn.net/north1989" target="_self">CnPeng CSDN</a> <br/> <a href="aTag.html">内部链接--再打开一个aTag.html</a> <br/> <a href="#">空的超链接</a> </body> </html> 总结： <input/>、 <img /> 、 < br/>、 <hr />、<base/> 都是自闭合标签
-
四、列表
-
无序列表<ul><ul/>
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul> #type的属性 disc （实心圆点，默认值） circle（空心圆圈） square（实心方块） none （无样式） 注意： <ul></ul> 之间只能嵌套 <li></li>,不允许嵌套其他标签 <li></li> 之间相当于一个容器，可以嵌套任意标签
-
有序列表<ol></ol>
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol> #type 属性 ：（start是从数字几开始） 1 数字列表，默认值 A 大写字母 a 小写字母 Ⅰ大写罗马 ⅰ小写罗马
-
标题列表 <dl></dl>（就像大纲一样，有一个层级效果）
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
五、表格标签 table
-
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。 表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
-
表格的基本结构：
<table></table> 用来定义表格， <tr></tr> 用来定义行，嵌套在 <table></table> 中 <td></td> 用来定义行中的单元格，嵌套在 <tr></tr> 中 <tr></tr> 中只能嵌套<td></td> , 但 <td></td> 相当于一个容器，可以嵌套任意元素 #例子 <table border='1'> <thead> #标题部分 <tr> #一行 <th>序号</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> #table的属性： border: 表格边框. cellpadding: 内边距 （内边框和内容的距离） cellspacing: 外边距.（内外边框的距离） width: 像素 百分比.（最好通过css来设置长宽） rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列（即合并单元格）
其实标签又可以分为两类：1、展示给用户看的 2、获取用户输入内容的标签，刚才前面的这些标签都是展示内容用的，下面要学的标签是捕获用户输入的标签。基本上HTML中常用的就这些标签
-
表头标签<th><th/>
-
表头一般位于表格的第一行或者第一列。
-
表头标签为 <th></th>，在显示的时候默认会显示为加粗的效果
-
增加表头时，使用 <th></th> 替代对应位置的 <td></td>即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表头</title> </head> <body> <table border="1" cellspacing="1" cellpadding="10" align="center"> <caption>caption标签是啥？标题？</caption> <tr> <th>属性</th> <th>含义</th> <th colspan="2">取值</th> </tr> <tr> <th>border</th> <td>单元格边框</td> <td>像素值，默认0</td> <td rowspan="3">rowspan从当前单元格向下跨三行</td> </tr> <tr> <th>cellspacing</th> <td>单元格与单元格边框的间距</td> <td>像素值，默认2</td> </tr> <tr> <th>cellpadding</th> <td>单元格内容与单元格边框的间距</td> <td>像素值，默认1</td> </tr> </table> </body> </html>
-
-
正确的表格结构
-
使用表格时，可以将表格分为头部、主体、页脚（页脚有兼容问题）
-
<thead></thead> 用来定义头部。必须位于 <table></table> 中，一般包含网页的logo和导航等头部信息。
-
<tbody></tbody> 用来定义表格的主体，一般包含网页中除头部和底部之外的其他内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>thead+tbody</title> </head> <body> <table cellspacing="2" cellpadding="10" align="center" border="1"> <thead> <tr> <th>属性名称</th> <th>含义</th> <th>取值</th> </tr> </thead> <tbody> <tr> <td>colspan</td> <td>向右横跨几列</td> <td>数值</td> </tr> <tr> <td>rowspan</td> <td>向下竖跨几行</td> <td>数值</td> </tr> </tbody> </table> </body> </html>
-
六、表单域 <form></form>（用于获取用户的提交信息）
-
功能：
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签
-
基本语法
<form action="url地址" method="提交方式" name="表单名称"> ...各种表单控件... </form>
注意：使用form 包裹之后点击提交按钮才有提交的动作
-
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form表单域</title> </head> <body> <!--使用 form 包裹之后，提交按钮和图片按钮点击时就有效果了--> <form action="https://www.baidu.com" method="post" name="userInfo"> 用户名：<input type="text" maxlength="15"/> <br/> <!--次数密码中间的空格使用了是全角输入法，全角输入法中，空格占一个汉字的大小--> 密 码：<input type="password"/> <br/> <!--使用name 限定了一组内容，从而实现单选--> 性 别： <input type="radio" name="sex" checked="checked"/> 男 <input type="radio" name="sex"/> 女 <br/> 爱 好： <input type="checkbox" name="hobby"/> 看电影 <input type="checkbox" name="hobby"/> 读书 <br/> <input type="button" value="普通按钮"/> <br/> <input type="submit" value="提交按钮"/> <br/> <input type="reset" value="重置按钮"/> <br/> <input type="image" src="../image/imgButton.png"/> <br/> 请选择文件：<input type="file"/> </form> </body> </html>
-
表单的属性
-
表单元素
-
基本概念： HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。表单一般用来收集用户的输入信息
-
表单工作原理： 访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
上面的action会提交信息给相应的网址，下面我们写一个用户登陆界面
点击提交按钮，input中type=submit的那个按钮，然后就会将form表单中所有用户输入的内容或者选择的内容（{name属性:值，}）都发给服务端（以我们自己写的那个socket举例，打印一下接收的内容），但是所有的输入标签必须有一个叫做name的属性。
发现跳到这个页面了：看url的内容，有了我们输入的内容，并且是给你组合起来的，name属性值和你输入的值组合到一起了，通过&符号分隔，并且在路径那里加了个问号。
打印一下socket接收的消息，你就发现已经接受到这些数据了
下面再举个例子：
让用户选择的，必须指定一个value值，要不然后端接收不到内容，用户自己填写的标签，不需要指定value值然后再点击提交，后端打印一下接收的数据
但是这样并不好，因为url中显示了你的信息，并且如果内容很多的话，你的地址栏不能够输入那么长的内容，为什么会默认拼接到url里面呢，因为form表单默认是get请求提交内容，我们可以改为post，来看看：post会把所有你提交的信息封装到一个消息体里面，在浏览器上就看不到了，对于小白来说，看着安全一些。
后端接收到的信息如下：
form表单里面有两个属性：
action控制往哪里提交数据、
method控制用什么方式提交、
还有一个文件input：因为我们刚才说，数据是通过组成一个字典发给后端的，但是文件怎么做键值对啊，做不了，所以需要通过二进制流的形式一点一点的传送给后端，就是这个multipart搞的事情，有个了解就行了，别纠结，到了django我们在细说。
注意 ：form表单提交数据的时候，必须有个submit按钮
-
input输入标签：
-
<input> 元素会根据不同的 type 属性，变化为多种形态。
-
-
-
属性说明：
name：表单提交时的“键”，注意和id的区别，其实就是进行分组，同一个名字一个组，在单选是只能选一个 value：表单提交时对应项的值 type="button", "reset", "submit"时，为按钮上显示的文本年内容 type="text","password","hidden"时，为输入框的初始值 type="checkbox", "radio", "file"，为输入相关联的值 checked：radio和checkbox默认被选中的项,和select标签不一致 readonly：text和password设置只读 disabled：所有input均适用，禁用
-
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input标签</title> </head> <body> 用户名：<input type="text" maxlength="15"/> <br/> <!--次数密码中间的空格使用了是全角输入法，全角输入法中，空格占一个汉字的大小--> 密 码：<input type="password"/> <br/> <!--使用name 限定了一组内容，从而实现单选--> 性 别： <input type="radio" name="sex" checked="checked"/> 男 <input type="radio" name="sex"/> 女 <br/> 爱 好： <input type="checkbox" name="hobby"/> 看电影 <input type="checkbox" name="hobby"/> 读书 <br/> <input type="button" value="普通按钮"/> <br/> <input type="submit" value="提交按钮"/> <br/> <input type="reset" value="重置按钮"/> <br/> <input type="image" src="../image/imgButton.png"/> <br/> 请选择文件：<input type="file"/> </body> </html>
-
-
select标签
-
<select></select> 用来定义下拉菜单
<option></option> 用来定义下拉菜单选项
在 option 中定义了属性 selected="selected" 之后，表示该项被默认选中
代码示例
<form action="" method="post"> <select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> #默认选中，当属性和值相同时，可以简写一个selected就行了 <option value="3">广州</option> <option value="4">深圳</option> </select> </form> #参数说明： multiple：布尔属性，设置后为多选下拉框，否则默认单选 disabled：禁用，文本框都可用禁用 selected：默认选中该项 value：定义提交时的选项值
-
-
label标签
-
定义：<label> 标签为 input /select 元素定义标注（标记）。如果不用这个label给input标签一个标记，input会变黄，不影响使用，只是提示你，别忘了给用户一些提示，也就是这个label标签。通过id产生关系
-
用来绑定一个表单元素，当点击 label 标签的时候，被绑定的 表单元素就会获取焦点，通过 for 属性，可以绑定 label 和 input ; 或者直接用lable 标签将input 包裹起来
说明： label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。for 你要给的对象的id
代码示例
<form action=""> <label for="username">用户名</label> #for和input的id属性一样，就关联在一起了 <input type="text" id="username" name="username"> </form>
还可以包含在label中:
-
-
textarea多行文本
-
<textare > </textarea>用来做大量文本的输入，支持多行
-
有 cols 、rows 属性。cols 限制每行中所输入的文本字数，rows 限制最大行数。（这两个属性通常不被使用，更多使用会使用CSS样式做相关控制）
-
代码示例
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea> 属性说明： name：名称 rows：行数 #相当于文本框高度设置 cols：列数 #相当于文本框长度设置 disabled：禁用
-
注意：当输入框的的内容过多时，我们需要使用滑动框/隐藏属性来达到效果
<textarea id='txtComments' style="overflow-x:hidden"></textarea> 参数说明：overflow-x,overflow-y的可取值为：visible(默认取值),hidden,auto,scroll。 <body> <textarea cols="15" rows="3"></textarea> <br/> <textarea cols="15" rows="3" style="overflow-x:scroll;overflow-y:hidden;"></textarea> <br/> </body>
-
浙公网安备 33010602011771号