HTML clearfix清除浮动讲解
一、浮动的概念
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
二、浮动的影响
1. 浮动会导致父元素高度坍塌
父元素中有子元素，并且父元素没有设置高度，子元素在父元素中浮动，结果必然是父元素 ...
深入理解z-index的工作原理和应用技巧
目录前言1、z-index2、层叠上下文3、层叠水平4、层叠顺序5、创建层叠上下文小结前言
最近参与某前端项目架构改造，发现项目中滥用z-index，设置的值有几十种并且不统一。在对项目的z-index进行梳理和统一过程中也深入学习了一下z-index，并撰写成文，希望也能帮助到陌生的你。
1、z-index
z-index属性是什么？这里可参考MDN ...
HTML5中的document.visibilityState
在 HTML5 中，文档对象（即 document 对象）具有一个 visibilityState 属性，该属性表示当前文档对象的可见性状态。
visibilityState 可能的取值有以下三种：
- visible ：表示文档当前处于激活状态，即当前选项卡处于前台或当前窗口处于屏幕最上层。- hidden ：表示文档当前处于非激活状态，即当前选项卡处于后台或当 ...
HTML中link标签属性详解
在HTML中，link标签是一个自闭合元素，通常位于文档的head部分。它用于建立与外部资源的关联，如样式表、图标等。link标签具有多个属性，其中rel和href是最常用的。
rel属性定义了当前文档与链接资源之间的关系。常见的rel属性值有：
stylesheet：表示链接到一个外部CSS样式表。icon：表示链接到网站的图标，如favicon。
hr ...
关于HTML5的img标签
目录HTML5 <img> 标签如何插入图像：浏览器支持标签定义及使用说明HTML 4.01 与 HTML5之间的差异HTML 与 XHTML 之间的差异属性全局属性事件属性尝试一下 - 实例支持的图像格式与 CSS 的交互HTML5 <img> 标签
如何插入图像：
实例
HTML5 <img>标签用于向网页中添加相关图片。
<img src="smiley-2.gif" alt="Smiley ...
关于HTML的语义化标签和无语义化标签
什么是HTML语义化标签
语义化的标签，旨在让标签有自己的含义，让浏览器认识这个标签所传达的信息，是干什么的有什么作用。 比如：h1标题标签的语义是用它来标识网页或其他部分最重要的标题。 然而span 标签责没有独特的含义。
常用的语义化标签
header元素
是HTML5中新增的语义化标签，用于定义文档的页眉（介绍信息）。
n ...
关于CSS渲染:CSS是如何绘制颜色的
颜色的原理
最常见的颜色相关的属性就是 color 和 background-color。
颜色值：RGB 颜色，CMYK 颜色，HSL 颜色，其它颜色
RGB 颜色：它符合光谱三原色理论：红、绿、蓝三种颜色的光可以构成所有的颜色。
现代计算机中多用 0 - 255 的数字表示每一种颜色，这正好占据了一个字节，每一个颜色就占据三个字节。
CMYK 颜色：在印 ...
关于在HTML网页制作中如何添加背景图片
我们通常使用background来添加网页的背景图
效果图:
background-image:url(图片地址) ; 这个是定义背景图片，但是注意，url可以是一个网页图片的链接地址，也可以是本机保存的图片，但是对于本机保存的图片，这里是一定一定要注意是url中的图片路径是以该CSS文件为参照对象，简单做法，可以直接将图片放置在和css文件相同 ...
网页中img图片使用css实现等比例自动缩放不变形（代码已测试）
网页中img标签图片排版在工作中经常会遇到，如果图片大小比例不一样，想整齐对应排列会让图片变形，本文介绍CSS如何实现图片等比例缩放不变形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>等比例不变形</title>
<st ...
H5页面使用audio标签播放音频
H5页面播放音乐其实很简单，只需要用<audio>这个标签就行十分方便。
路径选在音乐所在位置就行了。
<audio id="bgMusic" src="js/2.mp3" autoplay preload loop="loop"></audio>
关于点击按钮音乐开启/停止播放的效果做了个简单的例子
<a class="play" id="audioBtn" style="cursor:pointer;" οnclick="autoPlay()"></a>
...
HTML5中一些酷炫又有趣的新特性代码整理汇总
目录一、详情标签二、内容可编辑三、地图四、标记内容五、data-* 属性六、输出标签七、数据列表八、范围（滑块）九、Meter十、Inputs必需的自动对焦使用正则表达式验证颜色选择器HTML5 是 HyperText Markup Language 5 的缩写，HTML5技术结合了HTML4.01的相关标准并革新，符合现代网络发展要求，在2008年正式发布。HTML5 由 ...
js开发中的页面、屏幕、浏览器的位置原理（高度宽度）说明讲解（附图）
目录一、介绍1. 容器2. 物理尺寸和分辨率3. 展示图二、屏幕信息三、浏览器信息四、页面信息前端js开发中我们常遇到对页面、屏幕、浏览器宽高和位置的获取问题，有时间查到了js的实现代码，但是不知道为什么。本篇图文并茂讲解Web环境中屏幕、浏览器及页面的高度、宽度信息。
一、介绍
1. 容器
一个页面的展示，从外到内的容 ...
HTTP协议常用的请求头和响应头响应详解说明（学习）
目录一、前言二、Http请求头：1、Accept：text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.82、 Accept-Encoding：gzip, deflate3、 Accept-Language：zh-CN,zh;q=0.8,en-US;q=0.5,en;q=0.34、 Connection：keep-alive；5、 Cookie：JSESSIONID=2B5F5F6380CA6339CEF98AD9A9E95AB46、 Host：localhost:80807 ...
CSS填充和宽高详解
目录这节课，我们学习 CSS 填充属性和 CSS 宽度与高度属性。
还是看这个例子，每个区块除了设置外边距，还有内容周围的空间以及内容的宽高设置。
CSS 填充属性用于在一个元素的内容周围产生空间，也就是边框内到内容外之间的距离。可以通过 padding-top，padding-right，padding-bottom，padding-left 等属性设置元素 ...
前端html+css实现动态生日快乐代码
生日送什么礼物总是要花一番心思，别出心裁不落俗套，什么礼物才能让那一个她开心呢？来看看前端大大用html+css实现动态生日快乐代码吧，亲测可用。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Happy Birthday!</title>
<style>
@import url("https://fonts.googleapis.com/css?fami ...
程序猿说love的100种语言
说程序猿是直男，不可否认，大多数程序猿都挺直，因为我们没有那么多弯弯绕绕，有心思兜圈子，不如回去写几行代码………
程序猿的时间大多都给了工作和学习，但是可能比一般人更缺少爱情。程序猿也许在生活中会比较宅，但是千万不要说程序猿不懂浪漫。当你不开心了，他可以分分钟做出100种“我爱你& ...
阿里前端开发中的规范要求
目录1.命名规范1.1 项目命名1.2 目录命名1.3 JS 、CSS 、SCSS 、HTML 、PNG 文件命名1.4 命名严谨性2.HTML规范2.1 HTML 类型2.2 缩进2.3 分块注释2.4 语义化标签2.5 引号3 CSS 规范3.1 命名3.2 选择器3.3 尽量使用缩写属性3.4 每个选 ...
前端面试学习中几个常见有用的知识点
svg和canvas 的区别？
svg 输出的图形都有独立的dom 是一个矢量图形 放大缩小不会 canvas 输出的是一整块 是一个画布 放大 缩小会失真
src 和 href 的区别？
src 是引入资源的 href 是跳转url的
前端有哪三层构成，分别是什么？
结构层 html dom结构表示层 css 渲染行为层 js操作
cookie、session、localstroage、sessionSt ...
HTML5 播放 RTSP 视频
HTML5 播放 RTSP 视频
github地址：https://github.com/littlebaozi/rtsp-web
目前大多数网络摄像头都是通过 RTSP 协议传输视频流的，但是 HTML 并不标准支持 RTSP 流。除了 Firefox 浏览器可以直接播放 RTSP 流之外，几乎没有其他浏览器可以直接播放 RTSP 流。Electron 应用是基于 Chromium 内核的，因此也不能直接播放 R ...
html5图片点击放大
html5图片点击放大
已于 2022-07-21 15:51:52 修改
第一种：
css：
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
.zhezhao
{
width:100%;
height:100%;
background-color:#000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
...
