在牛客网刷题的日子——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圆角边框的一些知识

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

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

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

1. text-decoration的相关属性

区分换行符和水平分割线

1. 代表换行
   看这样一个例子

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

效果图如下

2. 代表一条水平分割线

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

效果图如下

关于CSS的位置属性值

1. position: fixed
2. position: relative
3. position: absolute
4. position: static

响应式设计

关于CSS选择器

区分border：0和border：none

第二天来啦

HTML5的文本高亮

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

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

展示结果如图

关于HTML5新增的WebSocket

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

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

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

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

2. WebSocket的核心
   在HTTP头部字段中，一个WebSocket的核心字段有这两个

Upgrade: websocket
Connection: Upgrade

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

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

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

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

5. WebSocket的方法

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

6. WebSocket的事件

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

关于HTML列表

1. 有序列表
   看代码吧

 <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添加样式的四种方法

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

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

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

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

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

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

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

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

5. 关于内联样式、内部样式、外部样式的优先级高低问题：
   内联样式>内部样式>外部样式。
   简单记忆也就是举例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