ToB企服应用市场:ToB评测及商务社交产业平台

标题: HTML入门教程|| HTML 根本标签（2） [打印本页]

作者: 兜兜零元 时间: 2025-1-4 00:44
标题: 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>
<strong>var</strong> fruits = ["CSS", "HTML", "CSS", "Javascript"];<br>
<strong>document.writeln</strong>("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"
<strong>width</strong>="200"
<strong>height</strong>="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" <strong>width</strong>="300" <strong>height</strong>="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中的内容视为来自与文档别的部分相同的位置

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)