关于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;
...
flex布局下两端对齐，不满左对齐
弹性布局多列换行居左布局
解决方案一
问题情境：
在flex布局下，多行排列，如何让flex布局最后一行没有排满时，向左对齐排列且与上面的行间距相同。
实现效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
li {
list-style: none;
}
.Lis ...
HTTP与HTTPS超文本传输协议的区别是什么
目录HTTP和HTTPS的基本概念HTTP 与 HTTPS 区别HTTPS 的工作原理总结随着越来越多的网站使用HTTPS加密，现在HTTPS的使用已经成了硬性要求了。虽然说https是http的安全版，但两者还是有不少区别的。本文从https、http的概念和原理入手，讲解他们的不同，让读者朋友能够真正理解。
超文本传输协议HTTP协议被用于在Web浏览器和 ...
HTML5 Canvas绘制图形从入门到精通
目录一、canvas 简介二、Canvas基本使用2.1 <canvas> 元素2.2 渲染上下文(Thre Rending Context)2.3 检测支持性2.4 一个简单的例子三、绘制形状3.1 栅格 (grid) 和坐标空间3.2 绘制矩形四、绘制路径 (path)4.1 绘制线段4.2 绘制三角形边框4.3 填充三角形4.4 绘制圆弧4.5 绘制贝塞尔曲线五、添加样式和颜色fillStylestrokeSt ...
CSS单标签实现复杂的棋盘布局
目录使用渐变实现网格利用渐变实现交叉虚线十字借助伪元素及 box-shadow 实现剩余符合最后最近，有网友问我，他们的一个作业，尽量使用少的标签去实现这样一个象棋布局：
他用了 60 多个标签，而他的同学，只用了 6 个，问我有没有办法尽可能的做到利用更少的标签去完成这个布局效果。
其实，对于一个页面的布局而言，标签 ...
flex(弹性布局)教程之常用布局
目录一、Flex 布局是什么？任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。Webkit 内核的浏览器，必须加上-webkit前缀。二、常用布局公共样式： 垂直居中 子元素左右分布水平垂直居中水平垂直居中 图标在上文字在下子元素平分父元素,且自适应等高 子元素平分父元素,两边对齐中间自适应相同 ...
