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