HTML学习心得(2)

HTML学习心得(2)


功能标签概况

  • <h1></h1>

    <h1></h1>的作用就是为网页定义标题,从h1h6一共有六级标题,每级标签为从属关系。一张网页中的标题的数量是没有限制的。

    可选的属性

    属性 描述
    align left center right justify 不推荐使用。请使用样式替代它。 规定标题中文本的排列。

    以一个例子来展示他的用法:

    <h1>这是标题。</h1>

    标准属性:id, class, title, style, dir, lang, xml:lang

    事件属性:onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

  • <a></a>

    <a></a>是HTML的链接标签,即链接一个在网页中链接一个网址到目标网页。其用法为;
    <a href="网址">链接名称</a>,下面举例子来展示他的用法:

    <a href="http://www.baidu.com">百度首页</a>

    ​ 其在网页上显示百度首页,点击文字会跳转到百度网址。

    ​ 其实对于该标签,不只仅限于跳转网页,也可以跳转到本网页的特定位置,只需要在href中 加入该位置的ID即可。

  • <p></p>

    <p></p>的作用是在一个网页中实现一个段落的标记

    可选的属性

    属性 描述
    align leftrightcenterjustify 不赞成使用。请使用样式取代它。 规定段落中文本的对齐方式。

​ 一个实例:

html
<p>这是一个段落</p>

