![](https://img-blog.csdnimg.cn/20201217195443786.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
html5
文章平均质量分 76
html5html5html5html5
心湖中的石子
这个作者很懒,什么都没留下…
展开
-
sass笔记(完结)安装,使用,vscode中设置easy sass,嵌套,变量,混合,循环,分支
1、sass的安装概念:一门css的扩展语言,本质上一个脚本编程语言。通过sass所有的特点能够极大的提高编写css的效率。即用部分的sass代码代替之前写的繁琐的css代码。sass 底层是由一个面向对象的编程语言ruby来编写的。1、npm安装ruby再安装sass2、vscode直接搜索easy sass插件2、sass使用后缀 .sass或.scss3、在vscode中的settings设置sass文件转为css文件的相关配置信息在vscode中的 settings.json原创 2021-10-13 20:10:36 · 4387 阅读 · 0 评论 -
品优购前端练习
| 浏览器 | 内核 | 备注 | | :------ | :------------: | :----------------------------------------------------------- | | IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 | | firefox | Gecko | 可惜这几年已经没落了,打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 | | Safari | webkit | 现在很多人错误地把 webk原创 2021-03-23 20:48:04 · 142 阅读 · 1 评论 -
HTML5权威指南读书笔记25(完结)(第37章)--使用拖放
1、概述浏览器兼容还存在很大的问题原创 2020-11-29 17:48:50 · 117 阅读 · 0 评论 -
HTML5权威指南读书笔记24(第35、36章)--使用canvas元素
1、概述2、开始使用canvas元素3、获取画布上下文对象(getContext())<head> <style type="text/css"> canvas{border:1px double gray} </style> </head><body> <canvas id="canvas" width="500" height="200" > your brow原创 2020-11-29 17:44:10 · 105 阅读 · 0 评论 -
HTML5权威指南读书笔记23(第34章)--使用多媒体
1、概述2、使用video元素3、预加载视频preload4、显示占位符(poster)、视频尺寸(width,height)<body> <video width="1920" height="1080" src="myvideo.mp4" autoplay controls preload="none" muted poster="./images/gril03.jpg">video can not be loaded</video></原创 2020-11-29 17:31:49 · 80 阅读 · 0 评论 -
HTML5权威指南读书笔记22(第32,33章)--使用AJAX(I,II)
1、概述原创 2020-11-29 16:38:52 · 100 阅读 · 0 评论 -
HTML5权威指南读书笔记21(第30,31章)-dom元素设置样式,media属性,CSSRuleList,cssText,便捷属性,优先级,获取属性值,计算属性
1、概述2、使用简单事件处理器用时间属性创建一个简单时间处理器(simple event handler)。元素为他们支持例如onmouseover事件对应全局时间mouseover<body> <p onmouseover="this.style.background='yellow'; this.style.color='red'" onmouseout="this.style.background='green'; this.style.color='black'"原创 2020-11-29 13:34:27 · 163 阅读 · 0 评论 -
HTML5权威指南读书笔记20(第29章)-dom元素设置样式,media属性,CSSRuleList,cssText,便捷属性,优先级,获取属性值,计算属性
1、概述2、使用样式表通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档关联的各个样式表每个样式都由一个CSSStyleSheet对象代表,它提供了一组属性和方法来操作文档里样式。<body> <p id="block1"> there is some things to do something, By the time add,countleess zhen </原创 2020-11-27 22:49:50 · 233 阅读 · 0 评论 -
HTML5权威指南读书笔记19(第28章)-dom元素,classname属性,classlist类列表,data开头自定义属性,attributes所有属性,text对象,添加创建克隆移动元素及节点
1、概述2、使用元素对象HTMLElement对象提供了一组属性,用来读取和修改被代表元素的数据<body> <p id="mytext" dir="ltr" lang="ch"> 这里有一些文本,那里还有一些文本,这里都是一些文本 </p> <pre id="results"></pre> <script type="text/javascript"> var r原创 2020-11-27 16:22:21 · 197 阅读 · 0 评论 -
HTML5权威指南读书笔记18(第27章)-window对象,获取窗口信息,获取scree信息,与窗口交互,用户提示,基本信息,history对象,pushstate添加条目,使用定时器
1、概述<script type="text/javascript"> console.log(window.outerWidth); console.log(window.outerHeight); </script>2、获取窗口信息window.outerWidth3、Screen对象获取屏幕信息<script type="text/javascript"> cons原创 2020-11-26 18:06:58 · 208 阅读 · 0 评论 -
HTML5权威指南读书笔记17(第26章)-Document对象,location,hash,cookie,ready,使用属性获取元素,数组标记元素,搜索元素,使用css搜索,链式搜索,Dom中导航
1、概述2、使用docuement元数据<head> <style type="text/css"> </style> <title>我是title</title> </head><body> <div id="mydiv1"> 是否存在重大依赖是否存在重大依<br/>赖是否存在重大依赖是否存在重大依赖是否存在重大依赖是否原创 2020-11-26 16:14:57 · 190 阅读 · 0 评论 -
HTML5权威指南读书笔记16(第25章)--Dom快速查询
1、document对象2、location对象3、window对象4、history对象5、screen对象6、htmlElement的成员7、Dom的css属性8、Dom中的事件原创 2020-11-25 23:15:17 · 79 阅读 · 0 评论 -
HTML5权威指南读书笔记15(第24章)--其他css属性和特性、颜色及透明,表格样式,空白单元格处理,标题位置,表格布局,列表样式,光标样式
1、概述2、设置元素的颜色和透明<head> <style type="text/css"> #mydiv1{ border:1px solid gray} span{width: 100px; height: 2em; border: 1px solid red;border: 1px solid red; } body{ color: red;} span:hover{backgro原创 2020-11-25 22:56:18 · 130 阅读 · 0 评论 -
HTML5权威指南读书笔记14(第23章)--动画过渡、反向过渡、linear,from,to,中间值,direction,关键帧重用,多元素共用关键帧,动画开启和停止,transform变换,起点
1、概述2、使用过渡<head> <style type="text/css"> #mydiv1{width: 400px; height: 500px; border:1px solid gray} span{ border: 1px solid red;border: 1px solid red; } span:hover{ background-color: hotpink;原创 2020-11-25 19:09:22 · 235 阅读 · 0 评论 -
HTML5权威指南读书笔记13(第22章)--文本控制,对齐,空白,方向,间距,断词,缩进,装饰,转换,阴影,字体,字体大小,粗细,样式,web字体
1、概述2、text-align对齐文本代码略3、text-justify指定文本添加空白的方式4、whitespace属性处理文本空白空格会被保留<head> <style type="text/css"> #mydiv{ white-space: pre-wrap;} </style> </head><body> <div id="mydiv">原创 2020-11-25 16:52:05 · 169 阅读 · 0 评论 -
HTML5权威指南读书笔记12(第21章)--创建布局postion,z-index,column-count,display:flex,box-flex、algin、pack,table
1、概述2、定位内容的位置<head> <style type="text/css"> <!--使用static和默认属性一致--> div{ position: static; top: 50px; left: 150px; width: 400px; height: 400px; border: 3px solid red;} <!--使用absolute和产生偏移,四个方向起作用-->原创 2020-11-25 10:52:50 · 181 阅读 · 0 评论 -
HTML5权威指南读书笔记11(第20章)--使用盒模型
1、概述原创 2020-11-24 23:22:47 · 90 阅读 · 0 评论 -
HTML5权威指南读书笔记10(第19章)--边框和背景
1、概述2、边框样式border-width,border-style,border-color3、边框样式列表4、单边样式5、border简写略6、border-radius圆角边框<head> <style type="text/css"> .myclass{ width: 200px; height: 200px; border-radius: 15px; border: 1px solid black;} </sty原创 2020-11-23 21:14:23 · 112 阅读 · 0 评论 -
HTML5权威指南读书笔记09(第18)--伪类选择器
1、概述2、使用根选择器:root选最根的目录。<head> <style type="text/css"> :root{color:blue;} </style> </head><body> hello <div class="myclass">myclass</div></body>3、使用子元素选择器:first-child,:last-ch原创 2020-11-23 20:07:50 · 167 阅读 · 0 评论 -
HTML5权威指南读书笔记08(第16,17章)--css选择器
1、css盒模型选择器简明参考2、属性简明参考–边框和背景3、属性简明参考–盒模型属性4、属性简明参考–布局属性5、属性简明参考–文本属性6、属性简明参考–过渡、动画和变换属性7、属性简明参考–其他属性8、CSS基本选择器–*通用选择器*{margin:0;padding:0;}9、类型(标签)选择器<style type="text/css"> a{color: red;} </style>10、类选择原创 2020-11-23 17:02:25 · 92 阅读 · 0 评论 -
HTML5权威指南读书笔记07(第14,15章)--img,map,iframe,embed,object,progress,meter
1、img嵌入图像及在超链接中嵌入图像,ismap分区响应图<body> <img src="./images/icon.ico"/> <a href="#"><img src="./images/icon.ico" ismap alt="here is alt"/></a></body>2、map分区响应图不常用3、iframe嵌入另一张html文档<body> <iframe原创 2020-11-23 15:10:19 · 106 阅读 · 0 评论 -
HTML5权威指南读书笔记06(第13章)--input的一些属性
1、input-type:text以下属性:size:大小,字符数目maxlength:最大字符placeholder:提示性文字datalist:见第二条option:见第二条readonly:只读disable:禁用dirname:文本方向type:password:密码类型type:submit,reset,button:提交,重置,一般类型2、使用datalist数据集,option元素文本框值自动补全建议值<body> <form id="my原创 2020-11-22 19:34:36 · 102 阅读 · 0 评论 -
HTML5权威指南读书笔记05(第11,12章)--table表格,form表单
1、table,tr,td基本表格略2、thth:表头<body> <table> <tr> <th>rank</th><th>name</th> <th>color</th><th>size</th> </tr> <tr>原创 2020-11-22 16:12:02 · 110 阅读 · 0 评论 -
HTML5权威指南读书笔记04(第9,10章)一些暂时看上去也没有什么大用处的标签
1、P,Div,pre,blockquotep:段落div:pre:预格式blockquote:引自他处的一篇内容。通常引用的内容比较多,有缩进<body> <blockquote>发送到 防守发 打发法 发送服务而</blockquote></body>效果如下发送到 防守发 打发法 发送服务而2、hr主题分割,ol元素,ul元素,li元素,dl,dt,dd元素略3、figure使用插图。figcaption元素figure原创 2020-11-22 11:22:33 · 173 阅读 · 0 评论 -
HTML5权威指南读书笔记03(第7,8章)--icon,base,锚点,一些七七八八的元素
1、概述原创 2020-11-19 15:17:17 · 206 阅读 · 0 评论 -
HTML5权威指南读书笔记02(第5,6章)--函数,对象,遍历,对象属性,数组等
1、使用带参,带返回值函数<head> <style type="text/css"> </style> <script type="text/javascript"> function introduce (name,age) { document.write("my name is "+name+" and my age is "+age); return "my name is原创 2020-11-18 22:44:19 · 88 阅读 · 0 评论 -
HTML5权威指南读书笔记01(第3,4章)--一些新属性和css的一些查缺补漏
1、class属性一个元素可以归入多个类,在class属性中使用空格分隔类名即可<div class="mycla1 mycla2">hello world</div>2、contentediable属性可编辑属性,单击后文本框内容可修改<div contenteditable="true">here is some contentediable world</div>3、dir文字方向属性实际是文字在父标签的的对齐方式<div di原创 2020-11-18 16:50:31 · 137 阅读 · 0 评论