首页 > 其他分享> 文章详细

在牛客网刷题的日子

2020-01-29 13:39:41 阅读：301 来源： 互联网

标签：WebSocket socket 样式牛客 HTML5 网刷题日子 CSS 关于

在牛客网刷题的日子——HTML、CSS基础篇

写在前面
第一天来啦

关于CSS圆角边框的一些知识
关于文本装饰符的一些知识
区分换行符和水平分割线
关于CSS的位置属性值
响应式设计
关于CSS选择器
区分*border：0*和*border：none*

第二天来啦

HTML5的文本高亮
关于HTML5新增的*WebSocket*
关于HTML列表
关于CSS3的贝塞尔曲线

第三天来啦

关于CSS的盒模型
关于HTML5新增的*Canvas*和*SVG*
CSS添加样式的四种方法
HTML5中新增的表单元素
HTML5的容器标签
关于HTML的图片请求
CSS布局的BFC
如何更改对象的背景色透明度

写在前面

作为一名开始准备实习面试的大三程序猿，过年期间无意间看到历年的秋招笔试题，被虐的死去活来后，深深感觉到自己的菜鸡水平。本以为最强王者的我，前端面试稳如虎，没成想一篇笔试0-5。于是秉承着是废物也要痛改前非，金盆洗手，重新做人的厚颜无耻精神。以~~外面传染病不敢出去~~ 温习知识问做出发点，刷刷牛客网的习题来充充电，只希望面试不被虐。一些不熟悉的知识将会在此记录，每日更新。望键盘前大神、大佬、大哥哥、小姐姐们手下留情。
在这里插入图片描述

第一天来啦

关于CSS圆角边框的一些知识

说说用处吧，关于border-radius是CSS3的新特性之一，主要用于制作圆角表框。
一图胜万语：
重要代码如下：

<div
    style=" text-align: center; line-height: 100px; background-color: pink; height: 100px; width: 300px; border-radius: 30px; border:none;">
    我是个圆角边框
</div>

运行结果如图啦

关于文本装饰符的一些知识

text-decoration的相关属性

区分换行符和水平分割线

代表换行
看这样一个例子

<p>
    我是第一行 </br> 我是第二行
</p>

效果图如下
在这里插入图片描述
2. 代表一条水平分割线

<p>
    我是第一行 <hr/> 我是第二行
</p>

效果图如下
在这里插入图片描述

关于CSS的位置属性值

position: fixed
position: relative
position: absolute
position: static

响应式设计

关于CSS选择器

区分border：0和border：none

第二天来啦

HTML5的文本高亮

在HTML5中引入了<mark></mark>标签来让文本高亮。来看一个小demo：

<p>过年在家<mark>胖</mark>十斤</p>

展示结果如图

在这里插入图片描述

关于HTML5新增的WebSocket

WebSocket是什么？为什么要用它？
WebSocket作为H5新增内容，用于建立一个基于单个TCP的持久化全双工通讯协议。

我们知道HTTP以request、response作为基准，不能保证持久化连接，简单来讲就是客户端发送request后需要等待服务器response才能继续执行，不仅如此，request只能够由客户端发出，服务器不能够主动发送。

举个通俗的栗子来讲，在没有WebSocket的时候，就好比一个舔狗（客户端）在追求女神（服务器），女神（服务器）只有在舔狗（客户端）发送请求~~开始舔~~的时候才会回复，而不会主动联系舔狗（客户端）。同样舔狗（客户端）说一句话，女神（服务器）也只回复一句话。

于是~~舔狗为了反击~~ 为了解决这一问题，WebSocket也就诞生了。通过WebSocket，客户端和服务器建立了一条快速通道，通过一次TCP的握手就可以保证两者之间的数据传输。
WebSocket的核心
在HTTP头部字段中，一个WebSocket的核心字段有这两个

Upgrade: websocket
Connection: Upgrade

WeSocket的创建
如下代码将会创建一个WebSocket，其中url为建立连接的服务端地址，而protocal是可选的通信子协议。

var socket = new WebSocket(url,[protocal]);

WebSocket的属性
在这里主要讲WebSocket的readyState属性。
readyState属性作为只读属性不表示连接状态，其包含有四个值：0,1,2,3.

socket.readyState=0;，表示连接未建立
socket.readyState=1;，表示连接已建立
socket.readyState=2;，表示连接正在断开
socket.readyState=3;，表示连接完全断开或连接不可用
WebSocket的方法

socket.send();，表示发送数据
socket.close();，表示断开连接
WebSocket的事件

socket.onopen，连接建立时触发
socket.onclose，连接关闭时触发
socket.onmessage，消息传递时触发
socket.onerror，消息出错时触发

关于HTML列表

有序列表
看代码吧

 <ol>
    <li>有序</li>
    <li>列表</li>	
</ol>

来看效果图
在这里插入图片描述
2. 无序列表

<ul>
    <li>无序</li>
    <li>列表</li>
</ul>

来看效果图
在这里插入图片描述
3. 自定义列表
代码

<dl>
    <dt>自定义</dt>
    <dd>列表</dd>
</dl>

效果图
在这里插入图片描述

关于CSS3的贝塞尔曲线

第三天来啦

关于CSS的盒模型

CSS的盒模型从内到外分为四个部分:content,padding,border,margin。
其中margin,border,padding都为透明，而content和padding可以有背景颜色。

关于HTML5新增的Canvas和SVG

CSS添加样式的四种方法

内联样式：将CSS的样式内联到HTML标签内，举个栗子

 <p style="color: pink;" >
   内联样式
</p>

内部样式：将CSS的样式写在HTML的<style></style>标签中，也来个栗子

<style type="css/type" >
    p {
        color: pink;
    }
</style>

外部样式：将CSS样式保存在.css文件中，并用<link>来导入。栗子来了

<link rel="stylesheet" href="index.css"/>

导入样式：这种一般不作为考量，是在一个CSS文件中另外导入其他CSS样式。看个栗子

@import url(../myOffer.css);

关于内联样式、内部样式、外部样式的优先级高低问题：
内联样式>内部样式>外部样式。
简单记忆也就是举例HTML标签近的优先级更高啦。
这里还要注意一点可以用!important使样式优先级最高。

HTML5中新增的表单元素

从前的表单元素
HTML5新增的表单元素

datalist
keygen
output

HTML5的容器标签

定义容器，用于嵌入外部应用或（插件）

关于HTML的图片请求

CSS布局的BFC

如何更改对象的背景色透明度

filter:alpha(opacity=80);

代码写的完嘛发布了1 篇原创文章 · 获赞 0 · 访问量 25 私信关注

标签：WebSocket,socket,样式,牛客,HTML5,网刷题,日子,CSS,关于
来源： https://blog.csdn.net/qq_40781291/article/details/104091366

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

在牛客网刷题的日子