HTML 文本级别语义

超链接

超链接，可以是文本超链接，也可以是图像超链接；

任何文档流内容都可被嵌套，只要不是交互内容（ 如按钮、链接等 ）。

默认情况下，链接将以以下形式出现在浏览器中（ 可以通过 CSS 重新设置 ）：

  • 一个未访问过的链接，显示为蓝色字体并带有下划线
  • 访问过的链接，显示为紫色并带有下划线
  • 点击链接时，链接显示为红色并带有下划线

另，a 元素的文本颜色只能自身进行设置，从父级继承不到；a 元素不可嵌套 a 元素。

「 作用 」既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能

<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
  • href：表示链接地址的路径
1. 链接地址   <a href="http://www.baidu.com">百度</a>
   // 说明：外部链接，以 http:// 或 https:// 开头；内部链接，直接访问资源文件所在路径（含文件名）即可

2. 下载地址   <a href="test.zip">下载测试</a>
   拓展：download属性用来设置下载文件的名称(firefox/chrome/opera支持)
        <a href="test.zip" download="gogo">test</a>

3. 锚点：点击页面中的一个地方时，就会跳转到页面中的另一个地方。
   A页面甲位置到A页面乙位置或A页面甲位置到B页面乙位置；锚链接常用于目标页内容很多，需定位到目标页内容中的某个具体位置时。
   操作步骤：
    a. 在页面的乙位置设置标记，如，<a id="marker">目标位置</a> 
       [ 可以使用name或id属性，由于有些标签没有name属性，为了更好的兼容，建议使用id属性 ]
    b. 设置甲位置链接路径href属性值为"#标记名"，如，<a href="#marker">当前位置甲</a>
       （1）href:#id名
           <a href="#test">目录</a>
           <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
           <div id="test" style="height: 200px;width: 200px; border: 1px solid black;">内容</div>
       （2）href:页面地址#id名
           <a href="http://baike.baidu.com/view/2202.htm#2">足球比赛规则</a>

        // href属性一定不要留空，若暂时不需要写地址，则写 # 或 javascript:; 若href留空，会刷新页面。

4.功能性链接：单击链接时，用于启动本机自带的某个应用程序。如电子邮件、QQ等。
   （1）电子邮件  
       用法：“mailto:电子邮件地址”。如，<a href=“mailto: "207510652@qq.com">联系我们</a> 
       多个邮箱 <a href=”mailto: “207510652@qq.com,admin@163.com”>联系我们</a> 
       抄送、主题等 <a href="mailto:207510652@qq.com?cc=admin@163.com&subject=...@body=...">联系(抄送)</a>
   （2）手机号码
        在移动端，使用<a href="tel:15312345678">15012345678</a>可以唤出手机拨号盘
  • target：跳转方式（ _self，在当前窗口显示（ 默认 ）；_blank，在新窗口显示 ）
// 外层框架
<frameset cols = "20%, *">
    <frame src="left.html">
    <frame src="right.html">
</frameset>
// 里层框架
<frameset rows = "50%,*">
    <frame src="top.html">
    <frame src="bottom.html" name="bottom">        
</frameset>
// 锚点页
<ul class="list">
    <li class="in"><a href="chap1.html" target="_self">chap1(_self)</a></li>
    <li class="in"><a href="chap2.html" target="_blank">chap2(_blank)</a></li>
    <li class="in"><a href="chap3.html" target="_parent">chap3(_parent)</a></li>
    <li class="in"><a href="chap4.html" target="_top">chap4(_top)</a></li>    
</ul>

「 绝对路径 & 相对路径 」超链接的路径均为文件名，目录下

网页中，通常使用 URL 来定义一个链接地址（ webpiece.cn ）

根据链接地址指向站内外文件：绝对路径和相对路径

  • 绝对路径：指向目标地址的。如，<a href="http://www.webpiece.com"></a>
  • 相对路径：相对于当前页面文件。如，<a href="login/login.html"></a>

另，使用相对路径时，常用到两个特殊符号：

  • "../"  表示当前目录的上级目录
  • "../../web2.html"  表示当前目录的上上级目录

文本语义

[1] span    本身没有语义，可以结合 class 等一些属性用来编注一些标签，给这些标签一个特定的样式。

短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编辑元素以达到某种样式意图，应该在没有其他合适的语义元素时才使用它。span 与 div 元素很相似，但 div 是一个块元素，而 span 则是行内元素。

<p>Some<span>text</span></p>

[2] 强调重要 em / strong

  • em 主要是语义上的强调，可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读；
  • strong 是重要性的强调，比 em 更强烈一些。
默认样式：em 斜体  strong 粗体
虽然浏览器通常用斜体和粗体来显示em和strong，但这些元素不应用作加粗和斜体。它们分别用来提升包含内容的强调程度和重要性。
 
<p>I am <em>very</em> worried!</p>
<strong>warning</strong>

[3] 引用 cite/q

cite：表示作品标题的引用，可以是书影音画等。
q：表示短引用，常用于引用别人说的话，用引号可以表达等价语义。

<p>我最喜欢的电影是<cite>千与千寻</cite></p>
<p>The judge said <q>You can drink water form the fish tank</q> but advised against it.</p>

[4] 代码 code

<code>    表示计算机代码，通常与pre一起使用，确保确保代码格式一致
<kbd>     定义键盘码
<samp>    定义计算机例子代码
<tt>      定义打字机代码
<var>     定义变量
 
  <code>Computer code</code>
  <kbd>Keyboard input</kbd>
  <tt>Teletype text</tt>
  <samp>Sample text</samp>
  <var>Computer variable</var>

[5] 格式化：b 粗体    i 斜体      // 适应于并不强调的场景： b，如摘要中的关键字、产品名称等；i，如技术术语等。

i 和 b 元素历来是用来展示粗体和斜体字体的，但在 HTML5 中，它们有了新的语义。

  • <i>  文字以斜体方式显示
1. 表示不同情绪或声音的文本，如内心对白
<p>Simon smirked,"Yes,I'm happy to take the garbage out." <i>Ugh,I <em>really</em> don't want to !</i> 
he thought as he picked up the garbage bag.</p>
2. 表示外来语、分类学名和技术术语等
<i lang="fr">Oh la la!</i>
  •  <b>  文字以粗体方式显示
1. 用于分隔文字
<p>After bringing <b>water</b> to a boil, add <b>potatoes</b> and <b>carrots</b></p>
2. 用于文章或故事的引言
<p><b class="lede">Meteorologists predict more sunshine and scorching temperatures for the upcoming week, prompting area farmers to install irrigation systems.</b></p>

[6] 不精确文字：s    在 HTML5 中重新定义为有错的、过时的、不被建议使用的文本，常用于表示价格变动等。

<p>价格<s>￥1298</s>￥998！</p>      // 文字以加删除线的方式显示
<p><s>37度</s> <strong>41度</strong></p>

[7] 高亮文字：mark    表示高亮或用于引用而标记的文字。

<p><mark>We're all hoping it rains soon</mark>, some farmers have installed irrigation systems, 
at <em>considerable</em> expense</p>

[8] 次要评论：small    表示旁注，可用于免责声明、使用条款和版权信息等需要小字体的场景。

<small>图片仅供参考，请以实物为准</small>
<small>Chris Elhorn | The city Press</small>

[9] 术语处理：dfn，用来定义术语；abbr，缩写词，可配合 dfn 定义术语。

<p>The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals</p>
<p>The <dfn><abbr title="Garage Door Operner">GDO</abbr></dfn> id a device allows off-world teams to 
open the iris.</p>

[10] wbr    需要时指定单词可以换行的位置。

<i>Irrigation<wbr /> Direct</i>

[11] 换行 br    // 文本级语义元素，可设置行高和字体大小，但设置宽高无效

在 HTML 中，段落中的文字从左到右依次排列，直到浏览器窗口的右端，自动换行。

如果希望某段文本强制换行显示，就需要使用换行标签。     //  敲回车键换行，在浏览器中只是多了一个空格

<p>
    <b>The City Press</b><br />
    123 General Street <br />
    Springfield, OH 45501
</p>

[12] 上标下标：sup sub    常用于数学等式、科学符号和化学公式中。

  • sup 表示上标
<p>
    a<sup>2</sup>
    +
    b<sup>2</sup>
    =
    c<sup>2</sup>
</p>
  • sub 表示下标
<p>
    H<sub>2</sub>
    SO<sub>4</sub>
</p>

[13] 特定时间：time        // 表示时间和日期

属性：
datatime：表示确切的时间，遵循格式YYYY-MM-DDThh:mm:ssTZD，表示年-月-天-分割符T-时-分-秒-时区
pubdate：表示time元素中的日期或时间是文档的发布日期

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在<time datetime="2008-02-14">情人节</time>有个约会。</p>
<small>Posted <time datetime="2015-12-30T00:00:00UTC+08:00"></time></small>

[14] 注音标识：ruby rt rp

ruby 标签定义注音标识，多用于 CJK 文字，CJK 是指中日韩统一表意文字（ Chinese、Japanese、Korean ）。

<ruby>表示ruby标记；	<rt>表示ruby标记文字；	<rp>表示ruby标记括号；
 
<ruby>
    汉
    <rp>(</rp>
    <rt>hàn</rt>
    <rp>)</rp>
    语
    <rp>(</rp>
    <rt>yǔ</rt>
    <rp>)</rp>    
</ruby>

[15] 文本删改    如果要表示文档的增删改记录，则应该使用 ins 和 del 标签。

  • <ins> 文档中插入的内容，文字以加下划线的方式显示
  • <del> 文档中删除的内容，文字以加删除线的方式显示。         // <ins> 和 <del> 可以嵌套任何元素
属性：
datetime：用于标明编辑的日期和可选的时间
cite：用于指定说明编辑的文档网址
 
<p>一打有 <del datetime="2015-12-30T00:00Z" cite="edit.html">二十</del> <ins>十二</ins> 件。</p>

[16] 文字方向

  • <bdi> 忽略周围文字方向的文字
  • <bdo> 覆盖两种方向的设置，允许显式设置方向，并覆盖所有其他当前方向
<p>When rendered by a browser, <bdo dir="rtl">these words</bdo> will appear as 'sdroweseht'</p>