zoukankan html css js c++ java

HTML基础

HTML前戏

如何将服务端发送的数据能够正常的被浏览器识别：

import socket

sever = socket.socket()
sever.bind(('127.0.0.1',8080))
sever.listen(5)

while True:
    conn,addr = sever.accept()
    data = conn.recv(1024)
    print(data)
    # 构造出符合HTTP协议格式的数据（了解）
    conn.send(b'HTTP/1.1 200 OK

') 
    """
    HTTP(协议)/1.1(版本) 200 OK(响应状态码)-->响应首行 
    /r/n-->响应头(没有) 
    /r/n-->按照数据格式空一行
    """
    conn.send(b'hello baby~') # 响应体
    conn.close()

请求格式说明：

补充：人工智能换行-->/r/n

"""
请求首行：
b'GET / HTTP/1.1
   

请求头：
Host: 127.0.0.1:8080

Connection: keep-alive

Cache-Control: max-age=0

Upgrade-Insecure-Requests: 1

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9

Sec-Fetch-Site: none

Sec-Fetch-Mode: navigate

Sec-Fetch-User: ?1

Sec-Fetch-Dest: document

Accept-Encoding: gzip, deflate, br

Accept-Language: zh-CN,zh;q=0.9



请求体(因为是Get请求，所以没有请求体)
'
"""

HTML简介

超文本标记语言

如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法

我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)

<h1>hello big baby~</h1>
<a href="https://www.mzitu.com/">click me！give you some color to see see！</a>
<img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2159057472,1466656787&fm=26&gp=0.jpg" />

HTML就是书写网页的一套标准

# 注释:注释是代码之母
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTMl代码
<!--左侧菜单栏结束-->

HTML文档结构

<html>
　<head></head>:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
  <body></body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
</html>

补充:文件的后缀名其实是给用户看到的，只不过对应不同的文件后缀名有不同的软件来处理并添加很多功能

注意:HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码

两种打开HTML文件的方式

找到文件所在的位置右键选择浏览器打开
在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 一般使用谷歌浏览器(功能强大)

HTML正式内容

第一种标签方式

<h1></h1>
<a href="https://www.mzitu.com/"></a>
<img/>

1  双标签
2  单标签(自闭和标签)

head内常用标签

在书写HTML代码的时候你只需要写标签名然后tab就能自动补全

网页标题
<title>Title</title>  

内部用来书写css代码
<style>
        h1 {
            color: greenyellow;
        }
</style>  

内部用来书写js代码
<script>
        alert(123)
</script>  

还可以引入外部js文件
<script src="myjs.js"></script>  

引入外部css文件
<link rel="stylesheet" href="mycss.css">

Meta标签使用

Meta标签介绍：

元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。
提供的信息是用户不可见的。

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--指定文档的编码类型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">  
<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.taobao.com">
<!--告诉IE以最高级模式渲染文档(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">  网页的描述性信息

body内常用标签

你肉眼能够在浏览器上面看到的花里胡哨的页面。内部都是HTML代码

基本标签：

<h1>我是h1</h1>  标题标签 1～6级标题
<!--<b>加粗</b>-->
<strong>强调</strong>
<!--<u>下划线</u>-->
<ins>插入</ins>
<!--<i>倾斜</i>-->
<em>倾斜</em>
<!--<s>删除</s>-->
<del>删除</del>
<p>段落</p> 一个p就是一行
<br>  换行
<hr>  水平分割线

第二种标签方式

块儿级标签:独占一行

h1~h6	p div

　　1 块儿级标签可以修改长宽行内标签不可以修改了也不会变化
　　2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
　　注意：但是p标签虽然是块儿级标签但是它只能嵌套行内标签不能嵌套块儿级标签。
　　如果你套了问题也不大因为浏览器会自动帮你解开(浏览器是直接面向用户的不会轻易的报错哪怕有报错用户也基本感觉不出来)

总结:

　　只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
但是p标签只能嵌套行内标签（HTML书写规范）

行内标签:自身文本多大就占多大

i u s b span

行内标签不能嵌套块儿级标签可以嵌套行内标签

特殊符号

&nbsp;  空格
&gt;   大于号
&lt;   小于号
&amp;  &
&yen;  ¥
&copy;	©
商标&reg;  ®

常用标签

div  块儿级标签
span  行内标签
上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本先用span标签

img标签

# 图片标签
<img src="" alt="">

src	
  1.图片的路径	可以是本地的也可以是网上的
  2.url			自动朝该url发送get请求获取数据

alt="这是我的前女友"
	当图片加载不出来的时候 给图片的描述性信息

title="新垣结衣"
	当鼠标悬浮到图片上之后 自动展示的提示信息

height="800px" 
		
width=""
  高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
  如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真

a标签

# 链接标签
<a href=""></a>
"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""

href
  1.放url，用户点击就会跳转到该url页面
  2.放其他标签的id值 点击即可跳转到对应的标签位置

target
  默认a标签是在当前页面完成跳转  _self
  你也可以修改为新建页面跳转	    _blank

# a标签的锚点功能
"""eg:点击一个文本标题 页面自动跳转到标题对应的内容区域"""
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>

标签具有的两个重要书写

1.id值
	类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
	该值有点类似于面向对象里面的继承 一个标签可以继承多个class值

标签既可以有默认的书写也可以有自定义的书写

<p id="d1" class="c1" username="jason" password="123"></p>

列表标签

无序列表(较多)

<ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第二项</li>
        <li>第二项</li>
</ul>
虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签
自动补全语法(emmet插件) ol>li{$}*4

有序列表(了解)

<ol type="1" start="5">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

1 A I a ... 了解即可

标题列表(了解)

<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容2</dd>
    <dt>标题3</dt>
    <dd>内容3</dd>
</dl>

表格标签

标签代码	标签注释
< table>< /table>	创建一个表格
< thead>< /thead>	创建一个表头(字段信息)
< tr>< /tr>	一个tr代表一行
< th>< /th>	加粗文本
< td>< /td>	正常文本
< tbody>< /tbody>	表单(数据信息)

结构框架：

<table>
	<thead>
		<tr>  一个tr就表示一行
			<th>username</th>  加粗文本
			<td>username</td>  正常文本
		</tr>
	</thead>  表头(字段信息)
	<tbody>
		<tr>
			<td>jason</td>
			<td>123</td>
			<td>read</td>
		</tr>
	</tbody>	 表单(数据信息)
</table>

补充:

<!--table参数-->
<table border="1" cellpadding="5" cellspacing="5">
    border添加表格样式(添加外边框)
    cellpadding内边距(文字到内边框的距离)
    cellspacing内外边框的距离

<!--td参数-->   
<td colspan="2">111</td>  水平方向占多行
<td rowspan="2">222</td>   垂直方向占多行

原生的表格标签很丑，但是后续我们一般都是使用框架封装好的

表单标签

能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器

实现一个注册功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
    <h1>注册界面</h1>
    <form action="">
        <p>
            <label for="d1">username:<input type="text" id="d1"></label>
        </p>
        <p>
            <label for="d2">password:</label>
            <input type="password" id="d2">
        </p>
        <p>
            <label for="d3">birthday:<input type="date" id="d3"></label>
        </p>
        <p>gender:
            <input type="radio" name="gender" checked>男
            <input type="radio" name="gender">女
            <input type="radio" name="gender">其他
        </p>
        <p>hobby:
            <input type="checkbox" name="hobby">read
            <input type="checkbox" name="hobby">DBJ
            <input type="checkbox" name="hobby">study
            <input type="checkbox" name="hobby">play
        </p>
        <p>province:
            <select name="" id="">
                <option value="">北京</option>
                <option value="" selected>上海</option>
                <option value="">深圳</option>
            </select>
        </p>
        <p>前女友：
            <select name="" id="" multiple>
                <option value="">1</option>
                <option value="" selected>2</option>
                <option value="" selected>3</option>
            </select>
        </p>
        <p>province1:
            <select name="" id="">
                <optgroup label="上海">
                    <option value="">11</option>
                    <option value="">22</option>
                    <option value="">33</option>
                </optgroup>
                <optgroup label="北京">
                    <option value="">1111</option>
                    <option value="">2111</option>
                    <option value="">3111</option>
                </optgroup>
                <optgroup label="深圳">
                    <option value="">1222</option>
                    <option value="">2222</option>
                    <option value="">3222</option>
                </optgroup>
            </select>
        </p>
        <p>文件：
            <input type="file" multiple>
        </p>
        <p>自我介绍:
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p>
<!--当你没有指定按钮的文本内容，不同的浏览器打开之后渲染的结果可能不同         -->
        <input type="submit" value="注册">
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <button>点我</button>
    </form>
</body>
</html>

上述代码相关标签介绍：

form标签

代码块：

<form action=""></form>

在该form标签内部书写的获取用户的数据都会被form标签提交到后端

label标签

作用：将文字和输入框链接起来

第一种直接讲input框写在label内

<label for="d1">  
            username:<input type="text" id="d1">
</label>

第二种通过id链接即可无需嵌套

<label for="d2">password:</label>
<input type="text" id="d2">

注意：

　　input不跟label关联也没有问题

　　label 和 input都是行内标签

input标签

作用：就类似于前端的变形金刚，通过type属性变形

type属性相关	作用
text	普通文本
password	密文
date	日期
submit	用来触发form表单提交数据的动作
button	就是一个普普通通的按钮本身没有任何的功能但是它是最有用的，学完js之后可以给它自定义各种功能
reset	重置内容
radio	单选
checkbox	多选
file	获取文件也可以一次性获取多个(< input type="file" multiple>)
hidden	隐藏当前input框(钓鱼网站)
name	所有获取用户输入的标签,都应该有name属性(name就类似于字典的key,用户的数据就类似于字典的value)

select标签

作用：默认是单选可以加mutiple参数变多选默认选中selected

<select name="" id="" multiple>
	<option value="">1</option>
	<option value="" selected>2</option>
	<option value="" selected>3</option>
</select>

textarea标签

作用：获取大段文本

<textarea name="" id="" cols="30" rows="10"></textarea>

补充：可以通过maxlength确定最大输入量

验证form表单提交数据

接下来的代码无需掌握，看一下效果即可：

先安装flask框架:
pip3 install Flask

form表单默认提交数据的方式，是get请求，数据是直接放在url后面的

http://127.0.0.1:5000/index/?gender=on&hobby=on

你可以通过method指定提交方式

<form action="http://127.0.0.1:5000/index/" method="post">

form表单提交文件需要注意
1.method必须是post
2.enctype="multipart/form-data"

　　enctype类似于数据提交的编码格式，默认是urlencoded 只能够提交普通的文本数据，formdata就可以支持提交文件数据

<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">

针对用户选择的标签,用户不需要输入内容,但是你需要提前给这些标签添加内容value值,否则会返回on

<p>gender:
            <input type="radio" name="gender" value="male">男
            <input type="radio" name="gender" checked value="female">女
            <input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
            <input type="checkbox" name="hobby" value="basketball">篮球
            <input type="checkbox" checked name="hobby" value="football">足球
            <input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
<p>province：
            <select name="province" id="">
                <option value="sh">上海</option>
                <option value="bj" selected>北京</option>
                <option value="sz">深圳</option>
            </select>
</p>

针对用户输入的标签。如果你加了value 那就是默认值

<label for="d1">username:
	<input type="text" id="d1" name="username" value="默认值">
</label>

disable 禁用
readonly 只读

flask框架创建的服务端代码：

from flask import Flask,request

app = Flask(__name__)

"""
当前url既可以支持get请求又可以支持post请求
如果不默写只能支持get请求
原理：
装饰器当中填入的实参映射到index这个视图函数上面,
然后访问我这个网站的时候，
会执行index这个函数，然后将这个返回值返回给浏览器
"""
@app.route('/index/',methods=['get','post'])
def index():
    print(request.form) # 获取form表单提交过来的非文件数据
    print(request.files) # 获取form表单提交过来的文件数据
    file_obj = request.files.get('myfile')
    file_obj.save(file_obj.name)
    return 'ok'

app.run()

遗留问题(学后补充)：

1、form标签里面的action属性不是直接加/index/ 就可以自动识别服务端的ip和端口号吗，为什么用flask框架搭好服务端如果不在action里放ip和端口号就会报错
2、flask框架里面那个装饰器第一个参数不是放的是url吗，里面放一个/index/ 他会自动补全成host:port/index/这种吗？

查看全文

相关阅读:
OpenCV_Python —— （6）图像色彩空间
 OpenCV_Python —— （5）图像模糊/平滑/滤波
 Java 14 祭出增强版 switch，真香！！
推荐 9 个爱不释手的 JSON 工具！
从 0 开始手写一个 Mybatis 框架，三步搞定！
Java常用的几个Json库，性能强势对比！
Oracle JDK 和 OpenJDK 有什么区别？
极客时间-左耳听风-程序员攻略-UI/UX设计
 OpenCV导向滤波（引导滤波）实现（Guided Filter）代码，以及使用颜色先验算法去雾
 python面向对象小练习

原文地址：https://www.cnblogs.com/Lance-WJ/p/12871010.html