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. objdump--反汇编查看

    转载:objdump命令_Linux objdump 命令用法详解:显示二进制文件信息 (linuxde.net) objdump命令 编程开发 objdump命令是用查看目标文件或者可执行的目标文件 ...

  2. poj 2724 Purifying Machine（二分图最大匹配）

    题意: 有2^N块奶酪,编号为00...0到11..1. 有一台机器,有N个开关.每个开关可以置0或置1,或者置*.但是规定N个开关中最多只能有一个开关置*. 一旦打开机器的开关,机器将根据N个开关的 ...

  3. 为 Android 编译并集成 FFmpeg 的尝试与踩坑

    前言与环境说明 随着 FFmpeg.NDK 与 Android Studio 的不断迭代,本文可能也会像我参考过的过期文章一样失效(很遗憾),但希望本文中提到的问题排查以及步骤说明能够帮到你,如果发现 ...

  4. java语言方法中定义final类型的入参有什么用意？

    无论参数是基本数据类型,还是引用数据类型,只要加了final,不好意思,该参数不可以再赋值(实参传进来给形参,就相当于初始化完成).可以防止在方法里面不小心重新赋值,造成一些不必要的麻烦!!!参考:h ...

  5. 2021CISCN 华南赛区WEB wp

    CISCN 华南区域赛 太菜了 我躺平了 easy_seri <?php error_reporting(0); highlight_file(__FILE__); class Test{ pu ...

  6. Azure Virtual NetWoker（一）对等互连网络

    一,引言 Virtual NetWork Peering 可以无缝连接两个 Azure Virtual NetWork,Virtual NetWork Peering 直接的网络流量是专用的.在实际项 ...

  7. java自定义序列化

    自定义序列化 1.问题引出 在某些情况下,我们可能不想对于一个对象的所有field进行序列化,例如我们银行信息中的设计账户信息的field,我们不需要进行序列化,或者有些field本省就没有实现Ser ...

  8. Effective C++ 总结笔记（三）

    三.资源管理 13．以对象管理资源 1.为了防止资源泄漏,请使用RAII对象,在构造函数里面获得资源,并在析构函数里面释放资源. 2. 引用计数型智慧指针(RCSP):持续追踪多少个指针指向该资源,无 ...

  9. Spark面试题（五）——数据倾斜调优

    1.数据倾斜 数据倾斜指的是,并行处理的数据集中,某一部分(如Spark或Kafka的一个Partition)的数据显著多于其它部分,从而使得该部分的处理速度成为整个数据集处理的瓶颈. 数据倾斜俩大直 ...

  10. java-TCP协议发送和接收数据

    TCP协议接收数据的步骤: A:创建接收数据的Socket对象 创建对象的时候要指定端口 B:监听客户端连接 等待客户端连接 C:获取Socket对象的输入流(字节流) D:读数据,并显示在控制台 E ...