1、标题标签
场景:
在新闻和文章的页面中,用来突显文章的主题
代码: h系列标签
<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>
语义:
1~6级标题,重要程度依次递减
**特点: **
- 文字都有加粗
- 文字都有变大,并且从h1→h6文字逐渐减少
- 独占一行
2、段落标签
场景:
在新闻和文章的页面中,用来分段显示
代码:
<p>我是一段文字</p>
语义:
段落
特点:
- 段落之间存在间隙
- 独占一行
3、换行标签
场景:
让文字强制换行
代码:
<br>
语义:
换行
特点:
- 单标签
- 让文字强制换行
4、水平线标签
场景:
作为分割不同主题内容的水平分割线
代码:
<hr>
语义:
主题的分割转换
特点:
- 单标签
- 在页面显示一条水平分割线
5、文本格式化标签
场景:
需要让文字加粗、下划线、倾斜、删除线等效果
代码:
</head>
<body>
<strong>加粗</strong>
<b>加粗</b>
<ins>下划线</ins>
<u>下划线</u>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
</body>
</html>
语义:
突出重要性的强调语句
5、媒体标签
1.1图片标签的介绍
代码:
<img src="./img.png" alt="" title="这是title文本,鼠标悬停的时候会显示" width="1024" height="480">
<!-- src为属性名;alt为当前图片加载不出来,就显示该文字;title为提示文本,当鼠标悬停时,才显示该文本,也可以用于其它标签;width和height为图片显示的大小,只写一个就是等比缩放,保证图片不会变形-->
属性注意点:
- 标签的属性写在开始标签内部
- 标签上可以存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
1.2视频标签的介绍
场景:
在页面插入视频
代码:
</head>
<body>
<!-- 谷歌浏览器可以让视频自动播放,前提是要静音,+muted -->
<video src="D:\沙雕动画制作\剪映专业版\原创视频\樱花树下的约定\樱花树下的约定.mp4" controls autoplay loop> </video>
</body>
</html>
常见属性:
属性 | 功能 |
src | 视频的路径 |
controls | 播放视频的控件 |
autoplay | 循环播放 |
6、连接标签
1、基本用法
场景:
点击之后,从一个页面跳转到另一个页面
称呼:
a标签,超链接、锚链接
代码:
<a href="./目标网页.html">超链接</a>
特点:
- 双标签,内部可以包裹内容
- 如果需要a标签点击之后去指定的页面,需要设置a标签的href属性
2、连接标签的target属性
属性名:
target
属性值:
目标网页的打开形式
取值 | 效果 |
_seft | 默认值,在当前窗口中跳转(覆盖原网页) |
_blank | 在新窗口中跳转(保留原网页) |
代码:
<a herf="https://www.baidu.com/" target="_blank">百度一下</a>