实例为从我文章中读取标题。 通过 class 属性锁定标题元素，把匹配的内容打印出来。...WebHtmlTest { public static void main(String[] args) throws IOException { /* 作用：从url...中读取web页面的内容 */ String html_url = "https://lanzao.blog.csdn.net/article/details/119329989...= new BufferedReader(input_stream_reader); String html_reader_line = null;...// 读取html内容 while ((html_reader_line = html_reader.readLine()) !
继上一轮改造过后，比较拖页面加载速度的主要有三点： 页面首个请求响应时间； 图片资源加载时间； 站内搜索引用的 JSON 资源加载时间。...第 1 点在页面仍然托管在 GitHub Pages 的前提下，似乎没有什么好办法能产生质的飞跃；本篇主要改善了第 2 点和第 3 点。...有没有一劳永逸的方法？当然也有，我们从 Jekyll 的 layout 机制来想办法。...Jekyll 的 layout 可以理解为页面模板，它是可以继承的，比如我的博客的所有页面模板有一个共同的祖先模板 _layouts/default.html，模板里可以使用 Liquid 语法对内容进行处理...2.7 uses: actions/setup-ruby@v1 with: ruby-version: 2.7 - name:
那么，有没有办法扩大其适用场景？ 有。关键在于如何理解“静态”，静态、动态实际上描述的是内容的变化频率，几乎（永远）不会变，或者变化频率很低的内容，我们称之为静态内容。...所以只要想办法应对内容变化，就有可能把 SSG 的适用场景从经常不变的“静态内容”扩大到不经常变的“动态内容” 极限情况下，“不经常变”等价于“不是每一次都变”，也就是说，除了实时/个性化等每时每刻都动态变化的内容...，没有应用服务器的高额机器成本，也不用担心 SSR 在线服务的可用性和运维工作 借助 SSR 扩大 SSG 的应用场景不得不考虑与之俱来的成本问题，那么，有没有成本更低的办法？...SSR 能够有效缩短页面加载过程中的白屏时间，同时提供页面内容一次性完整呈现的畅快体验，与之相比，CSR 渲染性能依赖客户端环境、数据请求滞后等缺点变得无限大，大到掩盖了 CSR 的高光优势： 无刷新加载内容...站内跳转走 CSR：之后交互操作中的页面跳转，通过 CSR 无缝加载新内容，甚至能够预测用户行为提前加载目标页的内容 即，首屏加载工作交给更快的 SSR 来做，交互过程中让 CSR 大展身手： When
继上一轮改造过后，比较拖页面加载速度的主要有三点： 页面首个请求响应时间； 图片资源加载时间； 站内搜索引用的 JSON 资源加载时间。...第 1 点在页面仍然托管在 GitHub Pages 的前提下，似乎没有什么好办法能产生质的飞跃；本篇主要改善了第 2 点和第 3 点。...有没有一劳永逸的方法？当然也有，我们从 Jekyll 的 layout 机制来想办法。...Jekyll 的 layout 可以理解为页面模板，它是可以继承的，比如我的博客的所有页面模板有一个共同的祖先模板 _layouts/default.html，模板里可以使用 Liquid 语法对内容进行处理...步里复制的 token 值； 在博客源码根目录下新建文件 .github/workflows/ci.yml，内容如下： 大意就是在向 master 分支 push 代码时，自动执行 checkout、初始化 ruby
一、HTML5语义化标签 标签 描述 页面独立的内容区域。 页面的侧边栏内容。 允许您设置一段文本，使其脱离其父元素的文本方向设置。... ruby 注释（中文注音或字符）。 字符（中文注音或字符）的解释或发音。 在 ruby 注释中使用，不支持 ruby 元素的浏览器所显示的内容。...2.5 文章标记 （1）表示的是一个文档、页面、应用或是网站中的一个独立的容器。...（2）根据 HTML 4.01 规范，q 元素应当使用分界引号来呈现，就是说，q 元素包含的文本必须以引号来开始和结束。...2.18 预格式化的文本 （1）被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
PHP 是一种 HTML 内嵌式的在服务器端执行的脚本语言，所以大部分 PHP 开发出来的 Web 应用，初始的开发模板就是混合层的数据编程。...虽然通过 MVC 设计模式可以把程序应用逻辑与网页呈现逻辑强制性分离，但也只是将应用程序的输入、处理和输出分开，网页呈现逻辑（视图）还会有 HTML 代码和 PHP 程序强耦合在一起。...在一个有着几个页面的应用程序，使用在页面中插入包含的所有必要逻辑可能就足够了，但是当使用一个路由器的时候，找到一个好的模板引擎是很重要的。下表列举的六个绝佳的 PHP 模板引擎可能会助你一臂之力。...Liquid 生成 Shopify（以及原始的 Ruby），Liquid 是在限制用户权限的同时又可使其自定义页面服务风格的完美语言。...此外，这个语言是跨平台的，并且相同的模板可在 PHP 和 Ruby 中交替使用。
而不是使用+css 语义化好处 使HTML结构变的清晰，有利于维护代码和添加样式 通常语义化HTML会使代码变的更少，使页面加载更快 即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构... 定义文档中的节，表示HTML文档中包含的独立部分。 表示文档的一部分，其内容仅与文档的主要内容间接相关,通常显示为侧边栏。... 表示项目的无序列表，通常呈现为项目符号列表。 表示项目的有序列表，通常呈现为编号列表。 表示列表中的项目。... 表示文本是从键盘上键入的，它经常用在与计算机相关的文档或手册中。 表示已从文档中删除的文本范围。 表示已添加到文档中的文本范围。...: 规定在文本中的何处适合添加换行符。 : 定义度量衡，仅用于已知最大和最小值的度量。 弃用的HTML元素 这些是旧的HTML元素，已弃用，不应继续使用。
说起“标注”，在HTML5之前，你可能想起的是各种浏览器插件，emmmmmmm或者说你根本不认为浏览器上可以有这种玩意。 但是HTML5来了，这是它的时代。...据说在不支持ruby的浏览器中也能这样适应： ?...：比如遮挡页面其余内容、精确度不高等等。... 笔者的思路是：当用户鼠标“抬起”时，去判断有没有选中文本，如果没有则啥事没有、反之则要将这一部分选中的文本替换成标签！...这里还有一个问题是：在笔者实践过程中发现，ruby标签是没有办法嵌套在行内元素中的：它会带着其内包裹的文字消失不见 ！这一点一定注意。 好了，你总不能让用户一直处于这个状态吧。
wap页面怎么做?...这种做法有个很大的弊病，小屏隐藏多余的元素来展示页面，而实际上那些元素你都加载进来了，浪费资源。 前面两种做法也很难完美还原设计图的尺寸。那有什么好的办法呢？...它是直接写在页面上，模拟手机看源码吧view-source:http://m.mi.com/v2.html。...有没有更智能的方式？ 为什么每次都要通过小工具去换算单位呢，有没有办法让单位自动换算的？ 直接用css当然是行不通的，虽然它有calc()这个属性，但是兼容性不强。...它是基于ruby环境的，这个我就不计较了，反正安装方式跟node一样简单，安装子。后来发现它竟然不支持正则，还能不能好好玩耍了？ 最后就用了先进的stylus。
标签 描述 标题标签 HTML中一共有六级标题，标题按字号大小从大到小为H1、H2、H3、H4、H5、H6 用于定义HTML中的段落 和 标签用于插入一个简单换行符，...标签在ruby注释中使用，以定义不支持标签的浏览器所显示的内容 标签主要用来在视觉上向用户呈现那些需要突显或高亮显示的文字 标签用于定义日期或时间...；接着是标题，这里面的内容一般简短，具有总结性，会展示在页面；细节一开始是隐藏的，当点击时便会展现。...它有一个属性dir，用来定义文本的方向，属性值为ltr，文本从左向右正常方向，属性值为rtl，文本从右向左；默认属性值为auto。...pubdate 指示 元素中的日期 / 时间是文档（或 元素）的发布日期。
大家好，我是「前端实验室」爱分享的了不起~ 单页Web应用（single page web application，SPA）：SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的...我们通常使用Laravel，Ruby on Rails或Django等框架构建服务器端渲染的应用程序，通过创建控制器，从数据库中获取数据（通过ORM），并呈现视图。...但是，Inertia 视图是用 React、Vue 或 Svelte 编写的 JavaScript 页面组件。...下面我们就简单介绍了解下Inertia.js Inertia.js Inertia 允许创建完全客户端呈现的单页应用程序，而没有现代 SPA 带来的复杂性。...DOCTYPE html> <meta name="viewport" content="width=device-width
/weiyigeek.top.html" datetime="2022-05">定义从文档中被删除文本。...标签 描述: 该标签表示一些被从文档中添加（插入）的文字内容，比如可以在需要显示更新记录或者源代码差异的情况使用这个标签。.../weiyigeek.top.html" datetime="2023-02">定义从文档中被添加(插入)的文本。...ruby 标签 描述: HTML 元素 被用来展示东亚文字注音或字符注释。 示例: 表现为 U+200B ZERO-WIDTH SPACE （零宽空格）代码点。
HTML5中不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的符合页面的形式，删除以上这三个标签。...中div被广泛用于各种布局环境在，没有明确的定义，HTML5为了SEO将div语义化了，新增加结构标签如下： a)、section元素 表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。...例：HTML5中……;HTML4中 ……。 b)、article元素 表示页面中一块与上下文不相关的独立内容。比如一篇文章。...d)、header元素 表示页面中一个内容区块或真个页面的标题。 e)、hgroup元素 表示对真个页面或页面中的一个内容区块的标题进行组合。...> IE8浏览效果： 为什么不显示，因为IE8不认识section这个HTML5标签，浏览器测试结果如下： 从IE9开始才部分支持HTML5中的标签。
Liquid是由Shopify创建并使用Ruby编写的模板语言。现在，它可以作为GitHub上的开源项目使用，并被许多不同的软件项目和公司使用。...模板语言可以重新使用定义网页布局的静态元素，同时使用Shopify商店中的数据动态填充页面。静态元素用HTML编写，动态元素用Liquid编写。...当文件中的代码被编译并呈现在Shopify商店的产品页面上时，Liquid对象的输出将是产品的标题。...例如，在服装店中，结果可能是： Awesome T-Shirt 即使Shopify商店中的每个产品都使用相同的模板，模板中的Liquid对象也会根据您正在查看的产品页面输出不同的数据。...呈现网页时，大括号百分比定界符{％％}及其周围的文本不会产生任何可见输出。 这使您可以分配变量并创建条件或循环，而无需在页面上显示任何Liquid逻辑。
其实这个问题在我们开发的时候根本不会遇到，只会出现在面试中。 那如果是你，你怎么回答呢？...语义化可以这样理解，对比下我们生活中人和人沟通交流，要想更高效的将信息传达出去或者解决问题，就需要想办法表达清楚，要语义明确，有逻辑性。...另外使用语义化的标签后，即便网页没有样式，依然能保持页面呈现清晰的主次结构，使你的页面可读性较高，如果全用 div，这是完全做不到的。...xml html 页面标题 标题 段落 链接 无序列表 有序列表 到了html5...读者必看：既然读到了这里，就别这么快离开，奔着学习和交流的目的，可以思考下我说的对不对，有没有问题，和你的理解有什么不同。所以请思考片刻，留下你的足迹，交流是进步最快的途径。
从各式各样的前端监控平台中，你都可以获得页面许多的功用方针。本文将介绍几个几个比较要害的方针，并给出相应的优化思路。...关于该时间点的优化有： 1)优化服务器照应时间，服务器端尽早输出 2)减少html文件大小 3)减少头部资源,脚本尽量放在body中 DOM Ready 该时间点标明dom解析现已结束，资源还没有加载结束...具体规范可以查看W3C的HTML5规范。...(要害呈现途径)来描绘，在文章【要害呈现途径】中具体介绍了要害呈现途径对DOMContentLoaded的影响。...在不支持DOMContentLoaded工作的浏览器中可以通过仿照获取近似值，首要的仿照办法有： 1）低版本webkit内核浏览器可以通过轮询document.readyState来结束 2）ie中可通过
HTML文件由头部（head）和主体（body）构成部分，头部用于制定标题及引用了那些js/CSS文件，主体用于描述具体呈现内容，如下例CH2Tags.html： 1. 文件CH2Tags.html中声明了标题：“CH2: Tags Demo”，指定引用VisualizeLib.js和CH2Contour.js两个js文档，类似于C/C++包含头文件；主体里包含了标签... 定义页面内容之外的内容。 定义声音内容。 定义粗体字。 定义页面中所有链接的默认地址或默认目标。 不赞成使用。... 定义若浏览器不支持 ruby 元素显示的内容。 定义 ruby 注释的解释。 定义 ruby 注释。 定义加删除线的文本。...，h2，h3分别表示一级、二级、三级标题； 2. p和div都可以表示段落，但div功能非常强大； 3. img表示图片，在下面的例子中，我们在页面中插入一幅照片： <img src="/i/eg_tulip.jpg
GitHub Pages 是一个静态网站托管服务，直接从github仓库托管你个人、公司或者项目页面 ，并且不需要你写任何后端语言来支持。...在修改模板中，我暂时只改了_config.yml、index.html，在../assets/img里面加上了一些图片，将../_posts里的文章整理了一下。...为了看到博客呈现出来的效果，就要用上我们上一步安装的 Jekyll，先打开命令行，将路径修改至博客模板所在路径，执行命令 jekyll server，复制 http://127.0.0.1:4000/...由于我们的博客原来已经引用了rouge插件，所以_includes/head.html中已经引用了该css文件。...同时，由于感觉代码字号太小，我还试着修改博客的字号大小，首先，根据head.html的信息，博客参数引用自hux-blog.min.css文件中: <!
## 客户端渲染 (CSR)客户端渲染（CSR）是使用 JavaScript 在浏览器中呈现内容的过程。...当请求的是使用 CSR 的网页时，服务器会发送回一个占位符 HTML 文档和一个将渲染页面的其余部分并填充浏览器中的 JavaScript 文件。...大多数搜索引擎只能爬取从 URL 返回的内容，而不能爬取在浏览器中可能发生的结果。...在2010年代中期，静态站点生成器工具（如Jekyll）的流行崛起，允许开发人员在构建过程中从模板生成任意数量的静态HTML文件。不再需要手工制作耗时的单个HTML文件来获得静态渲染的好处了，太好了！...SSG是最适合不经常更改的内容站点和页面的呈现方法。博客、作品集、文档站点和信息内容都是SSG的绝佳用例。要更新内容，请触发站点的重新构建，新预生成的资产将在构建过程完成后准备好从CDN提供服务。
领取专属 10元无门槛券
手把手带您无忧上云
