『HTML』Interesting 标签

1. 超链接

标签名:<a>

常用属性:

  • href:链接指向页面的 url

  • target:规定在何处打开链接文档

    • _blank:新的标签页打开

    • _self:本页面打开链接,默认值

    • _top:在整个窗口中打开被链接文档(跳出框架)

      <html>
      
      <body>
      	<p>被锁在框架中了吗?</p> 
      	<a href="https://www.baidu.com" target="_top">请点击这里!</a> 
      </body>
      </html>
      
    • framename:在指定的框架中打开被链接文档

  • download:定义下载文件的文件名,必须定义href属性

  • name:锚点,一般用于当前网页内的定位跳转

    <a name="tips">基本的注意事项 - 有用的提示</a>
    <a href="#tips">有用的提示</a>
    

    您也可以在其他页面中创建指向该锚的链接:

    <a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
    

【注】请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.w3school.com.cn/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3school.com.cn/html/"

❗️ 命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚,然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科,您会发现其中几乎每个词条都采用这样的导航方式。

❗️ 假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。

2 框架元素

2.1 frame

<frame>定义的是<frameset>中的一个特定的窗口(框架),<frameset> 中的每个框架都可以设置不同的属性

  • frameborder

    规定是否显示框架周围的边框,出于实用性方面的原因,最好不用设置该属性,请使用 CSS 来应用边框样式和颜色

    0 表示没有边框,1 表示有边框

  • marginheight

    marginheight 属性规定框架内容与框架的上方之间的高度,以像素计

  • marginwidth

    marginwidth 属性规定框架内容与框架的左侧之间的宽度,以像素计

  • name

    name 属性规定框架的名称

    frame 元素的name 属性用于在 JavaScript 中引用元素,或者作为链接的目标

  • noresize

    noresize 属性规定用户无法调整框架的大小

    默认地,可以通过拖动框架之间的 “墙壁” 来改变框架的大小,该属性可以锁定框架的大小

    <frame src="frame_a.htm" noresize="noresize" />
    
  • scrolling

    scrolling 属性规定是否在框架中显示滚动条,默认地,如果内容大于框架,就会出现滚动条

    属性值主要有下面三种:

    • auto:在需要的时候显示滚动条
    • yes:始终显示滚动条(即使不需要)
    • no:从不显示滚动条(即使需要)
  • src

    src 属性规定在框架中显示的文档的 URL

2.2 iframe

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)

您可以把需要的文本放置在<iframe></iframe> 之间,这样就可以应对无法理解 iframe 的浏览器

  • frameborder

    规定是否显示框架周围的边框,出于实用性方面的原因,最好不用设置该属性,请使用 CSS 来应用边框样式和颜色

    0 表示没有边框,1 表示有边框

  • height

    规定 iframe 的高度,数值单位是像素,百分数是以包含元素百分比计的高度值

  • width

    规定 iframe 的宽度,数值单位是像素,百分数是以包含元素百分比计的高度值

  • marginheight

    marginheight 属性规定框架内容与框架的上方之间的高度,以像素计

  • marginwidth

    marginwidth 属性规定框架内容与框架的左侧之间的宽度,以像素计

  • name

    name属性规定 iframe的名称,iframe元素的 name属性用于在 JavaScript 中引用元素,或者作为链接的目标

  • sandbox

    如果被规定为空字符串(sandbox=""),sandbox属性将会启用一系列对行内框架中内容的额外限制。

    sandbox属性的值既可以是一个空字符串(应用所有的限制),也可以是空格分隔的预定义值列表(将移除特定的限制)

在这里插入图片描述

  • scrolling

    scrolling 属性规定是否在框架中显示滚动条,默认地,如果内容大于框架,就会出现滚动条

    属性值主要有下面三种:

    • auto:在需要的时候显示滚动条
    • yes:始终显示滚动条(即使不需要)
    • no:从不显示滚动条(即使需要)
  • seamless

    seamless 属性属于逻辑属性。

    当设置该属性后,它规定了 <iframe> 看上去像是包含文档的一部分(无边框或滚动条)

    <iframe seamless>
    
  • src

    src 属性规定在框架中显示的文档的 URL

  • srcdoc

    srcdoc 属性规定页面的 HTML 内容显示在行内框架中

    该属性与 sandboxseamless 属性一同使用。

    如果浏览器不支持 src属性,则将覆盖在 src 属性(若已设置)中规定的内容。

    如果浏览器不支持 srcdoc 属性,则相应地会显示在 src 属性(若已设置)中规定的文件。