​ 其在网页上会显示一个段落,标签包含的文字或其它标签都在这个段落中。

  • <img />

    作为一个单标签,<img />实现的效果是将一幅图片插入网页中。但要注意的是,从技术上讲,<img>标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。所以可以想到,作为一个实现图片显示的标签,实质上它拥有的应该是类似<div></div>的属性值。

    必需的属性

    属性 描述
    alt text 规定图像的替代文本。
    src URL 规定显示图像的 URL。

    可选的属性

    属性 描述
    align topbottommiddleleftright 不推荐使用。规定如何根据周围的文本来排列图像。
    border pixels 不推荐使用。定义图像周围的边框。
    height pixels*%* 定义图像的高度。
    hspace pixels 不推荐使用。定义图像左侧和右侧的空白。
    ismap URL 将图像定义为服务器端图像映射。
    longdesc URL 指向包含长的图像描述文档的 URL。
    usemap URL 将图像定义为客户器端图像映射。
    vspace pixels 不推荐使用。定义图像顶部和底部的空白。
    width pixels*%* 设置图像的宽度。

    同样的,引用一个例子:

    <img src="http://m.qpic.cn/psb?/V12UbyoV2tkTM6/5LeuZvBwJNgAxf8Nr*Lvj7BzmE1n4i53pu75m4Xq7vo!/b/dPMAAAAAAAAA&bo=wAY4BAAKQAYRCYg!&rf=viewer_4"  alt="一张图片" />

    其在网页上显示了一战图片,src中添加的是图片的本地地址或者图片的URL,alt中的内容作为图片无法显示时该区域显示的内容。

  • <br/>

    同样的单标签,<br/>的作用十分简单,它也没有什么其他的属性。其是是实现的效果就是换行,类似于在文档里enter的作用。

  • <hr>

    单标签,<hr>实现的效果是以水平线分割标题和段落或者分割任何两个部分。

    可选的属性

    属性 描述
    align centerleftright 不赞成使用。请使用样式取代它。 规定 hr 元素的对齐方式。
    noshade noshade 不赞成使用。请使用样式取代它。 规定 hr 元素的颜色呈现为纯色。
    size pixels 不赞成使用。请使用样式取代它。 规定 hr 元素的高度(厚度)。
    width pixels % 不赞成使用。请使用样式取代它。 规定 hr 元素的宽度。

    从表格中我们可以看到,虽然它自带的属性是不被提倡使用的,但我们同样可以看到,<hr>的可选属性 还是很多的,我们可以自定义它的宽度高度和颜色等属性。

    同样以一个示例来看:

    <p>这是段落1。</p>
    <hr />
    <p>这是段落2。</p>
    <hr />
    <p>这是段落3。</p>

    在示例中呈现的效果就是三句话之间被两条水平线分割开来。

  • <b></b>

    <b></b>的作用也很简单,就是将在它标签包裹中的文字做加粗处理,同样做一个示例:

    <b>这是粗体文本</b>

    其效果就是在网页上打印出:这是粗体文本

  • <em></em>

    <em></em>标签的作用就是将该标签内的文字作为强调显示。要注意,现阶段的浏览器默认强调内容为斜体显示,但并不是强调内容一定作为斜体显示。如果要使用斜体字,请使用<i></i>标签,而不是<em></em>标签。

  • <i></i>

    <i></i>的作用就是将标签包裹的文字作为斜体显示。

  • <small></small>

    <small></small>标签的作用与<big></big>相对,作用是将被标签包裹的文字的字号缩小一号。要注意的是,如果目标文字已经是浏览器的最小字号了,那么再对该文字进行包裹,就没有 任何用处了。

  • <big></big>

    ​ 与<small></small>相对,<big></big>标签实现的效果就是将其包裹的文字放大一个字号。同样的,如果目标文字已经是浏览器最大字号,那么该标签就没有作用了。

  • <strong></strong>

    相较于<em></em>而言更表强调意思的标签,其表现形式是以加粗字体显示被包裹文字。从逻辑上来讲,请不要把它与<b></b>混用。

  • <sub></sub>

    该标签的作用就是在文字中插入一个下角标。使被包裹的文字作为下角标在网页中显示。

  • <sup></sup>

    <sub></sub>对应的,<sup></sup>的作用就是使被包裹的文字作为上角标在网页中显示。

  • <ins></ins>

    改标签定义了被插入文字中的文本,其实呈现的效果就是带有下划线的文字,通常和<del></del>搭配使用。

    可选的属性

    属性 描述
    cite URL 指向另外一个文档的 URL,此文档可解释文本被插入的原因。
    datetime YYYYMMDD 定义文本被插入的日期和时间。

  • <del></del>

    <ins></ins>搭配使用的,<del></del>的作用是在网页上实现删除文字的样式[^15] ,我们可以看到,实际上它表示的只是一个样式而已。除了人为规定的意义之外,其实它的用途和表达效果也可以是多样的

    可选的属性

    属性 描述
    cite URL 指向另外一个文档的 URL,此文档可解释文本被删除的原因。
    datetime YYYYMMDD 定义文本被删除的日期和时间。

  • <code></code>

    <code>标签用于表示计算机源代码或者其他机器可以阅读的文本内容。

    软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code> 标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体(Courier)显示出来,对于大多数程序员来说,这应该是十分熟悉的。

    只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用<code> 标签。虽然<code> 标签通常只是把文本变成等宽字体,但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如,程序员的浏览器可能会寻找<code> 片段,并执行某些额外的文本格式化处理,如循环和条件判断语句的特殊缩进等。

  • <kbd></kbd>

    <kbd> 标签定义键盘文本。

    说到技术概念上的特殊样式时,就要提到 <kbd> 标签。正如你已经猜到的,它用来表示文本是从键盘上键入的。

    浏览器通常用等宽字体来显示该标签中包含的文本

    在我的理解看来<kbd></kbd>就是用来表示其中包含的内容是键盘上的按键或者组合内容,也是只起到了一个标记作用。

  • <samp></samp>

    该标签的作用就是抽取上文或者其他的字符时所使用的一种引用。

    我们还是看例子:

    字符序列 <samp>ae</samp> 可能会被转换为 &aelig; 连字字符。

    其输出结果为:字符序列 ae 可能会被转换为 æ 连字字符。

    可以看到被标签包裹起来的ae在显示时与前后有一个空格,表示这是引用的文字。

  • <var></var>

    <var></var>标签表示变量的名称,或者由用户提供的值。对于我的理解来说,该标签也是属于标记类型的语意类标签。

    就像其他与计算机编程和文档相关的标签一样,<var>
    标签不只是让用户更容易理解和浏览你的文档,而且将来某些自动系统还可以利用这些恰当的标签,从你的文档中提取信息以及文档中提到的有用参数。我们再一次强调,提供给浏览器的语义信息越多,浏览器就可以越好地把这些信息展示给用户。

  • <pre></pre>

    pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

    <pre> 标签的一个常见应用就是用来表示计算机的源代码。

    可以导致段落断开的标签(例如标题、<p><address>标签)绝不能包含在<pre>所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的。

    pre 元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。当把其他标签(比如<a> 标签)放到<pre> 块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。请看下面的例子:

    <pre>
    &lt;html&gt;
    
    &lt;head&gt;
     &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;
    &lt;/script&gt;
    &lt;/head&gt;
    
    &lt;body&gt;
    
     &lt;script type=&quot;text/javascript&quot;&gt;
       xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>(&quot;books.xml&quot;);
       document.write(&quot;xmlDoc is loaded, ready for use&quot;);
     &lt;/script&gt;
    
    &lt;/body&gt;
    
    &lt;/html&gt;
    </pre>
    

    在上面的代码中,<pre> 标签中的特殊符号被转换为符号实体,比如 “<” 代表 “<”,”>” 代表 “>”。另外,请注意蓝色的代码,我们在 <pre> 标签中使用了链接,也就是 <a> 标签。上面这段代码的显示效果如下:

    <html>
    
    <head>
     <script type="text/javascript" src="loadxmldoc.js">
    </script>
    </head>
    
    <body>
    
     <script type="text/javascript">
       xmlDoc=loadXMLDoc("books.xml");
       document.write("xmlDoc is loaded, ready for use");
     </script>
    
    </body>
    
    </html>

    提示和注释

    提示:制表符(tab)在 <pre> 标签定义的块当中可以起到应有的作用,每个制表符占据 8 个字符的位置。但是我们不推荐使用它,因为在不同的浏览器中,Tab 的实现各不相同。在用<pre> 标签格式化的文档段中使用空格,可以确保文本正确的水平位置。

    提示:如果您希望使用 <pre> 标签来定义计算机源代码,比如 HTML 源代码,请使用符号实体来表示特殊字符,比如 “<” 代表 “<”,”>” 代表 “>”,”&” 代表 “&”。

    提示:在 W3School 中,非常多页面中的源代码实例都是通过 <pre> 标签定义的,您可以参考这些页面,学习如何使用该标签。我们甚至把 <pre> 标签与<code>标签结合起来使用,以获得更加精确的语义。

  • <abbr></abbr>

    <abbr></abbr>的作用就是在网页上显示一个缩写内容,并且在你将光标悬停在缩写内容山时会显示你定义的全拼内容。

    同样举个栗子:

    <abbr title="China Mobile Communication Corporation">CMCC</abbr>

    在网页上就可以看见一个CMCC的字样,光标悬停在字体上会显示China Mobile Communication Corporation字样。

  • <address></address>

    其作用为显示一个联系信息,同样是作为标记性质的标签,以规范网页的布局内容。

    <address> 标签定义文档或文章的作者/拥有者的联系信息。

    如果 <address> 元素位于<body> 元素内,则它表示文档联系信息。

    如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息。

    <address> 元素中的文本通常呈现为斜体。大多数浏览器会在<address> 元素前后添加折行。

  • <bdo></bdo>

    <bdo></bdo>的作用就是定义文字文本的输出方向

    可选的属性

    属性 描述
    dir ltr,rtl 定义文字的方向

    举个栗子:

    <bdo dir="rtl">Here is some text</bdo>

    其会在网页上显示text emos si ereH字样。

  • <blockquote></blockqute>

    <blockquote></blockqute>的作用为定义一个块引用,即大段的引用。

    可选的属性

    属性 描述
    cite URL 规定引用的来源。

    要注意,cite属性还没有浏览器可以正确的显示出。

    浏览器会在 <blockquote> 元素前后添加了换行,并增加了外边距,以作为区别。

  • <q></q>

    其表示短的引用,可以将该标签直接在文本中间使用,作为插入式的引用。

    可选的属性

    属性 描述
    cite citation 定义引用的出处或来源(citation)

    ​ 要注意的,浏览器会在段引用的前后自动加上“ ”

  • <cite>

    <cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。

    按照惯例,引用的文本将以斜体显示。

    <cite> 标签把指向其他文档的引用分离出来,尤其是分离那些传统媒体中的文档,如书籍、杂志、期刊,等等。如果引用的这些文档有联机版本,还应该把引用包括在一个 <a>标签中,从而把一个超链接指向该联机版本。

    <cite> 标签还有一个隐藏的功能:它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器,它能够自动整理引用表格,并把它们作为脚注或者独立的文档来显示。<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用;它使浏览器能够以各种实用的方式来向用户表达文档的内容。

    也可以理解为其就是将<blockquote></blockqute><q></q>中的cite属性单独拿出来作为一个更灵活的标签使用。

  • <dfn></dfn>

    <dfn> 标签可标记那些对特殊术语或短语的定义。

    现在流行的浏览器通常用斜体来显示 <dfn> 中的文本。将来,<dfn>还可能有助于创建文档的索引或术语表。

    与其他许多基于内容的样式和物理样式标签一样,<dfn> 标签尽量少用为妙。作为一种通用样式,尤其在技术文档中,当第一次新的术语时,应该将它们与普通文本分开,这样读者可以更好地理解文章当前的主题,而从那以后就不要再对这个术语进行任何标记了。

  • <base>

    作为一个单标签,<base>只在<head>中出现。它可以规定该页面上的所有的链接的默认地址或默认目标。通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用<base>标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a><img><link><form> 标签中的 URL。其相当于我们在之后的链接调用时只需要写相对于<base>标签规定下的路径或不写地址即可。浏览器会在<base>标签指定的地址下查找,而不是默认的查找地址。

    必需的属性

    属性 描述
    href URL 规定页面中所有相对链接的基准 URL。

    可选的属性

    属性 描述
    target _blank _parent _self _top framename 在何处打开页面中所有的链接。

  • <div></div>

    <div></div>作为HTML中比较常使用的一个标签,它定义了一个区块,起到了排版和划分网页的重要作用。我们可以通过它实现很多网页的布局调整和并构。增强美观度和条理度。

    可选的属性

    属性 描述
    align leftrightcenterjustify 不赞成使用。请使用样式取而代之。 规定 div 元素中的内容的对齐方式。

    <div></div>自带的属性其实并不多,但配合CSS的多种属性,我们可以达到很多效果。作为一个网页的基石类标签,一定要熟练掌握它。


END

猜你喜欢

转载自blog.csdn.net/heimdall_vata/article/details/80313585