余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

HTML语义化标签-嵌入资源标签(html新增的语义标签)

xiyangw 2022-11-25 12:29 86 浏览 0 评论

img标签:页面中嵌入图片,自闭合标签;

<img src=”图片地址” alt=”图像的替代文字” title=”提示文字”width=”图片宽度”height=”图片高度” />

// src:图片的url地址;alt:用来描述图片的含义,图片不显示时替代图片;title:提供额外的提示或帮助信息,鼠标移至图片上时显示提示信息;width/height:图片宽高,默认单位为px,width/height不设置默认显示原始大小。

// 实际开发中,通常会把网站应用到的图片统一存放在image或images文件夹中

【示例】

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>图像标签的应用</title>

</head>

<body>

<p>

<img src="images/hetao.jpg" alt="无漂白薄皮核桃" title="无漂白薄皮核桃" width="160" height="160">

</p>

<p>

楼兰蜜语 新疆野生<br>

无漂白薄皮核桃 500gx2包<br>

¥48.8

</p>

</body>

</html>

// 常见的图像格式:

JPG格式采用的是有损压缩,会造成图像画面的失真,不过压缩后体积较小,且较清晰,比较适合网页应用。

GIF格式支持透明色,同时支持”动画”— “一招鲜”

PNG兼有JPG和GIF格式的优势,但不支持动画;PNG8不支持半透明,PNG24支持半透明;

iframe内联框架

主要作用是使页面中的部分内容用框架实现,一般用在页面中引用站外的页面内容;如自己的页面中引用搜狐的新闻页面等;

<iframe src=“引用页面地址”name=“框架标识名”…>

常用属性:width、height、name/id

// name或者id可以和锚链接结合起来实现页面间的相互跳转。

操作步骤:

(1)在被打开的框架上加name或id属性,如,<iframe name=“mainFrame”src=“the_second.html”/>

(2)在超链接上设置target目标窗口属性为希望显示的框架窗口名

<a href=“the_second.html”target=“mainFrame”>下边显示第二页</a>

【示例】

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>iframe应用</title>

</head>

<body>

<h1>上方导航条</h1>

<p>

<a href="the_first.html" target="mainFrame">下面显示第一行</a>

<a href="the_second.html" target="mainFrame">下面显示第二行</a>

<a href="the_third.html" target="mainFrame">下面显示</a>

</p>

<iframe src="the_first.html" name="mainFrame" width="800px" height="150" frameborder="1"></iframe>

</body>

</html>

// 当前页面和嵌入的页面在不同的浏览器上下文中,JS/CSS是相互隔离的;在嵌入页面中的操作并不影响当前页面。

插件:object、embed

<object type=”application/x-shockwave-flash”>

<param name=”movie” value=”http://pdfReader.swf”>

<param name=”flashvars” value=”book.pdf”>

</object>

type:插件的类型 param:插件的参数 value:播放器地址

播放器地址也可以写在<object data=”” type=””></object>data属性中,但IE8及以下不兼容

也可以使用embed标签嵌入一个插件;

<embed src=”http://pdfReader.swf” type=”application/x-shockwave-flash” width=”640” height=”480”>

video 页面中播放视频,之前通过flash插件,目前使用HTML5的video标签,支持ogg、mp4、webm等视频格式;

<video src=“视频路径”controls=“controls”></video>

// src用于指定要播放的视频文件的路径;congtrols用于提供播放、暂停和音量控件;可使用width、height设置宽高。

video只有高版本浏览器才支持,若浏览器不支持,可在video元素中间插入文字用于提示,旧的浏览器就可显示给用户。

<video src=“视频路径”controls=“controls”>你的浏览器不支持video标签</video>

【示例】

// video中使用src只能设置一种格式的视频路径,但一种格式的视频很难让所有的浏览器都支持,因此,可以使用source。

// source元素嵌套在video中,可出现多次,每个source对应一种格式的视频,浏览器会自动选择第一个可以识别的格式。

<video controls=”controls” poster=”img/poster.jpg”autoplay loop>

<source src=”movie.webm” type=”video/webm”></source>

<source src=”movie.mp4” type=”video/mp4”></source>

您的浏览器不支持video格式

</video>

// src:资源URL地址(视频路径);type:资源类型;poster:插入一个视频的封面;希望循环播放,需加loop属性。

// 视频进入的时候是暂停的,如果希望已进入就播放,可以给video加一个autoplay属性,这样页面加载后就会自动播放;

// 主流浏览器支持的视频格式

视频格式/浏览器IEFirefoxOperaChromeSafari
Ogg不支持3.5+10.5+5.0+不支持
MPEG4(后缀.mp4)9.0+不支持不支持5.0+3.0+
WebM不支持4.0+10.6+6.0+不支持

audio 播放音频文件,支持Ogg、MP3、WAV等音频格式

// 语法类同video

// 主流浏览器对音频格式的支持情况

