HTML介绍
Web 服务本质
基于socket模拟服务器
import socket
server = socket.socket(socket.AF_INET,socket.SOCK_STREAM)
server.bind(('127.0.0.1', 8080))
server.listen(5)
while True:
conn, addr = server.accept()
data = conn.recv(1024)
print(data)
conn.send(b'http/1.1 200 ok
')
conn.send(b'
')
conn.send(b"<h1><p><mark>Hello world!</mark></p></h1>")
conn.close()
在浏览器输入一个url后会发生什么?
"""
浏览器发请求 -- > HTTP协议 --> 服务端接受请求 --> 服务器返回响应
--> 服务端把html文件中的内容发给浏览器 --> 浏览器渲染页面
"""
HTML是什么?
- HTML叫做超文本标记语言 (Hyper Text Markup Language) 是一种用于创建页面的标记语言
- 本质上是浏览器可识别的规则, 我们按照规则写网页, 浏览器根据规则渲染我们的网页.对于不同的浏览器,对同一个标签可能会有不同的解释.(兼容问题)
- 网页文件的扩展名有:
.html或.hml.
HTML不是什么?
HTML 是一种标记语言(markup language) , 它不是一种编程语言.
HTML使用标签来描述网页.
左边为html文件格式的文件,右边为python格式的文件
HTML 文档结构
最基本的HTML文档
<! DOCTYPE html> <!--html表示的是html5标准-->
<html lang="zh-CN"> <!--根标签,lang为属性 方便浏览器用什么语言检索这个文件-->
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
文件的内容部分
</body>
</html>
<! DOCTYPE html>声明为html5文档<html></html>是文档的开始标记和结束的标记.是html页面的根元素,在它们之间是文档的头部(head)和主体(body)<head></head>定义了HTML文档的开头部分.它们之间的内容一般为文件的配置信息,所以一般不会将内容部分放到这里面.包含了文档的元(meta)数据<title></title>定义了网页标题, 在浏览器标题栏显示.<body></body>之间的文本一般规定为文件的内容部分,也就是可见的网页主体部分.
注意: 对于中文页面需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码.有些浏览器会设置GBK为默认编码,那么你需要设置为<meta charset="gbk">.
HTML 标签格式
- HTML 标签是由尖括号包围的关键字组成, 如:
<html></html>,<img> - HTML标签通常是成对出现的,比如:
<h1></h1>,第一个标签是开始,第二个标签是结束.结束标签会有斜杠. - 也有一部分标签是单独呈现的,比如:
<br/>,<hr>,<img>等.- 注意: 单标签中的后面的
/可加可不加
- 注意: 单标签中的后面的
- 标签里面也可以有若干属性,也可以不带属性.是可选的.如
<div hight="600px"></div>- 其中的hight 就是属性
标签的语法
- 双标签语法
- <标签名 属性1="属性1的值" 属性2="属性2的值">内容部分</标签名>
- 单标签语法
- <标签名 属性1="属性1的值" 属性2="属性2的值">
几个很重要的属性
id: 定义标签的唯一ID, HTML文档树种唯一class: 为html元素定义一个或多个类名(classname) (CSS样式类名)style: 规定元素的行内样式 (CSS样式)
HTML注释
<!--注释内容,可以为单行也可以为多行-->
<!--
多行
在pycharm中可以使用 ctrl + ? 来快速注释
-->
注释是代码之母.
<! DOCTYPE> 标签
<! DOCTYPE>声明必须是html文档的第一行, 位于<html>标签之前
<! DOCTYPE> 声明不是html标签;它是指示web浏览器关于页面使用哪个HTML 版本进行编写的指令
HTML常用标签
主体结构
<html></html><head></head><body></body>
HEAD标签
<title></title>网站标题<meta>指定网页的源信息, 指定关键字 指定描述 指定字符集- 属性: charset; name; content
<style></style>文件内添加样式<link>导入css或者指定网页图标- 属性: src, type, rel
<script></script>导入javascript
标签 意义
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件或网站图标ico
<meta/> 定义网页源信息
Meta 标签
Meta标签介绍:
- : 元素可提供有关页面的元信息 (meta-information), 针对搜索引擎和更新频度的描述和关键词(name="keywords")
- :标签位于文档的头部,不包括任何内容
- :提供的信息是用户不可见的.
meta标签的组成:meta标签共有俩个属性分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能.
-
http-equiv属性: 相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以正确的显示网页内容,与之对应的属性为content,content中的内容其实就是各个参数的变量值.<!--指定文档的编码类型--> <meta http-equiv="content-type" charset="utf-8"> <!--2秒后跳转到对应的网址,注意引号--> <meta http-equiv="refresh" content="2,http://www.daidu.com"> <!--告诉ie以最高级模式渲染文档--> <meta http-eqiuv="x-ua-compatible" content="IE=edge"> -
name属性: 主要用于描述网页,与之对应的属性为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的.<!--keywords关键字,content内放热词--> <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <!--description表示描述信息--> <meta name="description" content="meta的一些介绍和属性用法"'>
body内常用标签
格式排版标签
<hn></hn>1-6 标题<p></p>段落<pre></pre>原样输出<br>换行<hr>分割<div></div>分块
文本标签
<em></em>强调 表现为斜体<strong></strong>强调 表现为粗体<mark></mark>H5新增 表示被选择<sup></sup>上标<sub></sub>小标<ins></ins>添加的内容<del></del>删除的内容<ruby></ruby><rt></rt>加拼音 H5新增.
基本标签 (块级标签和内敛标签)
<b>语义为强调(程度更深),表现为字体加粗</b>
<i>语义为强调,表现为字体边斜体</i>
<u>语义为插入,表现为字体下面有下划线</u>
<s>语义为删除,表现为字体被画上去除线</s>
<p>语义为段落标签,放一段内容</p>
<hn>内容标题标签,h1~h6,数值越大关键字热度越高</hn>
<br> -- 换行
<hr> -- 分割线
特殊字符
内容 对应代码
空格
> >
< <
& &
￥ ¥
版权 ©
注册 ®
div标签和span标签
div标签用来定义一个块级元素,并无实际的意义.主要通过CSS样式为其赋予不同的表现.
span标签用来定义内敛(行内)元素,并无实际的意义.主要通过CSS样式为其赋予不同的表现.
块级元素与行内元素的区别:
所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行.如果单独在网页中插入这俩个元素,不会对页面产生任何的影响.
这俩个元素是专门为定义CSS样式而是生的.
注意: 关于标签嵌套: 通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素.
p标签不能包含块级标签,p标签也不能包含p标签
img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽度px" height="高度px">
注意: 除了src其他的属性都是可选属性.其中设置了宽度或高度只需要设置一个即可,不然不安原图的比例会出现掉帧.
a标签
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序.
知识回顾: URL
"""
什么是url?
url搜索统一资源定位器(Uniform Resource Locator)的缩写,也被称为网页地址,是因特网上标准的资源的地址.
"""
"""
url举例:
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
ulr地址由四个部分组成
1. 第一部分为协议: http:// ,ftp:// 等
2. 第二部分为站点地址: 可以是域名或者ip地址 有dns域名解析地址协议
3. 第三部分为虚拟地址 为页面在站点中的目录 stu
4. 第四部分为页面的名称, 例如 index.html
各部分以 `/` 符号隔开
"""
标签语法
<a href="http://www.daibu.com" target="_blank">点我百度</a>
href属性指定目标网页地址,该地址可以有几种类型.
- 绝对url- 指向另一个站点 (比如 href="http://www.daibu.com")
- 相对url - 指当前站点中确切的路径 (href="./index.html")
- 锚url - 指向页面总的锚 (href="#top")
target属性:
_blank表示在新标签页(开新窗口)中打开目标网页_self表示在当前标签(当前窗口)中打开目标网页
列表标签
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属性:
1数字列表,默认值A大写字母a小写字母I大写罗马i小写罗马
3.标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
<dt>标题2</dt>
<dd>内容4</dd>
<dd>内容5</dd>
<dd>内容6</dd>
</dl>
表格标签
表格是一个二维数据空间,一个表格由若干个行组成,一行又由若干个单元格组成,单元格里可以包含文字,列表,图案,表单,数字符号,预置文本和其他的表格等内容.
表格最重要的目的是显示表格类数据.表格类数据是指最合适组织为表格格式(即按行和列组织)的数据.
表格的基本结构:
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>liu</td>
<td>嫖</td>
</tr>
<tr>
<td>2</td>
<td>song</td>
<td>猪</td>
</tr>
</tbody>
</table>
属性:
border: 表格边框cellpadding: 内边距cellspacing: 外边距width像素 百分比. -- 最好通过css来设置长度rowspan: 单元格行跨多少行colspan: 单元格横跨多少列 (即合并单元格)
练习1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
height: 100px;
50%;
background-color: greenyellow;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" align="center" cellpadding="10px">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td valign="center">liu</td>
<td>嫖</td>
</tr>
<tr>
<td>2</td>
<td>song</td>
<td>猪</td>
</tr>
</tbody>
</table>
</body>
</html>
练习2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
table {
border-collapse: collapse;
border: 1px solid black;
background-color: greenyellow;
margin-left: 100px;
}
</style>
</head>
<body>
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
imput标签
<input>元素会根据不同的type属性,变化为多种形态.
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | |
| date | 日期输入框 | |
| checkbox | 复选框 | |
| radio | 单选框 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| button | 普通按钮 | |
| hidden | 隐藏输入框 | |
| file | 文本选择框 |
属性说明:
name: 表单提交时的"键", 注意和id的区别value: 表单提交时对应项的值type="button","reset","submit"时, 为按钮上显示的文本年内容type="text", "password","hidden"时,为输入框的初始值.type="checkbox","redio","file"时,为输入相关联的值
checked: redio 和 checkbox 默认为被选中的项.readonly: text和password设置只读disabled: 所有input均适用.
select标签
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>
属性说明：
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
label标签
定义：
- label 元素不会向用户呈现任何特殊效果。
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>
textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>
属性说明：
- name：名称
- rows：行数
- cols：列数
- disabled：禁用
form标签
标签得详细介绍: https://www.processon.com/view/link/5aeea789e4b084d6e4bf6911#map
功能:
- 表单用于向服务器外输数据,从而实现用户与web服务器的交互.
- 表单能够包含input系列标签,比如文本字段,复选框,单选框,提交按钮等等
- 表单还可以包含textarea,select,fieldset和label标签
表单属性
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
margin-top: 10px;
margin-left: 580px;
border: 1px solid greenyellow;
display: inline-block;
align-content: center;
}
p {
padding-bottom: 3px;
margin-left: 20px;
300px;
}
</style>
</head>
<body>
<div>
<form action="MAILTO:someone@w3school.com.cn" method="post">
<p>
用户名 :
<input type="text" name="username" placeholder="请输入用户名">
</p>
<p>
密码 :
<input type="password" name="password" placeholder="请输入密码">
</p>
<p>
生日 :
<input type="date" name="birthday">
</p>
<p>
邮箱 :
<input type="email" name="email_num">
</p>
<p>
手机号 :
<input type="number" name="phone">
</p>
<p>
性别 :
<input type="radio" name="sex" value="男" checked> 男
<input type="radio" name="sex" value="女"> 女
<input type="radio" name="sex" value="保密"> 保密
</p>
<p>
爱好 :
<input type="checkbox" name="hobbies" value="打篮球" checked> 打篮球
<input type="checkbox" name="hobbies" value="踢足球"> 踢足球
<input type="checkbox" name="hobbies" value="打游戏" checked> 打游戏
</p>
<p>
评论:
<textarea name="userinfo" rows="10" cols="30" style=" 293px;
height: 133px; resize: none"></textarea>
</p>
<p>
<input type="submit" value="注册" style="margin-left: 30px">
<input type="reset" value="重置" style="margin-left: 105px">
</p>
</form>
</div>
</body>
</html>
练习2
<!DOCTYPE html>
<html>
<head>
<title>textarea文本域标签</title>
</head>
<body>
<form action="http:\www.daidu.com" method="post">
<p>
<input type="text" placeholder="请输入用户名">
</p>
<p>
<input type="password" placeholder="请输入密码">
</p>
<p>
男:<input type="radio" name="sex" checked="checked">
女:<input type="radio" name="sex">
</p>
<h4>选择课程</h4>
<p>
web前端:<input type="checkbox">
</p>
<P>
python开发:<input type="checkbox" checked="checked">
</P>
<P>
java编程:<input type="checkbox">
</P>
<h4>下拉选课(单选)</h4>
<p>
<select name="class">
<option value="a">HTML</option>
<option value="b">CSS</option>
<option selected="selected">JAVASCRIPT</option>
<option value="c">Vue</option>
</select>
</p>
<h4>下拉选课(多选)</h4>
<p>
<select multiple="multiple">
<option>HTML</option>
<option>CSS</option>
<option selected="selected">JAVASCRIPT</option>
<option>Vue</option>
<option>小程序</option>
<option>qq</option>
<option>如何讨得富婆欢心</option>
</select>
</p>
<h4>个人描述:</h4>
<p>
<textarea rows="10" cols="40"></textarea>
</p>
<p>
<input type="submit" value="立即注册">
</p>
</form>
</body>
</html>
表单元素
基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
from django.conf.urls import url
from django.shortcuts import HttpResponse
def upload(request):
print("request.GET:", request.GET)
print("request.POST:", request.POST)
if request.FILES:
filename = request.FILES["file"].name
with open(filename, 'wb') as f:
for chunk in request.FILES['file'].chunks():
f.write(chunk)
return HttpResponse('上传成功')
return HttpResponse("收到了！")
urlpatterns = [
url(r'^upload/', upload),
]