I hope you are happy, I hope you are healthy, I hope you are happy, I hope you like it!
Finally, follow meow, follow meow, follow meow, you will see more interesting blogs! ! !
Meow meow meow, you are really important to me!
Table of contents
Common image formats for web page files are:
Set image alignment and spacing
Set image hotspot link (understanding)
Set scroll text background color and scroll cycle
Set scrolling direction and scrolling method
Set scroll speed and scroll delay
Set scrolling range and scrolling blank space
Practice the audio tag in html5 and insert audio files.
Practice the video tag in html5 and insert video files
Preface
There are a lot of videos on this page, so it’s hard to provide any results. If you need materials, please send me a private message!
• Master image img tag syntax and attribute setting methods.•Learn to set up image hotspot links.•Master the scrolling text marquee markup syntax and attribute setting methods.•Master the background music bgsound markup syntax and attribute setting methods.•Master the embed markup syntax and attribute setting methods for embedding multimedia files.•Learn to use hyperlinks to insert multimedia files such as animation, audio and video.
Images and multimedia files
Common image formats for web page files are:
JPEG Format ： Have a picture, color rich picture pieceGIF Format : Simple animation, transparent background (icon) , Lossless compressionPNG Format : Lossless compression, transparency, interlaced, animation (in< a i=4>gif ), supports lossy and lossless
image
The way to insert an image on a web page is to use the <img> tag. Its many properties can control various functions such as the path, size and alt text of the image.
l Basic language<img src=“url” width=“” height=“” hspace=“” vspace=“” align=“” border=“” alt=“”>
Property description:
src(source):imageryURL< /span>: Alternative character for addition. alt road diameter.
width/height：Configuration height/height(px,%). border: Settings 10>);
align:Configuration image selection method (horizontal/ vertical direction); hspase/vspase:configuration image distance Setting(Not addedpx)
Set image alt text
语法：<img src="" alt ="" title="">
When the image is not loaded successfully, alternative text appears at the location of the image.
Take a chestnut (run it and see!):
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 插入图像 </title>
<style type="text/css">
body{text-align:center;}
</style>
</head>
<body>
<h3>网页中插入图像</h3>
<hr color="#3300ff">
<img src="images1.jpg" alt="网络机房" title="网络机房">
</body>
</html>Set image width and height
语法：<img src="" width="" height="">
The unit of image height and width can be pixels or percentage. When setting the width and height attributes of an image, you can set only one of the width and height, and the other attribute will be displayed in proportion to the width and height of the original image;The image will be deformed when two attributes are set at the same time.
Set the border of the image
语法：<img src="" border="value">
Value is the width of the border line, expressed in numbers, in pixels.
Set image alignment and spacing
Basic syntax:
<img src=" URL " align="value">
<img src="URL" hspace="水平间距数值" vspace="垂直间距数值">
Set image hotspot link (understanding)
l Basic language<img src="Image address" usemap="#Mapped picture name">
<map name="Map picture name">
<area shape="热区形状" coords="热区坐标" href="URL">
</map>
Inside: shape:rect(Rectangle a>), circle (round shape), poly (polygonal shape< a i=9>) ;
coordsgivenshape对应's seat mark:
rect： x1,y1,x2,y2 (4 个值);
circle ： center-x、center-y、radius(3个值)
poly :( x1,y1,x2,y2 ,…,< a i=4>xi,yi,…,xn,yn,x1,y1)< a i=8>((n+1)*2. )specific, multi-dimensional number of points
scroll text
Add scrolling text
Scrollable text can be added viamarquee tag( content ), add dynamic effects and enrich the content of the web page.
基本语法：<marquee width="" height="" bgcolor="" direction="up|down|left|right" behavior="scroll|slide|alternate" hspace="" vspace="" scrollamount="" scrolldelay="" loop="" onmouseover="this.stop()" onMouseOut="this.start()">滚动内容</marquee>
Add scrolling text
Grammar instructions
l marquee The mark is double ( marquee tags, you can also set the style of the scrolling content. and end with </marquee>Start with <marquee> marked with ) pairsl marquee Mark Settings onMouseOver The function of the attribute value pair is that when the mouse moves out of the scrolling text area, the scrolling content will continue to scroll. ()"this.start="onMouseOutSettingsThe function of the attribute value pair is when the cursor moves When reaching the scrolling text area, the scrolling content will pause scrolling; ()"this.stop ="
Set scrolling textBackground color and scrolling cycle
1.Basic language
<marquee bgcolor="" loop="5" >滚动内容</marquee>
2.语法说明
l The text background color adopts 5 methods. The most commonly used setting method is hexadecimal. Make the sum rgb () function.l By default, scrolling text will scroll continuously in a loop, but using loop Properties can set the number of scroll cycles for scrolling text. The number of cycles is expressed directly using numbers. Generally an integer, -1 represents an infinite loop.
Set scrolling direction and scrolling method
l Basic language:<marquee direction="Scrolling direction" behavior="Scrolling method< /span></marquee>Scroll content">
l 语法说明 :direction:up|down|left( left滚动，默认值)|right
behavior: scroll( scrolls back and forth in a loop, as Default value)| slide(Scroll once and stop)| alternate( Scroll back and forth alternately)
Set scroll speed and scroll delay
l Basic language:<marquee scrollamount="20px" scrolldelay="100ms"> 滚动 内容</marquee>
l 语法说明 :The scrolling speed is the length of each movement of the scrolling text. The length is expressed in numbers. The unit is pixelspx.
Delay time in millisecondsms, delay The smaller the time, the faster the scrolling speed, and the larger the delay time, the stop-and-go effect will appear.
Set scrolling range and scrolling blank space
1.Basic language
<marquee width="" height="" hspace="" vspace="" >滚动内容</marquee>
2.语法说明
l The width and height values are expressed numerically in pixels.hspace, vspaceattribute is an integer, 单位为image element,However, unnecessary addition position.
Music, video and videoFlashtext
Includes multi-media text, comprehensive sound text, visual text, and text, which can be used to add background music, etc. effects. Usage: , etc. AVI , MOV, MP3, AV, SWF, AIFF, Mav, Flash
Basic syntax:<embed src="Multimedia files" width=" Width of interface" height="Height of interface" autostart="true|false" loop=" true|false "></embed>
Syntax description: width, height: integer Value, in pixels. Setting the width and height will display the playback interface, otherwise the playback interface will not be displayed. Some higher version browsers can display the playback interface without setting the width and height. If you play sound or music files as background music, you must set the values of the width and height attributes to 0 at the same time.
src: Set the path of the media file.
autostart: Start. true not automatic dissemination;false not automatic dissemination.
lloop: logical value. Specifies whether the audio or video file is looped. When the attribute value is true , the audio or video file loops; when the attribute value is false , audio or video files do not loop.
HTML5 Video and Audio
Most business websites like to use videos to promote their companies or promote their products or services. However, before the HTML4.01 version was based, it could only be done through related plug-ins (such as Flash) to play, and all browsers may not have the same plug-ins, and other plug-ins need to be installed to achieve this. HTML5 provides the video tag and audio tag solves this problem well.
video label attribute
HTML5 specifies a standard way to include video via the video element. Video tag supports three video formats, namely MP4, a>. Ogg, WebM
l Ogg ：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg Message.l MPEG4 ：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文体.l WebM ：带有 VP8 视频编码和 Vorbis 音频编码的 WebM Message.basic grammar
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
video label attribute
Property description
width and height properties: control the size of the video. When using it, you need to set the height and width of the video to facilitate video playback. If you don't set the width and height, the page will change based on the size of the original video.
src attribute: specifies the url of the video to be played.
loop: Set this attribute to start playing again when the media file completes playing.
preload: If this attribute is set, the video will be loaded when the page is loaded and prepared for playback. This attribute is ignored if autoplay is used. This attribute has three values: auto (once the page loads, start loading audio/video),metadata (only audio is loaded after the page is loaded/Metadata of the video), none (audio should not be loaded after the page is loaded/< a i=15>video). The format is as follows:
<video preload="auto|metadata|none">
The video tag supports multiple source tags. You can use the source tag as video tag and audio tag provides multiple different audio and video files to solve browser support. The first recognized format will be used if the browser supports it. IE8 or earlier IE version is not supported< a i=15>video tag.
Format chestnut:
<video width="320" height="240" controls="controls">
<source src="movie.ogg" >
<source src="movie.mp4" >
您的浏览器不支持 video标记。
</video>
<audio width="320" height="240" controls="controls">
<source src="horse.ogg" >
<source src="horse.mp3" >
您的浏览器不支持 audio标记。
</ audio >
HTML5 Use the audio tag to play sound files or audio streams. You can also use the source tag to provide audio files in different formats to the audio tag. , the browser will use the first supported audio file.
Homework
Practice the audio tag in html5 and insert audio files.
- Web Title: Diversity of Audio Sources
- Add an audio file to the web page, and you can control the playback and stop of the music through buttons on the web page.
- Use <source> to add at least two types of music files to your web page
- Add prompt message: Sorry, this browser does not support HTML5 audio playback
- The rest of the effects are shown in the renderings:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>音频来源的多样性</title>
</head>
<body>
<p>音频来源的多样性</p>
<hr/>
<audio controls loop>
<source src="audio/Serenade.mp3">
<source src="audio/Serenade.ogg">
对不起，该浏览器不支持HTML5音频播放
</audio>
</body>
</html>
Practice the video tag in html5 and insert video files
- Web page title: Application of video tag <video>
- Set the background color of the web page to gray
(Tips:Set the attribute style="background-color:#CCC") of the body tag
- Use the <div> tag to lay out the web page, set the <div> block width to 700px, and align the entire block in the center of the page (you can set the style attribute of the div: style="width:700px; margin-left:auto; margin -right:auto")
- Add a video file in the block, display the adjustment controls, and set its width to 700px.
- Add a prompt message to the video: Sorry, this browser does not support HTML5 video playback
- Add a paragraph label and display the text "A Brief History of Europe" in the center. Use the style attribute to set the background color of the paragraph to white, and the top and bottom spacing to 0; (style="background-color:#FFF; margin:0px 0px;")
GIF!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>视频标签<video>的应用</title>
</head>
<body style="background-color:#CCC">
<div style="width:700px; margin-left:auto; margin-right:auto">
<video src="video/art.mp4" controls width="700">
对不起，该浏览器不支持HTML5视频播放
</video>
<p align="center" style="background-color:#fff; margin:0px 0px;">欧洲简史</p>
</div>
</body>
</html>
Summarize
l This chapter mainly introduces the methods of inserting images, scrolling text, audio and other multimedia files into web pages. Focused on teaching the img mark, marquee mark, < The syntax of a i=6>audio , video tags and how to set their attributes.l Use these tags to re-layout and beautify the developed website, continuously improve the user experience, and attract more network visitors to browse your website.
I hope you are happy, I hope you are healthy, I hope you are happy, I hope you like it!
Finally, follow meow, follow meow, follow meow, you will see more interesting blogs! ! !
Meow meow meow, you are really important to me!
