前端-HTML

时间：2021-06-17 12:17:20 阅读：13 评论：0 收藏：0 [点我收藏+]

前端概念

前端定义

与用户直接交互的操作界面
电脑界面、手机界面、平板界面

后端定义：类似于服务端后台处理逻辑，不直接和用户打交道

前端组成

HTML：网页骨架，没有任何样式内容
CSS：给网页骨架添加各种样式，美观界面外观
JS：控制网页的动态效果动作

软件开发架构

cs 客户端服务端
bs 浏览器服务端本质也是cs

浏览器窗口输入网址回车

浏览器向服务端发送请求
服务端接收请求(eg:请求百度首页)
服务端返回相应的响应(eg:返回一个百度首页)
浏览器接收响应,根据特定规则渲染页面展示给用户看

Q：如何实现浏览器跟多个不同的服务端之间进行数据交换？

A：制定一个统一标准，HTTP协议

HTTP协议

超文本传输协议,用来规定服务端和浏览器(客户端)之间的数据交互格式

服务端遵循HTTP协议，实现与浏览器(客户端)进行数据交换

四大特性

基于请求响应
基于TCP/IP,作用于应用层之上的协议
无状态
- 不保存用户的信息
- HTTP协议是无状态的,后续出现了一些专门用来记录用户状态的技术
无/短链接
- 请求来一次，响应回一次，交互之后没有任何链接和联系

请求方式

get请求
- 朝服务端请求数据 (可以携带参数的，只是参数不是放在请求体里面的,放在url链接中)
- 输入网址获取对应的内容
post请求
- 朝服务端提交数据
- 用户登陆输入用户名和密码之后,提交到服务端后端做身份校验

请求数据格式

请求首行(标识HTTP协议版本，当前请求方式)
请求头 (K,V键值对)
(\r\n 不能省略)
请求体 (get没有 post有存放的是post请求提交的隐私数据)

# HTTP请求数据格式

请求首行
b‘GET / HTTP/1.1\r\n

请求头
Host: 127.0.0.1:8081\r\n
Connection: keep-alive\r\n
sec-ch-ua: "Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"\r\n
sec-ch-ua-mobile: ?0\r\n
Upgrade-Insecure-Requests: 1\r\n
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36\r\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\r\n
Sec-Fetch-Site: none\r\n
Sec-Fetch-Mode: navigate\r\nSec-Fetch-User: ?1\r\n
Sec-Fetch-Dest: document\r\n
Accept-Encoding: gzip, deflate, br\r\n
Accept-Language: zh-CN,zh;q=0.9\r\n
Cookie: csrftoken=RioGIvwt2RVpX0EeByOQcqSvIUQua7LiJYjN0jthxpukbRdBPNVh9yr9JRoPa7wk\r\n
\r\n
请求体
‘

响应数据格式

响应首行(标识HTTP协议版本，响应状态码)
响应头 (K,V键值对)
(\r\n 不能省略)
响应体 (返回给浏览器展示给用户看的数据)

响应状态码

用一串简单的数字表示一些复杂的状或者描述性信息
- 1XX: 服务端已经成功接收到数据，可以继续提交额外的数据
- 2XX: 服务端成功响应了请求的数据(200 OK请求成功)
- 3XX：重定向(当访问一个需要登陆之后才能访问的页面，会发现自动跳转到登陆页面)
- 4XX：请求错误
  - 403:当前请求不合法或者不符合访问资源的条件
  - 404:请求资源不存在
- 5XX：服务器内部错误(500)

import socket

‘‘‘
# link.html
<h1>hello baidu</h1>
<a href="https:www.baidu.com"> click me go to baidu</a>
‘‘‘
server = socket.socket()
server.bind((‘127.0.0.1‘, 8080))
server.listen(5)
while True:
    conn, addr = server.accept()
    data = conn.recv(1024)
    print(data)
    
    # 响应首行(标识HTTP协议版本，响应状态码)
    conn.send(b‘HTTP/1.1 200 OK\r\n\r\n‘)
    	
    # conn.send(b‘hello web\n‘)
    
    conn.send(b‘<h1>hello python</h1>\n‘)
    with open(‘my_html/link.html‘, ‘rb‘) as f:
        conn.send(f.read())
        
    conn.close()

HTML

简介

超文本标记语言
遵循HTML语法，使浏览器能够渲染出网页界面

注释

<!--单行注释-->

<!--
多行注释1
多行注释2
多行注释3
-->

文档结构

<!DOCTYPE html>
<html lang="en">

head内部的标签:定义浏览器配置信息
<head>
</head> 

body内部的标签:浏览器渲染主要内容
<body>
</body>

</html>

标签书写

id值
- 类似于标签的身份证号，在同一个html页面上的id值不能重复
class值
- 类似于面向对象的继承，一个标签可以继承多个class值
自定义属性

    <p id="p1" class="p1" username="jason" password="123456"></p>

head内标签

title

<head>
    <title>填写网页标题</title>
</head>

style

<head>
    <style>
      <!-- 填写CSS代码-->
        h1{
            color:gold;
        }
    </style>
</head>

link

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

script

<head>
  
<!--    书写js代码-->
    <script>
        alert(‘hello‘)
    </script>
  
<!--    引入外部js文件-->
    <script src="myjs.js"></script>
  
