HTML实用合集1
1.框架
使用英文!,按tab键出现框架。
2.改标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>//此处改标题
</head>
<body>
</body>
</html>
Document可以换成任意自己想要的命名。
3.标签
作用:使页面结构更加清晰。
1.标题标签
<h1>123</h1>//加粗放大效果最好,往下依次递减
<h1>123</h1>
<h2>123</h2>
<h3>123</h3>
<h4>123</h4>
<h5>123</h5>
<h6>123</h6>
2.段落标签
<p>这里面放文本</p>
3.换行标签
<p>这里面<br/>放文本</p>
<br/>是单标签
4.文本格式标签
语义 | 标签 | 说明 |
---|---|---|
加粗 | <strong></strong> 或<b></b> |
推荐<strong> ,语义更强烈 |
斜体 | <em></em> 或<i></i> |
推荐使用<em> ,语义更强烈 |
删除线 | <del></del> 或<s><s/> |
推荐使用<del> ,语义更强烈 |
下划线 | <ins></ins> 或<u></u> |
推荐使用<ins> ,语义更强烈 |
5.图像,音频,视频标签
/*<img src="/i/l/?n=23&i=blog/3178390/202305/3178390-20230528120409790-987587085.jpg" width="100" alt="对不起,你需要查看的图片不见了" title="这是天空" />//图片*/
<audio src="someaudio.wav">//音频
<video src="movie.ogg" controls="controls">//视频
音频:
值 | 描述 |
---|---|
autoplay | 就绪后马上播放 |
controls | 向用户显示控件,例如按钮 |
loop | 循环播放 |
muted | 音频输出时静音 |
preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用"autoplay",则忽略该属性。 |
src | 路径url |
视频:
值 | 描述 |
---|---|
autoplay | 就绪后马上播放 |
controls | 向用户显示控件,例如按钮 |
height | 高度 |
loop | 循环播放 |
muted | 音频输出时静音 |
poster | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用"autoplay",则忽略该属性。 |
width | 宽度 |
src | 路径url |
6.路径
1.相对路径
分类 | 符号 | 说明 |
---|---|---|
同级路径 | 同一级 | |
下一级路径 | / |
位于 HTML 文件上一级 |
上一级路径 | ../ |
位于 HTML 文件下一级 |
2.绝对路径
通常是从盘符开始的路径或者完整的网络地址。
7.超链接标签
<a href="跳转目标,链接" target="目标窗口的弹出方式">文本或图像</a>
锚点链接:
点击链接,可以快速定位到页面中的某个位置。
- 在链接文本的
href
属性中,设置属性为 #名字的形式 - 找到目标位置标签,里面添加一个 id 属性 = 名字