什么是HTML
点击打开视频讲解更加详细
- Hyper Text Markup Language(超文本标记语言)
- 标签控制排版
- 体积小,方便传输
编写HTLML
推荐使用:VS Code
<!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>末晨曦吖</title></head><body><div id="app"><h1>我的第一个标题</h1> <p>我的第一个段落。</p></div></body><style scoped>body{padding: 0;margin: 0;}</style></html>
HTML文件结构
<!DOCTYPE html><html lang="en"><head><title>末晨曦吖</title></head><body></body></html>
- 起始行
告诉浏览器这是一个HTML文档
- 开始标签
- 结束标签
html根标签,标签都是成对出现的,标签中可以嵌套文本或其他标签
定义title,它会显示在浏览器上
HTML常用标签
标题标签
<h1>这是标题 1</h1><h2>这是标题 2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6>
效果:
段落标签
<p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p>
效果:
文本样式标签
<b>加粗文本</b><br><br><i>斜体文本</i><br><br><code>电脑自动输出</code><br><br>这是 <sub> 下标</sub> 和 <sup> 上标</sup><br><br><del>我是带删除线的文本</del>
效果:
列表标签
无序列表
<ul><li>列表项</li><li>列表项</li><li>列表项</li></ul>
效果:
有序列表
<ol><li>列表项</li><li>列表项</li><li>列表项</li></ol><ol start="50"><li>列表项</li><li>列表项</li><li>列表项</li></ol>
效果:
超链接标签
<a href="https://www.bilibili.com/" target="_blank">跳转到 B 站</a>
效果:
多媒体标签
图片标签
<img src="./smiley.gif">
视频标签
<video src="./video .mp4" controls></video>
音频标签
<audio src="./audio .mp3" controls></audio>
div标签
块级元素,并没具体的实际意义,主要作用是调整布局样式;
<div> <h1>我的第一个标题</h1> <p>我的第一个段落。</p></div>
布局标签
| 头部信息 |
---|---|
| 导航栏 |
| 侧边栏 |
| 内容区域 |
| 底部信息 |
| 文章详情 |
| 页面分区 |
更多资料参考
菜鸟教程
w3cschool
若对您有帮助,请点击跳转到B站一键三连哦!感谢支持!