day32 HTML

什么是前端

只要是跟用户打交道的界面都可以称之为前端

# eg：电脑界面， 手机界面，平板界面，

什么是后端？

	eg：python， java，php，go,

    不跟用户直接打交道的都可以称为后端

为什么学前端

为了成为全栈工程师

	前端，后端， 数据库，Linux

但是，前端不会学的特别深， 要求看得懂别人写的一些简单页面和自己搭建一些简单的页面就可以了

前端的学习历程

# 前端三剑客

1. HTML：网页的骨架，没有任何的样式

2. CSS：美化网页，给网页骨架添加样式的

3. JavaScript：就是让网页动起来， 简称js

软件开发架构

C/S架构

B/S架构

在浏览器地址栏输入网址，回车发生了什么事？

1. 浏览器向服务端发起请求

2. 服务器接收客户端的请求

3. 服务端处理客户端的请求，并且返回给浏览器

4. 浏览器根据特定的规则渲染页面

# 要想让浏览器跟很多个服务端进行交互，那么，就一定要遵循一定规则

HTTP协议

"""

	超文本传输协议，用来规定服务端和客户端之间的数据传输格式

"""

# 四大特征：

	1、基于请求响应

    2、基于TCP/IP协议之上的应用层协议

    3、无状态

    	# 不能保存用户的信息

        保存用户信息的一些技术：cookie， session，token。。。。

    4、 短连接/无连接

    		长连接

# 请求数据格式

	 请求首行 （请求方式，路径，版本号）

      请求头  （一大堆kv键值对）

      \r\n

      请求体 （get请求没有请求体，post请求有请求体）

       	# get请求参数传递格式：

        	?k=v&k1=v1&k2=v2...

  # 响应数据格式

	 响应首行 （响应方式）

      响应头  （一大堆kv键值对）

      \r\n

      响应体

  # 响应状态码

	其实就是用一些数字来表示一些复杂的信息

     1xx: 数据提交成功，正在处理，你还可以进行提交

     2xx：200 OK 请求成功

     3xx：重定向

     4xx：404 请求资源不存在， 403:请求的资源没有权限

     5xx：500：服务器内部错误

# 请求方式：

	1. get请求

    	跟服务要数据的

        eg：baidu.com

    2. post请求

    	提交数据， 比如登录，用户名和密码

HTML简介

<h1>hello baby</h1>

<a href='http://www.baidu.com'>click me</a>

<img class="index-logo-src" src="//www.baidu.com/img/flexible/logo/pc/result.png" alt="到百度首页" title="到百度首页">

标签的分类：

	1. 双标签

    2.单标签

HTML的书写位置

1. 在pycharm中新建html文件

2. 新建文本文档，然后修改后缀名为.html

HTML的文档结构

<!DOCTYPE html> # 告诉浏览器这个文件是html文件

<html lang="en"> # language，english

<head>  # head标签中的代码不是用来给用户看的

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body> # body中的内容写什么就显示什么

</body>

</html>

head中常用标签

# 打开html文件的方式：

	1. 在pycharm中点击右上角的浏览器图标

    2. 双击html文件

# <script>

	<title>淘宝</title>

	<script>

        // js代码

        // alert(123)

    </script> # 警示框

	<link rel="stylesheet" href="mycss.css">--> 链接到自己建的css里

    <script src="myjs.js"></script> 链接到自己建的js里

    <meta name="keywords" content="购物平台，生活用品"> # 描述性质的

	<meta name="description" content="手机，电脑，家电"> # 搜索关键字的

body内常用标签

<b>加粗</b>

<i>斜体</i>

<u>下划线</u>

<s>删除</s>

<p>段落标签</p>

<br>：换行

<hr>：水平线

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

# 特殊字符

空格：&nbsp;

>:&gt;

标签的分类

1. 块儿级元素

	 # 独自占一行

     <h1>~<h6> # 标题

        <p></p> #段落

        <div></div> # 定义块级元素

2. 行内元素

	 # 自身文本有多大就占多大

    <b>加粗</b>

    <i>斜体</i>

    <u>下划线</u>

    <s>删除</s>

    <span> </span>

