精华内容
下载资源
问答
  • 1.9 超级链接 普通超级链接1 超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念,那么,我们现在所有的WWW的应用将不复存在。所以,对超级链接的掌握具有特殊重要的意义。 普通超级链接2 超级链接是用...

    9 超级链接

    普通超级链接1

    超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念,那么,我们现在所有的WWW的应用将不复存在。所以,对超级链接的掌握具有特殊重要的意义。

    普通超级链接2

    超级链接是用锚(mao)元素<a>定义的

    在<a>元素下,有元素属性href, href的属性值为一个URL地址--网页地址,是因特网上标准的资源的地址(Address)。

    如:<a href=“http://www.baidu.com”>指向baidu的超级链接</a>

    如:<a href=“29.htm">普通超级链接</a>

    新开链接窗口

    开一个新的(浏览器)窗口 (Target Window)

    <h3>Table of Contents</h3>
    <ul>
      <li><a href="4.html" target="_blank">Preface</a></li>
      <li><a href="1.htm" target ="_blank ">Chapter 1</a></li>
      <li><a href="2.html" target ="_blank ">Chapter 2</a></li>
      <li><a href="3.html" target ="_blank ">Chapter 3</a></li>
    </ul>
    

    10 HTML对图片的控制

    基本语法:

    <img src=“图片名称”>

    引用图片必须用<img>元素标志。<img>元素下的基本元素属性是src属性,src的属性值为所引用的图片的URL地址。

    src属性是必须的。src的URL可以是绝对地址,也可以是相对地址。

    <img src=“/桌面/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />

    所谓图片的替代文本,指图片不能显示时在图片所在位置显示的一段文本。

    定义图片替代文本的方法是:

    <img src=“图片名称” alt=“这是一张图片”>

    图片的显示大小

    我们可以指定一幅图片在浏览器窗口里的显示大小。

    定义图片的显示大小的方法是:

    <img src="sample.jpg" width=“100” height=“100” >

    width指定图片的宽度,height指定高度。

    图片的边框

    我们可以为一幅图片加一个边框以突出显示:

     <img src="sample.jpg" border= " 2 " >

    border的属性值为象素数

    图片的对齐方式

    图片可以相对于页面或单元格有一个对齐方式。 定义水平对齐方式的方法是:

    <img src=“sample.jpg” align=“left” >

    <img src=“sample.jpg” align=“right”>

    11表格(TABLE)标记

    <table> 元素:定义一个表格。每一个表格只有一对<table>和</table>,一张页面中可以有多个表格。

    <tr>元素:定义表格的行,一个表格可以有多行,所以<tr>对于一个表格来说不是唯一的。

    <td>元素:定义表格的一个单元格。每行可以有不同数量的单元格,在<td>和</td>之间是单元格的具体内容。

    需要注意的是:上述的三个元素必须、而且只能够配对使用。缺少任何一个元素,都无法定义出一个表格。

    表格的基本结构

    <table>定义表格
    <tr>
    	<th>定义表头</th>
    </tr>
    <tr>定义表行
    <td>…</td>定义单元格
    </tr>
    </table>
    

    表格的属性 –1

    width属性:指定表格或某一个表格单元格的宽度。单位可以是%或者象素。

    height属性:指定表格或某一个表格单元格的高度。单位可以是%或者象素。

    border属性:表格边线粗细

    bgcolor属性:指定表格或某一个单元格的背景颜色。

    background属性:指定表格或某一个单元格的背景图片。其属性值为一个URL地址。

    align属性:指定表格或某一个单元格里的内容(文本、图片等)的对齐方式。

    12网页中的框架

    制作框架页面的步骤:

       1).编写所有子框架页面

       2).编写主框架页面

       3).在主框架页面中设定子框架名称

       4).如果框架页面之间存在链接,在子框架中设定链接

     注意:框架页面是不含<body>标签的

    1 基本语法

    <html>
      <frameset cols="25%,50%,25%"> 
      <frame src="frame_a.htm" /> 
      <frame src="frame_b.htm" /> 
      <frame src="frame_c.htm" /> 
      </frameset> 
    </html> 
    

    定义框架的基本语法

    框架由一对<frameset>定义

    <frameset>有两个属性:

    rows和cols rows定义上下分割的框架的大小;

    cols定义左右分割的框架的大小;

    在定义大小时,rows和cols可以以百分比为单位。

    各窗口的尺寸设置

    
    <frameset rows=#>横排多个窗口
    <frameset rows=30%,20%,*> 
    <frame src="A.html"> 
    <frame src="B.html"> 
    <frame src="C.html"> 
    </frameset> 
    

    框架边框的颜色

    bordercolor="ff0000“

    各窗口边框的设置

    frameborder=#  #=yes, no / 1, 0

    框架边框的宽度

    framespacing="10"

    <frame>的属性

    Scrolling:是否显示滚动条。yes, no, auto

    Noresize:框架在浏览器里不可以被调整大小。

    13会移动的文字

    1 基本语法

    <marquee> ... </marquee>

    2 文字移动属性

    (1)方向 :direction=#

    ——#=left, right,up,down

    (2)方式: behavior=#

    ——#=scroll(循环), slide(只走一次), alternate(来回走)

    (3)循环:  loop=#

    ——#=次数;若未指定则循环不止(infinite)

    (4)速度: scrollamount=#

    (5)延时: scrolldelay=#

    3、其他属性

    (1)底色: bgcolor=#

    ——#=RRGGBB  16 进制颜色代码

    (2)面积: height=#  width=#

    总结

    比较高级的一部分

    推荐一个自学的网站https://www.runoob.com/html/html-tutorial.html

     

    展开全文
  • 网页超级链接、图片与多媒体 网页超级链接 ...超级链接使得浏览者可以众多...HTML文件超级链接标记使用<a>…</a>标签组来实现,语法结构及相关说明如下所示。 基本语法格式: <a href="url.

    HTML5超级链接、图片与多媒体

     

    网页超级链接

    超级链接(hyperlink)也简称为链接(link),是网站的重要组成部分,HTML正是因为有了超级链接才显得与众不同。超级链接使得浏览者可以在众多网页之间跳转和返回。可以使用<a>标签的name 或 id 属性,创建一个文档内部的书签,也就是说,可以创建指向文档片段的链接。超链接的目标对象类型有很多,不但可以链接到各种类型(如图片文件、声音文件、视频文件、word等)的文件,还可以链接到网页内的特定内容、其他网站、ftp服务器等,通过它们可以将网站建设成一个丰富多彩的多媒体世界。

    在HTML文件中,超级链接使用<a>…</a>标签(标签也称为标记、元素)组来实现,语法结构及相关说明如下所示。

    基本语法格式:

    <a href="url" target="窗口名称" title="超级链接文字说明">链接内容</a>

    说明

    (1)<a>标签是双标签,链接的内容放在<a>和</a>之间。链接内容可以是文字、图片、音频或视频文件等。

    (2)href属性是<a>标记的必要属性,不可缺省,用于设置链接所指向的目标地址,目标地址通过href属性的值“url”来表示。

    (3)url:资源地址,指的是链接所指向的文件的地址,其取值可以是本地地址或远程地址。

    (4)target属性用于指定打开链接时的目标窗口,默认值是在原窗口中打开。其属性值及代表含义如下表所示:

    含义

    _self

    在当前窗口中打开目标文件,默认值

    _blank

    在新窗口中打开目标文件

    _top

    在整个浏览器窗口打开链接(忽略任何框架)

    _parent

    在当前窗口的上一级窗口打开,一般在框架中使用

    (5)title属性对超级链接起到提示或说明作用。浏览器打开网页后,当鼠标悬停在链接上方时会出现提示性文字,文字内容由title属性值指定,往往用来提示该链接指向的内容是什么。

     

    例、

    <!DOCTYPE html>
    <html>
        <head>
          <meta charset="utf-8">
          <title>网站链接测试</title>
       </head>
       <body>
         <h3><center>中文门户网站</center></h3>
         <a href="https://www.ifeng.com" target="_self" title="打开凤凰网">凤凰</a> <br/>
         <a href="https://www.huanqiu.com/" target="_self" title="打开环球网">环球网</a>
      </body>
    </html>
    

    由于指定了target="_self",所以每一个网站被打开时都是在原窗口中打开,同时原窗口中之前的网页数据将会从内存中卸载,被目标网页所取代。

    保存为文件名LinkDemoA.html,用浏览器打开显示如下:

     

    使用<a>标签的name 或 id 属性,可以创建一个文档内部的书签——创建指向文档片段的链接——锚链接。

    下面是创建指向文档片段的链接(锚链接)的例子,源码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>指向文档片段的链接(锚链接)的例子</title>
    </head>
    <body >
    <h1>文学鉴赏</h1>
    <h3><a href="#第一篇" >春江花月夜</a> <h3>
    <h3><a href="#第二篇" >再别康桥</a> <h3>
    <hr>
    <h3><a name="第一篇" >春江花月夜</a></h3><br>
    ——张若虚 〔唐代〕<br>
    春江潮水连海平,海上明月共潮生。<br>
    滟滟随波千万里,何处春江无月明!<br>
    江流宛转绕芳甸,月照花林皆似霰。<br>
    空里流霜不觉飞,汀上白沙看不见。<br>
    江天一色无纤尘,皎皎空中孤月轮。<br>
    江畔何人初见月?江月何年初照人?<br>
    人生代代无穷已,江月年年望相似。(望相似 一作:只相似)<br>
    不知江月待何人,但见长江送流水。<br>
    白云一片去悠悠,青枫浦上不胜愁。<br>
    谁家今夜扁舟子?何处相思明月楼?<br>
    可怜楼上月徘徊,应照离人妆镜台。(徘徊 一作:裴回)<br>
    玉户帘中卷不去,捣衣砧上拂还来。<br>
    此时相望不相闻,愿逐月华流照君。<br>
    鸿雁长飞光不度,鱼龙潜跃水成文。<br>
    昨夜闲潭梦落花,可怜春半不还家。<br>
    江水流春去欲尽,江潭落月复西斜。<br>
    斜月沉沉藏海雾,碣石潇湘无限路。<br>
    不知乘月几人归,落月摇情满江树。(落月 一作:落花)
    <br><br>
    【简说】全诗共三十六句,每四句一换韵,通篇融诗情、画意、哲理为一体。全诗紧扣春、江、花、月、夜的背景来写,而又以月为主体。“月”是诗中情景兼融之物,它跳动着诗人的脉搏,在全诗中犹如一条生命纽带,通贯上下,触处生神,诗情随着月轮的生落而起伏曲折。<br>
    在句式上,大量使用排比句、对偶句和流水对,起承转合皆妙,文章气韵无穷。诗中春、江、花、月、夜、人几个主题词错落重叠,伸缩变化,把读者引进了一个目眩五彩、浑然忘我的境界。
    <br><br>
    <h3><a name="第二篇" >再别康桥</a></h3><br>
    ——徐志摩<br>
    轻轻的我走了,正如我轻轻的来; <br>
    我轻轻的招手,作别西天的云彩。 <br>
    那河畔的金柳,是夕阳中的新娘; <br>
    波光里的艳影,在我的心头荡漾。 <br>
    软泥上的青荇,油油的在水底招摇; <br>
    在康河的柔波里,我甘心做一条水草! <br>
    那榆荫下的一潭,不是清泉,是天上虹; <br>
    揉碎在浮藻间,沉淀着彩虹似的梦。 <br>
    寻梦?撑一支长篙,向青草更青处漫溯; <br>
    满载一船星辉,在星辉斑斓里放歌。 <br>
    但我不能放歌,悄悄是别离的笙箫; <br>
    夏虫也为我沉默,沉默是今晚的康桥! <br>
    悄悄的我走了,正如我悄悄的来; <br>
    我挥一挥衣袖,不带走一片云彩。 <br>
    【简说】“诗中有画,画中有诗”。全诗共七节,每节四行,每行两到三个节拍,节奏非常鲜明;每节二四行押韵,而目每节都自然换韵,读来抑场顿挫,朗朗上口;整齐中富于变化,使全诗充满了错落有致的美感!诗的每一节都可以称得上是一幅述人的图画<br><br>
    </body>
    </html>

    保存文件名为LinkDemoB.html,用浏览器打开显示如下:

     

    Windows中的目录(也称为文件夹)

    一个典型的文件系统可以达到有组织的存储文件的目的。一个“目录”或“文件夹”就是一个装有数字文件系统的虚拟“容器”。在它里面保存着多个文件和其它一些目录(文件夹)。在一个目录(文件夹)中的另一个目录(文件夹)被称作它的子目录(子文件夹)。类似如下图:

    Windows中的路径

     

    用户在磁盘上寻找文件时,所历经的文件夹线路叫路径。路径分为绝对路径和相对路径。

    绝对路径:是从盘符开始的路径,形如d:\AA\BB\my.html

    相对路径:是从当前目录(即用户正在使用的目录)开始的路径,如当前目录为C:\AA

    要描述上述路径,只需输入BB\my.html。

    实际上,严格的相对路径写法应为.\BB\my.html其中,.(点)表示当前路径,在通常情况下可以省略,只有在特殊的情况下不能省略。

    . 表示当前目录

    .. 表示当前目录的上一级目录。

     

    与Windows中的路径类似,HTML中也有两种形式的路径,绝对路径和相对路径,不同的路径用在不同的链接中。如果要链接站外的文件,则需要使用绝对路径;如果要链接站内的文件,一般在实现超级链接功能时,必须要指定href属性的值,也就是目标文件的路径。网站中(或站外)每一个文件都有一个独一无二的地址,称之为URL(Uniform Resource Locator),即统一资源定位符,通过URL建立当前文件到目标文件的链接。

    1.绝对路径

    绝对路径是指目标文件的完整路径,路径中需包含完整的传输协议名称、主机名称、目录名称以及文件名称,一般用于对站外的文件的链接。常见的绝对路径形式如下所示。

    <a href="http://www.imut.edu.cn/ies/index.html">内容</a>

    注意:如果对站内的文件做链接,一般不使用绝对路径,这样做有很大弊端,当网站发生移植时(比如站点文件夹从D盘移植到E盘),访问该链接时就会出错。因此,在设置超级链接路径时,只要当链接的目标文件在站外时,才可以使用绝对路径;当目标文件在站内时,不要使用绝对路径描述超级链接。

    2.相对路径

    相对路径是指从当前文件为起点到目标文件的路径,相对路径中省略掉了当前文件和目标文件的共同路径部分。

     

    在HTML中,超级链接分为内部链接、外部链接和书签链接(也称锚点链接)三种。

    1.内部链接

    内部链接是指当前文件与目标文件都在同一网站内,在建立超级链接时要使用相对路径。

    (1)如果当前文件(例如source.html)与目标文件(例如targ.html)在同一个目录下,设置超级链接时按照如下格式进行:

         <a href="targ.html" target=" ">内容</a>

    (2)如果当前文件(例如source.html)要链接到站点下一级目录中的目标文件(例如targ.html),设置超级链接时按照如下格式进行:

         <a href="目录名/targ.html" target=" ">内容</a>

    (3)如果当前文件(例如source.html)要链接到站点中上一级目录中的目标文件(例如targ.html),设置超级链接时按照如下格式进行:

         <a href="../targ.html" target=" ">内容</a>

     

    2.外部链接

    外部链接是指由网站内的文件链接到站外的目标文件,这种链接一般都采用绝对路径,常用的外部链接格式有:

    (1)<a href=" http://www.sohu.com">内容</a>

    (2)<a href="http://www.imut.edu.cn/ies/index.html">内容</a>

    (3)<a href="ftp://219.225.31.201 ">内容</a>

    (4)<a href="mailto://abc@xx.com">内容</a>

    其中,(3)用来链接外部的文件服务器;(4)用来实现E-mail链接。

     

    3.书签链接

    书签链接可以理解为点到点的链接,可以实现从同一个文件的某个点到另一个目标点,也可以实现从一个文件的某个点到另一个文件的目标点,这个目标点叫做书签(也称为锚点),因此书签链接也叫做锚点链接。

    书签链接基本语法

    书签链接是从文件中的某个点到书签的链接,设置步骤分为两步:

    第一步:建立书签。

        <a name="书签名称">内容</a>

    第二步:为书签制作链接。

    <a href="#书签名称"  target=" ">内容</a>

    语法说明

    name属性用来指定书签名,该书签名会在书签链接处进行引用,引用时需在书签名前面加“#”。

    注意:如果要在不同页面间建立书签链接,则书签链接的链接应设置为:

    <a href="URL地址#书签名称"  target=" ">内容</a>

     

    图片超级链接

    基本语法

    <a href="目标文件地址" target="窗口名称"><img src="图像地址"></a>

    说明

    (1)href属性用来指定超级链接目标文件的URL。

    (2)src属性用来指定图像URL。

    (3)<img>标签要嵌套在<a>标签内部,图片的大小可以通过CSS来设置。

     

    完整示例代码如下:

     <!DOCTYPE html>
      <html >
         <head>
            <meta charset="utf-8">
            <title>图像链接</title>
         </head>
         <body>
              <h3><center>图像链接<center></h3>
              <hr color="#666666">
              <a href="https://www.baidu.com/">
              <img src="test1.png" alt="百度一下" width="50" height="50"></a>
         </body>
      </html>

    保存为文件名DemoA.html(在此,我将该网页文件和test1.png图片文件放在目录中D:\网页练习,你可根据你的实际情况而定),用浏览器打开显示如下:

    点击其中的图标,将打开百度一下链接。

     

    文件超级链接

    灵活使超级链接可以实现文件下载

    下载是指将网站所在的服务器上的文件复制到本地机器上来。在HTML超级链接中,如果链接的目标文件是浏览器解释不了的文件(如word文档、excel文档、zip文档等),那么该目标文件不会被打开显示,而是变成文件下载。

    例如:

    <a href="通知.docx">最新通知</a>

    上述链接其实就是一个普通的内部链接,只不过链接的文件是.docx类型的word文件,浏览器打不开该文件所以单击该链接时启动下载对话框。

    完整示例代码如下:

     <!DOCTYPE html>
    <html >
         <head>
            <meta charset="utf-8">
            <title>通知下载</title>
         </head>
         <body>
              <h3><center>通知链接<center></h3>
              <hr color="#666666">
             <a href="通知.docx">最新通知</a>
         </body>
      </html>
    

    保存为文件名DemoB.html(在此,我将该网页文件和“通知.docx”文件放在目录中D:\网页练习,你可根据你的实际情况而定),用浏览器打开显示如下:

    点击其中的“最新通知”链接,将下载“通知.docx”文件。

     

    网页图片

    常见图片格式简介

    ☆PNG(Portable Network Graphic Format):即可移植的网络图像文件格式。是Web图像中最通用的格式。采用无损压缩技术。PNG格式最多可以支持32位颜色,不支持动画图。

    ☆JPEG(Joint Photo Graphic Experts Group): 联合图片专家组格式,最大可支持32位彩色。采用有损图片压缩技术。有两种文件扩展名:“.jpg”和“.jpeg” 。

    ☆GIF(Graphics Interchange Format):即图片交换格式,最高支持8位彩色,分为GIF87a和GIF89a两种类型,其中GIF89a支持“透明”、“交错”、“动画”三个特性。

    ☆BMP(Windows Bitmap):即位图文件格式。BMP格式使用的是索引色彩,可以使用16M色彩渲染图像。此格式一般用在多媒体演示和视频输出等情况下。

     

    在HTML网页中可使用<img>标记插入图片。基本语法格式:

    <img src="图片地址">

    说明

    <img>标签是单个标记,作用是在网页中插入图片。

    图片样式由img标记的属性决定。

    src和alt是必选属性,其它属性为可选属性

    img标记属性名、值及说明

    属性

    说明

    alt

    text

    规定图片的替代文本

    src

    URL

    规定显示图片的URL

    name

    text

    规定图片的名称

    height

    pixels, %

    定义图片的高度

    width

    pixels, %

    设置图片的宽度

    align

    top | middle | bottom | left | center | right

    设置文本中的图片的对齐方式

    border

    pixels

    定义图片周围的边框

    hspace

    pixels

    定义图片左侧和右侧的空白

    vspace

    pixels

    定义图片顶部和底部的空白

    usemap

    URL

    将图片定义为客户端图片影视

     

    当图片无法正确显示,可以使用<img>标记的alt属性设置图片的替代文本。

    基本语法

    <img src="图片地址"alt="替代图片的文本">

    说明

    alt属性的替代文本可以是中文的,也可以是英文的。

     

    img标记的width和height属性是用来设置图片的宽度和高度的。默认情况下,网页中的图片大小就是由图片原来的宽度和高度决定的。

    基本语法

    <img src="图片地址" width="value" height="value">

    说明

    图片宽度和高度值可以是像素,也可以是百分比

    可以只设置宽度和高度中的其中之一,另一个属性将按原图片宽高等比例显示。

     

    img标记的border属性可以为图片设置边框。

    基本语法

    < img src="图片地址"border="value">

    说明

    value为边框线的宽度,用数字表示,单位为像素

    边框的颜色不可以调整的。

     

    、预先准备一张名为test1.png图片,网页代码如下:

    <!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>图片测试1</title>
     </head>
     <body>
            <img src="test1.png" style="width: 400px;height: 300px">
    </body>
     </html>
    

    保存为文件名ImgDemoA.html(在此,我将该网页文件和test1.png图片文件放在目录中D:\网页练习,你可根据你的实际情况而定),用浏览器打开显示如下:

     

    网页多媒体

    音频、视频文件的使用的标签(标签也称为标记、元素):

    audio:HTML5提供的标签作用是播放音频。

    video:HTML5提供的标签作用是播放视频。

    <audio> 标签属性:
    src:音乐的URL
    preload:预加载
    autoplay:自动播放
    loop:循环播放
    controls:浏览器自带的控制条

    <audio id=”media” src=”http://www.abc.com/test.mp3″ controls></audio>  

    <video> 标签属性:
    src:视频的URL
    poster:视频封面,没有播放时显示的图片
    preload:预加载
    autoplay:自动播放
    loop:循环播放
    controls:浏览器自带的控制条
    width:视频宽度
    height:视频高度

    <video id=”media” src=”http://www.abc.com/test.mp4″ controls width=”400px” heigt=”400px”></video> 

    vedio和audio的使用技巧基本相同,在此主要以vedio来示例。

     

    【常用的音频、视频文件格式

    在HTML5中嵌入的音频格式主要包括ogg、mp3、wav等,具体介绍如下:

    ogg:当ogg文件只封装音频编码时,它就会变成为一个音频文件。ogg音频文件扩展名为ogg。ogg音频格式类似于mp3音频格式,不同的是,ogg格式完全免费并且没有专利限制。同等条件下,ogg格式音频文件的音质、体积大小优于mp3音频格式。

    mp3:目前主流的音频格式,其音频文件扩展名为mp3。同mpeg4视频格式一样,mp3音频格式也存在专利、版权等诸多的限制,但因为各大硬件提供商的支持使得mp3依靠其丰富的资源、良好的兼容性仍旧保持较高的使用率。

    wav:微软公司( Microsoft)开发的一种声音文件格式,其扩展名为wav。作为无损压缩的音频格式,wav的音质是三种音频格式文件中最好的,但其体积也是最大的。wav音频格式最大的优势是被 Windows平台及其应用程序广泛支持,是标准的Windows文件。

    在HTML5中嵌入的视频格式主要包括ogg、mpeg4、wehm等,具体介绍如下:

    ogg:一种开源的视频封装容器,其视频文件扩展名为ogg,里面可以封装vobris音频编码或者 theora视频编码,同时ogg文件也能将音频编码和视频编码进行混合封装。

    mpeg4:目前最流行的视频格式,其视频文件扩展名为mp4。同等条件下,mpeg4格式的视频质量较好,但它的专利被MPEG-LA公司控制,任何支持播放mpeg4视频的设备,都必须有一张MPEG-LA颁发的许可证。目前MPEG-LA规定,只要是互联网上免费播放的视频,均可以无偿获得使用许可证。

    Webm:由Google发布的一个开放、免费的媒体文件格式,其视频文件扩展名为webm。由于webm格式的视频质量和mpeg4较为接近,并且没有专利限制等问题,webm已经被越来越多的人所使用。】

     

    例、预先准备一个视频文件movie.mp4,网页文件代码如下:

    <!DOCTYPE html>
    <html >
         <head>
            <meta charset="utf-8">
            <title>视频测试</title>
         </head>
         <body>
              <h3><center>视频播放测试<center></h3>
              <hr color="#666666">
              <video width="320" height="240" controls autoplay>
                     <source src="movie.mp4" type="video/mp4">
              </video>
         </body>
      </html>
    

    保存为文件名DemoD.html(在此,我将该网页文件和视频文件movie.mp4放在目录中D:\网页练习,你可根据你的实际情况而定),用浏览器打开显示如下:

     

    下面介绍使用脚本 JavaScript 控制媒体

    HTML5为我们提供了3种比较常用的方法

    方法

    描述

    media.paly()

    媒体文件播放

    media.pause()

    暂停

    media.load()

    重新加载媒体文件

     

    多媒体常用事件

    video 元素的一些常用事件

      - progress:用于更新媒体的下载进度,会周期性触发。

      - canplaythrough:当整个媒体顺利播放时会触发的事件。

      - canplay:不考虑整体状态,只要下载了一定的可放帧就会触发的事件。

      - ended:媒体到达末尾时触发。

      - pause:媒体暂停时触发。

      - play:媒体开始播放时触发。

           - error:媒体播放出现错误时触发。

     

    在利用video元素或audio元素读取或播放媒体数据时,会触发一系列的事件。如果使用javascript脚本捕获事件,就可以对这些事件处理,常常需要利用 addEventListener 方法,其格式为:

    VideoElement.addEventListener(type,listener,useCaptrue)

    其中,VideoElement表示页面的video或audio元素;type表示事件名称,listener表示绑定的函数,useCaptrue是一个布尔值,表示事件的响应顺序,该值如果是true,浏览器采用captrue响应方式,如果为false,浏览器采用budding响应方式,默认情况为false。

     

    使用脚本 JavaScript 控制 audio的例子,预先准备一个视频文件movie.mp4,网页文件代码如下:

    ​<!DOCTYPE html>
    <html >
         <head>
            <meta charset="utf-8"> 
            <title>视频测试</title>
         </head>
         <body>
              <h3><center>视频播放测试<center></h3>
              <hr color="#666666">
             <div style="text-align:center"> 
                  <video id="video1" width="420">
                      <source src="movie.mp4" type="video/mp4">
                  </video>
                  <br> 
                  <button onclick="playPause()">播放/暂停</button> 
                  <button onclick="makeBig()">放大</button>
                  <button onclick="makeSmall()">缩小</button>
                  <button onclick="makeNormal()">普通</button>
                  <br>
             </div> 
              <script> 
              var myVideo=document.getElementById("video1"); 
              function playPause()
              { 
    	          if (myVideo.paused) 
    	              myVideo.play(); 
    	          else 
    	              myVideo.pause(); 
              } 
    
              function makeBig()
              { 
    	          myVideo.width=560; 
              } 
    
              function makeSmall()
              { 
    	          myVideo.width=320; 
              } 
    
              function makeNormal()
              { 
    	          myVideo.width=420; 
              } 
              </script>
         </body>
      </html>
    
    ​

    保存为文件名DemoE.html(在此,我将该网页文件和视频文件movie.mp4放在目录中D:\网页练习,你可根据你的实际情况而定),用浏览器打开显示如下:

     

    最后,介绍如何用打开窗口播放本地的媒体文件

    首先提示,处于安全的需要JavaScript不能直接用打开窗口访问本地资源文件,那怎么办呢?下面介绍一种方法。在页面中插入一个input节点并指定type为file,如果需要播放多个文件,可以添加属性multiple。注册文件节点被更新时的回调函数,在回调函数中调用URL.createObjectURL函数来获取刚选择文件的url,然后把该url设置为audio或video的src值即可。

    下面给出网页用打开窗口播放本地视频文件的示例,源码如下:

    <!DOCTYPE html>
    <html >
    <head>
           <meta charset="utf-8"> 
           <title>播放本地的视频文件</title>
    </head>
    <body>
    <h3><center>视频播放测试<center></h3>
    <hr color="#666666">
    <input type="file" id="file" onchange="onInputFileChange()">
    <br/>
    <video id="video_id"  width="320" height="240" controls autoplay loop>你的浏览器不能支持HTML5视频</video>
    <script>
    function onInputFileChange() {
          var file = document.getElementById('file').files[0];
          var url = URL.createObjectURL(file);
          console.log(url);
          document.getElementById("video_id").src = url;
    }
    </script>
    </body>
    </html>

    保存为文件名DemoF.html(在此,我将该网页文件放在目录中D:\网页练习,你可根据你的实际情况而定),用浏览器打开显示如下:

     

     

    上面对网页多媒体介绍是以视频为例介绍,下面给出播放音频文件的示例——一个网页用打开窗口播放本地音频文件的示例,源码如下:

    <!DOCTYPE html>
    <html >
    <head>
           <meta charset="utf-8"> 
           <title>播放本地的音频文件</title>
    </head>
    <body>
    <h3><center>本地的音频播放测试<center></h3>
    <hr color="#666666">
    <input type="file" id="file" onchange="onInputFileChange()">
    <br/>
    <audio id="audio_id"  controls autoplay loop>你的浏览器不能支持HTML5音频 </audio>
    <script>
    function onInputFileChange() {
          var file = document.getElementById('file').files[0];
          var url = URL.createObjectURL(file);
          console.log(url);
          document.getElementById("audio_id").src = url;
    }
    </script>
    </body>
    </html>

    保存为文件名DemoG.html(在此,我将该网页文件放在目录中D:\网页练习,你可根据你的实际情况而定),用浏览器打开显示如下:

     

     

     

     

     

     

    展开全文
  • a标记的样式

    千次阅读 2009-04-07 16:39:00
    CSS中超链接的样式设置2006-11-10 10:42网页调用的方法 HTML 文件里的超连接文字经过浏览器的解释后都会以加下划线的方式来显示,并没有动态的效果,通过 CSS 之 Anchor Pseudo Classes,大家可以将超连接文字...
    CSS中超链接的样式设置
    2006-11-10 10:42

    在网页中调用的方法


    <LINK href="css/index.css" type=text/css rel=stylesheet>


    在 HTML 文件里的超连接文字经过浏览器的解释后都会以加下划线的方式来显示,并没有动态的效果,通过 CSS 之 Anchor Pseudo Classes,大家可以将超连接文字的显示方式做到几种不同的变化。

      例如:<A HREF=http://www.webjx.com>www.webjx.com</A>

      以上的超级连接经过在浏览器页面上是以加下划线的方式显示。 但如果利用 CSS 之 Anchor Pseudo Classes 则可以做出动态的效果,其标签如下:记得两个属性见 " ; " 隔开,详细属性值设定请参阅 CSS 常用属性 ( Properties ) 与设定值一览表。
    原始代码  
    A:link{color:blue; font-size:14pt; text-decoration:underline}
    A:visited{color:blue; font-size:14pt; text-decoration:underline}
    A:hover{color:red; font-size:14pt; text-decoration:none}
    A:active{color:red; font-size:9pt; text-decoration:none}

    显示结果   Click Here !

      属性分类

      A:link 是代表普通状态的连接
      A:visited 是代表访问过的连接
      A:hover 是代表鼠标移到连接
      A:active 是代表按下去连接
      color 是代表连接颜色
      font-size 是代表连接文字大小,适用 point(pt) 或是 pixels(px)
      text-decoration 是代表文字样式,none 代表没有下划线


    a:link

        指正常的未被访问过的链接

    a:active

        指点击链接的瞬间出现的链接情况

    a:visited

        指已经访问过的链接

    a:hover

        指鼠标放上去链接出现的情况

    展开全文
  • 标题包含关键词、文章首段文字包含关键词、文章配图需加Alt属性、Alt属性使用文章标题、文章的关键词加粗(strong)加超级链接(连接到对应页面的URL)。 练习:熟练使用权重标记 二、精简网站代码结构 使用...

    一、A标记的title属性
    锚文本
    SEO发布文章要求:
    标题中包含关键词、文章首段文字包含关键词、文章中配图需加Alt属性、Alt属性使用文章标题、文章中的关键词加粗(strong)加超级链接(连接到对应页面的URL)。
    练习:熟练使用权重标记
    二、精简网站代码结构
    使用外部调用的方式调用外部的CSS和JS文件,不直接写在网页模板中;
    CSS:外部样式表(有利);内联样式表
    如JS必须写入网页模板中,则尽量放置在网页底部
    粘贴文章内容去格式化
    (首页head区域增加新页面打开连接代码,减少首页跳出率)
    Dedecms标签生成器:
    Dedecms.com→模块插件
    Tools.dedecms.com/dedetag_maker.html
    W3C验证
    在这里插入图片描述
    检查网站html代码中权重代码是否书写错误
    内容转载于阿布斗地主

    展开全文
  • 能够开心地网上冲浪,应该归功于HTML提供了超级链接功能,这就是HTML链接元素的功能。1、链接元素简介a,是英语单词anchor的简写,是“锚”。通过这个锚,冲浪者可以指挥浏览器跳转到某个网页,或者当前网页...
  • 能够开心地网上冲浪,应该归功于HTML提供了超级链接功能,这就是HTML链接元素的功能。1、链接元素简介a,是英语单词anchor的简写,是“锚”。通过这个锚,冲浪者可以指挥浏览器跳转到某个网页,或者当前网页...
  • HTML标记

    2012-08-30 15:46:00
    标签:!...标签:a说明:标明超链接的起始或目的位置。标签:acronym说明:标明缩写词。标签:address说明:特定...标签:area说明:定义一个客户端图像映射一个超级链接区域的形状、坐标和关联 URL。标签:attribut...
  • 链接

    2009-03-10 16:38:00
    a(anchor)标记-超级链接 指向E-mail超级链接 欲指向邮件地址">欲指向邮件地址咨询">咨询 弹出的邮件收发客户端程序收件人为admin@it31.org,邮件主题为:咨询 去掉超级链接的下划线 链接窗口其中#可为blank:...
  • 标签作为超级链接使用频繁,然后我们日常浏览网页的时候,经常会看到它的另一种作用--锚点。通俗来说就是给页面的某些位置打上“标记”日后便于寻找。 实际生活,我们浏览一个较长的页面时,往往会看一个类似...
  • #NET编程#ASP.NET MVC 5辅助方法01第1节:Html.ActionLink()ASP.NET MVC 5,使用@Html.ActionLink()辅助方法用于生成Html的超链接标记a,用于显示超级链接和相关信息。输出的Html标记为文本信息。@...
  • 锚点链接:是网页制作中超级链接的一种,又称为命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接。可以实现同一个页面内的快速跳转。 2.说明一下它简单的语法 (1)给元素定义命名锚记名 语法:<...
  • 1.锚点是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。 英文名:anchor 使用命名锚记可以文档设置标记,这些标记通常放在文档的特定主题处或...
  • 锚点是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。 英文名:anchor 使用命名锚记可以文档设置标记,这些标记通常放在文档的特定主题处或顶部...
  • 什么是锚点?锚点有什么作用?

    千次阅读 2019-12-21 01:09:08
    使用命名锚记可以文档设置标记,这些标记通常放在文档的特定主题处或顶部。 然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置。 创建到命名锚记的链接的过程分为两步。 首先,创建命名锚...
  • 锚点-简单实现

    2021-04-19 10:53:42
    锚点是网页制作中超级链接的一种,又叫命名锚记,像一个迅速定位器一样,是一种页面内的超级链接,运用相当普遍。 使用命名锚记可以文档设置标记,这些标记通常放在文档的特定主题处或顶部。 然后可以创建到这些...
  • HTML5基础知识回顾

    2020-09-08 19:52:37
    使用命名锚记可以文档设置标记,这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置。 9.H5移动开发API,canvas 02.页面元素 2.1列表元素 1
  • 奥鹏17春16秋东财网页制作DreamWeaver网页制作在线作业一 一单选题共 10 道试题共 40 分 1.... 网页必须使用 标记来完成超级链接 A. <a</a> B. <p</p> C. <link</link> D. <li</li> 正确答案 3. WWW是( )的
  • HTML的入门

    2018-03-16 18:19:49
    学习HTML首先要理解什么是HTMLHTML即是HyperText Markup Language的缩写,中文名超...h6段落的 :p换行: hr超级链接 :a 其中 a 标签的三个属性 一个 href 表示要跳转的目标 title 表示的是鼠标在a标签的时就显示ti...
  • HTML第一次总结

    2017-08-26 17:24:45
    相对路径和绝对路径:假定a.html和b.html均放在e:\myweb文件夹在a.html页面中链接到b.html;  采用相对路径时: B  采用绝对路径时:B 字体风格可以分为物理风格和逻辑风格; 指定物理风格的常用标记有:...
  • html入门到放弃笔记

    2018-05-15 15:06:12
    1、编写一对 body 标记,body标记中,嵌套一对 div标记, div 标记中 ,嵌套一对 a 标记, a标记中,嵌套一对 b 标记,b标记中,随意编写一些文本 <body> <a> 这是一段测试文本 </a> </...
  • 如一个超级链接标记<a>若想实现当鼠标悬停时触发一个事件,鼠标移出时又触发一个事件,可以用切换事件轻松实现。 2、示例代码: 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
  • JQuery事件的切换

    2014-04-22 10:34:06
    如一个超级链接标记&lt;a&gt;若想实现当鼠标悬停时触发一个事件,鼠标移出时又触发一个事件,可以用切换事件轻松实现。   2、示例代码:     复制代码 代码如下: &lt;!DOCTYPE html ...
  • 超级链接标识<a>;CSS样式的定义与应用标识<style>,;列表标识:有序,无序。 10. 利用JSP实现动态网页功能。 四.实验步骤: 2. 打开编辑器,根据以上设计好的网页录入HTML代码和CSS样式以及JSP代码; 3. 将...
  • 一、HTML标记标签:!...标签:a说明:标明超链接的起始或目的位置。标签:acronym说明:标明缩写词。...标签:area说明:定义一个客户端图像映射一个超级链接区域的形状、坐标和关联 URL。标签:...
  • HTML 标签解释大全

    2021-01-19 21:27:29
    说明:定义一个客户端图像映射一个超级链接区域的形状、坐标和关联 URL。 标签:attribute 说明:以对象的形式代表了 HTML 元素的标签属性或属性。 标签:b 说明:指定文本应以粗体渲染。 标签:base 说明:...
  • flash shiti

    2014-03-14 10:32:41
    13. 如果要让Flash 同时对若干个对象产生渐变动画,则必须将这些对象放置不同的层。 □ A. 正确 □ B. 错误 14. 矢量图形用来描述图像的是: □ A. 直线 □ B. 曲线 □ C. 色块 □ D. A 和B 都正确 15. 下列那几...
  • 12.1.5 PowerPoint创建图表,从Excel复制数据 284 12.2 网上展示图表 285 12.3 将图表导出为图形 286 12.3.1 使用VBA将图表导出为图像 286 12.3.2 使用Snag-it或OneNote捕获图表 286 12.3.3 将...
  • 12.1.5 PowerPoint创建图表,从Excel复制数据 284 12.2 网上展示图表 285 12.3 将图表导出为图形 286 12.3.1 使用VBA将图表导出为图像 286 12.3.2 使用Snag-it或OneNote捕获图表 286 12.3.3 将...
  • 12.1.5 PowerPoint创建图表,从Excel复制数据 284 12.2 网上展示图表 285 12.3 将图表导出为图形 286 12.3.1 使用VBA将图表导出为图像 286 12.3.2 使用Snag-it或OneNote捕获图表 286 12.3.3 将...

空空如也

空空如也

1 2 3 4
收藏数 76
精华内容 30
关键字:

在a超级链接标记中