html5
关注
分享
扫一扫
文章平均质量分 76
html5html5html5html5
心湖中的石子
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
sass笔记（完结）安装，使用，vscode中设置easy sass，嵌套，变量，混合，循环，分支
1、sass的安装 概念： 一门css的扩展语言，本质上一个脚本编程语言。通过sass所有的特点能够极大的提高编写css的效率。即用部分的sass代码代替之前写的繁琐的css代码。 sass 底层是由一个面向对象的编程语言ruby来编写的。 1、npm安装ruby再安装sass 2、vscode直接搜索easy sass插件 2、sass使用 后缀 .sass或.scss 3、在vscode中的settings设置sass文件转为css文件的相关配置信息 在vscode中的 settings.json原创 2021-10-13 20:10:36 · 4829 阅读 · 0 评论 -
品优购前端练习
| 浏览器 | 内核 | 备注 | | :------ | :------------: | :----------------------------------------------------------- | | IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 | | firefox | Gecko | 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 | | Safari | webkit | 现在很多人错误地把 webk原创 2021-03-23 20:48:04 · 169 阅读 · 1 评论 -
HTML5权威指南读书笔记25（完结）（第37章）--使用拖放
1、概述 浏览器兼容还存在很大的问题原创 2020-11-29 17:48:50 · 138 阅读 · 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 · 144 阅读 · 0 评论 -
HTML5权威指南读书笔记23（第34章）--使用多媒体
1、概述 2、使用video元素 3、预加载视频preload 4、显示占位符（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 · 102 阅读 · 0 评论 -
HTML5权威指南读书笔记22（第32，33章）--使用AJAX（I,II）
1、概述原创 2020-11-29 16:38:52 · 121 阅读 · 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 · 195 阅读 · 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 · 280 阅读 · 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 · 245 阅读 · 0 评论 -
HTML5权威指南读书笔记18（第27章）-window对象，获取窗口信息，获取scree信息，与窗口交互，用户提示，基本信息，history对象，pushstate添加条目，使用定时器
1、概述 <script type="text/javascript"> console.log(window.outerWidth); console.log(window.outerHeight); </script> 2、获取窗口信息 window.outerWidth 3、Screen对象获取屏幕信息 <script type="text/javascript"> cons原创 2020-11-26 18:06:58 · 256 阅读 · 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 · 238 阅读 · 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 · 104 阅读 · 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 · 161 阅读 · 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 · 292 阅读 · 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 · 209 阅读 · 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 · 231 阅读 · 0 评论 -
HTML5权威指南读书笔记11（第20章）--使用盒模型
1、概述原创 2020-11-24 23:22:47 · 122 阅读 · 0 评论 -
HTML5权威指南读书笔记10（第19章）--边框和背景
1、概述 2、边框样式 border-width，border-style，border-color 3、边框样式列表 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 · 147 阅读 · 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 · 208 阅读 · 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 · 129 阅读 · 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 · 141 阅读 · 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 · 138 阅读 · 0 评论 -
HTML5权威指南读书笔记05（第11,12章）--table表格，form表单
1、table，tr，td基本表格 略 2、th th：表头 <body> <table> <tr> <th>rank</th><th>name</th> <th>color</th><th>size</th> </tr> <tr>原创 2020-11-22 16:12:02 · 140 阅读 · 0 评论 -
HTML5权威指南读书笔记04（第9,10章）一些暂时看上去也没有什么大用处的标签
1、P，Div，pre，blockquote p:段落 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 · 200 阅读 · 0 评论 -
HTML5权威指南读书笔记03（第7，8章）--icon，base，锚点，一些七七八八的元素
1、概述原创 2020-11-19 15:17:17 · 245 阅读 · 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 · 135 阅读 · 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 · 172 阅读 · 0 评论