前端回顾

前端回顾

前端就是展示给用户并且与用户进行交互的操作界面。

前端包括包括三部分：

html:网页的骨架，没有任何样式，比较丑
css:相当于一些装饰品，给骨架添加样式。
js：控制网页的动态效果。

前端也有很多框架，只需要按照固定的语法进行调用即可。

基础知识

软件的开发架构分为两种：

CS：拥有客户端和服务端。
BS：用浏览器代替客户端，其本质也是BS架构，但是客户端不需要我们自己写。

忽略掉进行域名解析的过程，当我们在浏览器的窗口中输入网址后的过程：

浏览器向服务器发出请求
服务端接受请求
服务端返回响应。
浏览器接受响应，然后将数据按照特定的规则进行渲染，展示给用户。

如果要想浏览器当做很多服务端的客户端，那么就需要浏览器熟练掌握各种各样的服务端的规则，对于浏览器来说压力很大，因此，浏览器决心变得傲娇：你要是想让我给你打工（当做客户端），那么你就遵守我的规则，不然的话，不好意思了，你自己去开发自己的客户端吧。因此，产生了浏览器制定的协议。

HTTP协议

首先说一下HTTP协议。

它是超文本传输协议，用来规定服务端和浏览器之间的数据交互的格式，有四大特性：

基于请求响应。
基于TCP\IP作用于应用层之上的协议
无状态：不保存用户状态信息。脸盲症重度患者，即使见你千百遍，依旧像是从未见。
无链接/短链接：请求来就响应，响应完就结束。

既然是基于请求响应的，那肯定也都有各自的请求响应的数据格式。

请求数据格式 = 请求首行 + 请求头 + 空行 + [请求体]

1. 请求首行：当前请求方式 url和HTTP版本号，如 GET /index/ HTTP/1.1

	当前请求方式在HTTP/1.1中有8种，只学了get和post最基本的请求方式。

    	url:统一资源定位符，可以理解为网址

    	get:请求指定的页面，要求服务端将请求的url页面在响应的时候返回。地址中?后可添加传送数据，但是一般只能传送1024个字符，不能太大。

        post:浏览器可以通过post请求将大量数据发送给服务端，无大小限制。

2. 请求头：主要由大量键值对组成，包含客户端的一些请求信息

	如：User-Agent:浏览器类型。

3. 空行

	最后一个请求头之后使一个空行，发送回车符和换行符，主要是作为标识，告诉服务端请求头结束了

4. 请求体：主要在post中使用，get请求没有。一般post适用于请求展示数据时候使用

响应数据格式 = 响应首行 + 响应头 + 空行 + 响应体。

1. 响应首行：服务器HTTP协议版本 响应状态码 状态码的文本描述，例：HTTP/1.1 200 OK

	状态码是由三位数字组成的，代表某些固定含义

    	1XX:表示请求已被服务端接受，继续处理。

        2XX：请求已被成功接受理解。

        3XX：重定向，要完成请求需要完成某些前置条件

        4XX:客户端错误，请求有错误，如资源不存在（404）等等

        5XX:服务端炸了，服务端着火了等等，就是服务端不能工作了

2. 响应头：大量键值对

3. 空行

4. 响应体：返回的是服务端返回的数据。

认识HTML

HTML是一种用于创建网页的标记语言，并不是编程语言。本质就是浏览器识别的格式，我们按照该格式书写，然后浏览器能认识并加以渲染，达到我们想要的效果。

注意：不同的浏览器对相同的标签有不一样的认识，这里是浏览器的兼容问题。

HTML组成

HTML主要是由4部分组成：

	1.<!DOCTYPE html>:声明为html5的文档

    2.<html></html>:是文档的开始和结束标志。其余三部分也是在这个标签内。

    3.<head></head>:内部数据不会再页面上展示，只是定义一些配置让浏览器识别。

    4:<body></body>:被浏览器渲染给用户看的数据内容。

其实1和2是第一层结构，而3和4是在2内部定义的。

结构如下：

<!DOCTYPE html>

<html>

	<head></head>

	<body></body>

</html>

HTML标签

标签代表的某些固定的含义，像乐高积木一样，把这些各种各样的积木堆起来，就能完成一个杰出的作品。

按照标签是否是单身可分为以下两种：