音频格式/浏览器IEFirefoxOperaChromeSafari
Ogg不支持3.5+10.5+3.0+不支持
MP39.0+不支持不支持3.0+3.0+
WAV不支持4.0+10.6+不支持3.0+

图:canvas、svg,嵌入图形图像

Canvas是基于像素的,提供了一些绘制函数,可利用脚本来绘制图形图像。

svg是矢量的,提供了一系列的图形图像,如线形、圆形、矩形。

// 静态、高保真的图形图像可以用svg;对于性能要求较高、场景较复杂的比如实时数据的展示、游戏等,可以用canvas。

热点区域:map/area,定义热点区域;

// img里的usemap属性和map里的name属性配合使用;

<img src=”1.jpg” alt=”运动” width=”1090” height=”995” usemap=”#map2”>

<map>

<area shape=”rect” cords=”669,75,1075,682” href=”xiupin.com” target=”_blank”>

<area shape=”rect” cords=”26,93,391,337” href=”xiupin.com/a.html”>

</map>

// area:定义热点;shape:形状;coords:热点区域范围(定义内容与形状有关)


Webpiece_整合分析、记录点滴

相关推荐

前端开发之用以处理表单的jQuery控件之AJAX请求

介绍介绍我们的TFUMS的网页模板基本上都做好了,但是大家都发现了我们的模板里面的表单是不能提交的,这是因为缺少驱动程序,这个驱动程序就是指Javascript代码。在用户填写完表单项之后,点击了提交...

AJAX with JSP使用jQuery示例_ajax和jquery先学哪个

在这里,您将获得使用jQuery的JSP的AJAX示例。AJAX用于从服务器发送和接收数据,而无需重新加载页面。我们可以使用jQuery轻松实现AJAX。它为AJAX功能提供了各种方法。我使用Ecli...

华杉科技-jQuery与AJAX基础入门到实战精通

华杉科技提供的“jQuery与AJAX基础入门到实战精通”课程是一个涵盖了jQuery和AJAX技术的全面学习路径。下面是该课程的一个大致的学习大纲,以帮助你了解你将学到什么。1.jQuery基础入...

jQuery实现Ajax功能分析「与Flask后台交互」

本文实例讲述了jQuery实现Ajax功能。分享给大家供大家参考,具体如下:jQuery是一个小型的JavaScript库,它通常被用来简化DOM和JavaScript操作。通过在服务器...

jQuery - AJAX load() 方法_jqueryajax全部用法

jQueryload()方法jQueryload()方法是简单但强大的AJAX方法。load()方法从服务器加载数据,并把返回的数据放入被选元素中。语法:$(selector).load...

原生异步请求方法ajax,及jQuery相关方法,如何采用ES6封装ajax

知识已经过时了,可以直接跳到文章末尾看ES6封装ajax。怀念曾经的jQuery一.ajax方法jQuery:JavaScript代码包装成拿过来就能实现特定功能的代码库,基本淘汰了;json:简单...

JS类库Jquery(二):优雅的使用JQuery写Ajax实现前后端完美交互

Jquery虽然属于比较老的技术,但是相较于原生的JS写起来还是反方便很多,现在流行使用VUE等开源的框架,但是这并非不妨碍咱们进行Jquery的学习,前端程序员成长的过程中Jquery是必须了解的类...

Python Web详解:(Ajax+JSON+JQuery)

JOSN:JavascriptObjectNotation作用:主要约束前后端交互数据的格式JSON的格式表示单个对象使用{}采用键值对的格式保存数据键必须使用双引号引起来相当于...

JavaScript、Ajax、jQuery全部知识点,1分钟速懂!

本文将详细解读JavaScript、ajax、jQuery是什么?他们可以实现什么?1、JavaScript定义:javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一...

一文读懂Ajax与Axios、jquery之间的关系与区别

1、关系1)Ajax与jQuery:jQuery提供了对Ajax技术的封装,使得使用Ajax变得更加方便。jQuery中的Ajax方法是对原生的Ajax技术(基于XMLHttpRequest对象)进行...

Javascript应用-jQuery Ajax DOM 元素、遍历、数据操作和方法

jQuery库拥有完整的Ajax兼容套件。其中的函数和方法允许在不刷新浏览器的情况下从服务器加载数据,具体如下:函数描述jQuery.ajax()执行异步HTTP(Ajax)请求。.aja...

Jquery中ajax的使用_jquery.ajax

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。Jquery包装的ajax操作如下:$get$post操作...

全新web前端开发教程之Jquery Ajax

1、$.ajaxjquery调用ajax方法:格式:$.ajax({});参数:type:请求方式GET/POSTurl:请求地址urlasync:是否异步,默认是true表示异步data:发送到服务...

jquery对ajax的支持_ajax是什么

...

jquery中的Ajax请求详解各个参数_jquery ajax实例

比较适合初学的人$.ajax({url:"接收数据的页面地址",data:{参数:值,参数:值........},type:'post',或者getdataType:'json',async:t...

取消回复欢迎 发表评论: