PS: 此资料为本人学习双越老师课程过程中的记录加上平时的一些积累, 如果有问题请及时联系

HTML篇

如何理解HTML语义化?

让人更容易读懂 (增加代码可读性)
让搜索引擎更容易读懂(SEO Search Engine Optimization: 搜索引擎优化)

默认情况下, 那些是块级元素, 那些是行级元素?

块级元素
display设置为block或者table的元素, 默认元素有等行级元素 display设置为inline或者inline-block的元素, 默认元素有置换元素一个元素, 如果存在默认有CSS格式化外表范围的元素, 其实是拥有内在尺寸, 这些元素性质同行内元素设置了inline-block一样置换元素有 <label> <button></code></p> <h1>CSS篇</h1> <h3>1. 布局</h3> <h5>1.1 盒子模型的宽度</h5> <ul> <li>offsetWidth = (内容宽度 + 内边距 + 边框), 不包含外边距</li> </ul> <h5>1.2 margin纵向重合</h5> <ul> <li>纵向相邻元素的<code>margin-top</code>和<code>margin-bottom</code>会发生重叠, 重叠后的元素间距为大的那个数</li> <li>空白内容的标签会直接重叠</li> </ul> <h5>1.3 margin设置为负值</h5> <ul> <li> <code>margin-top</code>和<code>margin-left</code>设置为负值, 元素会像上/左偏移</li> <li> <code>margin-right</code>设置为负值, 右侧元素向左偏移, 自身不受影响, 类似元素实际宽度变小</li> <li> <code>margin-bottom</code>设置为负值, 下侧元素上移, 自身不受影响, 类似自身元素高度变小</li> </ul> <h5>1.4 margin溢出</h5> <ul> <li>当父元素没有设置边界时, 子元素的margin会溢出, 直接作用于父节点上, 导致父元素发生偏移</li> <li>如:</li> </ul> <pre><code><style> .father { background: #66ccff; height: 300px; width: 300px; } .father .child { height: 200px; width: 200px; margin-top: 50px; border: 1px solid; } </style> <body> <div class="father"> <div class="child"></div> </div> </body> </code></pre> <p>效果如图</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 478px;"> <div class="image-view"> </div> </div> <div class="image-caption"> 页面效果 </div> </div> <br> <p>解决方案</p> <ol> <li>给父元素添加边框</li> <li>给父元素设置<code>::before</code>伪元素, 并设置<code>display: table/inline-block;</code> </li> <li>给父元素添加内边距</li> </ol> <h5>1.5 什么是BFC</h5> <ul> <li>BFC (Block Format Context), 块级格式化上下文</li> <li>一块独立渲染区域, 内部元素渲染不会影响外界元素</li> </ul> <h5>1.6 形成BFC的条件</h5> <ul> <li>设置<code>float</code>且值不为<code>none</code> </li> <li>设置<code>position</code>为<code>absolute</code>或者<code>fixed</code> </li> <li>设置<code>overflow</code>且值不为<code>visible</code> </li> <li>设置<code>display</code>为<code>flex / inline-block</code>等</li> </ul> <h5>1.7 BFC的常见应用</h5> <ul> <li>清除浮动</li> </ul> <h5>float布局</h5> <ul> <li>圣杯布局及双飞翼布局 (略)</li> <li>手写clearfix (略)</li> </ul> <h5>1.8 flex布局</h5> <ul> <li>略</li> </ul> <blockquote> <p>省略内容后续会陆续补充</p> </blockquote> <h3>2. 定位</h3> <h5>2.1 position参照</h5> <p><code>absolute</code></p> <ul> <li>依据父级第一个定位元素进行定位</li> <li>如果查询到<code>body</code>都不存在定位元素则根据<code>body</code>进行定位<br> <code>relative</code> </li> <li>依据自身位置进行偏移</li> </ul> <h5>2.2 居中对齐方式</h5> <p>2.2.1 水平居中</p> <ul> <li> <code>inine</code>元素: <code>text-align: center;</code> </li> <li> <code>block</code>元素: <code>margin: auto;</code> </li> <li> <code>absolute</code>元素: <code>left: 50%; margin-left: -(自身宽度的50%);/transform: translateX: (-50%); (支持CSS3)</code> </li> </ul> <p>2.2.2 垂直居中</p> <ul> <li> <code>inline</code>元素: <code>line-height</code>值设置为<code>height</code>值</li> <li> <code>absolute</code>元素: <code>top: 50%; margin-top: -(自身高度的50%);transform: translateY: (-50%) (支持CSS3)</code> </li> </ul> <p>2.2.3 垂直水平居中</p> <ul> <li> <code>absolute</code>元素: <code>top: 50%;left: 50%;transform: translate(-50%, -50%);</code> </li> <li> <code>absolute</code>元素: <code>top, left, bottom, right = 0; margin: auto;</code> </li> </ul> <h3>3. 图文样式</h3> <h5>3.1 line-height继承</h5> <ul> <li>如果父元素设置为具体数值, 如 30px, 则继承该值</li> <li>如果父元素设置为比例, 如2或1.5, 则继承该比例</li> <li>如果父元素设置为百分比, 如200%, 则继承计算后的值 (注意!)</li> </ul> <h3>4. 响应式</h3> <h5>4.1 rem</h5> <ul> <li> <code>px</code> 绝对长度单位, 最常用</li> <li> <code>em</code> 相对长度单位, 相对于父元素(自身字体大小), 不常用<br> <em>注: 除非元素字体大小使用em作为单位, 否则1em都等于自身元素字体大小, 而不是父元素</em> </li> <li> <code>rem</code> 相对长度单位, 响应式布局常用<br> <em>注: 1rem的长度为该页面根元素的字体大小</em> </li> </ul> <h5>4.2 如何实现响应式</h5> <ul> <li>使用<code>media-query + rem</code>, 根据不同屏幕大小设置根节点字体大小<br> <em>注: <code>media-query</code>使用<code>only</code>关键字时, 如果前面条件不满足, 就不会判断后续条件</em> </li> <li>rem存在阶梯性的弊端, 只有到达设定的宽高界限才会应用设置的样式</li> </ul> <p>补: 网页窗口尺寸</p> <ul> <li> <code>window.screen.height</code> --- 屏幕高度</li> <li> <code>window.screen.innerHeight</code> --- 网页视口高度</li> <li> <code>window.screen.clientHeight</code> --- <code>body</code>元素高度</li> </ul> <h5>4.3 vw/vh</h5> <ul> <li> <code>vh</code>的大小为网页视口高度的1%</li> <li> <code>vw</code>的大小为网页视口宽度的1%</li> <li> <code>vmax</code>的大小为两者中较大的那个</li> <li> <code>vmin</code> 的大小为两者中较小的那个</li> </ul> </article> </div> </div> </div>  <div id="SOHUCS" sid="1744325811302842368"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端基础知识-HTML/CSS篇)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> <span class="text-muted">某公司摸鱼前端</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835508123746529280.htm" title="那个抄袭的大张伟" target="_blank">那个抄袭的大张伟</a> <span class="text-muted">猫小努</span> <div>最近一直在追《即刻电音》这个综艺，除了觉得出场节目的音乐制作人有意思之外，也觉得有两个导师挺有趣的（另外一个就忽略了吧）。孙艺兴在上一篇文章里面已经说过了，那么这篇就说说我们的大老师，大张伟吧。其实在节目刚开始大张伟出来的时候，我以为他是属于导师里面来活跃气氛负责搞笑的，毕竟孙艺兴属于卖萌卖傻卖老实的，尚雯婕一般负责装逼耍狠的，而大张伟一贯以来上综艺的形象基本上都是蹦蹦跳跳带动气氛的。谁知道，两期</div> </li> <li><a href="/article/1835501774031646720.htm" title="18-115 一切思考不能有效转化为行动，都TM是扯淡！" target="_blank">18-115 一切思考不能有效转化为行动，都TM是扯淡！</a> <span class="text-muted">成长时间线</span> <div>7月25号写了一篇关于为什么会断更如此严重的反思，然而，之后日更仅仅维持了一周，又出现了这次更严重的现象。从8月2号到昨天8月6号，5天！又是5天没有更文！虽然这次断更时间和上次一样，那为什么说这次更严重？因为上次之后就分析了问题的原因，以及应该如何解决，按理说应该会好转，然而，没过几天严重断更的现象再次出现，想想，经过反思，问题依然没有解决与改变，这让我有些担忧。到底是哪里出了问题，难道我就真的</div> </li> <li><a href="/article/1835500751997202432.htm" title="直返最高等级与直返APP：无需邀请码的返利新体验" target="_blank">直返最高等级与直返APP：无需邀请码的返利新体验</a> <span class="text-muted">古楼</span> <div>随着互联网的普及和电商的兴起，直返模式逐渐成为一种流行的商业模式。在这种模式下，消费者通过购买产品或服务，获得一定的返利，并可以分享给更多的人。其中，直返最高等级和直返APP是直返模式中的重要概念和工具。本文将详细介绍直返最高等级的概念、直返APP的使用以及与邀请码的关系。【高省】APP（高佣金领导者）是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，运行三年，稳定可靠。高省APP，</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> <span class="text-muted">彩云飘过</span> <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835498219489030144.htm" title="高端密码学院笔记285" target="_blank">高端密码学院笔记285</a> <span class="text-muted">柚子_b4b4</span> <div>高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要</div> </li> <li><a href="/article/1835497077891756032.htm" title="想明白这个问题，你才能写下去" target="_blank">想明白这个问题，你才能写下去</a> <span class="text-muted">文自拾</span> <div>春节放假的时候，又有一天梦见她，第二天她冒着漫天大雪，傻傻地跑来见我。她说，见见傻傻的我，天很冷，心很暖。她回去后，我写了一篇文章，题目叫——从此梦中只有你。我们没在一起的很长一段时间里，她都在我的心底，一次次出现在我的梦里。我对她说，在一起之前，是胆小且闷骚，在一起之后，我变得不要脸了。不要脸的——去爱你。那文章没写完，火车上，给她看了。我有点小失望，花了好几个小时写，她分分钟就看完，很希望她逐</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835493397553573888.htm" title="2022现在哪个打车软件比较好用又便宜实惠的打车软件合集" target="_blank">2022现在哪个打车软件比较好用又便宜实惠的打车软件合集</a> <span class="text-muted">高省APP珊珊</span> <div>这是一个信息高速传播的社会。信息可以通过手机，微信，自媒体，抖音等方式进行传播。但同时这也是一个交通四通发达的社会。高省APP，是2022年推出的平台，0投资，0风险、高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，也期待你的加入。珊珊导师，高省邀请码777777，注册送2皇冠会员，送万元推广大礼包，教你如何1年做到百万团队。高</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> <span class="text-muted">dmengmeng</span> <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835491859351302144.htm" title="Python 实现图片裁剪（附代码） | Python工具" target="_blank">Python 实现图片裁剪（附代码） | Python工具</a> <span class="text-muted">剑客阿良_ALiang</span> <div>前言本文提供将图片按照自定义尺寸进行裁剪的工具方法，一如既往的实用主义。环境依赖ffmpeg环境安装，可以参考我的另一篇文章：windowsffmpeg安装部署_阿良的博客-CSDN博客本文主要使用到的不是ffmpeg，而是ffprobe也在上面这篇文章中的zip包中。ffmpy安装：pipinstallffmpy-ihttps://pypi.douban.com/simple代码不废话了，上代码</div> </li> <li><a href="/article/1835490092068728832.htm" title="Redis系列：Geo 类型赋能亿级地图位置计算" target="_blank">Redis系列：Geo 类型赋能亿级地图位置计算</a> <span class="text-muted">Ly768768</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>1前言我们在篇深刻理解高性能Redis的本质的时候就介绍过Redis的几种基本数据结构，它是基于不同业务场景而设计的：动态字符串(REDIS_STRING)：整数(REDIS_ENCODING_INT)、字符串(REDIS_ENCODING_RAW)双端列表(REDIS_ENCODING_LINKEDLIST)压缩列表(REDIS_ENCODING_ZIPLIST)跳跃表(REDIS_ENCODI</div> </li> <li><a href="/article/1835485884070326272.htm" title="2019-11-04复盘——飞来山上千寻塔，闻说鸡鸣见日升。" target="_blank">2019-11-04复盘——飞来山上千寻塔，闻说鸡鸣见日升。</a> <span class="text-muted">那一叶秋</span> <div>1、大盘篇先上老图，看习惯了，也就知道走势了图1上证指数日线图还是那张老图，自己可以在自己的相关软件上画出来，快变盘了。2、个股篇未加仓、未减仓。分析量能的时候，突然发现这么一个东西：“放量突破年线，缩量回调。”合众科技日线图其实，最近的N只个股，在技术分析上，都到了变盘的临界时候。结合这么久的走势，特别是ZJH不断放开IPO的申请，本质上说是融资难度变大，或者说是为企业的融资开创便利。但现在市场</div> </li> <li><a href="/article/1835476984034062336.htm" title="【六】阿伟开始搭建Kafka学习环境" target="_blank">【六】阿伟开始搭建Kafka学习环境</a> <span class="text-muted">能源恒观</span> <a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>阿伟开始搭建Kafka学习环境概述上一篇文章阿伟学习了Kafka的核心概念，并且把市面上流行的消息中间件特性进行了梳理和对比，方便大家在学习过程中进行对比学习，最后梳理了一些Kafka使用中经常遇到的Kafka难题以及解决思路，经过上一篇的学习我相信大家对Kafka有了初步的认识，本篇将继续学习Kafka。一、安装和配置学习一项技术首先要搭建一套服务，而Kafka的运行主要需要部署jdk、zook</div> </li> <li><a href="/article/1835465778510524416.htm" title="戴先华2021.4.18《我的第129篇幸运作业》" target="_blank">戴先华2021.4.18《我的第129篇幸运作业》</a> <span class="text-muted">39f4298779c4</span> <div>2021.4.18今天小宝和大表姐出去玩，我和婆婆在烧饭，突然小宝冲了进来，告诉奶奶说：“奶奶，奶奶姐姐在亭子里倒了”我一下子看出小宝的紧张，马上跑了出去，发现大外甥女又患了病，看起来心疼极了，整个人面朝地下的倒下了，在地上不停的抽搐，额头摔了一个大泡，整张脸都是紫色的，眼睛边上都出血了，真的是非常紧张，这么多年姐姐两夫妻就这样看着自己的孩子一次次晕倒，姐夫这么多年，年年都拿不出钱回家，使得家一次</div> </li> <li><a href="/article/1835462578059440128.htm" title="我与《红楼梦》‖纪念曹雪芹出生307周年！归海逸舟是周成功子阳佳乐" target="_blank">我与《红楼梦》‖纪念曹雪芹出生307周年！归海逸舟是周成功子阳佳乐</a> <span class="text-muted">归海逸舟是周成功子阳佳乐</span> <div>【今日作家推荐】中国古典小说之首《红楼梦》，其作者曹雪芹是文坛泰斗。约1715年5月28日，曹雪芹出生。所以，今天推荐的是中国人众所周知的作家——曹雪芹。曹雪芹在世界读者心目中也影响广大，可以与西方世界引以为豪的莎士比亚、歌德等媲美。1、我与《红楼梦》我一直想写一篇和《红楼梦》相关的文章，现在机会终于来了！《红楼梦》作为我国家喻户晓的文学名著，其影响是空前的。还在我很小的时候，姥姥经常讲《红楼梦》</div> </li> <li><a href="/article/1835462485629562880.htm" title="白骑士的Java教学基础篇 2.5 控制流语句" target="_blank">白骑士的Java教学基础篇 2.5 控制流语句</a> <span class="text-muted">白骑士所长</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E6%95%99%E5%AD%A6/1.htm">教学</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>欢迎继续学习Java编程的基础篇！在前面的章节中，我们了解了Java的变量、数据类型和运算符。接下来，我们将探讨Java中的控制流语句。控制流语句用于控制程序的执行顺序，使我们能够根据特定条件执行不同的代码块，或重复执行某段代码。这是编写复杂程序的基础。通过学习这一节内容，你将掌握如何使用条件语句和循环语句来编写更加灵活和高效的代码。条件语句条件语句用于根据条件的真假来执行不同的代码块。if语句‘</div> </li> <li><a href="/article/1835461350327939072.htm" title="系统架构设计师需求分析篇二" target="_blank">系统架构设计师需求分析篇二</a> <span class="text-muted">AmHardy</span> <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1%E5%B8%88/1.htm">软件架构设计师</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/1.htm">系统架构</a><a class="tag" taget="_blank" href="/search/%E9%9C%80%E6%B1%82%E5%88%86%E6%9E%90/1.htm">需求分析</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E5%88%86%E6%9E%90/1.htm">面向对象分析</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E6%9E%90%E6%A8%A1%E5%9E%8B/1.htm">分析模型</a><a class="tag" taget="_blank" href="/search/UML%E5%92%8CSysML/1.htm">UML和SysML</a> <div>面向对象分析方法1.用例模型构建用例模型一般需要经历4个阶段：识别参与者：识别与系统交互的所有事物。合并需求获得用例：将需求分配给予其相关的参与者。细化用例描述：详细描述每个用例的功能。调整用例模型：优化用例之间的关系和结构，前三个阶段是必需的。2.用例图的三元素参与者：使用系统的用户或其他外部系统和设备。用例：系统所提供的服务。通信关联：参与者和用例之间的关系，或用例与用例之间的关系。3.识别参</div> </li> <li><a href="/article/1835450512426758144.htm" title="手机上有什么兼职可以做？网上兼职一单一结手机就可以做？" target="_blank">手机上有什么兼职可以做？网上兼职一单一结手机就可以做？</a> <span class="text-muted">优惠券高省</span> <div>建议上班族和全职宝妈把空闲时间拿出来一点做做副业，什么也不耽搁还能多一笔收入！推荐大家一定要试一试！！！只要有手机就可以做，下面小编就为大家推荐用手机就可以做的三类网上兼职工作。一，高省APP高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，也期待你的加入。万方导师高省邀请码005500，注册送双皇冠会员，送万元推广大礼包，教你如</div> </li> <li><a href="/article/1835449106064044032.htm" title="2023-06-19【感恩日记】第246篇" target="_blank">2023-06-19【感恩日记】第246篇</a> <span class="text-muted">o泡沫o</span> <div>思想日记：坚持下去，相信自己一定可以的【感恩日记】第246篇1.我真是太幸福啦！感恩孩子早起阅读，放学到学生之家完成作业，平安度过美好的一天。感恩！感恩！感恩！❤️2.我真是太幸福啦！感恩自己早起给孩子煮早餐，完成计划的工作，晚上学习。感恩！感恩！感恩！❤️3.我真是太幸福啦！感恩为我设计效果图的老师。感恩！感恩！感恩！❤️4.我真是太幸福啦！感恩父母养育了我，有妈的孩子真幸福。感恩！感恩！感恩！</div> </li> <li><a href="/article/1835447700980592640.htm" title="摄影小白，怎么才能拍出高大上产品图片？" target="_blank">摄影小白，怎么才能拍出高大上产品图片？</a> <span class="text-muted">是波妞唉</span> <div>很多人以为文案只要会码字，会排版就OK了！说实话，没接触到这一行的时候，我的想法更简单，以为只要会写字就行！可是真做了文案才发现，码字只是入门级的基本功。一篇文章离不开排版、配图，说起来很简单！从头做到尾你就会发现，写文章用两个小时，找合适的配图居然要花掉半天的时间，甚至更久！图片能找到合适的就不怕，还有找不到的，比如产品图，只能亲自拍。拿着摆弄了半天，就是拍不出想要的效果，光线不好、搭出来丑破天</div> </li> <li><a href="/article/1835442755619352576.htm" title="【创客文案社】第三期写手招募" target="_blank">【创客文案社】第三期写手招募</a> <span class="text-muted">筱瑶123</span> <div>创客文案社第三期写手招募开始了。要求：1：注册一个月以上2：本身热爱写作3：有时间参与接单投稿参与方式：可以关注公众号：写作灵感；也可以通过其他转发文章的文友帮忙拉入群；也可以简信我。参与之后的文友，会先进入新人班，进行基本的试稿与培训，先接一些比较简单的单子；在这里可以一边赚钱，一边学习。不知不觉，来三四个月了，也发现了很多很有意思的现象。1：在上写一篇文章，基本都是几毛钱，多的也不过几块钱的收</div> </li> <li><a href="/article/1835442248255369216.htm" title="[故旧之事]外婆记事(28)" target="_blank">[故旧之事]外婆记事(28)</a> <span class="text-muted">石里夜人</span> <div>二十七．破四旧本来是庆祝儿童节的日子，因为报纸的一篇文章，让很多家庭陷入了惶恐之中。为了响应这项旨在“破除旧思想、旧文化、旧风俗、旧习惯”的群众运动，街道里的干部给大家开了会，做了总动员，要求大家首先自省，从身边的人开始，自纠自查。院里的街坊们回到家，转悠了一圈，发现并没有什么可做的。这几条街家家都很穷。有的人翻了家里的书，除了把孩子的课本留着，找到仅有的几本旧书，一把火塞进了炉膛里。有的人检查了</div> </li> <li><a href="/article/1835441932583661568.htm" title="ESP32-C3入门教程网络篇⑩——基于esp_https_ota和MQTT实现开机主动升级和被动触发升级的OTA功能" target="_blank">ESP32-C3入门教程网络篇⑩——基于esp_https_ota和MQTT实现开机主动升级和被动触发升级的OTA功能</a> <span class="text-muted">小康师兄</span> <a class="tag" taget="_blank" href="/search/ESP32-C3%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/1.htm">ESP32-C3入门教程</a><a class="tag" taget="_blank" href="/search/https/1.htm">https</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/esp32/1.htm">esp32</a><a class="tag" taget="_blank" href="/search/OTA/1.htm">OTA</a><a class="tag" taget="_blank" href="/search/MQTT/1.htm">MQTT</a> <div>文章目录一、前言二、软件流程三、部分源码四、运行演示一、前言本文基于VSCodeIDE进行编程、编译、下载、运行等操作基础入门章节请查阅：ESP32-C3入门教程基础篇①——基于VSCode构建HelloWorld教程目录大纲请查阅：ESP32-C3入门教程——导读ESP32-C3入门教程网络篇⑨——基于esp_https_ota实现史上最简单的ESP32OTA远程固件升级功能二、软件流程</div> </li> <li><a href="/article/1835441611320946688.htm" title="阅读笔记：阅读方法中的逻辑和转念" target="_blank">阅读笔记：阅读方法中的逻辑和转念</a> <span class="text-muted">施吉涛</span> <div>聊聊一些阅读的方法论吧，别人家的读书方法刚开始想写，然后就不知道写什么了，因为作者写的非常的“精致”我有一种乡巴佬进城的感觉，看到精美的摆盘，精致的食材不知道该如何下口也就是《阅读的方法》，我们姑且来试一下强劲的大脑篇，第一节：逻辑通俗的来讲，也就是表达的排列和顺序，再进一步就是因果关系和关联实际上书已经看了大概一遍，但直到打算写一下笔记的时候，才发现作者讲的推理更多的是阅读的对象中呈现出的逻辑也</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> <span class="text-muted">有一只柴犬</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> <span class="text-muted">夜空_2cd3</span> <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/76.htm" title="遍历dom 并且存储（将每一层的DOM元素存在数组中）" target="_blank">遍历dom 并且存储（将每一层的DOM元素存在数组中）</a> <span class="text-muted">换个号韩国红果果</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>数组从0开始！！ var a=[],i=0; for(var j=0;j<30;j++){ a[j]=[];//数组里套数组，且第i层存储在第a[i]中 } function walkDOM(n){ do{ if(n.nodeType!==3)//筛选去除#text类型 a[i].push(n); //con</div> </li> <li><a href="/article/203.htm" title="Android+Jquery Mobile学习系列(9)-总结和代码分享" target="_blank">Android+Jquery Mobile学习系列(9)-总结和代码分享</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/JQuery+Mobile/1.htm">JQuery Mobile</a> <div>目录导航经过一个多月的边学习边练手，学会了Android基于Web开发的毛皮，其实开发过程中用Android原生API不是很多，更多的是HTML/Javascript/Css。个人觉得基于WebView的Jquery Mobile开发有以下优点： 1、对于刚从Java Web转型过来的同学非常适合，只要懂得HTML开发就可以上手做事。 2、jquerym</div> </li> <li><a href="/article/330.htm" title="impala参考资料" target="_blank">impala参考资料</a> <span class="text-muted">dayutianfei</span> <a class="tag" taget="_blank" href="/search/impala/1.htm">impala</a> <div>记录一些有用的Impala资料 1. 入门资料 >>官网翻译： http://my.oschina.net/weiqingbin/blog?catalog=423691 2. 实用进阶 >>代码&架构分析： Impala/Hive现状分析与前景展望：http</div> </li> <li><a href="/article/457.htm" title="JAVA 静态变量与非静态变量初始化顺序之新解" target="_blank">JAVA 静态变量与非静态变量初始化顺序之新解</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%9D%99%E6%80%81/1.htm">静态</a><a class="tag" taget="_blank" href="/search/%E9%9D%9E%E9%9D%99%E6%80%81/1.htm">非静态</a><a class="tag" taget="_blank" href="/search/%E9%A1%BA%E5%BA%8F/1.htm">顺序</a> <div>今天和同事争论一问题，关于静态变量与非静态变量的初始化顺序，谁先谁后，最终想整理出来！测试代码： import java.util.Map; public class T { public static T t = new T(); private Map map = new HashMap(); public T(){ System.out.println(&quo</div> </li> <li><a href="/article/584.htm" title="跳出iframe返回外层页面" target="_blank">跳出iframe返回外层页面</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/iframe/1.htm">iframe</a> <div>在web开发过程中难免要用到iframe，但当连接超时或跳转到公共页面时就会出现超时页面显示在iframe中，这时我们就需要跳出这个iframe到达一个公共页面去。首先跳转到一个中间页，这个页面用于判断是否在iframe中，在页面加载的过程中调用如下代码： <script type="text/javascript"> // </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>

前端基础知识-HTML/CSS篇

HTML篇

如何理解HTML语义化?

默认情况下, 那些是块级元素, 那些是行级元素?

置换元素