2.3 noframes

noframes 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。

2.4 frameset

frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。

在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用colsrows属性。

<frameset> 标签有一个必需的属性:要么是 rows,要么是 cols,这取决于您的选择,它们定义了文档窗口中框架或嵌套的框架集的行或列的大小及数目。

这两个属性都接受用引号括起来并用逗号分开的值列表,这些数值指定了框架的绝对(像素点)或相对(百分比或其余空间)宽度(对列而言),或者绝对或相对高度(对行而言)。这些属性值的数目决定了浏览器将会在文档窗口中显示多少行或列的框架。

【Examples】

例子 1

下面的代码将创建 3 行框架:

<frameset rows="150,300,150">

其中的每行都贯穿整个文档窗口。第一和最后一个框架被设为 150 像素高,第二行设置成 300 像素高。

实际上,除非浏览器窗口正好是 600 像素高,否则浏览器将会自动按照比例延伸或压缩第一和最后一个框架,使得这两个框架都占据 1/4 的窗口空间。中间行将会占据剩下 1/2 的窗口空间。

例子 2

用窗口尺寸的百分比表示的框架行和列尺寸数据更加实际。

例如,下面这个示例与刚才那个示例的效果相同:

<frameset rows="25%,50%,25%">

当然,如果这些百分比加起来不是 100%,浏览器也会自动按照比例重新给出每行尺寸以消除差异。

例子 3

如果你像我们一样,那么将问题综合起来就不是一件难事。可能有的框架设计人员正为同样的困难而感到苦恼,这就解释了为什么他们要在 <frameset> 的 rows 和 cols 值上加上星号。它告诉浏览器要在将相邻的框架放入框架集之后,给剩下的空间分配各自的行或列。

例如,当浏览器遇到下列框架标签时:

<frameset cols="100, *">

上面的例子会生成一个宽为固定的 100 像素的列,然后再生成另一个框架列,该列会占据框架集中其余所有的空间。

例子 4

您还可以对多个列或行属性值使用星号。在这样的情况下,相应的行或列将对可用空间进行等分,例如:

<frameset rows="*, 100, *">

这条语句在框架集的中间生成一个 100 像素高的行,并在这行的上边和下边各生成一个相同尺寸的行

例子 5

如果在星号前放置一个整数值,相应的行或列就会相对地获得更多的可用空间,例如:

<frameset cols="10%, 3*, *, *">

它生成了 4 列:第一列占据整个框架集宽度的 10%。然后浏览器把其他空间的 3/5 分配给第二个框架,第三个和第四个框架各分配其余空间的 1/5

从上面的例子可以发现,使用星号(尤其是用数值作为前缀),可以很容易地在一个框架集中分割剩下的空间

3. 图像

在 HTML 中,图像由 <img> 标签定义

<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签

要在页面上显示图像,你需要使用源属性(src)。src 指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是:

<img src="url" />

img 标签其它常用属性如下:

  • alt

    alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的

    在浏览器无法载入图像时,替换文本属性告诉读者它们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的

  • height

    调整高度

  • width

    调整宽度

  • ismap

    ismap 属性将图像定义为服务器端图像映射

    图像映射指的是带有可点击区域的图像

    当点击一个服务器端图像映射时,点击坐标会以 URL 查询字符串的形式发送到服务器

    必须把 ismap 属性定义为 <img ismap="ismap" />

  • usermap

    usemap 属性将图像定义为客户端图像映射,usemap 属性与 <map> 元素的nameid 属性相关联,以建立 <img><map> 之间的关系

    usemap 属性提供了一种“客户端”的图像映射机制,有效地消除了服务器端对鼠标坐标的处理,以及由此带来的网络延迟问题。通过特殊的 <map><area> 标签,HTML 创作者可以提供一个描述 usemap 图像中超链接敏感区域坐标的映射,这个映射同时包含相应的超链接 URL。usemap 属性的值是一个 URL,它指向特殊的 <map> 区域。用户计算机上的浏览器将把鼠标在图像上单击时的坐标转换成特定的行为,包括加载和显示另外一个文档。

    ismap 属性和 usemap 属性的应用差异

    地图就是很好地应用 ismapusemap 属性的一个示例,例如,在浏览一家全国范围的大公司网页时,用户可能会在地图上单击他们所居住的城市,以获得附近地区零售店的地址和电话号码等。

    usemap 客户端处理图像映射的好处是,它不要求有服务器或特殊的服务器软件,与 ismap 机制不同,它可以用在非 web (无网络)环境中,例如在本地的文件或者 CD-ROM 中使用。