单标签：语法为<标签名属性1=值1 属性2=值2 ...../>
双标签：语法为<标签名属性1=值1 属性2=值2 .....>前面表开始，中间是内容，后边表结束</标签名>

一些常见的HTML标签

首先是注释：<!--注释内容-->

<!--head标签内部常用的标签-->

<title>网页标题</title>  

<style>内部用来书写css代码</style>  

<link rel='stylesheet' href='外部css文件'></link>   引入外部css文件

<script src='外部文件'></script>

<meta name='keywords' content='被浏览器搜索的关键字'>

<meta name='description' content='网页的描述性信息'>

<!--body内部常用的标签-->

<h1> 1级标题 改变数字可以进行1~6级标题的替换</h1>

<u>下划线</u>

<i>斜体</i>

<s>删除线</s>

<b>加粗</b>

<p>段落</p>

<br>  换行

<hr>  水平分割线

<!--特殊符号表示方法-->

&nbsp;  空格

&gt;   大于号

&lt;   小于号

&amp;  &

&yen;  ¥

&copy;

商标&reg;

上述标签在浏览器中的显示所占的位置是不一样的，据此，对不同的标签又进行了分类。

1. 块级标签：独占一行，不受本身文本的大小限制。

	-块级标签可以修改长宽。

    -其内部可以嵌套块级标签。

	-只有一个比较页数的标签：p标签只能内嵌行内标签

2.行内标签：其所占位置大小被自身文本所决定，文本多大，占多大。

	-行内标签不能嵌套块级标签

div和span标签

块级标签的典型代表就是<div>标签，行内标签代表就是<span>标签，为什么要单独拉出来说呢？因为这两个标签是我们专门用来在初期构造html骨架的。在设计页面初期，我们可以首先使用div标签来进行整体页面的一个规划，然后其中的文本内容可以使用span标签占位。后期我们添加内容都是在div和span组成的简易结构中进行的。

特殊的属性

id:该页面不能重复，用来标识标签唯一身份。
class:类似于Python的继承，会按照class内的css样式进行渲染标签。

常用标签

1. img标签：可以插入图片

	<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮在图片上的提示信息" width="自定义宽" height='自定义高'>

如果宽和高只定义一个的话，那么就会等比例改变

2. a标签：传送门标签

	<a href='传送地址'></a>

	target='_self/_blank'  打开新页面的方式，前者表示本页面打开，后者是新建页面打开，默认前者

tip:本页面跳转的功能

a标签具有锚点功能，这时候就要说到一个特殊的属性了：id=''，这个id必须是本页面唯一，作为每个标签的身份标识，我们可以通过查找某标签的id直接定位到该标签，所以a标签中的href属性就可以写为本页面的id值，完成点击之后即跳转到该标签。

3. 列表标签

列表标签有三种，这里只记录一下无序列表。

	<ul>

    	<li>默认是带小黑点的子集排列</li>

    	<li>如下展示</li>

	</ul>

无序列表就是这样
可以有多行

4. 表格标签

<table>  # 声明一个表格

    <thead>  # 表头

        <tr>  # 每一个tr标签代表一行数据

            <th>加粗的字段1</td>

            <td>字段2</td>

            <td>字段3</td>

        </tr>

    </thead>

    <tbody>  # 表身

        <tr>

            <td>一行数据的第一个字段值</td>

            <td>一行数据的第二个字段值</td>

            <td>一行数据的第三个字段值</td>

        </tr>

    </tbody>

</table>

html本身子代的表格是比较丑的，但是仍然可以添加一些属性的变化使其稍微好看点。

border='数字':表格的边框样式

rowspan='数字':向下的单元格合并几行

colspan='数字':向右的单元格合并几行

表单元素

这个表单属性可以实现向服务端发送数据，如果我们填写一部分数据向后端提交，就要使用到这个表单元素。

<form action="数据提交地址" method='请求方式' enctype='multipart/form-data'>

    <input type="text" name=''>					输入文本

    <input type="password" name=''>				密码输入

    <input type="date" name=''>					日期输入

    <input type="radio" name=''>				单选框：从给出的选项进行选择

    <input type="checkbox" name=''>				多选框：从给出的选项中可以进行多选

    <input type="submit" name=''>				提交按钮，触发提交动作

    <input type="button" name=''>				可以进行自定义功能按钮，空白的只能点着玩

    <input type="reset" name=''>				重置按钮：刷新本页面

    <input type="file" name=''>					选择文件，可进行上传，但有前提条件

	<label for="">

        <input type="text" name=''>				input标签在label内，能让用户再点到文本提示信息的时候自动进入到数据输入状态，即获得焦点。

    </label>

</form>

action的3种状态：

不填：默认是向本页面所在的url提交数据。
写全路径：向该url提交数据。如’www.baidu.com‘。
只写路径后缀：自动识别当前的ip和port，然后拼接。如:'/index/'

主要记得就是当在内部输完数据准备进行提交的时候，action决定了提交的方向。

几个特殊状态：

checked：对于给出的选项（针对radio和check）问题，可使用这个值作为设定默认值。
disabled:不能获得焦点（不能输入）。
readonly:只能读。

上传文件的前提条件：

请求方式为POST
必须定义enctype='multipart/form-data'属性。

注意事项：

name属性：数据是按k:v进行提交的，因此input内部务必填写一个name属性作为数据的key。
value属性：针对输入文本类型，value为输入文本，针对按钮类为按钮显示文本，针对选项类为传送数据的键值对的值。

select标签：默认是单选的,下拉式选项。想要多选需添加mutiple  selected为默认选中状态

<form action="" >

        <select name="" id="" multiple>

            <option value="" selected>1</option>

            <option value="">2</option>

            <option value="">3</option>

        </select>

        <textarea name="" id="" cols="30" rows="10"></textarea>

    </form>

textarea标签是获取用户大段文本输入，本身是一个大的可输入多行的文本框。

认识css

css相当于一个化妆盒，用来给html打造的东东进行华丽大变身。

既然要进行装饰，那么就首先要找到被装饰的对象。

css的引入方式有几种：

head内的link标签引入外部css文件
head内的style标签内写入css
在标签内部直接定义style='{属性：属性值.....}'

一般情况建议使用第一种方式，方便后期维护，第三种方式不建议大批量使用，耦合度较高。

选择器

这个就很好理解，就是通过一些方法精确定位到某一个标签。

选择器分类：

/*我是注释语法：选择器是定位某标签，大括号内的内容是定义的css的一些样式*/

选择器 {属性1：属性值1;属性2：属性值2.....}

/*基本选择器*/

/*1. id选择器： 关键符号为# */

#id值 {属性1：属性值1;属性2：属性值2.....}

/*2. 类选择器： 关键符号为点 */

.类 {属性1：属性值1;属性2：属性值2.....}

/*3. 元素选择器*/

标签名 {属性1：属性值1;属性2：属性值2.....}

/*4. 通用选择器*/

* {属性1：属性值1;属性2：属性值2.....}

/*组合选择器：先找到某一个确定的标签，根据这个标签的亲戚关系进行查找*/

后代选择器：凡是在标签内部的标签都是后代		  #id a {}

儿子选择器：在标签内部第一层级的标签			   #id>a {}

毗邻选择器：同级别紧挨着标签的下一个标签		  #id+a {}

弟弟选择器：同级别下方所有的标签				 #id~a {}

/*属性选择器：以[]为标识，查找含有某属性的标签*/

[name] {}  			含有name属性的标签都被选择

[name='tom']  		含有name属性且值为tom的所有标签

标签名[name='tom']   标签名内含有属性为name的且值为tom的所有标签

分组：多个元素样式相同可通过逗号隔开选择器的方式设置。

嵌套：多种选择器嵌套使用，可以想想后代选择器

div,#d1,.c1 {}  选择div标签、id为d1、继承c1类的标签

#d1 a {}		选择id为下的a标签

伪类选择器

一般在a标签使用比较频繁

a:link {color：blue}  		# 未访问链接时的颜色

a:visited {color：blue}  	# 访问链接之后的颜色

a:hover {color：blue}  		# 鼠标悬浮在链接时颜色

a:active {color：blue}  		# 鼠标点击链接不松时的颜色

input：focus {color:bule}  	# 输入框获得焦点时的样式

伪元素选择器

p:first-letter {}  设置文本首字母的字体样式

p:after {content:'content必须定义'}  在p元素之后添加一个不可选中的内容，多用于清除浮动

p:before {content:'content必须定义'}  在p元素之前添加一个不可选中的内容，多用于清除浮动

优先级

在标签内部的所有标签都会默认继承该标签的样式，但是如果内部标签也有自己的样式，这个时候就要考虑优先级的问题了。

