• 前端day01


    软件开发架构

    ​ c/s
    ​ b/s
    ​ b/s本质也是c/s

    统一接口(**)

    web服务的本质

    ​ 请求 响应
    ​ 浏览器输入网址,回车发生了哪些事
    ​ 1 朝着指定的服务器地址发送请求
    ​ 2 服务端接收请求,并处理
    ​ 3 返回相应的响应
    ​ 4 浏览器接收并渲染出好看的页面给用户看

    请求方式
    ​ 1.get请求
    ​ 朝服务器要资源
    ​ eg:敲www.baidu.com

    	2.post请求
    		朝服务器提交数据
    		eg:登录功能
    

    总分总

    HTTP协议

    ​ 超文本传输协议
    ​ 规定了服务端与浏览器数据传输的数据格式

    1四大特性
    ​ 1 基于TCP/IP作用于应用层之上的协议
    ​ 2 基于请求响应
    ​ 请求对应响应

    3 无状态
    	不保存客户状态
    	
    4 无连接
    	长连接	websocket	聊天室
    

    2 数据格式
    请求格式
    请求首行(请求方式 协议版本)
    请求头(一大堆K:V键值对)

    	请求体(敏感信息 密码 身份证号)
    
    响应格式
    	响应首行(请求方式	协议版本)
    	响应头(一大堆K:V键值对)
    	
    	响应体(给用户看的数据)
    

    3 响应状态码
    用数字来表示一串文字需要表达的意思
    1xx:服务端已经成功接收到了你的请求,正在处理,你可以继续提交其他数据
    2xx:服务端成功响应了响应的数据(200)
    3xx:重定向
    4xx:(404请求资源不存在)(403 你当前不符合某一些条件,无法正常访问)
    5xx:服务器内部错误(500)

    HTML
    超文本标记语言

    文件的后缀名
    文件的后缀名是给人看的,对于计算机来说,全都是二进制
    之所以不同的后缀名有不同的功能,那是我们程序员自己认为的定制的

    注释是代码之母

    HTML的注释

    ​ <!---单行注释---->

    <!----
    多行注释
    多行注释
    多行注释
    多行注释
    多行注释
    ------->
    

    我们在搭建页面的时候,通常会利用注释来划分区域

    HTML的文档结构

    	<head><head>不是给人看的,给浏览器看的
    	<body><body>body内的代码才给人看的
    <HTML>
    

    标签的分类

    ​ 1 双标签(h1 ,a)
    ​ 2 自闭合标签(img)

    head内常用的标签

    ​ title 定义网页标题
    ​ style 内部支持写css样式代码
    ​ link 引入外部css样式文件
    ​ script 内部可以直接写js代码,也可以引入外部js文件
    ​ meta 定义网页源信息

    body内常用标签

    ​ h1~h6 标题标签
    ​ p 段落标签,一个p就是一行内容
    ​ s 删除线
    ​ b 加粗线
    ​ u 下划线
    ​ i 斜体
    ​ br 换行
    ​ hr 一条分割线

    body内特殊符号
    ​ 空格
    ​ & &
    ​ ¥ ¥

    < <
    © ©
    ® ®

    标签的分类

    ​ 1 块级标签 h1~h6 p br hr div
    ​ 独占一块
    ​ 1.块级标签内可以嵌套其它块级和行内标签
    ​ 2 注意:p标签虽然是块级标签,但是他的内部不能嵌套任何块级标签,只能嵌套行内标签(**)

    2 行内标签	s i u b span
    	内部文本多大,就占多大
    	行内不能嵌套行内和块级
    

    标签通常有两个属性
    id 就类似于是身份证号,每一个标签都应该有id值,并且在同一个html文档中,标签的id不能重复
    class 类属性,就有点类似于面向对象的继承 class= 'c1 c2 c3'你这个标签就会拥有c1,c2,c3的所有样式

    body内重要的标签
    div 一块区域,你可以往这块区域填写任何内容
    span
    div和span是前期构建网页的基本骨架

    a 链接标签
    1 跳转功能 href参数控制跳转的地址
    这个地址如果在你的机器上如果没有被点击过那么默认就是蓝色
    只要点过一次之后,之后的颜色都是紫色

    a标签默认是当前窗口跳转
    你可以指定新建窗口打开
    target = '_self'
    target = '_blank'
    
    2 锚点功能
    	给a标签设置id值
    	然后在href中书写对应的a标签id值,点击即可跳转到对应的位置
    	<a href="" id="a1">文章开头</a>
    	<div style="background-color: red;height: 1000px"></div>
    	<div style="background-color: green;height: 1000px"></div>
    	<div style="background-color: orange;height: 1000px"></div>
    	<a href="" id="a2">文章中部</a>
    	<div style="background-color: black;height: 1000px"></div>
    	<div style="background-color: green;height: 1000px"></div>
    	<div style="background-color: orange;height: 1000px"></div>
    	<a href="#a1">回到顶部</a>
    	<a href="#a2">回到中部</a>
    

    img) 图片标签
    src
    1 图片地址,网上的地址也可以是你的本图片地址
    2 url(网址) 自动朝该网址发送get请求,获取图片资源

    alt
    	当图片加载不出来的时候,展示提示信息
    	
    title
    	鼠标悬浮上去之后展示的提示信息
    	
    width和height
    	这两个参数,你只需要设置一个就可以默认就是等比例缩放
    	两个都调整的话,图片就会失真
    

    列表标签

    ​ 无序列表
    ​ ul
    ​ li

    type参数
    	disc(实心圆点,默认值)
    	circle(空心圆圈)
    	square(实心方块)
    	none(无样式)
    

    有序列表(了解)
    ol
    li

    type参数
    
    	1 数字列表,默认值
    	A 大写字母
    	a 小写字母
    	Ⅰ大写罗马
    	ⅰ小写罗马
    

    标题列表(了解)
    dl
    dt 小标题
    dd 小章节

    表格标签

    ​ 展示数据一般都用到表格标签

    	<table>
    		<thead>
    			<tr>
    				<th>username</th>
    				<th>password</th>
    				<th>hobby</th>
    				<th>is_delete</th>
    			</tr>  一个tr就表示一行
    		</thead>
    		<tbody>
    			<tr>
    				<td>jason</td>
    				<td>123</td>
    				<td>study</td>
    				<td>0</td>
    			</tr>
    		</tbody>
    	</table>
  • 相关阅读:
    Linux 下升级python和安装pip
    All of Me
    MangataのACM模板
    HDU1517 A Multiplication Game (博弈论+思维)
    Home_W的握手问题(思维+打表)
    Home_W的几何题 (计算几何)
    stone (组合数学 + Lucas定理)
    随笔分类
    HDU 5586 Sum (预处理 + 动态规划)
    POJ2104 K-th Number (平方分割 + 二分)
  • 原文地址:https://www.cnblogs.com/1012zlb/p/11845361.html
Copyright © 2020-2023  润新知