标签的嵌套

# 块儿级元素可以嵌套所有的行内元素，

	p标签虽然是块儿级元素，但是不能嵌套块儿级元素

# 行内元素只能嵌套行内元素，不能嵌套块儿级元素

img标签

<img src="123.png" alt="这是小姐姐丢失了" title="很好看哦" width="423px" height="500px">

src:

    1. 外链地址

    2. 本地地址

title：

	鼠标悬浮时候的提示，

    他是所有标签都有的

width：

	图片的宽度，和高度等比例缩放， 宽高只需要写一个

alt：

	当图片加载失败的时候，显示的信息

a标签

<a href="http://www.baidu.com" target="_blank" title="点我跳转">点我跳转</a> # 超链接

<a href="http://www.baidu.com"target="_blank">点我跳转</a> # 重新打开一个标签

<a href="http://www.baidu.com"target="_blank"title="快点我">点我跳转</a> # 可以在后面加字

target:

    # 新开一个标签打开页面

 href:

    跳转的链接

target：

    1._blank表示在新标签页中打开目标网页

    2._self表示在当前标签页中打开目标网页

列表标签

<ul type="square">

  <li>第一项</li>

  <li>第二项</li>

  <li>第二项</li>

  <li>第二项</li>

  <li>第二项</li>

  <li>第二项</li>

  <li>第二项</li>

  <li>第二项</li>

</ul>

img标签

<img src="123.png" alt="这是小姐姐丢失了" title="很好看哦" width="423px" height="500px">

src:

    1. 外链地址

    2. 本地地址

title：

	鼠标悬浮时候的提示，

    他是所有标签都有的

width：

	图片的宽度，和高度等比例缩放， 宽高只需要写一个

alt：

	当图片加载失败的时候，显示的信息

表格

属性:

    border: 表格边框.

    cellpadding: 内边距

    cellspacing: 外边距.

    width: 像素 百分比.（最好通过css来设置长宽）

    rowspan: 单元格竖跨多少行

    colspan: 单元格横跨多少列（即合并单元格）

<table border="5" cellpadding="10" cellspacing="10">

    <thead>

        <tr>

            <th>ID</th>

            <th>姓名</th>

            <th>年龄</th>

            <th>性别</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td rowspan="2">egon</td> # 占两行

            <td>18</td>

            <td>male</td>

        </tr>

       <tr>

            <td>2</td>

<!--            <td>jason</td>-->

            <td colspan="2">19</td> # 占两列

<!--            <td>male</td>-->

        </tr>

       <tr>

            <td>3</td>

            <td>ly</td>

            <td>20</td>

            <td>female</td>

        </tr>

    </tbody>

</table>

form表单

# 就是可以把用户输入的数据提交到后端

eg：写一个登录页面

action：指定向哪个后端提交数据

	1. 什么都不写，默认提交到当前地址

    2. 全写，http://127.0.0.1:5000/index/

    3. /index/

    	ip:port/index/

 # 上传文件必须满足两个条件：

	1. 请求方式必须是post

    2. 编码方式必须改为：enctype='multipart/form-data'

# 编码方式：

  1. urlencoded

  2. form-data

  3. json

标签的两个重要属性

 # id，不能重复

    <label for="d1">用户名： </label>

 # class：可以重复

<input type="text" id="d1" class="c1 c2 c3">

# 自定义属性

<input type="text"  username="egon">

