标签:类型 amp 提示 tps margin focus 回顾 四种 选择器
前端就是展示给用户并且与用户进行交互的操作界面。
前端包括包括三部分:
前端也有很多框架,只需要按照固定的语法进行调用即可。
软件的开发架构分为两种:
忽略掉进行域名解析的过程,当我们在浏览器的窗口中输入网址后的过程:
如果要想浏览器当做很多服务端的客户端,那么就需要浏览器熟练掌握各种各样的服务端的规则,对于浏览器来说压力很大,因此,浏览器决心变得傲娇:你要是想让我给你打工(当做客户端),那么你就遵守我的规则,不然的话,不好意思了,你自己去开发自己的客户端吧。因此,产生了浏览器制定的协议。
首先说一下HTTP协议。
它是超文本传输协议,用来规定服务端和浏览器之间的数据交互的格式,有四大特性:
既然是基于请求响应的,那肯定也都有各自的请求响应的数据格式。
请求数据格式 = 请求首行 + 请求头 + 空行 + [请求体]
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主要是由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>
标签代表的某些固定的含义,像乐高积木一样,把这些各种各样的积木堆起来,就能完成一个杰出的作品。
按照标签是否是单身可分为以下两种:
<标签名 属性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> 水平分割线
<!--特殊符号表示方法-->
空格
> 大于号
< 小于号
& &
¥ ¥
© ?
商标® ?
上述标签在浏览器中的显示所占的位置是不一样的,据此,对不同的标签又进行了分类。
1. 块级标签:独占一行,不受本身文本的大小限制。
-块级标签可以修改长宽。
-其内部可以嵌套块级标签。
-只有一个比较页数的标签:p标签只能内嵌行内标签
2.行内标签:其所占位置大小被自身文本所决定,文本多大,占多大。
-行内标签不能嵌套块级标签
块级标签的典型代表就是<div>
标签,行内标签代表就是<span>
标签,为什么要单独拉出来说呢?因为这两个标签是我们专门用来在初期构造html骨架的。在设计页面初期,我们可以首先使用div标签来进行整体页面的一个规划,然后其中的文本内容可以使用span标签占位。后期我们添加内容都是在div和span组成的简易结构中进行的。
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种状态:
主要记得就是当在内部输完数据准备进行提交的时候,action决定了提交的方向。
几个特殊状态:
上传文件的前提条件:
enctype=‘multipart/form-data‘
属性。注意事项:
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相当于一个化妆盒,用来给html打造的东东进行华丽大变身。
既然要进行装饰,那么就首先要找到被装饰的对象。
css的引入方式有几种:
一般情况建议使用第一种方式,方便后期维护,第三种方式不建议大批量使用,耦合度较高。
这个就很好理解,就是通过一些方法精确定位到某一个标签。
选择器分类:
/*我是注释语法:选择器是定位某标签,大括号内的内容是定义的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之间。
标签:类型 amp 提示 tps margin focus 回顾 四种 选择器
原文地址:https://www.cnblogs.com/liqianxin/p/13019199.html