前端学习—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)
所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上 的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
什么是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
注意啦!!!!
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>