Bootstrap的CSS样式全面使用介绍
目录1、基本设置（1）使用 HTML5 文档类型。（2）响应移动设备。2、网格（Grid）（1）Bootstrap 网格系统（Grid System）（2）container（3）使用 Grid（4）举例：3、文本处理（1）small 属性 、<small> 标签（2）常用文本属性（3）补充文本属性（4）<abbr> 标签 （5）列表4、表格（1）常用表格标签（2）<table>常用属性（ ...
html5
html5
HTML5简介
什么是HTML5
HTML5是新一代的HTML标准，2014年10月由万维网联盟（W3C）完成标准制定。
官网地址：
W3C
WHATWG
HTML5在狭义上是指新一代的 HTML 标准，在广义上是指：整个前端。
HTML5优势
针对JavaScript，新增了很多可操作的接口。
新增了一些语义化标签、全局属性。
新增了多媒体标签，可以很好的 ...
引用字体时图标无法显示_字体文件不存在问题
目录使用CDN后字体图片不显示问题IIS中字体文件不存在问题IIS添加MIME类型 nginxApache最近一个项目，css,js等静态资源做了cdn部署，浏览网站时发现font awesome字体图标通通不能正常显示。只有一些奇怪的符号。浏览器控制台报错信息：font-face引用字体跨域。
使用CDN后字体图片不显示问题
1. 查看字体文件路径，跟UR ...
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 ...
关于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 ...