day32 HTML的更多相关文章

  1. Spark Streaming揭秘 Day32 WAL框架及实现

    Spark Streaming揭秘 Day32 WAL框架及实现 今天会聚焦于SparkStreaming中非常重要的数据安全机制WAL(预写日志). 设计要点 从本质点说,WAL框架是一个存储系统, ...

  2. day32 进程

    上午: # 1 开启子进程 #target #args # if __name__ == '__main__' #start() # 2.其它的方法: #方法: #terminate() #is_al ...

  3. day32

    今日内容 1.基于TCP协议(通信循环) 2.基于TCP协议(连接循环) 3.粘包问题 4.模拟SSH实现远程执行命令 服务器端 ################################### ...

  4. day32——进程、操作系统

    day32 进程的基础 程序 一堆静态的代码文件 进程 一个正在运行的程序进程.抽象的概念 被谁运行? 由操作系统操控调用交于CPU运行 ​ 操作系统 管理控制协调计算机中硬件与软件的关系 操作系统的 ...

  5. javascript DOM,它到底是什么-------Day32

    这一晚上看的我是头疼不已啊,为什么呢? 终究是半路出家,我对javascript的理解仅仅停留在:调用javascript,改变页面样式,元素和实现一些事件的响应,尽管须要的时候可能会用,可是到底使用 ...

  6. Python全栈之路-Day32

    1 类的__slots__ #!/usr/bin/env python # __Author__: "wanyongzhen" # Date: 2017/4/25 # 只能定义__ ...

  7. Day3-2 函数之递归

    递归 定义:一个函数在 内部调用自己,就称为递归. # 如何让10不停的除以2,直到不能除为止. n = 10 while True: n = int(n /2) print(n) if n == 0 ...

  8. day32 process模块用法

    昨日作业: 服务端: 服务端: from socket import * from multiprocessing import Process def server(ip,port): server ...

  9. day32基于tcp协议的远程执行命令

    客户端 from socket import *import structimport json client = socket(AF_INET, SOCK_STREAM)client.connect ...

随机推荐

  1. 通过两个位置的经纬度坐标计算距离（C#版本）

    /// <summary> /// 通过地图上的两个坐标计算距离(C#版本) /// Add by 成长的小猪(Jason.Song) on 2017/11/01 /// http://b ...

  2. 一、spring 环境搭建

    一.springtoolSuite4下载 1.概述 Spring Tools 4 是适用于您最喜欢的编码环境的下一代 Spring 工具.它主要从头开始重建,为开发基于 Spring 的企业应用程序提 ...

  3. 攻防世界 WEB 高手进阶区 unserialize3 Writeup

    攻防世界 WEB 高手进阶区 unserialize3 Writeup 题目介绍 题目考点 PHP反序列化 __wakeup漏洞 Writeup 题名 unserialize 是反序列化函数名 了解一 ...

  4. Kali-Linux 2020如何设置中文

    话不多说,直接上步骤 首先,想要修改系统默认语言普通用户是办不到的,这个时候就需要切换为root用户在终端输入 sudo su(切换用户指令,后面不加用户名就默认切换为root) 输入管理员密码后就像 ...

  5. Windows内核中的CPU架构-8-任务段TSS(task state segment)

    Windows内核中的CPU架构-8-任务段TSS(task state segment) 任务段tss(task state segment)是针对于CPU的一个概念. 举一个简单的例子,你一个电脑 ...

  6. cgdb | 一起边看源码边调试gdb吧

    简介 cgdb是一款轻量级的基于gdb的命令行可视化工具,关系大致如下: 尽管gdb本身可以通过layout src的命令显示源码布局,但是其功能还是过于简陋. 使用cgdb并不需要你重新去学习过多额 ...

  7. ajax的post请求获取kfc官网数据

    # _*_ coding : utf-8 _*_# @Time : 2021/11/2 13:45# @Author : 秋泊酱 # 1页 # http://www.kfc.com.cn/kfccda ...

  8. python将字符串转换成对应的python数据类型--eval和json.loads(),json.dumps()

    eval()和json.loads() 都可以将字符串转换成对应的python数据类型,举个字典的例子,同样适合其他数据类型元组.列表.集合. In [3]: ss = '{"a" ...

  9. [源码解析] PyTorch 分布式(8) -------- DistributedDataParallel之论文篇

    [源码解析] PyTorch 分布式(8) -------- DistributedDataParallel之论文篇 目录 [源码解析] PyTorch 分布式(8) -------- Distrib ...

  10. PAT A1020——已知后序中序遍历求层序遍历

    1020 Tree Traversals Suppose that all the keys in a binary tree are distinct positive integers. Give ...