HTML内联成分

近年在项目中相见了2个小题目,纠结了半天。
路线中应用斜杠/和反斜杠\的区分到底是如何。查阅了部分质地后能够。
Unix使用斜杆/
作为路径分隔符,而web应用新型使用在Unix系统方面,所以如今抱有的互连网地址都使用
斜杆/ 作为分隔符。
Windows由于应用 斜杆/
作为DOS命令提示符的参数标志了,为了不混淆,所以选取 反斜杠\
作为路径分隔符。所以最近windows系统上的文本浏览器都以用 反斜杠\
作为路径分隔符。随着进步,DOS系统现已被淘汰了,命令提示符也用的很少,斜杆和反斜杠在多数景观下能够沟通,没有影响。

前边的话

  用于标记段落里的文本和别的内容组的因素类别众多,本文将那些文本级成分进行容易分类,便于整理和纪念

 

知情那些背景后,能够计算一下结论:
(1)浏览器地址栏网址使用 斜杆/ ;
(2)windows文件浏览器上接纳 反斜杠\ ;
(3)出现在html url() 属性中的路径,钦命的门道是互联网路径,所以必须用
斜杆/ ;

通用容器

  <span>成分是短语内容的通用行内容器,并不曾任何例外语义。能够动用它来编组成分以高达某种样式意图(通过使用类或许Id属性),或者那一个因素有着共同的性格,比如lang。应该在尚未其它合适的语义成分时才使用它。<span>与<div>成分很相似,但<div>是1个块元素而<span>则是行内元素

<p>Some text</p>

 

<div style="background-image:url(/Image/Control/title.jpg); 
background-repeat:repeat-x; padding:10px 10px 10px 10px"></div>
// 如果url后面用反斜杠,就不会显示任何背景

强调根本

  就算浏览器日常用斜体和粗体来展现em和strong,但那几个因素不采取作加粗和斜体。这四个因素分别用来提高包蕴内容的强调品位和第①

<em>     
 表示强调,<em>要素是能够嵌套的,嵌套层次越深,则其涵盖的始末被认定为越供给重点阅读

<strong>   
表示首要

<p>I am <em>very</em> worried!</p>
<strong>warning</strong>

 

(4)出现在平凡字符串中的路径,假若代表的是windows文件路径,则利用 斜杆/
和 反斜杠\ 是千篇一律的;假若代表的是网络文件路径,则必须选拔 斜杆/ ;

文字间隔

  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>

 

<img src=".\Image/Control/ding.jpg" />
 // 本地文件路径,/ 和 \ 是等效的
<img src="./Image\Control\cai.jpg" />
<img src="http://blog.jb51.net/wp-content/themes/MKthumbnail/0.jpg" />
 // 网络文件路径,一定要使用 斜杆/

不确切文字

<s>   
在HTML5中重新定义为有错的、过时的、不被提议选取的公文,常用来表示标价变动等

<p>价格<s>¥1298</s>¥998!</p>
<p><s>37度</s> <strong>41度</strong></p>    

 

 斜杆/ 和 反斜杠\
的界别基本上就是这一个了,下边再商讨一下相对路径和绝对路径。

高亮呈现

<mark>  
表示高亮或用于引用而标记的文字

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

 

./SRC/ 这样写表示,当前目录中的SRC文件夹;
../SRC/ 这样写表示,当前目录的上一层目录中SRC文件夹;
/SRC/ 这样写表示,项目根目录(可以只磁盘根目录,也可以指项目根目录,具体根据实际情况而定)

支持评论

<small>   
表示旁注,可用以豁免权利申明、使用条款和版权音信等急需小字体的场所

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

 

  

术语处理

<dfn>
  用来定义术语

<p>The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals</p>

 

<abbr>   缩写词,能够合作<dfn>定义术语

<p>The <dfn><abbr title="Garage Door Operner">GDO</abbr></dfn> id a device allows off-world teams to open the iris.</p>

 

引用

<cite>   表示文章题指标引用,能够是书影音画等

<p>我最喜欢的电影是<cite>千与千寻</cite></p>

 

<q>  
表示短引用,常用来引用外人说的话,用引号能够表明等价语义

<p>The judge said <q>You can drink water form the fish tank</q> but advised against it.</p>

 

换行

<br>   换行

  [注意]<br>标签是文本级语义成分,能够设置行高和字体大小,但设置宽高无效

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

 

<wbr>   供给时钦赐单词可以换行的职务

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

 

上标下标

  这八个标签在数学等式、科学符号和化学公式中足够管用

<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>

 

文本删改

  假诺要表示文书档案的增加和删除改记录,则应当利用ins和del标签

<ins>  
文书档案中插入的内容

<del>
  文书档案中除去的内容

  [注意]<ins>和<del>能够嵌套任何因素

  <属性>

  [1]datetime:用于标明编辑的日期和可选的日子

  [2]cite:用于钦点表达编辑的文档网址

<p>一打有 <del datetime="2015-12-30T00:00Z" cite="edit.html">二十</del> <ins>十二</ins> 件。</p>

 

特定时间

<time>   表示日期或时间

  <属性>

  [1]datatime表示适当的时刻,听从格式YYYY-MM-DDThh:mm:ssTZD,表示年-月-天-分割符T-时-分-秒-时区

  [2]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>

 

注音标识

  ruby标签定义注音标识,多用来CJK文字,CJK是指中国和扶桑韩集合表意文字(Chinese、Japanese、Korean)

<ruby>    
 表示ruby标记

<rt>    
 表示ruby标记文字

<rp>
    表示ruby标记括号

<ruby>
 漢 <rt> ㄏㄢˋ </rt>
</ruby>

<ruby>
    汉
    <rp>(</rp>
    <rt>hàn</rt>
    <rp>)</rp>
    语
    <rp>(</rp>
    <rt>yǔ</rt>
    <rp>)</rp>    
</ruby>

 

文字方向

<bdi>  
忽略周围文字方向的文字
<bdo>  
覆盖三种趋势的设置,允许显式设置方向,并覆盖全数其余当前趋向

<p>When rendered by a browser, <bdo dir="rtl">these words</bdo> will appear as 'sdroweseht'</p>

 

代码

<code>
    表示计算机代码
<kbd>    
 定义键盘码
<samp>     
定义总括机例子代码
<tt>     
 定义打字机代码
<var>    
定义变量

<p>
    <code>Computer code</code>
    <br />
    <kbd>Keyboard input</kbd>
    <br />
    <tt>Teletype text</tt>
    <br />
    <samp>Sample text</samp>
    <br />
    <var>Computer variable</var>
    <br />
</p>

 

事例演示

   <演示框>点击下列相应标签名可开始展览出现说法