3.1. map

定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。

area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

<img>中的usemap 属性可引用 <map> 中的 idname 属性(取决于浏览器),所以我们应同时向 <map> 添加 idname 属性。

3.2 area

<img> 标签中的 usemap 属性与 map 元素 name 属性相关联,创建图像与映射之间的联系

其常用属性为:

  • alt

    定义此区域的替换文本

  • coords

    coords 属性规定区域的 x 和 y 坐标

    coords 属性与 shape 属性配合使用,来规定区域的尺寸、形状和位置

    图像左上角的坐标是 "0,0"

    <area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。

    下面列出了每种形状的适当值:

    • 圆形:shape=“circle”,coords="x,y,z"

      这里的 x 和 y 定义了圆心的位置(“0,0” 是图像左上角的坐标),r 是以像素为单位的圆形半径。

    • 多边形:shape=“polygon”,coords="x1,y1,x2,y2,x3,y3,…"

      每一对 “x,y” 坐标都定义了多边形的一个顶点(“0,0” 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。

      多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

    • 矩形:shape=“rectangle”,coords="x1,y1,x2,y2"

      第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,“0,0” 是图像左上角的坐标。请注意,定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。

    如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。

  • href

    href 属性规定区域中连接的目标

  • nohref

    nohref 属性规定该区域没有相关的链接

    <area shape="circle" coords="180,139,14" nohref="nohref" alt="Venus" />
    
  • shape

    在这里插入图片描述

  • target

    target 属性规定区域中连接的目标。

在这里插入图片描述

4. 表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

  • 单元格边距

    <table>cellpadding 属性规定单元边沿与其内容之间的空白

  • 单元格间距

    <table>cellspacing 属性规定单元格之间的空间

  • 表格和边框属性

    如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。

    使用边框属性来显示一个带有边框的表格:

    <table border="1">
        <tr>
            <td>Row 1, cell 1</td>
            <td>Row 1, cell 2</td>
        </tr>
    </table>
    
  • 表格的表头

    表格的表头使用 <th> 标签进行定义。

    大多数浏览器会把表头显示为粗体居中的文本:

    <table border="1">
        <tr>
            <th>Heading</th>
            <th>Another Heading</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
    

    也可以使用垂直表头,那只要在每一个<tr>的第一个子元素用<th>即可

  • 表格的标题

    <table border="6">
        <caption>我的标题</caption>
        <tr>
          <td>100</td>
          <td>200</td>
          <td>300</td>
        </tr>
        <tr>
          <td>400</td>
          <td>500</td>
          <td>600</td>
        </tr>
    </table>
    
  • 表格的分组

    在表格标签中,有三个语义标签:<thead><tbody><tfoot>,表示表头、表内容、表尾,在默认情况下这些元素不会影响到表格的布局。不过,可以使用 CSS 使这些元素改变表格的外观。

    theadtfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

  • 表格的跨行或跨列

    横跨两列的单元格:

    姓名 电话
    Bill Gates 555 77 854 555 77 855
    <h4>横跨两列的单元格:</h4>
    <table border="1" style="text-align:center">
        <tr>
          <th>姓名</th>
          <th colspan="2">电话</th>
        </tr>
        <tr>
          <td>Bill Gates</td>
          <td>555 77 854</td>
          <td>555 77 855</td>
        </tr>
    </table>
    

    横跨两行的单元格:

    姓名 Bill Gates
    电话 555 77 854
    555 77 855
    <h4>横跨两行的单元格:</h4>
    <table border="1" style="text-align:center">
        <tr>
          <th>姓名</th>
          <td>Bill Gates</td>
        </tr>
        <tr>
          <th rowspan="2">电话</th>
          <td>555 77 854</td>
        </tr>
        <tr>
          <td>555 77 855</td>
        </tr>
    </table>
    

猜你喜欢

转载自blog.csdn.net/dreaming_coder/article/details/109190737