选择器的优先级是按照权重来决定的，谁的权重高那么就听谁的。按照通俗的话说就是哪一个选择器精确就听谁的。

针对相同的选择器：就近原则。后执行的会将前面执行的覆盖。

针对不同的选择器：行内选择器》id选择器>类选择器>标签选择器。谁查找的精度高，范围小。就听谁的。

属性

宽和高

这两个属性是块级标签通用的，用来设置高和宽，行内标签是无法生效宽属性的，它的宽是由其本身文本内容决定

width:100px;  设置宽

height:100px; 设置高

字体属性

font-family: "Microsoft Yahei", "微软雅黑", "Arial";字体的版式，前面不能使用就用备胎

font-size:10px	字体的大小

font-weight:250px  字体的粗细

color:red		颜色的英文

	#abc456		16进制的6位数

	rgb(111,222,255)	三基色。范围0~255

	rgba(111,222,255,0.5)	三基色加透明度，透明度范围0~1

文字样式属性

text-align:left/right/center/justify  水平对齐方式

text-decoration:none  无样式,常用语去掉a标签默认的下划线

				underline  文本下的一条线

				overline  文本上的一条线

				line-through  穿过文本的一条线

text-indent:2em	空两个字符大小

背景属性

background-color：white  背景颜色

background-image：url('')  背景图片

background-repead:repead  默认图片会铺满整个网页

				  no-repead  背景图片不平铺

				  repead-x  水平平铺

				  repead-y  垂直平铺

background-position:center center 确定背景位置

background-attachment:fixed  背景不会随着文档的向下移动而滚动

对于上述都是以同样开头的属性是支持简写的

background:White url() no-repead center center

边框

可以设置整体的边框样式，也可单独设置边框的样式,例如：border-left-width

border-width:10px;								边框宽

border-style:solid/none/dotted/dashed;			边框的样式

border-color:red;								边框的颜色

简写：border：10px solid red;

border-radius:50%  								可以设置为圆，半径为长与宽的一半

display属性

display:none;	文档中元素存在，但是不显示

		block;	将标签设置为块级标签

		inline; 将标签设置为行内标签

		inline-block; 标签可以在一行，且可以设置宽和高

css盒子模型

margin：用于控制元素周围空间的间隔，通俗点就是与邻居标签的距离

border：本身边框

padding：标签内部内容与边框的巨鹿

content：盒子的内容

margin-top:10px;

margin-right:10px;

margin-bottom:10px;

margin-left:10px;

简写：margin:10px 10px 10px 10px ;

margin:0 auto;  水平居中

padding方法和margin相似

float浮动

假设我们看到的页面是一个平面的话，那么浮动就会让元素从平面升到空中，任何元素都可以浮动，浮动之后就会自动成为块级元素，只可以向左或向右浮动，知道碰到边框为止。

注意：浮动有可能导致父标签塌陷的问题

float:right  向左浮动

float:left   向右浮动

clear清除浮动

在clear规定的属性的某一侧是不允许有浮动元素的。

clear:left;		该标签的左侧是不能有浮动元素的

clear:right;	该标签的右侧不能有浮动元素

clear:both;		两个均不能出现浮动元素

清除浮动的影响，除了使用clear还有两种方式：

1.自己添加一个有高度的div。

2.通用的解决方式是继承一个自定义的类clearfix，

.clearfix:after {

    content:'';

    display:block;

    clear:both;

}

溢出属性overflow

overflow:visible;		多出内容默认可见，在框外可见

overfloe:hidden;		多出部分在框外不可见

overflow:scroll;		加一个滚动条

overflow:auto;			内容被修剪的话，就会显示滚动条

最佳案例：原型头像的设置。

<style>

        p {background-color: gray; padding: 20px;}

        #d1 {

            width:200px;

            height:200px;

            border-radius: 50%;

            overflow: hidden;

        }

        #d2 {

            max-width: 100%;

        }

</style>

<div id="d1">

    <img src="https://i3.mmzztt.com/2020/05/29a105.jpg" alt="" id="d2">

</div>

position定位

定位分为四种：

position:static;	默认值，没有定位过。无法作为绝对定位的参照物

position:relative;	相对定位。以自己原始位置为参照物定位

position:absolute;	绝对定位。相对定位过的父元素为原点定位

