Espero que você esteja feliz, espero que esteja saudável, espero que esteja feliz, espero que goste!
Por fim, siga miau, siga miau, siga miau, você verá blogs mais interessantes! ! !
Miau miau miau, você é muito importante para mim!
Índice
Os formatos de imagem comuns para arquivos de páginas da web são:
Definir texto alternativo da imagem
Definir largura e altura da imagem
Definir alinhamento e espaçamento da imagem
Definir link do ponto de acesso da imagem (compreensão)
Definir a cor de fundo do texto de rolagem e o ciclo de rolagem
Definir a direção e o método de rolagem
Defina a velocidade de rolagem e o atraso de rolagem
Definir intervalo de rolagem e rolagem de espaço em branco
Arquivos de áudio, vídeo e Flash
Pratique a tag de áudio em HTML5 e insira arquivos de áudio.
Pratique a tag de vídeo em HTML5 e insira arquivos de vídeo
Prefácio
Há muitos vídeos nesta página, por isso é difícil fornecer algum resultado. Se precisar de materiais, envie-me uma mensagem privada!
• Imagem mestre img sintaxe de tag e métodos de configuração de atributos.•Aprenda a configurar links de pontos de acesso de imagens.• Domine a sintaxe de marcação de marca de texto de rolagem e os métodos de configuração de atributos.•Domine a sintaxe de marcação bgsound da música de fundo e os métodos de configuração de atributos.•Domine a sintaxe de marcação incorporada e os métodos de configuração de atributos para incorporar arquivos multimídia.•Aprenda a utilizar hiperlinks para inserir arquivos multimídia como animação, áudio e vídeo.
Imagens e arquivos multimídia
Os formatos de imagem comuns para arquivos de páginas da web são:
JPEG Formato : Tenha uma imagem rica em coresGIF Formato : Animação simples, fundo transparente (ícone) , Compressão sem perdasPNG Formato : compressão sem perdas, transparência, entrelaçado, animação (em< a i=4>gif ), suporta perdas e perdas
imagem
A maneira de inserir uma imagem em uma página da web é usar a tag <img>. Suas muitas propriedades podem controlar várias funções, como caminho, tamanho e texto alternativo da imagem.
l Linguagem básica<img src=“url” largura =“” altura=“” hespaço=“” vspace=“” alinhamento=“” border=“” alt =“”>
Descrição da Propriedade:
src(fonte):imagensURL< / a>: caractere alternativo para adição. alt diâmetro da estrada.
largura/altura：Altura/altura da configuração(px,%). borda: Configurações 10>);
align:método de seleção de imagem de configuração (horizontal/ direção vertical); hspase/vspase:configuração da distância da imagem Configuração)pxNão adicionado(
Definir texto alternativo da imagem
语法：<img src=" " alt ="" título="">
Quando a imagem não é carregada com sucesso, um texto alternativo aparece no local da imagem.
Pegue uma castanha (corra e veja!):
<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>Definir largura e altura da imagem
语法：<img src=" " largura="" altura="">
A unidade de altura e largura da imagem pode ser pixels ou porcentagem. Ao definir os atributos de largura e altura de uma imagem, você pode definir apenas uma largura e altura, e o outro atributo será exibido proporcionalmente à largura e altura da imagem original< /span>;A imagem será deformada quando dois atributos forem definidos ao mesmo tempo.
Defina a borda da imagem
语法：<img src=>"valor" border=""
O valor é a largura da linha da borda, expressa em números, em pixels.
Definir alinhamento e espaçamento da imagem
Sintaxe básica:
<img src=" URL " alinhar="valor">
<img src="URL" hspace="水平间距数值" vspace="垂直间距数值">
Definir link do ponto de acesso da imagem (compreensão)
l Linguagem básica<img src="Endereço da imagem" usemap="#Nome da imagem mapeada">
<nome do mapa="Nome da imagem do mapa">
<area shape="热区形状" coordenadas="热区坐标" href="URL">
</mapa>
Dentro: forma:rect(Retânguloformato poligonal) ;), poli (formato redondo), círculo (
coordenadasdadasformamarca do assento de 对应:
reto： x1,y1,x2,y2 (4 个值);
círculo ： centro-x、centro-y、raio(3个值)
poli :( x1,y1,x2,y2 ,…,< a i=4>xi,yi,…,xn,yn,x1,y1)< a i=8>((n+1)*2. )número específico e multidimensional de pontos
rolar texto
Adicionar texto de rolagem
O texto rolável pode ser adicionado por meio da tagmarquee( content ), adicione efeitos dinâmicos e enriqueça o conteúdo da página web.
基本语法:<marca width="" altura=" bgcolor="" direção="cima|baixo|esquerda|direita" behavior="rolar|deslizar|alternar" hspace="" vespaço="" quantidade de rolagem="" atraso de rolagem="" laço =" onmouseover="this.stop()" onMouseOut="this.start()"</marquee>滚动内容>
Adicionar texto de rolagem
Instruções gramaticais
l marca A marca é duplo ( marquee, você também pode definir o estilo do conteúdo de rolagem. e termine com tags </marquee>Comece com <marquee> marcados com ) paresl marca Marcar Configurações onMouseOver ="A função do par de valores de atributo é que quando o mouse sai do texto de rolagem área, o conteúdo de rolagem continuará a rolar. ()"this.startonMouseOutConfiguraçõesA função do par de valores de atributo é quando o o cursor se move Ao alcançar a área de texto de rolagem, o conteúdo da rolagem pausará a rolagem; ()"this.stop ="
Definir texto de rolagemCor de fundo e ciclo de rolagem
1.Linguagem básica
<marca bgcolor="" laço="5" >滚动内容</marquee>
2.语法说明
l A cor de fundo do texto adota 5 métodos. O método de configuração mais comumente usado é o hexadecimal. Faça a função sum rgb () .l Por padrão, o texto rolado rola continuamente em um loop, mas usar loop Propriedades pode defina o número de ciclos de rolagem para rolar o texto. O número de ciclos é expresso diretamente por meio de números. Geralmente um número inteiro, -1 representa um loop infinito.
Definir a direção e o método de rolagem
l Linguagem básica:<marquee direction="Direção de rolagem" behavior="Método de rolagem< /span></marquee>Rolar conteúdo">
l 语法说明 :direção:cima|baixo|esquerda(esquerda滚动，默认值)|certo
comportamento: rolar( rola para frente e para trás um loop, como valor padrão)| slide(Rolar uma vez e parar)| alternativa(< a i=8> Role para frente e para trás alternadamente)
Defina a velocidade de rolagem e o atraso de rolagem
l Linguagem básica:<marquee scrollamount="20px" atraso de rolagem="100ms"> 滚动 内容</marquee>
l 语法说明 :A velocidade de rolagem é a duração de cada movimento do texto de rolagem. A duração é expressa em números. A unidade são pixelspx< /span>.
Tempo de atraso em milissegundosms, atraso Quanto menor Quanto maior o tempo, mais rápida será a velocidade de rolagem e quanto maior for o tempo de atraso, o efeito stop-and-go aparecerá.
Definir intervalo de rolagem e rolagem de espaço em branco
1.Linguagem básica
<largura do letreiro="" altura=" hspace="" vspace="" >滚动内容</marquee>
2.语法说明
l Os valores de largura e altura são expressos numericamente em pixels.hspace, vspaceatributo é um número inteiro, 单位为elemento de imagem,No entanto, posição de adição desnecessária.
Música, vídeo e vídeoFlashtexto
Inclui texto multimídia, texto sonoro abrangente, texto visual e texto , que pode ser usado para adicionar música de fundo, etc., efeitos. Uso: , MP3, etc. AVI , MOV, , AV, SWFAIFF, Mav, Flash
Sintaxe básica:<embed src="Arquivos multimídia" width=" Largura da interface" height="Altura da interface" inicialização automática="true|false" loop=" true|false "></embed>
Descrição da sintaxe: largura, altura: valor inteiro , em pixels. Definir a largura e a altura exibirá a interface de reprodução, caso contrário, a interface de reprodução não será exibida. Alguns navegadores de versões superiores podem exibir a interface de reprodução sem definir a largura e a altura. Se você reproduzir arquivos de som ou música como música de fundo, deverá definir os valores dos atributos de largura e altura como 0 ao mesmo tempo.
src: Defina o caminho do arquivo de mídia.
inicialização automática: inicia. verdadeiro disseminação não automática;falso disseminação não automática.
lloop: valor lógico. Especifica se o arquivo de áudio ou vídeo está em loop. Quando o valor do atributo for true , o arquivo de áudio ou vídeo será repetido; quando o valor do atributo for false , os arquivos de áudio ou vídeo não ficam em loop.
HTML5 Vídeo e áudio
A maioria dos sites de negócios gosta de usar vídeos para promover suas empresas ou promover seus produtos ou serviços. No entanto, antes da versão HTML4.01 ser baseada, isso só poderia ser feito através de plug-ins relacionados (como Flash) para jogar, e todos os navegadores podem não ter os mesmos plug-ins, e outros plug-ins precisam ser instalados para conseguir isso. HTML5 fornece a tag vídeo e audio resolve bem esse problema .
vídeo atributo de rótulo
HTML5 especifica uma maneira padrão de incluir vídeo por meio do elemento video . A tag Vídeo suporta três formatos de vídeo, nomeadamente MP4, a>. Ogg, WebM
l Ogg ：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg Mensagem.l MPEG4 :带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文体.l WebM :带有 VP8 视频编码和 Vorbis 音频编码的 WebM Mensagem.gramática básica
<vídeo src="movie.ogg" largura="320" altura="240" controles="controles">
Seu navegador não suporta a tag video.
</vídeo>
vídeo atributo de rótulo
Descrição da Propriedade
Propriedades largura e altura : controlam o tamanho do vídeo. Ao usá-lo, você precisa definir a altura e a largura do vídeo para facilitar a reprodução do vídeo. Se você não definir a largura e a altura, a página mudará com base no tamanho do vídeo original.
Atributo src : especifica o url do vídeo a ser reproduzido.
loop: defina este atributo para iniciar a reprodução novamente quando a reprodução do arquivo de mídia for concluída.
pré-carregamento: se este atributo for definido, o vídeo será carregado quando a página for carregada e preparada para reprodução. Este atributo será ignorado se reprodução automática for usado. Este atributo tem três valores: auto (assim que a página carregar, comece a carregar o áudio/vídeo),metadados (somente o áudio é carregado após o carregamento da página/< a i= 11>Metadados do vídeo), nenhum (o áudio não deve ser carregado após o carregamento da página/ < a i=15>vídeo). O formato é o seguinte:
<video preload="auto|metadata|none">
A tag vídeo suporta múltiplas tags de origem . Você pode usar a tag source como tag video e A tag audio fornece vários arquivos de áudio e vídeo diferentes para resolver o suporte do navegador. O primeiro formato reconhecido será usado se o navegador suportar. IE8 ou anterior IE versão não é suportada< a i tag =15>vídeo .
Formato castanha:
<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 a tag audio para reproduzir arquivos de som ou fluxos de áudio. Você também pode usar a tag source para fornecer arquivos de áudio em diferentes formatos para o audio tag. , o navegador usará o primeiro arquivo de áudio compatível.
Trabalho de casa
Pratique a tag de áudio em HTML5 e insira arquivos de áudio.
- Título da Web: Diversidade de fontes de áudio
- Adicione um arquivo de áudio à página da web e você poderá controlar a reprodução e a parada da música por meio de botões na página da web.
- Use <source> para adicionar pelo menos dois tipos de arquivos de música à sua página da web
- Adicionar mensagem de aviso: Desculpe, este navegador não suporta reprodução de áudio HTML5
- O resto dos efeitos são mostrados nas renderizações:
<!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>
Pratique a tag de vídeo em HTML5 e insira arquivos de vídeo
- Título da página web: Aplicação da tag de vídeo <video>
- Defina a cor de fundo da página da web como cinza
(Dicas:Defina o atributo style="background-color:#CCC") da tag body
- Use a tag <div> para organizar a página da web, defina a largura do bloco <div> para 700px e alinhe o bloco inteiro no centro da página (você pode definir o atributo de estilo da div: style=" ;largura:700px; margem esquerda:auto; margem -direita:auto")
- Adicione um arquivo de vídeo ao bloco, exiba os controles de ajuste e defina sua largura para 700px.
- Adicione uma mensagem de aviso ao vídeo: Desculpe, este navegador não suporta reprodução de vídeo HTML5
- Adicione um rótulo de parágrafo e exiba o texto "Uma Breve História da Europa" no centro. Use o atributo style para definir a cor de fundo do parágrafo como branco e o espaçamento superior e inferior como 0; (style="background- cor:#FFF; margem:0px 0px;)
Gifs!
<!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>
Resumir
l Este capítulo apresenta principalmente os métodos de inserção de imagens, rolagem de texto, áudio e outros arquivos multimídia em páginas da web. Focado em ensinar a marca img , marca marquee , < A sintaxe de tags i=6>áudio , vídeo e como definir seus atributos.l Use essas tags para reformular o layout e embelezar o site desenvolvido, melhorar continuamente a experiência do usuário e atrair mais visitantes da rede para navegar em seu site.
Espero que você esteja feliz, espero que esteja saudável, espero que esteja feliz, espero que goste!
Por fim, siga miau, siga miau, siga miau, você verá blogs mais interessantes! ! !
Miau miau miau, você é muito importante para mim!
