HTML文本元素-Text-level semantics

演讲者：whqet

内容提纲

  1. 强调
  2. 引用
  3. 格式化文本
  4. 特殊元素
  5. 其他元素

元素分类 w3school

类型标签
根元素
The root element		 html
文档元数据
Document metadata		 head, title, base, meta, link, style
节点 Sections body, article, section, nav, aside, h1, h2, h3, h4, h5, h6, header, footer, address
组合内容
Grouping content		 div, p, main, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption
文本级
Text-level semantics		 span, a, em, strong, q, cite, mark, i, b, u, s, sup, sub, big, small, var, code, samp, kbd, data, time, ruby, rb, rp, rt, rtc, bdi, bdo, dfn, br, wbr
编辑 Edits ins, del
嵌入内容
Embedded content		 img, iframe, embed, object, param, vedio, audio, surce, track, map, area
表格 Tabular data table, caption, tr, th, td, thead, tbody, tfoot, col, colgroup
表单 Forms form, label, input, button, select, datalist, optgroup, option, textarea, keygen, output, progress, meter, fieldset, legend
脚本 Scripting script, noscript, template, canvas

强调 em strong

类型取值
分类 流内容-Flow content
短句内容-Phrasing content
可感知内容-Palpable content
元素上下文 需要短句内容的地方
内容模型 短句内容
属性 全局属性

em strong元素示例

<em>em默认样式为斜体</em>
<strong>strong默认样式为粗体</strong>

em默认样式为斜体 strong默认样式为粗体

引用 q cite mark

类型取值
分类 流内容-Flow content
短句内容-Phrasing content
可感知内容-Palpable content
元素上下文 需要短句内容的地方
内容模型 短句内容
属性 全局属性
cite属性，链接引用的资源（q元素的属性）

q cite mark元素示例

<p>In the words of <cite>Charles Bukowski</cite> - 
<q>An intellectual says a simple thing in a hard way. 
An artist says a hard thing in a <mark>simple</mark> way.</q></p>

格式化文本 i b u s

类型取值
分类 流内容-Flow content
短句内容-Phrasing content
可感知内容-Palpable content
元素上下文 需要短句内容的地方
内容模型 短句内容
属性 全局属性

i u b s等文本格式化元素仅用于表现，不建议使用！

i u b s元素示例

<i>斜体文字</i>
<u>下划线文字</u>
<b>粗体文字</b>
<s>删除线文字</s>

斜体文字 下划线文字 粗体文字 删除线文字

特殊元素

元素名 意义 示例 样式
sup 上标 x<sup>2</sup> x2
sub 下标 x<sub>2</sub> x2
big 较大的字 一些<big>文字</big> 一些文字
small 较小的字 一些<small>文字</small> 一些文字
var 变量 一共有<var>n</var>个项目 一共有n个项目
code 代码 当你调用<code>hello()</code>时， 当你调用hello()时，

其他元素

ruby rb rp rt rtc

bdi bdo

前端开发

旨为前端开发工程师的前端开发基础课程