HTML入门教程|| HTML 根本标签（2）

兜兜零元  金牌会员 | 2025-1-4 00:44:17 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 802|帖子 802|积分 2406

HTML 列表

HTML列表
HTML 无序列表

ul 元素表示无序列表。
ul 元素中的项目利用 li 元素表示。
元素没有在HTML5中定义任何属性，并且您利用CSS控制列表的显示。
HTML5中的 type 和 compact 属性已过时。
您可以在以下代码中查看正在利用的 ul 元素。
  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4.   I like:
  5.   <ul>
  6.     <li>HTML</li>
  7.     <li>CSS</li>
  8.     <li>Javascript</li>
  9.   </ul>
  10. </body>
  11. </html>
复制代码
每个列表项都显示一个项目符号。您可以通过 list-style-typeCSS属性来控制要利用哪个样式项目符号。
例2

以下代码显示了怎样创建嵌套列表。
  2. <!DOCTYPE HTML>
  3. <html>
  4. <body>
  5.     <ul>
  6.         <li>HTML</li>
  7.         <li>CSS
  8.             <ul>
  9.                 <li>Introdunction</li>
  10.                 <li>CSS attributes</li>
  11.             </ul>
  12.         </li>
  13.         <li>Javascript</li>
  14.     </ul>
  15. </body>
  16. </html>
复制代码

HTML 有序列表

ol 元素表示有序列表。列表中的项目利用 li 元素表示。
已在HTML5中添加reversed属性。 compact 属性现在在HTML5中已过时。
以下代码显示了用于创建简单有序列表的 ol 元素。
  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4.   I like:
  5.   <ol>
  6.     <li>HTML</li>
  7.     <li>CSS</li>
  8.     <li>XML</li>
  9.   </ol>
  10. </body>
  11. </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

以下代码显示了怎样创建嵌套排序列表。
  1. <html>
  2. <body>
  3. <p>Here is a nested ordered list:</p>
  5. <ol>
  6.     <li>Item one</li>
  7.     <li>Item two</li>
  8.     <li>Item three</li>
  9.     <li>Item four
  10.         <ol>
  11.             <li>Item 4.1</li>
  12.             <li>Item 4.2</li>
  13.             <li>Item 4.3</li>
  14.         </ol>
  15.     </li>
  16.     <li>Item Five</li>
  17. </ol>
  19. </body>
  20. </html>
复制代码
例4

以下代码显示怎样利用大写字母并从点4开始创建有序列表。
  2. <html>
  3. <body>
  5. <p>Here is an ordered list using capital letters and starting at point 4, which is a letter D:</p>
  7. <ol type="A" start="4">
  8.     <li>Point number one</li>
  9.     <li>Point number two</li>
  10.     <li>Point number three</li>
  11. </ol>
  12. </body>
  13. </html>
复制代码
HTML 自定义列表

形貌列表由一组术语/形貌分组构成。
您利用三个元素来定义形貌列表: dl ， dt 和 dd 元素。


  • dl 表示形貌列表。
  • dt 表示形貌列表中的术语。
  • dd 表示形貌列表中的定义。
多个 dd 元素可用于单个 dt 元素，这答应您为单个术语提供多个定义。
以下代码创建说明列表。
  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4.   I like:
  5.   <dl>
  6.     <dt>CSS</dt>
  7.     <dd>Cascading Style Sheets</dd>
  8.     <dd><i>a style sheet language used for
  9.            describing the look and formatting
  10.            of a document written in a markup language</i></dd>
  12.     <dt>HTML</dt>
  13.     <dd>The mark language</dd>
  15.     <dt>Javascript</dt>
  16.     <dd>The coding logic</dd>
  17.   </dl>
  18. </body>
  19. </html>
复制代码
HTML figure

HTML figure
figure 和 figcaption 元素

figure标签规定独立的流内容（图像、图表、照片、代码等等）。
figure元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

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

你可以在下面的代码中看到一起利用的 figure 和 figcaption 元素。
  2. <!DOCTYPE HTML>
  3. <html>
  4. <body>
  5.   I like XML and CSS.
  6.   <figure>
  7.     <figcaption>Listing 01. Using the code element</figcaption>
  8.     <code>
  9.       <strong>var</strong> fruits = ["CSS", "HTML", "CSS", "Javascript"];<br>
  10.       <strong>document.writeln</strong>("I like " + fruits.length + " fruits");
  11.     </code>
  12.   </figure>
  13. </body>
  14. </html>
复制代码
上面的代码渲染如下:


HTML 图像

HTML图像

img 元素答应您将图像嵌入到HTML文档中。
它有局下属性: src，alt，height，width，usemap，ismap 。
HTML5中的border，longdesc，name，align，hspace 和 vspace 属性已过时。
要嵌入图像，您需要利用 src 和 alt 属性，如下所示。
  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4.   <img src="http://www.www.w3cschool.cn/style/download.png"
  5.        alt="Triathlon Image"
  6.        <strong>width</strong>="200"
  7.        <strong>height</strong>="67" />
  8. </body>
  9. </html>
复制代码
src 属性指定图像的URL。
如果无法显示图片，则 alt 属性定义内容。
width 和 height 属性设置图像巨细(以像素为单位)。

图像链接

img 元素的常见用途是结合 a 元素创建基于图像的超链接。
以下代码显示了怎样利用 img 和 a 元素。
  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4.   <p>
  5.     <a href="//www.w3cschool.cn/page.html">
  6.        <img ismap src="http://www.www.w3cschool.cn/style/download.png"/>
  7.     </a>
  8.   </p>
  9. </body>
  10. </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属性时，不需要坐标值。
以下代码显示怎样利用图像映射。
  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4.   <p>
  5.     <img src="http://www.www.w3cschool.cn/style/download.png" usemap="#mymap"/>
  6.   </p>
  7.   <map name="mymap">
  8.     <area href="a.html" shape="rect" coords="3,5,68,62" alt="test a" />
  9.     <area href="b.html" shape="rect" coords="70,5,130,62" alt="test b" />
  10.     <area href="c.html" shape="default" alt="test c" />
  11.   </map>
  12. </body>
  13. </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元素。
  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4.   <a href="http://www.w3cschool.cn" target="myframe">Tutorial</a>
  5.   <iframe name="myframe" <strong>width</strong>="300" <strong>height</strong>="300"> </iframe>
  6. </body>
  7. </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文档应用限定。当应用没有值的属性时，如下所示：
  1. ...
  2. <iframe sandbox  name="myframe" width="300" height="100">
  3. </iframe>
  4. ...
复制代码
以下是禁用:


  • scripts
  • forms
  • plugins
  • 定位其他浏览上下文的链接
您可以通过为sandbox属性定义值来启用各个功能，如下所示：
  1. ...
  2. <iframe sandbox="allow-forms" name="myframe" width="300" height="100">
  3. </iframe>
  4. ...
复制代码
可以利用的值的集合在下面的列表中形貌。


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

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

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

兜兜零元

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表