html内容

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\r\n')
    conn.send(b'\r\n')
    
    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>  -- 分割线

特殊字符

内容			对应代码
空格			&nbsp;
 >			 &gt;
 <			 &lt;
 &			 &amp;
 ￥			&yen;
 版权		   &copy;
 注册		   &reg;

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;
            width: 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标签

定义：标签为 input 元素定义标注（标记）。
说明：

label 元素不会向用户呈现任何特殊效果。
标签的 for 属性值应当与相关元素的 id 属性值相同。

<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;
            width: 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="width: 293px;
    height: 133px; resize: none"></textarea>
        </p>
        <p>
            <input type="submit" value="注册" style="margin-left: 30px">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <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),
]

posted on 2021-03-02 20:38 Jkeykey 阅读(160) 评论(0) 编辑收藏举报