</head>

meta

<head>

<!--    2秒后跳转到对应网址-->
    <meta http-equiv="refresh" content="2, URL=http://www.baidu.com">

<!--网页推荐 当使用浏览器搜索时,只要输入了keywords后面制定当关键字，网页都有可能被搜索出来-->
    <meta name="keywords" content="meta总结">

<!--网页描述信息-->
    <meta name="description" content="hello html">

</head>

body内标签

标签分类

块级标签
- 独占一行
- h标签 p标签 div标签
行内标签
- 自身文本多大就占用多大内容空间
- i、u、s、b、span标签

基本标签

<body>
    <h1>标题标签1</h1>
    <h2>标题标签2</h2>
    <h3>标题标签3</h3>
    <h4>标题标签4</h4>
    <h5>标题标签5</h5>
</body>

p
- 只能嵌套行内标签，不能嵌套块级标签，就是嵌套了，浏览器渲染时会自行解开

<body>
    <p>段落标签1</p>
    <p>段落标签2</p>
    <p>段落标签3</p>
    <p>段落标签4</p>
</body>

常用标签

div
- 划分区域
- 可以嵌套任意的块级标签和行内标签

<body>
    <div>
        <p></p>
        <span></span>
    </div>
</body>

span
- 普通文本

<body>
    <span>hello web</span>
</body>

img
- 图片标签

<body>
    <img src="图片地址" alt="图片加载不出来时的提示信息" title="当鼠标悬浮到图片之上时的提示信息" height="800px" width="800px">
</body>

<body>
    <a href="链接网址">链接提示信息(eg:点我跳转)</a>
</body>

<body>
    <a href="链接网址" target="_blank">链接提示信息(eg:点我跳转)</a>
    <a href="链接网址" target="_self">链接提示信息(eg:点我跳转)</a>
</body>

锚点功能

<body>
    <a href="" id="d1">顶部</a>
    <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>
</body>

列表标签

无序列表

ul>li*3 + Tab


实心圆点
<body>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
   </ul>
</body>

空心圆点
<body>
   <ul type="circle">
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
   </ul>
</body>


实心钜形
<body>
   <ul type="square">
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
   </ul>
</body>

页面布局 排版一致的几行数据基本使用

有序列表

<body>
    <ol type="" start="">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</body>

标题列表

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

表格标签

<body>
    <table border="1">
        <thead>
            <tr>
                <th>username</th>
                <th>password</th>
                <th>hobby</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>jason</td>
                <td>123456</td>
                <td>run</td>
            </tr>
            <tr>
                <td>jack</td>
                <td>123456</td>
                <td>ball</td>
            </tr>
        </tbody>
    </table>
</body>

 <td colspan="2">jack</td>
 <td rowspan="2">123456</td>

form表单
- 获取前端用户输入的内容基于网络发送给后端服务器

action 
1.不写，默认朝当前页面所在的url提交数据
2.写全路径：https:www.baidu.com 朝百度服务端提交数据
3.写路径后缀：action=‘/index’ 自动识别当前服务端的ip和端口拼接到前面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <h1>注册页面</h1>
    <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
        <p>
            <label for="d1">
            username:<input type="text" id="d1" name="username">
            </label>
        </p>
        <p>
            <label for="d1">
            password:<input type="password" id="d2" name="password">
            </label>
        </p>
        <p>
            <label for="d1">
            brithday:<input type="date" id="d3">
            </label>
        </p>
        <p>gender:
            <input type="radio" name="gender" value="男">男
            <input type="radio" name="gender" value="女">女
        </p>
        <p>province1:
            <select name="province2" >
                <option value="zhuhai">珠海</option>
                <option value="shengzhen">深圳</option>
            </select>
        </p>
        <p>province2:
            <select name="province2" >
                <optgroup label="珠海">
                    <option value="doumeng">斗门</option>
                    <option value="xiangzhou">香洲</option>
                    <option value="gongbei">拱北</option>
                </optgroup>
                <optgroup label="深圳">
                    <option value="longhua">龙华</option>
                    <option value="baoan">宝安</option>
                    <option value="futian">福田</option>
                </optgroup>
            </select>
        </p>
        <p>
            <input type="file" multiple name="myfile">
        </p>
        <p>自我介绍
            <textarea name="info" id="" cols="30" rows="10" maxlength="20"></textarea>
        </p>

        <input type="submit" value="注册">
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <button>click</button>
    </form>
</body>

</html>

form表单提交数据

from flask import Flask, request
app = Flask(__name__)
@app.route(‘/index/‘, methods=[‘GET‘, ‘POST‘])
def index():
    print(request.form)
    print(request.files)
    file_obj = request.files.get(‘myfile‘)
    print(file_obj.name)
    file_obj.save(file_obj.name)
    return ‘OK‘
app.run()

其他标签

<body>
    <b>加粗</b>
    <i>斜体</i>
    <br><!--    换行-->
    <u>下划线</u>
    <s>删除线</s>
    <hr> <!--    横线分隔-->
</body>

特殊符号

&nbsp; 空格
&gt;   >
&lt;   <
&amp;  &
&yen;  ￥
&copy; ?
&reg;  ?

前端-HTML

原文：https://www.cnblogs.com/zhangjianzhao/p/14892662.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)