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. Linux修改bashrc

    .bashrc是一个隐藏的文件,要打开并修改该文件需要: (1) 查看:ll -a 找到文件 .bashrc: (2) 打开:vi .bashrc (或者 vim .bashrc) 打开文件: (3) ...

  2. python 模块 hashlib（提供多个不同的加密算法）

    hashlib是涉及安全散列和消息摘要,提供多个不同的加密算法借口,如SHA1.SHA224.SHA256.SHA384.SHA512.MD5等. import hashlib m = hashlib ...

  3. 测试开发【提测平台】分享13-远程搜索和路由$route使用实现新建提测需求

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 本篇继续提测平台开发,按惯例先给出学习的思维导图,以便快速了解学习知识和平台功能实现的重点. 基本知识点学习 远程搜索 显示的数据通过输入 ...

  4. 深入剖析Redis客户端Jedis的特性和原理

    一.开篇 Redis作为目前通用的缓存选型,因其高性能而倍受欢迎.Redis的2.x版本仅支持单机模式,从3.0版本开始引入集群模式. Redis的Java生态的客户端当中包含Jedis.Rediss ...

  5. N 种仅仅使用 HTML/CSS 实现各类进度条的方式

    本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式,通过本文,你可能可以学会: 通过 HTML 标签 <meter> 创建进度条 通过 HTML 标签 &l ...

  6. ☕【Java技术指南】「序列化系列」深入挖掘FST快速序列化压缩内存的利器的特性和原理

    FST的概念和定义 FST序列化全称是Fast Serialization Tool,它是对Java序列化的替换实现.既然前文中提到Java序列化的两点严重不足,在FST中得到了较大的改善,FST的特 ...

  7. github上传和删除文件（三）

    上传文件: git init git add * git commit -m "description" //git remote rm origin 或查看当前 git remo ...

  8. Django 中间件 详细总结

    一.什么是中间件 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不好会影 ...

  9. mysqld：未被识别的服务(解决方法)

    启动Mysql:sudo service mysqld start 执行该命令时,提示错误   mysqld:未被识别的服务,如图 解决办法如下: 1·.首先要找到 mysql.server 文件 命 ...

  10. 服务端渲染技术NUXT

    什么是服务端渲染 ​ 服务端渲染又称SSR (Server Side Render),是在服务端完成页面的内容,而不是在客户端通过AJAX获取数据. 服务器端渲染(SSR)的优势主要在于:更好的 SE ...