上期回顾
- HTML文件标准文档结构的详细介绍
-
掌握语义化的重要作用
1.什么是语义化
2.为什么需要语义化 -
部分标签介绍
1.标题标签 ：h1 ~ h6 逐渐减小，独占一行
2.段落标签 ：<p></p> 独占一行
3.分割符：<hr> 独占一行
4.超链接：<a></a> 不会独占一行，href属性，target属性 -
使用注释
1.快捷键：Ctrl + /
路径的书写
站内资源：当前网站的资源
站外资源：别人网站的资源
- 绝对路径的书写
协议名://主机名:端口号/路径
schema://host:port/path
如：https://www.jianshu.com/writer(URL地址)
协议名:http、https、file
主机名:域名、IP地址
端口号:如果是http协议，默认为80,如果是https协议，默认是443.
- 相对路径的书写
/ -->表示根目录
./ -->表示当前目录
../ -->表示上级目录
如:
src = "../img/logo.jpg"//上一级文件夹(img文件夹)下的logo.jpg图片
src = "./img/logo.jpg"//同级文件夹(img文件夹)下的logo.jpg图片
如果引入的是站内资源，用相对路径
如果引入的是站外资源，用绝对路径
img标签(image)
<!-- 相对路径引入图片 -->
<img src="../img/logo.png" alt="网站logo" title="鼠标移入图片时显示">
<!-- 绝对路径引入图片 -->
<img src="https://www.baidu.com/img/bd_logo1.png" alt="网站logo">
src属性:
source ,填入资源的地址，这里"../img/logo.png"表示上级文件夹img下的logo.png图片
alt属性:
当图片显示错误时，网页上会展示alt属性以提示用户图片的内容
title属性:
鼠标移入时给用户提示的文字
注:
- img元素没有结束标签，称为空标签
- img标签不会独占一行
- img元素一般与a元素一起使用：实现点击图片跳转
<a href="https://www.baidu.com">
<img src="https://www.baidu.com/img/bd_logo1.png" title="跳转到百度">
</a>
br标签
- 作用：在网页中实现换行（不常用，一般用p标签包裹实现换行）
- 使用格式：
第一行<br>第二行
video标签
<video src="视频路径.mp4" autoplay="autoplay"></video>
<video src="视频路径.mp4" autoplay></video>
注：如果属性的值和属性名一样，可直接写上属性名，如 autoplay 属性
autoplay属性: 告诉浏览器自动播放视频
其它属性
controls :是否显示播放控制器（播放、暂停、播放条、音量等）
loop : 是否循环播放（可用于做广告）
preload : 是否预加载，注意preload属性和autoplay属性冲突，二者只能存其一
muted : 是否静音
poster : 控制视频没有播放之前是否显示占位图片，格式：poster="图片地址"
width : 设置宽，格式：width="600px"
height : 设置高，格式：height="400px"
video的第二中使用方式
格式:
<video>
<source src="视频地址.mp4" type="video/mp4"></source>
<source src="视频地址.Ogg" type="video/ogg"></source>
<source src="视频地址.WebM" type="video/webm"></source>
</video>
- 该格式出现背景
由于视频资源十分重要，五大浏览器都不愿意支持别人的视频格式，这时候W3C为了解决这个问题，推出这种格式，只要满足某一条 source 代码的格式，就不再匹配，
官方介绍点击这里
audio标签
注意：audio标签的使用与video标签的使用很相似，audio中除了width/height/poster三个属性不能使用，其他与video一模一样
<audio src="音频路径.mp3" autoplay="autoplay"></audio>
<audio src="音频路径.mp3" autoplay></audio>
video的第二中使用方式
格式:
<audio>
<source src="音频路径.mp3" type="audio/mpeg"></source>
<source src="音频路径.ogg" type="audio/ogg"></source>
</audio>
- 该格式出现背景
与video标签一样，官方介绍点击这里
补充：假链接
- 什么是假链接？
就是点击后不会跳转的a链接 - 假链接存在的意义
在企业开发前期，使用的都是假链接，当项目完成后再换为真链接。 - 格式:
<a href="#">假链接1（点击自动回到顶部）</a>
<a href="javascript:">假链接2（没有任何反应）</a>
END
网友评论