前端学习—HTML
1.web服务的本质
import socket sock=socket.socket(socket.AF_INET,socket.SOCK_STREAM) sock.bind(("127.0.0.1",8800)) sock.listen(5) while 1: print("waiting........") conn,addr=sock.accept() data=conn.recv(1024) print("data",data.decode("utf8")) with open("index.html","r") as f: response=f.read() #可以吧html放在一个文档里面读出来 conn.send(("HTTP/1.1 201 OK\r\n\r\n%s"%response).encode("utf8"))
web应用流程：
浏览器发请求 --> 遵循HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
2.HTML是什么？
超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。html就是一套规则，浏览器认识的规则。
浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）
静态网页文件扩展名：.html 或 .htm
HTML 不是一种编程语言，而是一种标记语言 (markup language) HTML 使用标记标签来描述网页，这种标记语言没有任何逻辑。
3.html文档格式
基本的HTML文档模式
<!DOCTYPE html> <html lang="zh-CN"> #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en' <head> <meta charset="UTF-8"> <title>css样式优先级</title> </head> <body> </body> </html>
-
<!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
-
<html>...</html> 是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
-
<head>...</head> 元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
-
<title>...</title> 定义网页标题，在浏览器标题栏显示。
-
<body>...</body> 之间的文本是可见的网页主体内容
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
pycharm中创建一个html文件，你就会发现，整个结构都给你直接生成好了，因为不管什么浏览器，这个文档结构都是这样的。
4.html标签格式
标签严格封闭，也就是要成对，但有一些标签是自封闭的。
标签的语法
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名> <标签名 属性1=“属性值1” 属性2=“属性值2”…… />
注意：有些属性是没有特殊的效果的，而有些属性是有效果的。
几个重要的属性
-
id：定义标签的唯一ID，HTML文档树中唯一，区分页面中标签的唯一标识
-
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
-
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
HTML注释
<!--注释内容--> #找到一行内容ctrl+/就能注释，注释的内容不会在网页上显示出来
二、常用标签
1.！DOCTYPE标签
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
document.compatMode：
-
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
-
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat。
2.head内常用标签
meta标签
1.meta介绍
meta元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。 meta标签位于文档的头部，不包含任何内容。 meta提供的信息是用户不可见的
2.meta标签组成
meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
name属性：主要用于描述网页，与之对应的属性值为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浏览器，你按照最高标准来渲染我的页面，了解一下就可以啦
http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> # 关键字，也就是别人是可以通过这些关键字搜索到我的这个文章的，搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的 #SEO就是做这个的，就是怎么让你们公司的网站在别人搜索的时候能够靠前显示，不算那个花钱的，百度是充值的，你冲个20w，别人可能一天就给你点击完了，特别的贵 <meta name="description" content="xxxxxpythonxxx学习"> # 是对这个文档的描述，在百度一些内容的页面上，f12打开看看
非meta标签
<link rel="icon" href="http://www.jd.com/favicon.ico"> <!--设置头部图标，，就像我们打开百度网址上会有百度的小图标--> <link rel="stylesheet" href="css.css"> #加载css <script src="hello.js"></script> #加载js
PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因。
3.body内常用标签
基本标签
不加标签的纯文字也是可以在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>：#就是单独个一个水平线 <sup>和<sub>: 上角标 和 下角表. <em>: 文字变成斜体. <strike>: 为文字加上一条中线.
特殊字符
""" 大于号：> 小于号：< and符号：& 人民币符号：¥ 版权标识：© 注册符：® """
两个重要标签：div和span
这两个标签是没有特别的样式的。<div>xxxx</div>，但是这是两个标签最大的特点，可以通过CSS来控制。
-
<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
-
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.
块级元素与行内元素的区别： 所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。 这两个元素是专门为定义CSS样式而生的。
注意
关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。div是可以包含div的
p标签比较特殊，不能包含块级标签，p标签也不能包含p标签。可以试一下p标签套p标签，f12你会发现三个p标签
几个概念
闭合标签：成对出现，封闭的标签
非闭合标签：不需要成对出现，内部实现了自闭和
块级标签：也称块元素，就是独占一行，可以自行设置宽高！如：先学到的 div,p,h1-h6
内联标签：也称行内元素，按内容占位，高度和广度是由自己的内容填充的 如： a,br,img
判断块级标签和内联标签的方法：
-
是否独占一行（可以通过设置背景颜色去判断）
-
是否可以单独为元素设置高度和宽度。
图形标签：img
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
src的路径又分为两种：网上的一个图片路径和本地的一个相对图片路径
超链接标签（锚标签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="" target="_blank" >click</a>
href：指定目标网页地址。该地址可以有几种类型：
-
绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
-
相对 URL - 指当前站点中确切的路径（href="index.htm"）
-
锚 URL - 指向页面中的锚（href="#top"）博客的目录经常用到，还可以跳转到 name属性为p1的a标签上，xxx
target：指定跳转网页的创建方式
-
_blank表示在新标签页中打开目标网页
-
_self表示在当前标签页中打开目标网页
列表标签：list
1.无序列表
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul>
type属性：
-
disc（实心圆点，默认值）
-
circle（空心圆圈）
-
square（实心方块）
-
none（无样式
2.有序列表
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol>
type属性：start是从数字几开始
-
1 数字列表，默认值
-
A 大写字母
-
a 小写字母
-
Ⅰ大写罗马
-
ⅰ小写罗马
3.标题标签
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
表格标签：table
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构：
'''
table:表格标签
thead:表头
tbody:内容
tr:表格行
th:表头单元格
td:内容单元格
'''
表格标签实例
<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: 表格边框.注意写在内联属性，可以设置内框，写在CSS中只能设置table标签的外框，无法设置内框
-
cellpadding: 内边距 （内边框和内容的距离）
-
cellspacing: 外边距.（内外边框的距离）
-
width: 像素 百分比.（最好通过css来设置长宽）
-
rowspan: 单元格竖跨多少行
-
colspan: 单元格横跨多少列（即合并单元格）
<table class="tb" border="1"> 写在这里设置的是单元格之间的边框 <thead> <tr> <th>select</th> <th>name</th> <th>hobby</th> <th>status</th> <th>delete</th> </tr> </thead> </table> .tb{ border: 1px solid black; 写在这里是设置table标签的外边框样式 }
其实标签又可以分为两类：
-
展示给用户看的
-
获取用户输入内容的标签，刚才前面的这些标签都是展示内容用的，下面要学的标签是捕获用户输入的标签。
三、HTML表单
1.HTML表单概念
什么是表单
HTML表单用于收集用户数据并向服务器传输数据，从而实现用户与Web服务器的交互
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等，还可以包含textarea、select、fieldset和 label标签。这些标签也称为HTML表单的表单元素。
form表单标签属性
action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
method: 表单的提交方式 post/get默认取值就是get
注意啦！！！！
from表单：实现用户与web服务器的交互 以键值对的形式发过去{"":"haiyan","":"123"} 如果没有name属性，你的数据是不过去的 name:键名 请求server端的方式： get:请求会放在url后面 username=yaun&password =123 post:请求会放在请求体里 关于 url的内容 url: https://www.baidu.com(协议：域名（也是ip+端口)) url: http:127.0.0.1:8800/blog/addBlog（协议：ip:端口/） url: http:127.0.0.1:8800/blog/addBlog？username = yuan http:协议 127.0.0.1:8800：ip地址与端口 blog/addBlog：url的路径（path） username = yuan:get请求数据 请求协议： 浏览器发给服务器（get请求,post请求） 格式： 请求首行 请求头：就是一组组键值对 换行 \n,\n\r 请求数据：有两种方式 if get : url?data if post : 请求数据 get请求：安全性差，数据量有限（当设计到查询的时候会用到get请求） 那些是get请求（一般都是查询数据库操作）： 1.url访问server端 2.超链接访问，即a标签 post请求：相对于get安全点，，但是没有绝对的安全（修删改可以用post）
表单工作原理
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。 服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
2.表单元素
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等，以及textarea、select、fieldset和 label标签。
3.input类型标签
input标签输入类型
-
text 文本输入框
<form> User name:<br> <input type="text" name="username"> </form>
-
password 密码输入框
<form> User name:<br> <input type="password" name="password"> </form>
-
radio 单选框
<form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form>
-
checkbox 多选框
<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
-
submit 提交按钮
<form> User name:<br> <input type="password" name="password"> <input type="submit" value="Submit"> </form>
-
button 按钮(需要配合js使用.) button和submit的区别？
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
-
file 提交文件：form表单需要加上属性enctype="multipart/form-data"
<input type="file" value="comments">
上传文件注意两点：
-
请求方式必须是post
-
enctype="multipart/form-data"
input标签输入属性
name属性
表单提交项的键。
注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的。
value属性
表单提交项的值。
对于不同的输入类型，value 属性的用法也不同：
-
type="button", "reset", "submit" - 定义按钮上的显示的文本
-
type="text", "password", "hidden" - 定义输入字段的初始值
-
type="checkbox", "radio", "image" - 定义与输入相关联的值
<form action=""> First name:<br> <input type="text" name="firstname" value="John"> <br> Last name:<br> <input type="text" name="lastname"> </form>
checked属性
设置radio 和 checkbox 默认被选中的项
<form> <p> 爱好: <input type="checkbox" name="hobbies" value="basketball">篮球 <input type="checkbox" name="hobbies" value="football" checked>足球 </p> </form>
readonly属性
<form action=""> First name:<br> <input type="text" name="firstname" value="John" readonly> <br> Last name:<br> <input type="text" name="lastname"> </form>
disabled
<form action=""> First name:<br> <input type="text" name="firstname" value="John" disabled> <br> Last name:<br> <input type="text" name="lastname"> </form>
placeholder属性
placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）
<input type="text" name="fname" placeholder="First name">
multiple属性
multiple 属性是布尔属性。如果设置，则规定允许用户在 <input> 元素中输入一个以上的值，适用于email和file类型的input标签。
Select images: <input type="file" name="img" multiple>
4.select标签
select标签
元素定义下拉列表
-
name属性：表单提交项的键
-
size属性：下拉框选项个数
-
mulitple属性：multiple设置可多选
optgroup标签
为每一项加上分组
option标签
元素定义待选择的选项。
-
value属性：表单提交项的值
-
selected属性：设置下拉框的默认选中项
使用实例！
<select name="city" id="" style="width: 200px"> <optgroup label="一线城市"> <option value="BJ">北京</option> <option value="SH">上海</option> <option value="SZ" selected="selected">深圳</option> <option value="GZ">广州</option> </optgroup> <optgroup label="二线城市"> <option value="BJ">济南</option> <option value="SH">苏州</option> <option value="SZ" selected="selected">南京</option> <option value="GZ">成都</option> </optgroup> </select>
5.textarea 多行文本框
textarea元素定义多行输入字段（文本域）
<form id="form1" name="form1" method="post" action=""> <textarea cols=“宽度” rows=“高度” name=“名称”> 文本域内容 </textarea> </form>
6.label标签
定义：<label> 标签为 input 元素定义标注（标记）。 说明
-
label 元素不会向用户呈现任何特殊效果。
-
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form method="post" action=""> <label for=“username”>用户名</label> <input type=“text” name=“username” id=“username” size=“20” /> </form>
7.fieldset标签
<fieldset> <legend>登录吧</legend> <input type="text"> </fieldset>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="https://www.baidu.com" method="get"> <fieldset> <legend>注册页面</legend> <p> 用户名： <input type="text" name="username"> 密码： <input type="password" name="password"> </p> <p> 性别： <input type="radio" name="gender" value="male" id="ml"><label for="ml">男</label> <input type="radio" name="gender" value="female" id="fl"><label for="fl">女</label> </p> <p> 爱好: <input type="checkbox" name="hobbies" value="basketball" id="bb"><label for="bb">篮球</label> <input type="checkbox" name="hobbies" value="football" checked id="fb"><label for="fb">足球</label> <input type="checkbox" name="hobbies" value="pingpang" checked id="pp"><label for="pp">乒乓球</label> </p> <p> 城市： <select name="city" id="" style="width: 200px"> <optgroup label="一线城市"> <option value="BJ">北京</option> <option value="SH">上海</option> <option value="SZ" selected="selected">深圳</option> <option value="GZ">广州</option> </optgroup> <optgroup label="二线城市"> <option value="BJ">济南</option> <option value="SH">苏州</option> <option value="SZ" selected="selected">南京</option> <option value="GZ">成都</option> </optgroup> </select> </p> <p> <input type="submit" value="注册"> </p> </fieldset> </form> </body> </html>
