HTML
HTML的结构
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主题内容
</body>
</html>
HTML的常用标签
排版标签
注释快捷键 Ctrl+/
<strong>显示加粗的文字</strong>
h系列标签(文字有加粗,字体1-6变小且独占一行)
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
段落标签(段落之间存在间隙,独占一行)
<p>分段显示</p>
换行标签(让文字强制换行显示,单标签)
<br>
水平线标签(分割不同主题内容的水平线,单标签)
<hr>
文本格式化标签
让文字加粗、下划线、倾斜、删除线等效果
标签 | 说明 | 标签 | 说明 | |
b | 加粗 | strong | 加粗 | |
u | 下划线 | ins | 下划线 | |
i | 倾斜 | em | 倾斜 | |
s | 删除线 | del | 删除线 |
Strong、ins、em、del应用于语义更重要中
媒体标签
图片—基本使用
图片标签(单标签,img标签需要展示对应效果,需要借助标签的属性进行设置)
<img src=” ” alt=” ”>
图片标签的src属性
属性名:src
属性值:目标图片的路径
图片标签的alt属性
属性名:alt
属性值:替换文本
·当图片加载失败时,才显示alt的文本
·当图片加载成功时,不会显示alt的文本
图片标签的title属性
属性名:title
属性值:提示文本
·当鼠标悬停时才显示的文本
注意:title属性不仅仅可以用于图片标签,还可以用于其他标签
图片标签的width和height属性
属性名:width和height
属性值:宽度和高度(数字)
注意:
如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)如果同时设置了width和height两个,若设置不当此时图片可能会变形
路径(了解)
绝对路径
绝对路径:指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径
如:盘符开头:D:\day01\images\1jpg
完整的网络地址:https://www.itcast.cn/2018czgw/images/logo.gif(了解)
相对路径
相对路径:从当前文件开始出发找目标文件的过程
同级目录:<img=”图片名”>
下级目录:<img=”./(表示当前文件下)路径+图片名”>
上级目录:<img=”../(表示来到上一级文件)图片名”>
音频—基本使用
音频标签
场景:在页面中插入音频
代码:<audio src="./music.mp3" controls ></audi0>
常见属性:
属性名 | 功能 |
src | 音频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
注意:音频标签目前支持三种格式:MP3、Wav、Ogg
视频—基本使用
视频标签
场景:在页面中插入视频
代码:<video src="./video.mp” controls autoplay muted> </video>
常见属性:
属性名 | 功能 |
src | 视频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(谷歌浏览器中需配合muted实现静音播放) |
loop | 循环播放 |
注意:视频标签目前支持三种格式:MP4、WebM、Ogg
链接标签
场景:点击之后,从一个页面跳转到另一个页面
称呼:a标签、超链接、锚链接
代码:<a href=”./目标网页.html”>超链接</a>
注:当开发网站初期,我们还不知道跳转地址时,href的值书写#(空链接)
特点:
·双标签,内部可以包裹内容
·如果需要a标签点击之后去指定页面,需要设置a标签的href属性
链接标签的target属性
属性名:target
属性值:目标网页的打开形式
取值 | 效果 |
_self | 默认值,在当前窗口中跳转(覆盖原网页) |
_blank | 在新窗口中跳转(保留原网页) |
代码示例:<a href=”https://www.baidu.com” target=”_self”>百度一下</a>