独木舟的木

iOS Developer

0%

发表于 更新于 分类于 Valine：
本文字数： 6.1k 阅读时长 ≈ 6 分钟

AVSpeechSynthesizer 及其相关类可以将文本转换为语音输出。

使用示例：
需要导入框架：#import <AVFoundation/AVFoundation.h>

// 语音合成器
AVSpeechSynthesizer *speechSynthesizer = [[AVSpeechSynthesizer alloc] init];
speechSynthesizer.delegate = self;
// 需要转换的文本
AVSpeechUtterance *utterance = [AVSpeechUtterance speechUtteranceWithString:@"人们敢于登上险峻的高山，只为追寻惊艳；人们乐于眺望辽阔的大海，只为饱览奇观；但人们也会在街上擦肩而过，却对彼此一无所感。倘若每个个体都是一场神迹，那为何所有人都对这神迹视而不见？"];
// 设置语言类别
AVSpeechSynthesisVoice *voice = [AVSpeechSynthesisVoice voiceWithLanguage:@"zh-CN"];
utterance.voice = voice;
// 设置播放语速
utterance.rate = 0.4;
// 设置声调，属性值介于 0.5(低音调)~2.0(高音调) 之间。
utterance.pitchMultiplier = 1.0;
// 设置朗读语句停顿延迟
utterance.postUtteranceDelay = 0.1;
// 语音合成器生成音频
[speechSynthesizer speakUtterance:utterance];
阅读全文 »

发表于 更新于 分类于 Valine：
本文字数： 2k 阅读时长 ≈ 2 分钟

查询手册

  • caniuse
    查询各款浏览器的各种版本对 HTML5 和 CSS3 的支持情况。
  • W3C 校验器
    该验证器用于检查 HTML，XHTML，SMIL，MathML 等 Web 文档的标记有效性。
  • 元素的 rel 属性文档
  • MetaExtensions 元数据扩展
  • lang 属性声明语言的全面说明
  • CSS Color Module Level 3
  • Unicode 10.0 Character Code Charts
  • Hex 颜色：color-hex
阅读全文 »

发表于 更新于 分类于 Valine：
本文字数： 3.8k 阅读时长 ≈ 3 分钟
  • 文档模型里任何代表某个元素的对象都至少能支持 HTMLElement 功能，其中一些还支持额外的功能。

理解：使用 DOM 可以读取或者设置 HTML 文档元素、设置 CSS 样式、配合 JavaScript 实现相关逻辑功能。

DOM 元素速览表

Document 的成员

使用方式：document.方法名

Document对象

阅读全文 »

发表于 更新于 分类于 Valine：
本文字数： 44k 阅读时长 ≈ 40 分钟

嵌入内容

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <meta charset="utf-8">
    <meta name="author" content="Hu QiLin">
    <meta name="description" content="确保输入值是电子邮箱地址或URL">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.icn">
</head>
<body>
    Here is a common form for representing the three activities in a triathlon.
    <p>
        <!--嵌入图像-->

    <span class="token comment">&lt;!--src属性：指定图像URL--></span>
    <span class="token comment">&lt;!--alt属性：img元素的备用内容--></span>
    <span class="token comment">&lt;!--指定 width 和 height 能让浏览器在图像尚未载入时正确摆放网页里的各个元素--></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>triathlon.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Triathlon Image<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>67<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
    <span class="token comment">&lt;!--在超链接里嵌入图像--></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>otherpage.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token comment">&lt;!--ismap, 创建了一个服务器端分区响应图：在图像上点击的位置会附加到URL上--></span>
        <span class="token comment">&lt;!--服务器端分区响应图，意味着服务器会根据用户在图像上点击区域的不同作出有差别的反应。--></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>triathlon.png<span class="token punctuation">"</span></span> <span class="token attr-name">ismap</span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Triathlon Image<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>67<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
    <span class="token comment">&lt;!--客户端分区响应图--></span>
    <span class="token comment">&lt;!--usemap属性：将map元素与图像关联--></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>triathlon.png<span class="token punctuation">"</span></span> <span class="token attr-name">usemap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#mymap<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Triathlon Image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>map</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mymap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>area</span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rect<span class="token punctuation">"</span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3,5,68,62<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>swimpage.html<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Swimimg<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>area</span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rect<span class="token punctuation">"</span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>70,5,130,62<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cyclepage.html<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Running<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>area</span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>otherpage.html<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>map</span><span class="token punctuation">></span></span>

<span class="token comment">&lt;!--点击此处的超链接，URL会在下方的 iframe 区域中被打开--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fruits.html<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>frame<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Fruits i Like<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>

<span class="token comment">&lt;!--iframe元素：在现有的HTML文档中嵌入另一张文档--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>iframe</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myframe<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>iframe</span><span class="token punctuation">></span></span>

<span class="token comment">&lt;!--embed元素：用于添加插件支持--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>embed</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.youtube.com/v/qzA60hHca9s?version=3<span class="token punctuation">"</span></span>
   <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>application/x-shockwave-flash<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>560<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>349<span class="token punctuation">"</span></span>
   <span class="token attr-name">allowfullscreen</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>

