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。
a 元素来创建一对超链接，这些超链接会将其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中的内容视为来自与文档其余部分相同的位置