html
白T恤架构师
爱穿白衬衫,深藏功与名
展开
-
编程语言中的HTML5能做什么?HTML5前端行业的薪资水平如何
广义上对HTML5前端的解释是包含HTML、CSS和JavaScript在内的一套技术组合。随着最近几年来互联网的迅猛发展和普及,HTML5前端工程师已经成为互联网时代软件产品研发中不可缺少的一种专业的研发角色,“钱”途不可限量!(想了解跟多前端知识可以关注底部)1.HTML5能做什么?第一:微信小程序,非常的流行,在开发的过程,我们就会应用到HTML5的技术。第二:手机和移动端是离不开HTML5的,现在都是移动端的天下,现在我们手机的一些功能:缓存、音乐、视频、定位、Canvas绘图,还有大量的特原创 2020-06-11 17:09:28 · 316 阅读 · 0 评论 -
自学Web前端的五个不同阶段【全新web前端开发视频教程】
1、学习HTML,这是最简单,最基本的是要掌握div,formtable、Ulli、P、跨度、字体这些标签,这些都是最常用的,尤其是DIV和表格,DIV,表也可以用于布局,但不灵活,和用于基本表处理数据。2、学习CSS,CSS这里说的不包括CSS3。 Web前端开发工程师里面我们看到的,一个可以使用HTML或CSS + CSS+DIV的界面布局,所以CSS是用来协助HTML布局和显示,我们称之为“CSS样式”,为什么说DIV+CSS?因为我说div是HTML主要用于布局的,所以div是这个东西的核心!C原创 2020-05-22 21:40:45 · 511 阅读 · 0 评论 -
web前端零基础,按照这样的学习步骤,6个多月找到了工作【全新web前端开发视频教程】
关键词“零基础”和“迅速”,针对这两个词,我们就应该相应的学习规划。首先你是一个零基础的人,现在急需把web前端相关技能学好,在“保证学习质量”的同时用最短的时间学好web前端应该掌握的必要技术。具体实行方案如下:1.了解web前端市场需求首先,零基础的人应该去了解目前想要找到一份web前端的工作,应该具备哪些技能,当你符合这些企业的基本标准后,工作就不成问题。先知道自己应该达到什么标准,然后再去学习,不学无用的知识,只学工作需求大的知识,这可以避免浪费时间,这方面小编不浪费口舌多说,可以到招聘网站多原创 2020-05-19 15:18:48 · 423 阅读 · 0 评论 -
应届生想要拿到web前端offer,这8个技能必不可少!【全新web前端开发视频教程】
如今前端开发的任职要求越来越高了,不仅要掌握 javascript,熟悉vue、react等各种框架,甚至连后端和 python 都得懂。前几年只要熟练HTML、CSS、JavaScript ,靠扒代码套用代码工具就能找到一份相对不错的工作,看来现在这套是行不通了。要是碰上面试官问你“Vue数据绑定的原理是什么?React中的Fiber到底是什么?如何控制Promise任务的并发数?Nodejs如何处理高并发?…”,也别觉得夸张,连这些基本内容都有些吃力,那你很有必要重新审视自己的核心技术水平了。估计原创 2020-05-19 15:17:27 · 465 阅读 · 0 评论 -
web前端开发入门全套学习方法路径【附送全新web前端开发视频教程】
前端学习路径1.WEB前端快速入门在本阶段,我们需要掌握 HTML 与 CSS 基础,当然,也包含 H5 和 C3 的新特性。这个部分内容非常简单,而且非常容易掌握。相信你也更愿意学习这个部分,毕竟他可以让你最直观的感受到前端的魅力。为了锻炼大家写代码,可以根据你喜欢的站点去实现效果。这一阶段是非常重要的基础阶段,所谓基础就是可能这个阶段我们的学习的内容,可以让我们开发出来绚丽网站站点,但是功能丰富却暂时做不到。 为了完成更绚丽的站点,我们需要掌握常见特效的实现,利用 css3 和 h5 的新特性实现动原创 2020-05-19 15:16:00 · 405 阅读 · 0 评论 -
什么才是市场急需的前端工程师?【附送全新web前端开发视频教程】
据统计,国外的前端开发人员和后端开发人员比例约1:1,但是在国内比例却在1:3以下,Web前端开发职位人才缺口巨大。前端工程师的发展之路十分有“钱”景。每天,HR 群都有人在吐槽招不到前端工程师。实话说对这些需求,高级招聘人员也无能为力,因为在供不应求的前端招聘市场上,优秀的前端工程师才是有话语权的那一方。但是,市场上优秀的前端工程师却相对较少,全世界范围看都是个难题。那造成优秀Web前端工程师稀少的原因有哪些呢?**大量糟糕Web前端工程师的存在,扰乱了市场。**由于Web前端工程师的入门门槛非常原创 2020-05-19 15:14:52 · 179 阅读 · 0 评论 -
web前端入门到实战:CSS 网格布局:网格线
本系列第一篇讲到如何创建网格容器,以及在容器元素上能够使用的属性。网格格式化上下文一旦创建,你也就有了网格线了。有了网格线,你就能在网格项目上添加属性,对项目做定位(place items)了。读完本篇文章,你将学到:定位属性:grid-column-start、grid-column-end、grid-row-start、grid-row-end 以及对应的简写属性 grid-column...原创 2020-05-05 15:26:07 · 1572 阅读 · 0 评论 -
web前端入门到实战:CSS网格布局:创建一个网格容器
读完本篇文章,你将学到:使用 display: grid 或 display: inline-grid 创建网格容器。使用 grid-template-columns 和 grid-template-rows 设置行和列。使用 grid-auto-colums 和 grid-auto-rows 属性设置隐式轨道(implicit tracks)的尺寸。创建容器与弹性布局类似的是,使用...原创 2020-05-05 15:22:42 · 441 阅读 · 0 评论 -
web前端入门到实战:CSS 滚动捕捉技术(Scroll Snapping)
CSS 滚动捕捉允许用户完成滚动之后将视口锁定到某个元素的位置。非常适合用来建立下面这样的应用:基本使用实现滚动捕捉主要依靠两个属性:容器元素的 scroll-snap-type 属性,以及子元素的 scroll-snap-align 属性。最基本的使用方式如下:专门建立的学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基...原创 2020-05-05 15:20:56 · 690 阅读 · 0 评论 -
web前端入门到实战:实现html页面自动刷新
使用场景:页面需要定时刷新,实时加载数据,需要实时查看监控数据(H5中的WebSocket和SSE可以实现局部刷新)一定时间之后跳转到指定页面(登录注册之类)前端开发使用伪数据调试html页面(修改一些js的变量值,可以自动刷新效果)示例代码:页面自动刷新注:其中10指每隔10秒刷新一次页面.<meta http-equiv="refresh" content...原创 2020-05-04 14:51:03 · 444 阅读 · 0 评论 -
web前端入门到实战:HTML引入文件的绝对路径、相对路径、根目录
什么是绝对路径?绝对路径指的是文件的真正路径,使用绝对路径链接外部资源,如:图片、超级链接、flash、音频、视频等等。代码如下:1、引入网络上的资源:<img src="http://完整的URL描述地址">2、引入电脑本地的绝对路径,如D盘下images文件夹里名称为“aaa.jpg”的图片:<img src="D:/images/aaa.jpg">...原创 2020-05-04 14:49:53 · 1050 阅读 · 0 评论 -
web前端入门到实战:HTML5 视频流行插件之video.js
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。(要支持ie低版本请下载5.4.3版 )点击进入官网下载地址:http://www.jq22.com/jquery-info404也可以使用cdn<link href="//cdn.bootcs...原创 2020-04-20 15:34:08 · 942 阅读 · 0 评论 -
web前端入门到实战:HTML5 audio API事件
audio API 事件play() 视频播放<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>audio</title> <style> audio{ width:500px; ...原创 2020-04-20 15:33:39 · 317 阅读 · 0 评论 -
web前端入门到实战:HTML5之audio属性
audio主要支持的音频格式:mp3 ogg wav<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>audio</title></head><body> <!--...原创 2020-04-20 15:33:05 · 767 阅读 · 0 评论 -
web前端入门到实战:HTML5 video自定义视频播放器
效果图:video.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>video</title> <style> *{margin:0;padding:0;list-style: none...原创 2020-04-20 15:32:28 · 1742 阅读 · 0 评论 -
web前端入门到实战:Html5新增视频功能——video API 事件
video API事件** play() 可以控制视频自动播放**但是在chrome浏览器中不允许自动播放,只有在设置静音时才能允许自动播放理由是:视频自动播放在终端非常耗电,因此被禁止不过chrome浏览器允许自动播放7s以内的视频,然而很少有人会放7s以内的视频,而是直接用gif专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的...原创 2020-04-20 15:31:55 · 985 阅读 · 0 评论 -
web前端入门到实战:HTML5新增的视频功能——video属性
video在各浏览器中显示的差异video支持的基本视频格式:mp4 / webm / ogv<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>video</title></head><body&...原创 2020-04-16 16:08:50 · 1173 阅读 · 0 评论 -
web前端入门到实战:宣传页项目实战
编辑器:sublime text3标注工具:PxCook切图工具:PS开发前准备:设计图标注PxCook 空格键可以上下拖动大致标注图纸:(可惜不能文字标注和拉参考线)开发前准备:PS切图在指定图层上新建一个图层,使用ctrl+e 合并图层,可以将任意图层转为普通图层(如果图层是下面图层的剪贴图层,可以把该图层移动到新建图层的上面再合并)(如果图层羽化较多,ctr...原创 2020-04-16 16:08:15 · 412 阅读 · 0 评论 -
web前端入门到实战:H5网页布局+css代码美化
HTML5的结构化标签,对搜索引擎更友好li 标签对不利于搜索引擎的收录,尽量少用banner图片一般拥有版权,不需要搜索引擎收录,因此可以使用ul + li<samp></samp>可用于浅色副标题display:inline-block; 每个导航块存在水平间隙,解决方法是在父元素上添加font-size:0;sublime安装csscomb插件选中css...原创 2020-04-16 16:05:56 · 449 阅读 · 0 评论 -
web前端入门到实战:HTML5中input新增类型+表单新增属性+其他标签属性
Input 新增属性email 邮箱(只在手机端有效)url 网址(只在iphone手机有效)tel 手机号(只在手机端有效)number 数字(右侧有上下按钮,只能输入数字,+号,-号,. 和e)input 日期时间(手机端效果比较好)date 年月日time 小时和分datetime 年月日+小时和分 (iphone和...原创 2020-04-16 16:05:11 · 403 阅读 · 0 评论 -
web前端入门到实战:HTML5文档类型如何定义,有哪些标签,以及如何使用,从整体认识HTML5
html5新增结构标签header 头部nav 导航section 区域article 文章aside 侧边栏figure 一组多媒体内容figcaption 多媒体内容的标题footer 底部hgroup 区块的相关信息dialog 对话框 / 会话框sublime安装emmet插件,可以使用tab键快速补全标签专门建立的学习Q-q-u-n: 784783012 ,分享学...原创 2020-04-16 16:04:32 · 266 阅读 · 0 评论 -
web前端入门到实战:html网页基本概念
什么是网页?html文档经过浏览器内核渲染后展示出来的页面五大主流浏览器及四大内核html文档文件名后缀是.html,之前存在的.htm是为支持DOM系统(目前织梦还是用.htm文件名结尾文件)编码是我们通过代码的形式把想要展示的页面写到html文档里面,接着渲染作为一个动作,主要是html文档本身无法被人很好识别的,所以需要经过浏览器内核渲染展示为正常人看的页面,查看页面源代码快捷键是CTR...原创 2020-04-06 14:03:24 · 245 阅读 · 0 评论 -
web前端入门到实战:HTML基础标签图片文本超链接列表表格介绍
1.HTML基础标签图片常见代码形式<img src="图片路径地址" alt="属性名" title="占位符">常见的图片格式为以下三种:.jpg(图片有损压缩,影响画质)、.png(图片无损压缩、容积大、具有透明通道)、.gif(动图)。图片路径地址分为本地图片和网络图片,本地图片中分为绝对路径(从盘符开始算起)和相对路径(从当前路径算起),相对路径属于平级关系,如果图片相对于上...原创 2020-04-06 14:00:53 · 312 阅读 · 0 评论 -
web前端入门到实战:html基本标签表单实现交互原理,单选框,复选框,下拉框介绍
表单是什么?表单是前端和服务器做交互的一种机制,表单收集用户输入信息,之后发送或者提交给服务器。用户在输入的信息称之为内容,内容的文本分为普通和密码型,用户通过单选框、复选框、下拉框(也就是下拉菜单)完成内容信息输入,最后通过提交按钮发送给服务器!这里要讲到浏览器怎么发送给服务器?涉及到http协议,也就是超文本传输协议,它是浏览器和服务器通讯的一种机制。模式为:请求——应答,浏览器发送请求=&...原创 2020-04-06 13:59:17 · 579 阅读 · 0 评论 -
web前端入门到实战:HTML CSS百科及常用嵌入方式
CSS(Cascading Style Sheet)可译为“层叠样式表”或“级联样式表”,它定义如何显示 HTML 元素,用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离,极大提高了工作效率 。样式存储在样式表中,通常放在部分或存储在 外部CSS文件中。作为网页标准化设计的趋势,CSS取得了浏览器厂商的广泛支持,正越来越多的被应用到网页设计中去。网页现在的新标准是W3C。目前...原创 2020-04-06 13:56:44 · 132 阅读 · 0 评论 -
web前端入门到实战:HTML图像标签img和源属性src及Alt属性、宽高、对齐
使用<img>标签定义 HTML 页面中的图像,图像标签<img>有两个必需的属性:源属性src和alt,<img>是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)。src指 “source”。源属性的值是图像的 URL 地址。`1 定义图像的语法是: 2 <img src="url" alt="some...原创 2020-04-03 16:37:09 · 1324 阅读 · 0 评论 -
web前端入门到实战:HTML字符实体与文本格式化标签
HTML 字符实体/HTML 中的预留字符必须被替换为字符实体,一些在键盘上找不到的字符也可以使用字符实体来替换。在 HTML 中,某些字符是预留的。您不能使用包含这些字符的文本。在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。 字符实...原创 2020-04-03 16:36:14 · 160 阅读 · 0 评论 -
web前端入门到实战:网页开发中字体,字号与尺寸对应表
了解字体的一样常识,不管做一份文档编辑还是网页开发,都是很有必要的。整齐划一,井然有序才终是大家之道。1.字体在文档编辑中,我们常用的是宋体,小四号字,新罗马字体,字母和数字用的是Arial字体,段落首行缩进2个字体,采用多倍行距中的1.25倍行距。在网页开发中,普遍偏爱微软雅黑与宋体,14/16px,非衬线体。2.字号印刷文字有大、小的不同变化,排版及图象处理软件中汉字字体大小的计量,...原创 2020-04-01 21:20:57 · 1928 阅读 · 0 评论 -
web前端入门到实战:解决HTML页面乱码问题
HTML文件乱码一般是因为编码格式不匹配造成的,比如:不同编码内容混杂、浏览器不能自动检测网页编码等等;但无论是哪种情况造成乱码,在HTML文件头中设置网页编码,匹配好编码格式就可。下面是一个中文乱码的html:<!DOCTYPE html><html> <body> <h1>标题</h1> <p>这是一段测试...原创 2020-04-01 21:20:19 · 376 阅读 · 0 评论 -
HTML表单美化
由于一些系统原生的表单控件在各个浏览器中显示效果不一致,且无法设置某些关键CSS样式,为了保证表单在各浏览器中的兼容性,表单美化就是不得不做的一件事了单选按钮【实现效果】【实现过程】body{ margin: 0; font: 16px/20px "宋体";}.box{ width: 500px; height: 100px; line-hei...原创 2020-02-08 16:38:40 · 893 阅读 · 0 评论 -
HTML表单控件
input元素无疑是一个庞大和复杂的元素,但它并不是唯一的表单控件。还有button、select、option、label、optgroup、textarea、fieldset、legend这八个传统表单控件,datalist、progress、meter、output、keygen这五个新增表单控件传统控件button 定义一个按钮select 定义一个下拉列表option ...原创 2020-02-08 15:07:57 · 592 阅读 · 0 评论 -
input元素的23种type类型
随着HTML5的出现,input元素新增了多种类型,用以接受各种类型的用户输入。其中,button、checkbox、file、hidden、image、password、radio、reset、submit、text这10个是传统的输入控件,新增的有color、date、datetime、datetime-local、email、month、number、range、search、tel、tim...原创 2020-02-08 15:07:50 · 8256 阅读 · 0 评论 -
最常用的表单控件input元素的30个元素属性
form元素只是一个数据获取元素的容器,而容器内的元素称为表单控件。最常用的表单控件是input元素accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value这11个属性是input元素的传统元素属性autocomplete、autofocus、form、formaction、formenctype、formm...原创 2020-02-08 15:07:34 · 2420 阅读 · 0 评论 -
了解HTML表单之form元素
表单是网页与用户的交互工具,由一个元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签表单能够包含<input>、<menus>、<textarea>、<fieldset>、<legend>、<label>等表单控件元素注意:表单里嵌套表单是不允许的form元素form元素...原创 2020-02-08 15:07:38 · 586 阅读 · 0 评论 -
使用余弦定理制作磁盘形状h5音乐播放器
功能实现1、歌曲播放进度转换成视觉的旋转角度2、点击磁盘任意位置歌曲跳转到相应进度效果展示原理说明【1】旋转原理【2】余弦定理代码实现HTML<div class="outer"> <img src="img/huochai.jpg" alt="match" width="122" height="122"> <div id="...原创 2020-02-08 15:07:22 · 552 阅读 · 0 评论 -
HTML中的audio和video
HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容,这两个标签是<audio>和<video>,且不被IE8-浏览器支持以视频文件举例,它包含了音频轨道、视频轨道和其他一些元数据(封面、标题、子标题、字幕等)HTML元素使用这两个元素至少要在标签中包含src属性。位于开始和结束标签之间的任何内容都将作为后备内容,...原创 2020-02-07 15:38:21 · 3559 阅读 · 0 评论 -
HTML音频和视频
多媒体元素(比如视频和音频)存储于媒体文件中,确定媒体类型的最常用的方法是查看文件扩展名。如.swf、.wmv、.mp3、.mp4媒体格式音频格式.mid/.midiMIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备(比如合成器和声卡)的格式。MIDI 文件不含有声音,但包含可被电子产品(比如声卡)播放的数字音乐指令。因为 MID...原创 2020-02-07 15:38:06 · 666 阅读 · 0 评论 -
DOM操作表格
表格table元素是HTML中最复杂的结构之一。要想创建表格,一般都必须涉及表示表格行、单元格、表头等方面的标签。由于涉及的标签多,因而使用核心DOM方法创建和修改表格往往都免不了要编写大量的代码。本文将详细介绍DOM操作表格的属性和方法需求 要通过DOM实现下列格式的表格结构<table border = "1" width = "100%"> <tbody&g...原创 2020-02-07 15:37:59 · 553 阅读 · 0 评论 -
深入理解HTML表格
在CSS出现之前,table元素常常用来布局。这种做法在HTML4之后不再推荐使用。而现在有些矫枉过正,使用table展示数据都可能会被说不规范。本文将详细介绍HTML表格tabletable【默认样式】//IE7-浏览器不支持border-spacingtable{ border-collapse: separate; border-spacing: 2px; border:...原创 2020-02-07 15:38:05 · 589 阅读 · 0 评论 -
了解HTML列表
从某种意义上讲,不是描述性文本的任何内容都可以认为是列表。人口普查、太阳系、餐馆菜单等都可以表示为一个列表或列表的列表。列表分为无序列表、有序列表和定义列表三种无序列表无序列表(unorder list)缩写为ul,即无数值排序项的集合,且它们在列表中的顺序是没有意义的。通常情况下,无序列表项的头部可以是几种形式,如一个点,一个圆形或方形。头部的风格并不是在页面的HTML描述定义,但在其相关的...原创 2020-02-07 15:37:52 · 651 阅读 · 0 评论