<span class="token comment">&lt;!--使用object嵌入插件内容--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>object</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>349<span class="token punctuation">"</span></span> 
    <span class="token attr-name">dada</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.youtube.com/v/qzA60hHca9s?version=3<span class="token punctuation">"</span></span> 
    <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>application/x-shockwave-flash<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token comment">&lt;!--param 元素，定义将要传递给插件的参数--></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>param</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>allowfullscreen<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token comment">&lt;!--指定备用内容，当指定内容不可用时显示--></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">></span></span>Sorry!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">></span></span>We can't display this content
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>object</span><span class="token punctuation">></span></span>

<span class="token comment">&lt;!--使用object元素嵌入图像--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>object</span> <span class="token attr-name">data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>triathlon.png<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iamge/png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>object</span><span class="token punctuation">></span></span>

<span class="token comment">&lt;!--使用object元素创建客户端分区响应图--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>map</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mymap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>area</span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rect<span class="token punctuation">"</span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3,5,68,62<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>swimpage.html<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Swimimg<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>area</span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rect<span class="token punctuation">"</span></span> <span class="token attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>70,5,130,62<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cyclepage.html<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Running<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>area</span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>otherpage.html<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>map</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>object</span> <span class="token attr-name">data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>triathlon.png<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iamge/png<span class="token punctuation">"</span></span> <span class="token attr-name">usemap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#mymap<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>object</span><span class="token punctuation">></span></span>


<span class="token comment">&lt;!--将object元素作为浏览器上下文环境--></span>
<span class="token comment">&lt;!--点击此处的链接，在下方object所描述的区域显示内容--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>activities.html<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>frame<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Activities I Like<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>object</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/html<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>frame<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>object</span><span class="token punctuation">></span></span>


</body>
</html>
:hexoPostRenderEscape–>

阅读全文 »

发表于 更新于 分类于 Valine：
本文字数： 229 阅读时长 ≈ 1 分钟

插件资源站点

Crx4Chrome

想下载 Chrome 扩展程序？但是 Chrome 应用商店又打不开。去这个站点下载。

Greasy Fork - 安全、有用的用户脚本大全

在 Chrome 上安装了一个叫 Tampermonkey 的脚本管理器之后，需要下载脚本，去这个站点。

阅读全文 »

发表于 更新于 分类于 Valine：
本文字数： 5.5k 阅读时长 ≈ 5 分钟

步骤进度条效果参考

iOS UIKit 框架中并没有提供类似的控件，我们可以使用 UIProgressView、UIView、UILabel 组合实现步骤进度条效果。

  • UIProgressView—— 实现水平的进度条效果；
  • UIView—— 把 UIView 裁剪成圆形，实现索引节点效果；
  • UILabel—— 每个节点下面的提示文字。
阅读全文 »

发表于 更新于 分类于 Valine：
本文字数： 6.1k 阅读时长 ≈ 6 分钟

HTML 列表

列表元素 含义
ol order list，有序列表
ul unorder list，无序列表
li list item，列表项目
dl definition list，自定义说明列表
dt 说明列表中的术语
dd 说明列表中的定义
阅读全文 »

发表于 更新于 分类于 Valine：
本文字数： 134k 阅读时长 ≈ 2:02

表单

  • form：表示 HTML 页面上的表单；

  • input：输入文本框，用于收集用户输入的数据；

  • button：表单中的按钮；

  • method：get/pust

  • action：发送表单数据到指定的服务器位置；

  • enctype：表单数据的编码方式

    enctype 值 说明
    application/x-www-form-urlencoded 默认值
    multipart/form-data 用于上传文件
    text/plain
阅读全文 »

发表于 更新于 分类于 Valine：
本文字数： 83k 阅读时长 ≈ 1:16

HTML 表格

表格元素 含义
table HTML 文档中的表格
tr 表格行
th 表头。（单元格中的标题元素），对单元格数据的说明
td 单元格
  • HTML 中的表格基于行而不是列，每个行必须分别标记。
  • HTML5 中，表格不应该，也不能用来处理页面布局。
阅读全文 »

发表于 更新于 分类于 Valine：
本文字数： 75k 阅读时长 ≈ 1:08

hgroup 元素 - 隐藏子标题

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <style type="text/css">
        h1, h2, h3 {background: grey; color: white;}

        hgroup > h1 {margin-bottom: 0px;}

        hgroup > h2 {background: grey; color: white; font-size: 1em; margin-top: 0px}
    </style>
</head>
<body>
    <!--hgroup元素可以用来将几个标题元素作为一个整体处理-->

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hgroup</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>我是标题一<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>我是标题二<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>hgroup</span><span class="token punctuation">></span></span>
我喜欢苹果和橘子。
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>外部的标题二<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
我也喜欢苹果和橘子。
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span>更多信息<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span>
待到山花烂漫时，它在丛中笑。


</body>
</html>
:hexoPostRenderEscape–>
作者的意图：通过缩小hgroup元素中两个标题元素的间距将二者拉拢在一起，并且为二者设置同样的背景色，可以在外观上明确揭示二者的关系。

阅读全文 »