Bootstrap

HTML入门教程|| HTML 基本标签(2)

HTML 列表

HTML列表

HTML 无序列表

ul 元素表示无序列表。

ul 元素中的项目使用 li 元素表示。

元素没有在HTML5中定义任何属性,并且您使用CSS控制列表的显示。

HTML5中的 type  compact 属性已过时。

您可以在以下代码中查看正在使用的 ul 元素。

<!DOCTYPE HTML>
<html>
<body>
  I like:
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
  </ul>
</body>
</html>

每个列表项都显示一个项目符号。您可以通过 list-style-typeCSS属性来控制要使用哪个样式项目符号。

例2

以下代码显示了如何创建嵌套列表。


<!DOCTYPE HTML>
<html>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS
            <ul>
                <li>Introdunction</li>
                <li>CSS attributes</li>
            </ul>
        </li>
        <li>Javascript</li>
    </ul>
</body>
</html>

HTML 有序列表

ol 元素表示有序列表。列表中的项目使用 li 元素表示。

已在HTML5中添加reversed属性。 compact 属性现在在HTML5中已过时。

以下代码显示了用于创建简单有序列表的 ol 元素。

<!DOCTYPE HTML>
<html>
<body>
  I like:
  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>XML</li>
  </ol>
</body>
</html>

属性

您可以使用 ol 元素定义的属性来控制列表中的项目。

start 属性定义列表中第一个项目的序数值。如果未定义此属性,则为第一个项目分配序号值1。

您可以使用 type 属性来指示每个项目旁边应显示哪个标记。

下表显示此属性支持的值。

描述例子
1小数(默认)1., 2., 3., 4.
a小写拉丁字母a., b., c., d.
A大写拉丁字母A., B., C., D.
i小写罗马数字i., ii., iii., iv.
I大写罗马数字I., II., III., IV.

例3

以下代码显示了如何创建嵌套排序列表。

<html>
<body>
<p>Here is a nested ordered list:</p>

<ol>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
    <li>Item four
        <ol>
            <li>Item 4.1</li>
            <li>Item 4.2</li>
            <li>Item 4.3</li>
        </ol>
    </li>
    <li>Item Five</li>
</ol>

</body>
</html>

例4

以下代码显示如何使用大写字母并从点4开始创建有序列表。


<html>
<body>

<p>Here is an ordered list using capital letters and starting at point 4, which is a letter D:</p>

<ol type="A" start="4">
    <li>Point number one</li>
    <li>Point number two</li>
    <li>Point number three</li>
</ol>
</body>
</html>

HTML 自定义列表

描述列表由一组术语/描述分组组成。

您使用三个元素来定义描述列表: dl  dt  dd 元素。

  • dl 表示描述列表。
  • dt 表示描述列表中的术语。
  • dd 表示描述列表中的定义。

多个 dd 元素可用于单个 dt 元素,这允许您为单个术语提供多个定义。

以下代码创建说明列表。

<!DOCTYPE HTML>
<html>
<body>
  I like:
  <dl>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
    <dd><i>a style sheet language used for
           describing the look and formatting
           of a document written in a markup language</i></dd>

    <dt>HTML</dt>
    <dd>The mark language</dd>

    <dt>Javascript</dt>
    <dd>The coding logic</dd>
  </dl>
</body>
</html>

HTML figure

HTML figure

figure 和 figcaption 元素

figure标签规定独立的流内容(图像、图表、照片、代码等等)。

figure元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的。如果被删除,则不应对文档流产生影响。

figcaption元素被用来为figure元素定义标题。

例子

你可以在下面的代码中看到一起使用的 figure  figcaption 元素。


<!DOCTYPE HTML>
<html>
<body>
  I like XML and CSS.
  <figure>
    <figcaption>Listing 01. Using the code element</figcaption>
    <code>
      var fruits = ["CSS", "HTML", "CSS", "Javascript"];<br>
      document.writeln("I like " + fruits.length + " fruits");
    </code>
  </figure>
</body>
</html>

上面的代码渲染如下:

HTML 图像

HTML图像

img 元素允许您将图像嵌入到HTML文档中。

它有局部属性: src,alt,height,width,usemap,ismap 

HTML5中的border,longdesc,name,align,hspace  vspace 属性已过时。

要嵌入图像,您需要使用 src  alt 属性,如下所示。

<!DOCTYPE HTML>
<html>
<body>
  <img src="http://www.www.w3cschool.cn/style/download.png" 
       alt="Triathlon Image" 
       width="200" 
       height="67" />
</body>
</html>

src 属性指定图像的URL。

如果无法显示图片,则 alt 属性定义内容。

width  height 属性设置图像大小(以像素为单位)。

img 元素的常见用途是结合 a 元素创建基于图像的超链接。

以下代码显示了如何使用 img  a 元素。

