前端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>前端day01的更多相关文章
- day01 前端bootstrap框架
day01 django框架之bootstrap框架 今日内容概要 前端框架之bootstrap 该框架支持cv编写前端页面 利用socket模块编写一个简易版本的web框架 利用wsgiref模块编 ...
- Day01 对前端的初步了解
了解了工作性质以及流程 产品经理+UI+前端程序员+后端程序员+测试人员 了解了工作会做到的项目 pc端项目,后台管理系统,APP,小程序,移动端网页 了解了后续需要学到的课程 HTML+CSS Ja ...
- 前端练习错题day01
<1>.css盒子模型中,padding是透明的,这一部分可以显示背景. <2>.注意&&符号左右条件先后顺序,可能会报错. <3>.在 HTML5 ...
- 2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01
HTML5 第一天 一.什么是 HTML5 1.HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一 ...
- Jquery day01
day01: 基础--选择器.属性和CSS.文档处理 day02: 高级--筛选.事件.效果.ajax jQuery介绍 JS类库 JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用 ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 总结：Mac前端开发环境的搭建（配置）
新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...
随机推荐
- 第一解出的pwn题
虽然题目不难,但是 是我第一次做出的pwn题,得写下. __int64 sub_4007E6() { char s1; // [sp+0h] [bp-30h]@1 memset(&s1, , ...
- H3C 交换机设置本地用户和telnet远程登录配置 v7 版本
H3C 交换机设置本地用户和telnet远程登录配置 v7版本 一.配置远程用户密码与本地用户一致 [H3C]telnet server en //开启Telnet 服务 [H3C]local-u ...
- wordpress开源小程序
wordpress多端开源小程序正式发布了,目前支持微信/QQ/百度/今日头条. 目前我们的开源小程序,已经建立了微信QQ交流群,需要的可以加下,微信添加hackdex(备注开源拉你入群),QQ群:7 ...
- cenos7搭建gitlab
git.github和gitlab的区别 git:是一种版本控制系统,是一个命令,是一种工具 gitlib:是基于实现功能的开发库 github:是一个基于git实现的在线代码仓库软件 gitlib可 ...
- 【NHOI2018】扫雷完成图
[题目描述] 扫雷游戏完成后会显示一幅图,图中标示了每个格子的地雷情况.现在,一个 n * n 方阵中有 k 个地雷,请你输出它的扫雷完成图. [输入数据] 输入共 k+1 行: 第 1 行为 2 个 ...
- 《手把手教你》系列练习篇之3-python+ selenium自动化测试（详细教程）
1. 简介 前面介绍了,XPath, id , class , link text, partial link text, tag name, name 七大元素定位方法,本文介绍webdriver ...
- Kotlin实战案例：带你实现RecyclerView分页查询功能（仿照主流电商APP，可切换列表和网格效果）
随着Kotlin的推广,一些国内公司的安卓项目开发,已经从Java完全切成Kotlin了.虽然Kotlin在各类编程语言中的排名比较靠后(据TIOBE发布了 19 年 8 月份的编程语言排行榜,Kot ...
- ES集群操作原理
路由 当你索引一个文档,它被存储在单独一个主分片上.Elasticsearch 是如何知道文档属于哪个分片的呢?当你创建一个新文档,它是如何知道是应该存储在分片 1 还是分片 2 上的呢? 进程不能是 ...
- Activiti工作流框架学习（一）之通用数据表详细介绍
文/朱季谦 Activiti工作流引擎自带了一套数据库表,这里面有一个需要注意的地方: 低于5.6.4的MySQL版本不支持时间戳或毫秒级的日期.更糟糕的是,某些版本在尝试创建此类列时将引发异常,而其 ...
- PHP安装sodium加密扩展
1.为什么会用到sodium加密扩展? 最近在做微信服务商相关的开发,主要用的的接口为微信小微商户进件接口.在请求相关接口中,需要对一些敏感字段进行加密,加密过程见https://pay.weixin ...