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. wpa_supplicant启动出错rfkill: Cannot open RFKILL control device

    在板子是调试网络,千辛万苦把wpa_supplicant及其依赖都移植编译进来了,在板子上调试启动的时候启动报错了 D/wpa_supplicant( 1152): wpa_supplicant v2 ...

  2. vector之erase和迭代器

    C++开发中使用vector时非常方便的,但是也是需要非常小心的,最近在使用容器删除某个元素的时候,测试结果出现了异常 /* vector erase test*/ int testVector() ...

  3. 转载: VIVADO的增量综合流程

    http://xilinx.eetrend.com/content/2019/100044286.html 从 Vivado 2019.1 版本开始,Vivado 综合引擎就已经可以支持增量流程了.这 ...

  4. Luogu P1525 [NOIp2010提高组]关押罪犯 | 并查集

    题目链接 这一道题,我用了并查集来做.在此题中,并查集的作用就是:将同一个监狱里的罪犯合并到一起. 思路:将每对罪犯之间的怨气值从大到小排序,再依次把他们分到不同的两个监狱里,当发现这一对罪犯已经在同 ...

  5. 面试官：JavaScript如何实现数组拍平（扁平化）方法?

    面试官:JavaScript如何实现数组拍平(扁平化)方法? 1 什么叫数组拍平? 概念很简单,意思是将一个"多维"数组降维,比如: // 原数组是一个"三维" ...

  6. cm1 逆向分析

    目录 cm1 逆向分析 前言 查壳分析 逆向分析 代码分析 qmemcpy分析 sub_401020函数分析 sub_401050函数分析 加密算法分析 POC代码编写 cm1 逆向分析 前言 还是先 ...

  7. Spring Cloud Alibaba环境搭建

    前言:Spring Cloud Alibaba是目前主流的分布式微服务架构,本文主要讲解了在IDEA中如何搭建Spring Cloud Alibaba环境,以及介绍Spring Cloud Aliba ...

  8. jquery 实现 <imput>标签 密码框显示/隐藏密码功能

    1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...

  9. MarkdownPad2弹窗显示HTML Rendering Error(HTML 渲染错误)的解决办法

    MarkdownPad2弹窗显示HTML Rendering Error(HTML 渲染错误)的解决办法 我在打开.md文件的时候,出现以下错误: 解决方式:下载Awesomium SDK并安装,重启 ...

  10. js添加事件监听的方式与this

    js添加事件监听与this js添加事件监听的方式与this 在标签中调用自定义函数 DOM0级事件处理程序 DOM2级事件处理程序 this 代表谁? js添加事件监听的方式与this <di ...