<!DOCTYPE HTML>
<html>
<body>
  <p>
    <a href="//www.w3cschool.cn/page.html">
       <img ismap src="http://www.www.w3cschool.cn/style/download.png"/>
    </a>
  </p>
</body>
</html>

如果将 ismap 属性应用于 img 元素,则可以创建服务器端图像映射,这意味着您在图像上单击的位置将附加到URL。

例如,如果您从图像的顶部点击了4个像素,从左边缘点击了10个像素,浏览器将导航到以下内容:

//www.w3cschool.cn/page.html?10,4

客户端图像映射

您可以创建客户端图像映射:单击图像中的不同区域会导致浏览器导航到不同的URL。

客户端图像映射的关键元素是 map 与局部属性 name 

如果使用 id 属性,它必须具有与 name 属性相同的值。

map 元素可以有一个或多个 area 元素。

每个区域元素标记图像中可以点击的区域。

area 元素具有局部属性: alt,href,target,rel,media,hreflang,type,shape,coords 

rel,media和hreflang属性是HTML5中的新特性。nohref属性现在已过时。

  • href - 点击区域时浏览器应加载的网址
  • alt - 替代内容。请参阅img元素上的相应属性。
  • target - 应显示网址的浏览内容。
  • rel - 描述当前文档和目标文档之间的关系。
  • media - 区域有效的介质。
  • hreflang - 目标文档的语言。
  • type - 目标文档的MIME类型。

shape  coords 属性一起工作。 coords 属性取决于 shape 属性的值。

  • rect
    该值表示矩形区域。
    coords属性必须由四个逗号分隔的整数组成,表示与以下内容的距离:
    • 图像左边缘到矩形左边
    • 图像顶边到矩形顶边
    • 图像左边缘到矩形右边
    • 图像顶边到矩形底边
  • circle
    该值表示圆形区域。
    coords属性必须由三个逗号分隔的整数组成,表示以下内容:
    • 从图像左边缘到圆心的距离
    • 从图像顶边缘到圆心的距离
    • 圆的半径
  • poly
    此值表示多边形。
    coords属性必须至少为六个逗号分隔的整数,每对表示多边形上的一个点。
  • default
    此值是默认区域,覆盖整个图像的其余部分。
    将此值用于shape属性时,不需要坐标值。

以下代码显示如何使用图像映射。

<!DOCTYPE HTML>
<html>
<body>
  <p>
    <img src="http://www.www.w3cschool.cn/style/download.png" usemap="#mymap"/>
  </p>
  <map name="mymap">
    <area href="a.html" shape="rect" coords="3,5,68,62" alt="test a" />
    <area href="b.html" shape="rect" coords="70,5,130,62" alt="test b" />
    <area href="c.html" shape="default" alt="test c" />
  </map>
</body>
</html>

img 元素上的 usemap 属性将map元素与图像相关联。

HTML iframe

HTML iframe

iframe 元素在现有元素中嵌入另一个HTML文档。

它有局部属性: src,srcdoc,name,width,height,sandbox,seamless 

HTML5中的 sandbox seamless属性是新增的。

longdesc,align,allowtransparency,frameborder,marginheight,marginwidth scrolling属性已过时。

以下代码显示如何使用iframe元素。

<!DOCTYPE HTML>
<html>
<body>
  <a href="http://www.w3cschool.cn" target="myframe">Tutorial</a>
  <iframe name="myframe" width="300" height="300"> </iframe>
</body>
</html>

注意

将创建名称属性值为 myframe  iframe 。这将创建一个名为 myframe 的浏览上下文。

然后,这个浏览上下文在其他元素的目标属性中使用 - 特别是a,form,button,input和base。

元素来创建一对超链接,这些超链接会将其href属性中指定的网址加载到iframe中。

width和height属性指定大小(以像素为单位)。src属性指定应最初加载并显示在iframe中的网址。

srcdoc属性允许您定义一个内嵌显示的HTML文档。

seamless属性设置浏览器显示iframe,如同它们是主HTML文档的组成部分。

否则,默认情况下会应用边框,如果内容大于width和height属性,则会出现滚动条。

iframe sandbox

sandbox 属性对HTML文档应用限制。当应用没有值的属性时,如下所示:

...
<iframe sandbox  name="myframe" width="300" height="100">
</iframe>
...

以下是禁用:

  • scripts
  • forms
  • plugins
  • 定位其他浏览上下文的链接

您可以通过为sandbox属性定义值来启用各个功能,如下所示:

...
<iframe sandbox="allow-forms" name="myframe" width="300" height="100">
</iframe>
...

可以使用的值的集合在下面的列表中描述。

  • allow-forms - 启用表单
  • allow-scripts - 启用脚本
  • allow-top-navigation - 允许定位到顶级浏览上下文的链接,这样可以将整个文档替换为另一个文档,也可以创建新的标签页或窗口
  • allow-same-origin - 允许将iframe中的内容视为来自与文档其余部分相同的位置
;