HTML5+CSS3+JS(第二课).HTML5保留的常用元素(一)

html5+css3+jacascript


第二章:HTML5常用元素与属性


一:HTML5保留的常用元素


  1. 基本元素.差不多都留下了。


    <!--xx-->:注释
    <html>   :html页面根元素。html5可以省略
    <head>   :html页面头部分。html5可以省略
    <title>  :html页面标题。
    <body>   :html页面内容。
    <style>  :样式定义。
    <h1>~<h6>:标题1-6。
    <p>      :段落定义。
    <br>     :换行。
    <hr>     :画水平线。
    <div>    :块级元素。容器作用。
    <span>   :小型块级元素。也是容器作用。
     写一个例子吧。

 

<html>
<head>
 <title>这个是标题</title>
</head>
<body>
 <!--标题块-->
 <div>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>
 </div>
 <!--华丽的水平线-->
 </hr>
 
 <!--内容块-->
 <div>
  <p>这是个段落</p>
  <p>这也是个段落</br>第二行</p>
 </div>
</body>
</html>



 

2. 文本格式化元素


 <b>  :加粗。
 <i>  :斜体。
 <em> :强调,效果与斜体差不多。
 <strong>:还是粗体。HTML5说是重要的文本,不知道有多重要。
 <small> :小号字体文本。比普通的小点。HTML5说做免责声明、注意事项、法律规定、版权等事。
 <sup> :定义上标文本(难道是n的平方)。
 <sub> :定义下标文本(难道是n几n几的)。
 <bdo> :定义文本方向。可以正着写,也可以反着写。
 再来个例子:

 

<html>
<head>
 <title>文本格式化元素</title>
</head>
<body>
 <span><b>加粗加粗</b></span><br />
 <span><i>斜体斜体</i></span><br />
 <span><em>被强调了</em></span><br />
 <span><strong>强壮的粗体</strong><br />
 <span><small>好小的小号呢</small><br />
 <span>X<sup>2</sup> + Y<sup>2</sup> = Z<sup>2</sub></span><br />
 <span>a<sub>1</sub> = a<sub>2</sub> + a<sub>3</sub></span><br />
 <span><bdo dir="ltr">从左至右</bdo></span><br />
 <span><bdo dir="rtl">从右至左</bdo></span><br />
</body>
</html>



 

3. 语义相关元素


 <abbr> :用于表示一个缩写。通常什么世界卫生组织啊什么都都喜欢用缩写
 <address>: 地址。通常会斜体表示
 <blockquote>:定义一段长的引用字段。会被缩进。
 <q>    :短的引用字段。浏览器会添加引号。
 <cite> :表示作品(书、电影、歌曲)之类的。通常斜体表示。
 <code> :代码段。
 <dfn>  :定义专业术语。通常会加粗或斜体。
 <del>  :表示要删除的字。会加删除线。
 <ins>  :表示插入的字。会加下划线。
 <pre>  :表示元素包含的文字已经进行了预格式化。回车、空格、tab之类会被保存下来。
 <samp> :定义示范文本。
 <kdb>  :定义键盘文本。使用说明书等等会使用到。
 <var>  :表示一个变量。通常会斜体表示。
 哎,又一个例子。

<html>
<head>
 <title>语义相关元素</title>
</head>
<body>
 <!--这里面的<br />都用<br>吧,省事-->
 <div>
  <abbr>WTO</abbr>
  <address>大美利坚</address><br>
  
  <!--用疯狂里面的诗吧-->
  <blockquote>
   锦瑟无端五十弦,一弦一柱思华年。<br>
   庄生晓梦迷蝴蝶,望帝春心托杜鹃。<br>
   沧海月明珠有泪,蓝田日暖玉生烟。<br>
   此情可待成追忆,只是当时已惘然。<br>
  </blockquote>
  <!--这让我想到了-->
  <p>
   <q>曾经沧海难为水,除却巫山不是云。</q>
  </p>
  <code>
   <!--很熟悉吧-->
   <pre>
    int main(void)
    {
     printf("Hello World!");
     return 0;
    }
   </pre>
  </code>
  <!--哎下面不想写了,困。-->
 </div>
</body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章