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. 求1+2+3...+n 牛客网 剑指Offer

    求1+2+3...+n 牛客网 剑指Offer 题目描述 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). ...

  2. reorder-list leetcode C++

    Given a singly linked list L: L 0→L 1→-→L n-1→L n, reorder it to: L 0→L n →L 1→L n-1→L 2→L n-2→- You ...

  3. songwenxin

    # -*- coding: utf-8 -*- import wx from modelmngr_frame import MyFrame1 ############################# ...

  4. JAVA笔记1__基本数据类型/输入输出/随机数/数组

    /**八种基本数据类型 boolean byte short int long char float double */ public class test1{ public static void ...

  5. linux下c语言实现简单----线程池

    这两天刚好看完linux&c这本书的进程线程部分,学长建议可以用c语言实现一个简单的线程池,也是对线程知识的一个回顾与应用.线程的优点有好多,它是"轻量级的进程",所需资源 ...

  6. Spark整合Hive

    spark-sql 写代码方式 1.idea里面将代码编写好打包上传到集群中运行,上线使用 spark-submit提交 2.spark shell (repl) 里面使用sqlContext 测试使 ...

  7. FZU_DS_2019_SequenceList

    单选题 2-1   数组A[1..5,1..6]每个元素占5个单元,将其按行优先次序存储在起始地址为1000的连续的内存单元中,则元素A[5,5]的地址为:  A.1120      B.1125   ...

  8. SQL Server2019数据库备份与还原脚本，数据库可批量备份

    前言 最近公司服务器到期,需要进行数据迁移,而数据库属于多而繁琐,通过图形化界面一个一个备份所需时间成本很大,所以想着写一个sql脚本来执行. 开始 数据库单个备份 数据库批量备份 数据库还原 数据库 ...

  9. 在 Kubernetes 上安装 Gitlab CI Runner Gitlab CI 基本概念以及 Runner 的安装

    简介 从 Gitlab 8.0 开始,Gitlab CI 就已经集成在 Gitlab 中,我们只要在项目中添加一个.gitlab-ci.yml文件,然后添加一个Runner,即可进行持续集成.在介绍 ...

  10. 保姆级别的vue + ElementUI 搭建后台管理系统教程

    vue + ElementUI 搭建后台管理系统记录 本文档记录了该系统从零配置的完整过程 项目源码请访问:https://gitee.com/szxio/vue2Admin,如果感觉对你有帮助,请点 ...