content.json

{"meta":{"title":"帅气的小钟","subtitle":"小钟の博客","description":"博客因兴趣诞生,在不断完善中","author":"小钟","url":"https://zhongyuanqiong.github.io","root":"/"},"pages":[{"title":"关于小钟","date":"2021-10-01T04:58:56.000Z","updated":"2021-10-26T16:25:01.216Z","comments":false,"path":"about/index.html","permalink":"https://zhongyuanqiong.github.io/about/index.html","excerpt":"","text":"帅气的小钟“ 认识自我、超越自我 “ 那么你离成功就又进了一步！ 当你在项目中感觉所要学习的人和事越来越多时，说明你在 成长 。 当你感觉要责怪的人和事越来越少时，说明你在 成熟 。 当你在项目中不断获得了友谊和朋友时，说明你将取得项目的 成功 。 联系我B站：吃粉笔灰11（萌新up） QQ：892340235 （嘀嘀~，麻烦让一下，我要开车了！） 座右铭：愿你历尽千帆 看遍山河美景 归来仍是少年！！！"},{"title":"archives","date":"2019-10-24T16:00:00.000Z","updated":"2021-06-27T12:40:24.587Z","comments":true,"path":"archives/index.html","permalink":"https://zhongyuanqiong.github.io/archives/index.html","excerpt":"","text":""},{"title":"分类","date":"2020-11-24T07:12:19.000Z","updated":"2021-07-26T14:44:28.785Z","comments":false,"path":"categories/index.html","permalink":"https://zhongyuanqiong.github.io/categories/index.html","excerpt":"","text":""},{"title":"留言板","date":"2020-10-31T02:11:28.000Z","updated":"2021-08-14T07:44:13.518Z","comments":false,"path":"comments/index.html","permalink":"https://zhongyuanqiong.github.io/comments/index.html","excerpt":"","text":"new Artitalk({ appId: 'o2lydQokojD1IP8EGhex24WU-MdYXbMMI', appKey: '8ykSyPm9CwzCDdR5dbid1AWT' })"},{"title":"友情链接","date":"2018-06-07T14:17:49.000Z","updated":"2021-10-11T15:45:06.402Z","comments":true,"path":"link/index.html","permalink":"https://zhongyuanqiong.github.io/link/index.html","excerpt":"","text":"小钟"},{"title":"我的歌单","date":"2019-05-17T08:14:00.000Z","updated":"2021-07-26T13:06:54.000Z","comments":true,"path":"music/index.html","permalink":"https://zhongyuanqiong.github.io/music/index.html","excerpt":"","text":""},{"title":"标签","date":"2020-11-24T07:14:39.000Z","updated":"2021-07-26T14:44:42.337Z","comments":false,"path":"tags/index.html","permalink":"https://zhongyuanqiong.github.io/tags/index.html","excerpt":"","text":""},{"title":"相册","date":"2021-08-14T10:54:08.719Z","updated":"2021-08-14T10:54:08.719Z","comments":false,"path":"List/gallery/index.html","permalink":"https://zhongyuanqiong.github.io/List/gallery/index.html","excerpt":"","text":"壁纸 收藏的一些壁纸 OH MY GIRL 关于OH MY GIRL的图片"},{"title":"","date":"2019-08-10T08:41:10.000Z","updated":"2021-07-26T07:32:29.746Z","comments":false,"path":"List/movies/index.html","permalink":"https://zhongyuanqiong.github.io/List/movies/index.html","excerpt":"","text":"励志视频"},{"title":"Music-BBOX","date":"2020-04-23T04:58:56.000Z","updated":"2021-10-08T18:36:41.567Z","comments":false,"path":"List/music/index.html","permalink":"https://zhongyuanqiong.github.io/List/music/index.html","excerpt":"","text":""},{"title":"","date":"2021-08-14T10:51:08.180Z","updated":"2021-08-14T10:51:08.180Z","comments":false,"path":"List/gallery/wallpaper/index.html","permalink":"https://zhongyuanqiong.github.io/List/gallery/wallpaper/index.html","excerpt":"","text":""},{"title":"","date":"2020-11-24T08:05:01.000Z","updated":"2021-08-13T06:23:02.212Z","comments":false,"path":"List/gallery/ohmygirl/index.html","permalink":"https://zhongyuanqiong.github.io/List/gallery/ohmygirl/index.html","excerpt":"","text":""}],"posts":[{"title":"javaScript-BOM操作","slug":"javaScript-BOM操作","date":"2021-10-21T16:19:11.000Z","updated":"2021-10-26T16:22:46.169Z","comments":true,"path":"posts/z7.html","link":"","permalink":"https://zhongyuanqiong.github.io/posts/z7.html","excerpt":"","text":"BOM（浏览器对象模型 Browser object model ） BOM描述与浏览器进行交互的方法和接口 BOM包括： document—DOM location对象 —–用于获取或者设置窗体的URL history对象 —–浏览器历史记录 访问过的URL navigator对象 —–有关浏览器的信息 Screen对象 ——对象包含有关用户屏幕的信息 location对象:location对象的属性： location.href —————- 获取或者设置整个url location.search ————-返回参数 location.host —————- 返回主机名（域名） www.baidu.com location.port —————–返回端口号 location.pathname ———返回路径 location.hash ————-返回片段 #后面的内容 常见于锚点链接 location对象方法： location.assign() ————–跟href一样，可以跳转页面 （也称为重定向页面） location.replace() ————-替换当前页面，因为不记录历史 ，所以不能后退 location.reload() —————重新加载页面 ，相当于f5刷新按钮","categories":[{"name":"Javascript","slug":"Javascript","permalink":"https://zhongyuanqiong.github.io/categories/Javascript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zhongyuanqiong.github.io/tags/JavaScript/"},{"name":"BOM","slug":"BOM","permalink":"https://zhongyuanqiong.github.io/tags/BOM/"}]},{"title":"JS的运行机制","slug":"JS的运行机制","date":"2021-10-21T08:00:00.000Z","updated":"2021-10-26T16:23:15.294Z","comments":true,"path":"posts/z10.html","link":"","permalink":"https://zhongyuanqiong.github.io/posts/z10.html","excerpt":"","text":"相遇皆是缘分 JS的运行机制： 先执行执行栈里面的同步任务 异步任务（回调函数）放入任务队列中 一旦执行栈中的全部同步任务执行完成后，系统就会按次序读取任务队列中的异步任务 于是异步任务结束等待状态，进入执行栈开始执行","categories":[{"name":"javaScript","slug":"javaScript","permalink":"https://zhongyuanqiong.github.io/categories/javaScript/"}],"tags":[{"name":"javaScript","slug":"javaScript","permalink":"https://zhongyuanqiong.github.io/tags/javaScript/"}]},{"title":"javaScript-DOM操作","slug":"javaScript-DOM操作","date":"2021-10-20T08:12:47.000Z","updated":"2021-10-26T16:22:57.074Z","comments":true,"path":"posts/z8.html","link":"","permalink":"https://zhongyuanqiong.github.io/posts/z8.html","excerpt":"","text":"DOM（文档对象模式 document object Model） 文档：就是整个HTML网页文档 对象：网页中的每一个标签 模型：表示对象之间的关系 方便我们获取操作的对象 操作DOM的步骤：1.获取操作元素：//通过id获取标签元素 -- 获取id为box1的标签元素 var box = document.getElementById('box1'); //通过class获取标签元素 -- 获取class为box2的全部标签元素 注意 这里获取的是多个 是数组形式 通过下标来访问 比如box2[0] var box2 = document.getElementsByClassName('.box2'); //通过标签名获取标签元素 --获取所有标签为div的元素 注意 这里获取的是多个 是数组形式 通过下标来访问 比如div[0] var divs = document.getElementsTagName('div'); //通过id 或者class 来获取元素的另一种方法 //通过id 获取标签元素 --获取id为box3的标签元素 var box3 = document.querySelector('#box3'); //通过class 获取标签元素 --获取class为box3的标签元素 var box3 = document.querySelector('.box3'); //通过class 获取标签颜色 --获取class为box3的全部标签元素 var box3 = document.querySelectorAll('.box3'); //通过标签名获取标签元素 --获取所有标签为div的元素 --获取第一个 var box1 = document.querySelector('div'); 2.绑定响应事件 （回调函数）//给对象绑定事件 //对象.事件名=function(){} //比如 box1.onclick=function(){} 常见的事件 onclick 用户点击触发 onload 页面加载完成触发 onfocus 元素获得焦点 onblur 元素失去焦点 onsubmit 提交表单被点击 onmouseover 鼠标移入该元素之上 onmouserout 鼠标移出该元素 onmousemove 鼠标被移动 注意： 一个标签只能绑定一个相同的事件 如果给一个标签绑定两个onclick事件的话 第一个事件会失效  若想给一个标签绑定多个相同的事件的话 使用addEventListener(‘去掉on的事件名称’，function(){}); 可以同时为一个元素的相同事件同时绑定多个响应函数 //例如： box1.addEventListener('click',function(){}); 3.具体操作： DOM操作节点 document.createElement(‘标签名称’); —-创建元素（标签）节点 var btn=document.createElement('button'); document.createTextNode(‘文本内容’); —-创建文本节点 var text=document.createTextNode('我是一个按钮'); document.createAttribute(‘属性名’);——创建属性节点 var sx =document.createAttribute('id'); appendChild() ——向父节点添加一个新的子节点 用法：父节点.appendChild(子节点); //向上面创建好的按钮元素添加上面创建好的文本节点 btn.appendChild(text); removeChild()——–可以删除一个子节点 用法： 父节点.removeChild(子节点); document.removeChild(btn); insertBefore()———可以在指定的子节点前插入新的子节点 用法：父节点.insertBefore(新节点,旧节点); 例子：<html> <head> <script> addEventListener('load', function () { var box = document.getElementById('box'); //创建button 元素 节点 var btn = document.createElement('button'); //创建 文本节点 内容为 我是一个按钮 var text = document.createTextNode('我是一个按钮'); //向button 节点中 添加 text 文本节点 btn.appendChild(text); //向盒子中添加创建好的按钮 box.appendChild(btn); }); </script> </head> <body> <div id=\"box\"></div> </body> </html> DOM操作css样式 //通过样式直接设置元素的某一样式 元素.style.属性='值'; 如： a1.style.color='red'; //通过样式文本设置多项元素样式 元素.styleText=\"属性:值;属性:值;属性:值;\"; 如： a1.cssText=\"width:500px;height:100px;background:red;\"; DOM操作元素属性 (Attribute) //获取HTML自带的属性 元素.属性 不能获取自定义的属性 如src id.属性 如： a1.class a1.id //获取标签的属性 可以获取自带的属性也可以获取自定义的属性 id.getAttribute('属性名'); 如： a1.getAttribute('class'); //设置或者修改元素的属性 id.setAttribute('属性名','属性值'); 如 a1.setAttribute('id','box2'); //移除元素属性 removeAttribute('属性名'); 如 a1.removeAttribute('id'); DOM操作表单（form） value属性 设置或者获取文本框的值 a1.value='小钟'; alert(a1.value); onsubmit () 可设置用户提交表单触发事件 onreset() 表单重置触发事件 <!-----onsubmit 返回false 禁止表单提交 如 onsubmit='return false'-----> <form action=1.php method=post onsubmit='return a()'> </form> disabled属性 设置或者返回是否禁用文本框 a1.disabled='true' //禁用该内容 checked属性 作用于表单中的checkbox和radio 用于设置或者判断表单的当前状态","categories":[{"name":"Javascript","slug":"Javascript","permalink":"https://zhongyuanqiong.github.io/categories/Javascript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zhongyuanqiong.github.io/tags/JavaScript/"},{"name":"DOM","slug":"DOM","permalink":"https://zhongyuanqiong.github.io/tags/DOM/"}]},{"title":"bootstrarp框架的使用","slug":"bootstrarp框架的使用","date":"2021-10-14T02:24:35.000Z","updated":"2021-10-26T14:59:41.851Z","comments":true,"path":"posts/a3.html","link":"","permalink":"https://zhongyuanqiong.github.io/posts/a3.html","excerpt":"","text":"欢迎来到小钟的博客！ 什么是Bootstrarp框架？ bootstrarp是一个写网页的框架 就是说你只需要写HTML标签然后调用它提供的类你就可以很快速的做一个高大上的网页，你不用担心兼容问题，提供了很多样式供你选择！ 用它提供的样式和组件快速写网站 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 里面创建了很多样式或者组件供你使用 使用Bootstrarp框架的步骤： 到bootstrarp官网下载bootstrarp相关文件： https://v3.bootcss.com/getting-started/#download 创建文件夹结构： 打开HTML文件 引入下载好的bootstrarp相关文件： <link rel=\"stylesheet\" href=\"bootstrap/css/bootstrap.min.css\"> 书写你的网页内容 Bootstrarp框架的栅格系统： 超小屏幕（手机）<768px 小屏设备（平板）>=768px 中等屏幕（桌面显示器）>=922px 大屏屏幕（大桌面显示器） >=1200px .container 最大宽度 自动（100%） 750px 970px 1170px 类前缀 .col-xs- .col-sm- .col-md- .col-lg- 列（column）数 12 12 12 12 Bootstrarp提供了一套响应式，移动设备优先的流式栅格系统 ，随着屏幕或视口尺寸的增加， 系统会自动分为最多12列 行（row）必须放在container布局容器里面 通过行（row）在水平方向创建一组列（column） 你的内容应当放在列（column）内 一行最多分成12列 超过的则在下一行显示 实现列的平均划分 需要给列添加类前缀 可以同时为一列指定多个设备的类名，以便划分不同的份数 例如 class=”col-xs-12 col-md-2 col-lg-3” 每一列默认有15px的padding 例子：<!--------大屏幕的时候 一列占3份 中等屏幕的时候 一列占4份 平板的时候 一列占6份 手机的时候 一列占12份-------> <style> .row{ margin-top:50px; } .container .row div { border: 1px solid salmon; } </style> <!-----------container容器--> <div class=\"container\"> <!------------一行--> <div class=\"row\"> <div class=\"col-lg-3 col-md-4 col-sm-6 col-xs-12\">1</div> <div class=\"col-lg-3 col-md-4 col-sm-6 col-xs-12\">2</div> <div class=\"col-lg-3 col-md-4 col-sm-6 col-xs-12\">3</div> <div class=\"col-lg-3 col-md-4 col-sm-6 col-xs-12\">4</div> </div> </div> 效果图：","categories":[{"name":"框架","slug":"框架","permalink":"https://zhongyuanqiong.github.io/categories/%E6%A1%86%E6%9E%B6/"},{"name":"bootstrap","slug":"框架/bootstrap","permalink":"https://zhongyuanqiong.github.io/categories/%E6%A1%86%E6%9E%B6/bootstrap/"}],"tags":[{"name":"框架","slug":"框架","permalink":"https://zhongyuanqiong.github.io/tags/%E6%A1%86%E6%9E%B6/"},{"name":"bootstrarp","slug":"bootstrarp","permalink":"https://zhongyuanqiong.github.io/tags/bootstrarp/"}]},{"title":"Ajax笔记","slug":"Ajax笔记","date":"2021-10-12T16:28:54.000Z","updated":"2021-10-26T16:21:48.383Z","comments":true,"path":"posts/z2.html","link":"","permalink":"https://zhongyuanqiong.github.io/posts/z2.html","excerpt":"","text":"为什么要学习Ajax呢？因为传统网站中存在以下的问题： 网速慢的情况下，页面加载时间长，用户只能等待 表单提交后，如果一项内容不合格，需要重新填写所有表单内容 页面跳转，重新加载页面，造成资源的浪费，增加用户等待时间 Ajax:阿贾克斯它是浏览器提供的一套方法，可以实现页面无刷新就能更新数据,提高用户浏览网站应用的体验。 Ajax的应用场景： 页面上拉加载更多数据 列表数据无刷新分页 表单项离开焦点数据验证 搜索框提示文字下拉列表 Ajax的运行环境： Ajax技术需要运行在网站环境中才能生效 就是要搭建在服务区上 Ajax运行原理：Ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览网页的情况下局部刷新界面，从而提高用户体验 Ajax的实现步骤： 创建对象 var xhr = new XMLHttpRequest(); 用open(‘请求方式’,’请求地址’,同步（true）还是异步)； xhr.open(‘get’,’a.php’,true); 用send发送请求 或者参数(二选一) xhr.send(); (没有带参数) xhr.send(username=zhong&age=20); (带参数) 监听状态变化 xhr.onreadystatechange = function () { ​ if (xhr.readyState == 4 && xhr.status == 200) { 5.通过xhr.responseText获取服务器端响应的数据 ​ a.innerHTML = xhr.responseText; ​ } ​ } 例子：客户端：<h2 id='a'></h2> <script> var a = document.getElementById('a'); //1.创建对象 var xhr = new XMLHttpRequest(); //2.用open('请求发送','请求地址',同步(true)还是异步); xhr.open('get', 'a.php', true); // 用send发送请求 或者参数 xhr.send(); //3.在Ajax的onreadystatechange中创建函数，在函数中判断Ajax的状态并体现 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { //5.通过xhr.responseText获取服务器端响应的数据并且应用DOM技术局部刷新页面 a.innerHTML = xhr.responseText; } } </script> 服务端：<?php echo 'my name is xiaozhong'; ?> 效果图： 服务器端响应的数据格式（JSON）： 在真实的项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式 当客户端拿到数据后，要将JSON数据和HTML字符串拼接，然后将拼接结果展示在页面中 因为服务器端响应过来的数据是字符串 所以将JSON字符串转换为JSON对象（JSON.parse(Ajax对象.responseText)） 例子： 客户端： <script> addEventListener('load', function () { //通过DOM操作获取网页中的标签元素 var text = document.getElementById('text'); var age = document.getElementById('age'); //创建Ajax对象 var xhr = new XMLHttpRequest(); //用什么方式请求 请求的地址 同步还是异步 xhr.open('get', 'cs.php', true); //用send发送请求 xhr.send(); //监听状态变化 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { //JSON.parse()将JSON字符串解析为javaScript对象 var responseText = JSON.parse(xhr.responseText); text.innerHTML = responseText.name; age.innerHTML = responseText.age; } } }); </script> <body> 用户名:<h2 id=\"text\"></h2> 年龄：<h2 id=\"age\"></h2> </body> 服务器端： <?php echo '{\"name\":\"zhong\",\"age\":\"20\"}'; ?> 效果图： 请求参数传递： GET请求方式： xhr.open(‘get’,’a.php?username=xiaozhnog&pass=20’); <script> //获取输入框的内容存入str var str = 'username=' + username.value + '&' + 'pass=' + pass.value + '&' + 'email=' + email.value; // 创建AJAX对象 var xhr = new XMLHttpRequest(); //用什么方式发送请求 请求的地址 是同步还是异步 xhr.open('get', 'b.php?' + str, true); </script> POST请求方式： xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’); xhr.send(‘name=xiaozhong&age=20’); <script> //创建Ajax对象 var xhr = new XMLHttpRequest(); //用什么方式请求 请求的地址 同步还是异步 xhr.open('post', 'post.php', true); //使用send发送 var str = username.value; xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send('username=' + str); </script>","categories":[{"name":"Web前端","slug":"Web前端","permalink":"https://zhongyuanqiong.github.io/categories/Web%E5%89%8D%E7%AB%AF/"},{"name":"Ajax","slug":"Web前端/Ajax","permalink":"https://zhongyuanqiong.github.io/categories/Web%E5%89%8D%E7%AB%AF/Ajax/"}],"tags":[{"name":"Web前端","slug":"Web前端","permalink":"https://zhongyuanqiong.github.io/tags/Web%E5%89%8D%E7%AB%AF/"},{"name":"Ajax","slug":"Ajax","permalink":"https://zhongyuanqiong.github.io/tags/Ajax/"}]},{"title":"GET提交与POST提交详解","slug":"GET与POST的区别","date":"2021-10-05T05:00:00.000Z","updated":"2021-10-26T16:22:26.974Z","comments":true,"path":"posts/z5.html","link":"","permalink":"https://zhongyuanqiong.github.io/posts/z5.html","excerpt":"","text":"GET提交与POST提交详解：GET提交： 以键值对的方式提交 key:value 通过键名获取键值 安全性不高 因为请求数据加在地址（url）后面 传输数据量小 以GET提交方式有哪些： 网页中的超链接 form表单提交方式method为get 例子： <!---------第一种方法--> <a href=\"login.php?username=xiaozhong\">点击</a> <!--------第二种方法--> <form action=\"login.php\" method=\"get\"> 用户名：<input type=\"text\" name=\"username\"> <br /> 密码：<input type=\"password\" name=\"pass\"> <br /> <input type=\"submit\" value=\"登录\"> </form> 服务器端获取传递过来的数据（php） <?php //get方式获取传递的值 通过键名获取键值 $username=$_GET['username']; ?> <?php //post方式提交的获取传递的值 通过键名获取键值 $username=$_POST['username']; $pass=$POST['pass']; ?> 服务器端获取传递过来的数据（javaweb） String pname = request.getParameter(\"username\"); String pass = request.getParameter(\"pass\"); POST提交: 以键值对的方式提交 key:value 通过键名获取键值 安全性高 因为请求数据封装在HTML头中 传输数据量大 以POST提交方式： form表单提交方式method为post 例子： <!--------以post方式提交--> <form action=\"login.php\" method=\"post\"> 用户名：<input type=\"text\" name=\"username\"> <br /> 密码：<input type=\"password\" name=\"pass\"> <br /> <input type=\"submit\" value=\"登录\"> </form> 服务器端获取传递过来的数据（php） <?php //post方式提交的获取传递的值 通过键名获取键值 $username=$_POST['username']; $pass=$POST['pass']; ?> 服务器端获取传递过来的数据（javaweb） String pname = request.getParameter(\"username\"); String pass = request.getParameter(\"pass\"); 有两种提交数据的方式 那到底用哪种呢？ 具体需求具体分析 如果该项目对安全性有较高的要求 就用post 如果该表单需要上传文件时 就用post 如果该项目对安全性没有较高的要求 就用get 值得注意的是get提交有长度限制 因为地址（url）有长度限制","categories":[{"name":"web前端","slug":"web前端","permalink":"https://zhongyuanqiong.github.io/categories/web%E5%89%8D%E7%AB%AF/"}],"tags":[{"name":"Web前端","slug":"Web前端","permalink":"https://zhongyuanqiong.github.io/tags/Web%E5%89%8D%E7%AB%AF/"}]},{"title":"CSS之三大特性（层叠性-继承性-优先性）","slug":"CSS的之三大特性（层叠性-继承性-优先性）","date":"2021-10-03T07:00:00.000Z","updated":"2021-10-26T16:22:18.441Z","comments":true,"path":"posts/z4.html","link":"","permalink":"https://zhongyuanqiong.github.io/posts/z4.html","excerpt":"","text":"各位在编写样式时有遇到以下问题吗？ 在设置标签的样式时 选择器相同的情况下 样式相同会被覆盖 有些标签在你没有设置任何样式时 会默认有样式呢 比如（文字颜色和大小） 有时候设置标签样式没有效果 问题一解答： 为什么在设置标签的样式时 选择器相同的情况下 样式相同会被覆盖？ --这是因为CSS的层叠性 --层叠性：是指相同的选择器设置相同的样式时，一个样式会覆盖另一个样式 层叠性主要用来解决样式冲突问题 --在样式冲突时，遵循就近原则（后来居上），样式不冲突就不会层叠 因为代码顺序执行 例如： <html lang=\"en\"> <head><style> .box { width: 100px; height: 100px;background-color: red; } .box { /*相同的选择器*/ background-color: orange; /*相同的样式，会被覆盖上面的背景颜色red*/ border: 3px solid green; /*不同的样式 不会被覆盖*/ } </style></head> <body> <div class=\"box\">box</div> </body> </html> 效果图： 问题二解答：有些标签在你没有设置任何样式时 会默认有样式呢 比如（文字颜色和大小）？ --这是因为CSS的继承性 --继承性:子标签会继承父标签的某些样式 如文字颜色和大小 以text-,line-,font-开头的会被继承 例如： <html> <style> /*只设置父标签div的样式 没有设置子标签p的样式*/ .box { width: 100px; height: 100px; background-color: violet; color: greenyellow; font-size: 25px; } </style> <div class=\"box\"> <!----父标签-----> <p>我是小钟</p> <!------子标签------> </div> </html> 效果图： 问题三解答：为什么有时候设置标签样式没有效果？ --这是因为CSS中的优先级 --优先级（权重）：当给一个标签设置样式时，选择不同的选择器时， 会执行选择器权重高的样式，选择器权重低的样式不会被执行 --权重可以叠加 优先级（权重）表格： 选择器 选择器的权重 继承或者* 0.0.0.0 标签选择器 0.0.0.1 类选择器，伪类选择器 0.0.1.0 id选择器 0.1.0.0 行内样式 1.0.0.0 ！important 无穷大 可以简单的记忆： ---继承和通配符的权重为0 ---标签选择器的权重为1 ---类选择器以及伪类选择器的权重为10 ---id选择器的权重为100 ---行内样式的权重为1000 --- !important 的权重为无穷大 权重叠加：--如： -- p #text {} 权重为 1 + 100 = 101 -- .a1 #w {} 权重为 10 + 100 = 110 继承例子：<html> <style> /*继承权重为0*/ .box1{ width: 100px; height: 100px;border: 2px solid black; color: green; } p{ color:red; } </style> <div class=\"box1\"> <p>小钟</p> </div> </html> 效果图： 权重叠加例子：<html> <style> .box2 { /* 权重为 0.0.1.0 */ width: 10px; height: 10px; background-color: coral; } .box1 .box2 { /* 权重为0.0.1.0 + 0.0.1.0 = 0.0.2.0 */ width: 200px; height: 200px; background-color: greenyellow; } </style> <div class=\"box1\"> <div class=\"box2\">我是一个盒子</div> </div> </html> 效果图：","categories":[{"name":"CSS","slug":"CSS","permalink":"https://zhongyuanqiong.github.io/categories/CSS/"},{"name":"web前端","slug":"CSS/web前端","permalink":"https://zhongyuanqiong.github.io/categories/CSS/web%E5%89%8D%E7%AB%AF/"}],"tags":[{"name":"Web前端","slug":"Web前端","permalink":"https://zhongyuanqiong.github.io/tags/Web%E5%89%8D%E7%AB%AF/"},{"name":"CSS","slug":"CSS","permalink":"https://zhongyuanqiong.github.io/tags/CSS/"}]},{"title":"HTML中块级元素和行内元素以及行内块元素详解","slug":"HTML中块级元素和行内元素以及行内块元素详解","date":"2021-10-01T08:00:00.000Z","updated":"2021-10-26T16:31:34.554Z","comments":true,"path":"posts/z6.html","link":"","permalink":"https://zhongyuanqiong.github.io/posts/z6.html","excerpt":"","text":"你是否有以下困惑： 为什么有些标签能够设置宽度和高度，而有些标签不能设置呢？ 为什么有些标签能够独占一行，而有些标签一行可以放很多个呢？ 可我就想让这个标签可以设置宽度和宽度并且自己不占满一行呢？ 问题1解答：为什么有些标签能够设置宽度和高度，而有些标签不能设置呢？ ---因为在html中块级（block）元素和行内块（inline-block）元素可以设置宽度和高度 ---行内（inline）元素不可以设置宽度和高度 例如:<html> <style> .box1{ width:200px;height:200px;background-color: violet; } .box1{ width:200px;height:200px;background-color: red; } </style> <div class=box1>box1</div> <span class=box2>box2</span> </html> 效果： 问题2解答：为什么有些标签能够独占一行，而有些标签一行可以放很多个呢？ ---因为块级（block）元素独占一行 ---相邻行内（inline）元素或者行内块(inline-block)元素一行可以放很多个，直到充满整个父级盒子的宽度，才会换下一行显示 例如：<html> <style> .box1 { width: 200px;height: 100px;background-color: tomato; } .box2 { background-color: greenyellow; } </style> <div class=box1>one</div> <div class=box1>two</div> <br /> <span class=box2>1</span> <span class=box2>2</span> <input type=\"text\"> <input type=\"text\"> </html> 效果： 问题3解答：可我就想让这个标签可以设置宽度和宽度并且自己不占满一行呢？ ---如果该标签不是块级（block）元素或者不是行内块元素时： ---就将该标签进行模式转换成块级（display: block;）或者行内块元素(display: inline-block;) 例如:<html> <style> .box1 { display: block; width: 200px; height: 200px; background-color: pink; } </style> <span class=\"box1\"></span> </html> 效果： 常见的块级元素，行内元素，行内块元素有哪些？---块级元素： div,h1~h6, p,ul,ol,li ---行内元素： a,span,i,strong ---行内块元素：input,img,td 总结：--块级元素的特点： (1)可以设置宽度和高度 （2）自己单独占一行 （3）宽度默认是父级元素的宽度的100% （4）块级元素是一个容器或者是一个盒子，里面可以放行内元素或者放行内块元素 --行内元素的特点： （1）不能设置宽度和高度（无效） （2）相邻行内元素一行可以放很多个，直到充满整个父级盒子的宽度，才会换下一行显示 （3）默认宽度是它本身的内容宽度 （4）行内元素只能放行内元素或者文本 -行内块元素的特点： （1）它拥有块级元素和行内元素的特点 （2）可以设置宽度和高度（块级元素的特点） （3）宽度是它本身的内容宽度（行内元素的特点） （4）一行可以显示多个行内元素（行内元素的特点） 作者：小钟个人博客","categories":[{"name":"HTML","slug":"HTML","permalink":"https://zhongyuanqiong.github.io/categories/HTML/"},{"name":"web前端","slug":"HTML/web前端","permalink":"https://zhongyuanqiong.github.io/categories/HTML/web%E5%89%8D%E7%AB%AF/"}],"tags":[{"name":"HTML","slug":"HTML","permalink":"https://zhongyuanqiong.github.io/tags/HTML/"},{"name":"Web前端","slug":"Web前端","permalink":"https://zhongyuanqiong.github.io/tags/Web%E5%89%8D%E7%AB%AF/"}]},{"title":"JS的同步与异步","slug":"JS的同步和异步","date":"2021-09-21T08:00:00.000Z","updated":"2021-10-26T16:23:05.208Z","comments":true,"path":"posts/z9.html","link":"","permalink":"https://zhongyuanqiong.github.io/posts/z9.html","excerpt":"","text":"相遇皆是缘分 js是单线程语言 同一时间只能做一件事情 所以就意味着 所有的任务需要排队 上一个任务执行结束了 ， 下一个任务才会去执行这样就会导致 js执行时间过长的话 ， 就会造成页面渲染不连贯 为了解决这个问题 html5就允许JavaScript脚本可以创建多线程 所以就出现了同步和异步同步和异步：同步：上一个任务执行结束后 下一个任务才会执行；异步：在执行这个任务的同时，你还可以执行其他的任务；它们本质的区别是：这条流水线上各个流程的执行顺序不同；同步任务：同步任务都在主线程上执行，形成一个执行异步任务：js的异步是通过回调函数实现的；异步任务有以下三种类型： 1.普通事件，如click,resize ​ 2.资源加载，如load,error等 ​ 3.定时器： setinterval , setTimeout等 异步任务相关回调函数添加到任务队列（消息队列）","categories":[{"name":"javaScript","slug":"javaScript","permalink":"https://zhongyuanqiong.github.io/categories/javaScript/"}],"tags":[{"name":"javaScript","slug":"javaScript","permalink":"https://zhongyuanqiong.github.io/tags/javaScript/"}]},{"title":"Markdown快速入门小技巧(hexo博客文章--格式用法)","slug":"03-Markdown快速入门小技巧","date":"2021-06-21T08:00:00.000Z","updated":"2021-10-26T16:21:57.691Z","comments":true,"path":"posts/z1.html","link":"","permalink":"https://zhongyuanqiong.github.io/posts/z1.html","excerpt":"","text":"相遇皆是缘分 Markdown 的快速入门(后缀是 .md)快捷键ctrl+shift+1 大纲显示 ctrl+/ 源代码显示 代码块：```java(html等等) 会自动提示 标题#标题1 （大） ##标题2 ###标题3 ####标题4 （小） 以此类推 最高标题6 加粗//加粗 **加粗** //代码高亮显示 ==高亮== //删除线 ~~删除线~~ //斜体 *斜体内容* 引用：//引用语法 >作者：泽 >>作者：泽 >>>作者：泽 作者：泽 作者：泽 作者：泽 分割线//分割线 --- *** 图片插入//在线图片与本地图片 ![照片名子]（/image/me.png） 超链接//超链接语法 [超链接名字]（https://gihub.com/yerenping） 我的天空 列表//无需列表 - 目录1 -后加空格 - 目录2 - 目录3 //有序列表 1+. +名称 表格右键》插入》表格 用代码过于复杂不推荐使用 姓名 数字 语文 小王 85 21","categories":[{"name":"hexo博客","slug":"hexo博客","permalink":"https://zhongyuanqiong.github.io/categories/hexo%E5%8D%9A%E5%AE%A2/"},{"name":"Markdown","slug":"hexo博客/Markdown","permalink":"https://zhongyuanqiong.github.io/categories/hexo%E5%8D%9A%E5%AE%A2/Markdown/"}],"tags":[{"name":"hexo博客","slug":"hexo博客","permalink":"https://zhongyuanqiong.github.io/tags/hexo%E5%8D%9A%E5%AE%A2/"},{"name":"Markdown","slug":"Markdown","permalink":"https://zhongyuanqiong.github.io/tags/Markdown/"}]}],"categories":[{"name":"Javascript","slug":"Javascript","permalink":"https://zhongyuanqiong.github.io/categories/Javascript/"},{"name":"javaScript","slug":"javaScript","permalink":"https://zhongyuanqiong.github.io/categories/javaScript/"},{"name":"框架","slug":"框架","permalink":"https://zhongyuanqiong.github.io/categories/%E6%A1%86%E6%9E%B6/"},{"name":"bootstrap","slug":"框架/bootstrap","permalink":"https://zhongyuanqiong.github.io/categories/%E6%A1%86%E6%9E%B6/bootstrap/"},{"name":"Web前端","slug":"Web前端","permalink":"https://zhongyuanqiong.github.io/categories/Web%E5%89%8D%E7%AB%AF/"},{"name":"Ajax","slug":"Web前端/Ajax","permalink":"https://zhongyuanqiong.github.io/categories/Web%E5%89%8D%E7%AB%AF/Ajax/"},{"name":"web前端","slug":"web前端","permalink":"https://zhongyuanqiong.github.io/categories/web%E5%89%8D%E7%AB%AF/"},{"name":"CSS","slug":"CSS","permalink":"https://zhongyuanqiong.github.io/categories/CSS/"},{"name":"web前端","slug":"CSS/web前端","permalink":"https://zhongyuanqiong.github.io/categories/CSS/web%E5%89%8D%E7%AB%AF/"},{"name":"HTML","slug":"HTML","permalink":"https://zhongyuanqiong.github.io/categories/HTML/"},{"name":"web前端","slug":"HTML/web前端","permalink":"https://zhongyuanqiong.github.io/categories/HTML/web%E5%89%8D%E7%AB%AF/"},{"name":"hexo博客","slug":"hexo博客","permalink":"https://zhongyuanqiong.github.io/categories/hexo%E5%8D%9A%E5%AE%A2/"},{"name":"Markdown","slug":"hexo博客/Markdown","permalink":"https://zhongyuanqiong.github.io/categories/hexo%E5%8D%9A%E5%AE%A2/Markdown/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"https://zhongyuanqiong.github.io/tags/JavaScript/"},{"name":"BOM","slug":"BOM","permalink":"https://zhongyuanqiong.github.io/tags/BOM/"},{"name":"javaScript","slug":"javaScript","permalink":"https://zhongyuanqiong.github.io/tags/javaScript/"},{"name":"DOM","slug":"DOM","permalink":"https://zhongyuanqiong.github.io/tags/DOM/"},{"name":"框架","slug":"框架","permalink":"https://zhongyuanqiong.github.io/tags/%E6%A1%86%E6%9E%B6/"},{"name":"bootstrarp","slug":"bootstrarp","permalink":"https://zhongyuanqiong.github.io/tags/bootstrarp/"},{"name":"Web前端","slug":"Web前端","permalink":"https://zhongyuanqiong.github.io/tags/Web%E5%89%8D%E7%AB%AF/"},{"name":"Ajax","slug":"Ajax","permalink":"https://zhongyuanqiong.github.io/tags/Ajax/"},{"name":"CSS","slug":"CSS","permalink":"https://zhongyuanqiong.github.io/tags/CSS/"},{"name":"HTML","slug":"HTML","permalink":"https://zhongyuanqiong.github.io/tags/HTML/"},{"name":"hexo博客","slug":"hexo博客","permalink":"https://zhongyuanqiong.github.io/tags/hexo%E5%8D%9A%E5%AE%A2/"},{"name":"Markdown","slug":"Markdown","permalink":"https://zhongyuanqiong.github.io/tags/Markdown/"}]}