Web标签介绍(一)

HTML内容元素中图片元素 使用img元素:src属性:图片路径。 alt属性:图片无法显示的时候使用替代文本,title属性:鼠标悬停时显示文本内容。 在同一张图片上点击不同的位置链接到不同的页面上 使用map,和area元素(map是area的父元素) 图片 1 加上id或者name是为了解决兼容性。 shap形状分类:圆形,矩形,多边形,(点击区域的形状)。 href:形状的链接地址。 coords:形状的位置。 圆形(cicle),多边形(poly) 矩形(rectangle) coords;矩形(左上角x轴坐标,y轴,右下角x,y,轴坐标) 圆形:(圆心点x,y,轴,半径) 父级元素(figure) 子集元素(img和figcaption,其中figcaption是对img的解释或相关内容) controls视屏控件 controls autoplay=“” 自动播放 loop(循环播放) 对img设置宽高时,只设置一个值,拧一个会自动生成。(等比例缩放) url(统一资源路径) background-image:url('')背景图片 实现雪碧图的步骤:1.给尺寸,2.应用位置(background-image:url())3.给位置(background-position:x,y,轴) 用非块级元素包含

标签(大小写不敏感)

<br/>:定义空标签(元素),标签一开始就结束,如不产生新段落的情况下,可以用作换行(新增一行);

<p 属性> 内容</p>:定义段落;

<h1>-<h6>:定义标题,h1为最大标题,h6为最小标题;

<hr/>:定义水平线;

<!-->:定义注释;

<abbr>:定义缩写;

<a>:定义链接

链接语法:

<a  href="url">Link text</a>

//  href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示,"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

target属性

<a href="http://www.3wschool.com/"  target="_blank"></a>

//使用 Target 属性,你可以定义被链接的文档在何处显示

//上面实例定义新的链接会在新的页面被打

name属性

name 属性规定(anchor)的名称。

您可以使用 name 属性创建 HTML 页面中的书签

书签不会以任何特殊方式显示它对读者是不可见的。当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

首先,我们在 HTML 文档中对锚进行命名(创建一个书签):

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

***//"基本的注意事项-有用的提示"为此html页面有的内容,即对“基本的注意事项-有用的提示”加了名字为tips的id,创建指向该锚的连接之后,直接跳到该页面的此内容部分;


然后,我们在同一个文档中创建指向该锚的链接

<a href="#tip">有用的提示</a>

// href="#tips"  (点击“有用提示”)为定义指向name为tips的内容(基本的注意事项-有用的提示)部分;

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

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

// 此时别的页面的href为需要跳转的页面url与tip的拼接

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

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


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

<img />:定义图片(<img src="url"/>)

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

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

URL 指存储图像的位置如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中,那么其 URL 为 http://www.w3school.com.cnoat.gif

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间,那么浏览器会首先显示第一个段落,然后显示图片,最后显示第二段。

Alt属性

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

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

<map>:定义图像地图*

  id:为 map 标签定义唯一的名称。*

** name:为 image-map 规定的名称。*

***    访问 Map 对象


   您可以通过使用 getElementById() 来访问 元素:var x = document.getElementById("myMap");

<area>:*定义图像地图上的可点击区域

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

img 中的 usemap 属性可引用 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 添加 id 和 name 属性。

本文由金沙官网线上发布于Web前端,转载请注明出处:Web标签介绍(一)

您可能还会对下面的文章感兴趣: