HTML ：Hyper Text Markup Language(超文本标记语言)
HTML是一种标记语言，而非编程语言，其实就是一套标记标签。
HTML不区分大小写
常用编辑器：vs code；sublime text3
- html：html文件的根标签
- head：头标签
- body：内容标签
- title：题目标签
- h1~h6：标题标签
- p：段落标签
- hr：水平线标签
在sublime text3中，新建一个文件(ctrl+N)，保存（ctrl+s）为.html，然后! + tab键出现基本结构。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- 控制网页编码 --><title>html5常用标签1</title>
</head>
<body><!-- 注释快捷键ctrl+/ --><!-- center标签居中显示 --><center><h3>静夜思</h3><h4>唐 李白</h4><p>床前明月光，疑是地上霜。</p><p>举头望明月，低头思故乡。</p><!-- hr 水平分割线 --><hr></center>
</body>
</html>
效果截图如下：
- strong：加粗标签
- em：斜体字标签
- 特殊符号（注意：以下符号实为西文符号，为了可视化，博客中以中文符号替代）：
-  ；空格
- >；大于
- <；小于
- ©；版权
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html5常用标签2</title>
</head>
<body><p><strong>懦夫畏死终须死，志士求仁几得仁</strong></p><p><em>自信人生二百年，会当水击三千里</em></p><p>空格-> <-空格</p><p>这里有个大于符号>，这里有个小于符号<。</p><<p>©糯米味儿的粽子</p></body>
</html>
效果截图为：
- img：图片标签
- ul、li：无序列表标签
- ol、li：有序列表标签
使用sublime text3，当ol下有三个li标签时，输入：ol>li*3加上tab键，即可快速生成列表结构，ul同理。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html5常用标签3</title>
</head>
<body><img src="./images/1.jpg"><!-- ./代表当前目录-->
</body>
</html>我的目录结构如下：
效果截图为：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html5常用标签3</title>
</head>
<body><!-- 无序标签 --><h3>前端待学知识</h3><!-- 在Sublime text3中，ul>li*列表行数，然后tab键，可快速生成列表结构 --><ul><li>html</li><li>css</li><li>js</li></ul><!-- 有序标签 --><h3>前端待学知识</h3><ol><li>html</li><li>css</li><li>js</li></ol>
</body>
</html>效果截图：
- tab、tr、td：表格标签
- video：视频标签
- audio：音频标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html常用标签4——表格标签</title>
</head>
<body><!-- border设置表格线宽度 width,height设置表格宽度、高度 cellspacing设置单元格之间的距离--><table border="1px" width="400px" height="60px" cellspacing="0"><tr><td>姓名</td><td>年龄</td></tr><tr><td>张三</td><td>21</td></tr></table><hr><hr><table border="1px" width="400px" height="60px" cellspacing="0"><tr><!-- colspan="n" 列合并，将n个单元格合并为一个，即该行n列合并成一列--><td colspan="2">个人信息</td></tr><tr><td>张三</td><td>21</td></tr></table><hr><hr><body><!-- border设置表格边框宽度 width,height设置表格宽度、高度 cellspacing设置单元格之间的距离--><table border="1px" width="400px" height="60px" cellspacing="0"><tr><!-- rowspan="n" 行合并，将该列n行合并成一行--><td rowspan="2">姓名</td><td>年龄</td></tr><tr><td>21</td></tr></table></body>
</html>
效果截图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html常用标签4——视频标签</title>
</head>
<body><!-- controls控制暂停/开始播放键，没有这个标签就没有播放键，无法播放 --><video src="./videos/video1.mp4" controls="controls"></video>
</body>
</html>
效果如图：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html常用标签4——音频标签</title>
</head>
<body><!-- controls控制暂停/开始播放键，没有这个标签就没有播放键，无法播放 --><audio src="./videos/鹊桥仙.m4a" controls="controls"></audio></video>
</body>
</html>
效果如图：
本文发布于:2024-01-31 19:41:36，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170670129630906.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