position：fixed;		固定定位。固定在某一个位置且不会改变，原点是基于浏览器窗口

验证浮动和定位是否脱离文档流（原来的位置是否保存）

不脱离文档流：相对定位

脱离文档流：浮动、相对定位、固定定位

z-index模态框

是设置对象的层叠顺序，相当于在平面的文档上，又加了一个z轴，而z-index就是设置z的高度。值高的就会压着值低的，导致值低的元素会被遮挡。

只能针对已经定位过的元素进行设置，同时，比较数值的时候是看父元素的z-index。

opacity透明度

定义透明效果，之前在颜色中rgba()也有一个透明度，但是只能针对颜色，而这个透明度则是针对元素。取值范围是0~1之间。

前端基础知识之html和css全解的更多相关文章

web前端基础知识-（二）CSS基本操作
1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...
web前端基础知识及快速入门指南
web前端基础知识及快速入门指南做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
PureStudy：学科知识分享——个人网站开发全解
PureStudy:学科知识分享--个人网站开发全解项目描述 PureStudy,学科知识分享网站. 学生可以使用这个网站,来浏览相应学科的知识点.学习总结,获取相关的资料.此外,他们可以选择上传文 ...
web前端基础知识学习网站推介
内容:一．基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.co ...
web前端基础知识总结
上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 ...
web前端基础知识-（五）jQuery
通过之前的学习我们已经了解了html.css.javascript的相关知识:本次我们就共同学习进阶知识:jQuery~ 一.什么是jQuery? jQuery其实就是一个轻量级的javascript ...
web前端基础知识 jQuery
通过之前的学习我们已经了解了html.css.javascript的相关知识:本次我们就共同学习进阶知识:jQuery~ 一.什么是jQuery? jQuery其实就是一个轻量级的javascript ...
前端基础知识-----HTML
一.HTML基础概述 HTML:超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准语言.也就是一般我们在浏览器里看到的东西的书写格式,与 ...
web前端基础知识
#HTML 什么是HTML,和他ML... 网页可以比作一个装修好了的,可以娶媳妇的房子. 房子分为:毛坯房,精装修毛坯房的修建: 砖,瓦,水泥,石头,石子.... 精 ...

随机推荐

socket编程之并发回射服务器2
承接上文:socket编程之并发回射服务器为了让服务器进程的终止一经发生,客户端就能检测到,客户端需要能够同时处理两个描述符:套接字和用户输入. 可以使用select达到这一目的: void str ...
常用linux命令学习记录
批量替换文件中字符串: sed -i "s/ITSApi/icallApi/g" `grep ITSApi -rl icallbiz` 解释: 将icallbiz目录文件中包涵的I ...
Qt读写xml文件
写xml <root> <element> <sub id=-1></sub> </element> </root> //添加x ...
springboot整合mybatis,利用mybatis-genetor自动生成文件
springboot整合mybatis,利用mybatis-genetor自动生成文件项目结构: xx 实现思路: 1.添加依赖 <?xml version="1.0" e ...
git 常用指令累积
1.查询指定文件的修改所有修改日志git log --pretty=oneline 文件名 1. git log filename 可以看到fileName相关的commit记录2. git log ...
python基础学习笔记（纸质）
大一的时候学的python做的笔记.
Lvs 调度算法
lvs scheduler:仅根据IP和端口进行调度静态方法:仅根据算法本身进行调度,不考虑当前服务器实际负载情况:保证起点公平 RR:round robin, 轮调,轮询,轮叫: 调度器通过&qu ...
关于RAID小结
独立硬盘冗余阵列(RAID, Redundant Array of Independent Disks),旧称廉价磁盘冗余阵列(Redundant Array of Inexpensive Disks ...
永远不要使用双花括号初始化实例，否则就会OOM！
生活中的尴尬无处不在,有时候你只是想简单的装一把,但某些"老同志"总是在不经意之间,给你无情的一脚,踹得你简直无法呼吸. 但谁让咱年轻呢?吃亏要趁早,前路会更好. 喝了这口温热的鸡 ...
Linux 下三种提高工作效率的文件处理技巧
Linux 下三种提高工作效率的文件处理技巧在 Linux 下工作,打交道最多的就是文件了,毕竟 Linux 下工作一切皆文件嘛.Linux 也为大家提供了多种用于处理文件的命令,合理使用这些命令可 ...

前端基础知识之html和css全解