HTML拾遗

HTML拾遗

Ruby 标签

定义和用法

<ruby> 标签定义 ruby 注释(中文注音或字符)。在东亚使用,显示的是东亚字符的发音。与 <ruby> 以及 <rt> 标签一同使用:
ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 “ruby“ 元素时显示的内容,类似于noscript标签

1
2
3
4
5
6
7
8
9
<div>
<h1>
给你一个
<ruby>
友善
<rt>bǐ shì</rt> </ruby
>的眼神
</h1>
</div>

实例

给你一个友善bǐ shì的眼神

强调 标签

定义和用法
以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式,但实际上,这些标签都拥有确切的语义。

我们并不反对使用它们,但是如果您只是为了达到某种视觉效果而使用这些标签的话,我们建议您使用样式表,那么做会达到更加丰富的效果。

<em> : 把文本定义为强调的内容。
<strong> : 把文本定义为语气更强的强调的内容。
<dfn> : 定义一个定义项目。
<code> : 定义计算机代码文本。
<samp> : 定义样本文本。
<kbd> : 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var> : 定义变量。您可以将此标签与 <pre><code> 标签配合使用。
<cite> : 定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。

section 与 H1 标签

1
2
3
4
5
6
7
8
<div>
<section>
<h1>这是一个H1标签 </h1>
<section>
<h1>这也是一个H1标签</h1>
</secrion>
</section>
</div>

示例

因为 Blog 中的样式会影响下面的示例,所以,下面的示例在 CodePen 上.

See the Pen XWbNwmg by Bo.Jin (@BoJin) on CodePen.

说明

section标签是 HTML5 中新增的一个标签,每一次在 Section 标签嵌套的过程中,h1~h6标签会在每一次自动下降一个级别.

其他一些语义化标签

  1. header,如其名,通常出现在前部,表示导航或者介绍性的内容。
  2. footer,通常出现在尾部,包含一些作者信息、相关链接、版权信息等。

headerfooter 一般都是放在 article 或者 body 的直接子元素,但是标准中并没有明确规定,footer 也可以和 asidenavsection 相关联(header 不存在关联问题)。

aside 表示跟文章主体不那么相关的部分,它可能包含导航、广告等工具性质的内容。
aside 很容易被理解为侧边栏,实际上二者是包含关系,侧边栏是 asideaside 不一定是侧边栏。

asideheader 中都可能出现导航(nav 标签),二者的区别是,header 中的导航多数是到文章自己的目录,而 aside 中的导航多数是到关联页面或者是整站地图。

最后 footer 中包含 address,这是个非常容易被误用的标签。address 并非像 date 一样,表示一个给机器阅读的地址,而是表示“文章(作者)的联系方式”,address 明确地只关联到 articlebody

评论

Agile Angularjs Animation Application Artificial Intelligence BP Babel Bokeh Book C4.5 CART CD CLI CSS CentOS CheetSheet Cinder Clipboardjs Concept Continuous Delivery DeepLearning Department DevOps Develop Development Directive Distribution Django Document ECMA ES5 ES6 ES7 Echarts Engine Entropy Filter Front End Gallery Git Gradient descent Hexo Horizon ID3 ID3.5 Icarus JavaScript Javascript KVM LaTeX LeetCode LibreOffice Linux MNIST Machine Learning Matrix MiddleWare Module Native Network Nginx NodeJS Numpy OOP OpenSSH OpenStack OpenStackApi Operations Oprations PDF PLA Pandas Pipline Probability Python React Relational algebra Restful Route SVD SVM Scalar Sigmoid Team Tempest Tensor TensorFlow Testing Time TimeMachine Tips Vector Vmware Vue Vuex WSGI Web Word Cut aliyun auth babel certbot debounce decision tree dns docker dockerfile eject footer git header homebrew html5 http https jupyter jwt keystone lab loader lodash mathematics migrate nav openstack outline pdf2html pm2 proto prototype python replace request response rp rt ruby scikit-learn section singular value decomposition sklearn stylus throttle url vue-router vue-ssr webpack 事件 事件代理 事件冒泡 事件捕获 低通滤波器 入门 全局 全局变量 全局对象 全栈 公式 决策树 函数 分类器 剪枝 加速 动态变量 匹配滤波边缘检测 卷积 卷积核 原型链 双向绑定 反向传播 发布 变量类型 可视化 基尼指数 官方示例 对偶形式 对象 小技巧 平移和查分边缘检测 思维导图 感知机模型 拉格朗日乘子法 推导 提交阶段 数据 数据绑定 最大似然估计 最小二乘估计 最小二乘回归树 最小二乘法 本地 朴素贝叶斯 朴素贝叶斯算法 机器学习 条件概率 标签模板 梯度下降 梯度方向边缘检测 概念 概率 模板字符串 正则 求导 流程 源码 源码阅读 灰度 特征工程 生命周期 矩阵 神经网络 私有对象 科学计算 算法 算法实现 线性回归 缺失 联合概率 脚手架 识别 调试 贝叶斯 贝叶斯判定准则 边缘检测 边际概率 闭包 间隔 防抖动 限流 随机森林 高斯分布 高通滤波器
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×