什么是HTML
[点击打开视频讲解更加仔细](七分钟学会 HTML 网页制作_哔哩哔哩_bilibili)
- Hyper Text Markup Language（超文本标记语言）
- 标签掌控排版
- 体积小，方便传输
编写HTLML
举荐运用：[VS Code](Visual Studio Code - Code Editing. Redefined)
<!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>我的 第1个标题</h1>
<p>我的 第1个段落。</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>
- 初始行 `<!DOCTYPE html>` 告诉浏览器这是一个HTML文档
- 起始标签 `<html>`
- 结束标签 `</html>`
html根标签，标签都是成对显现的，标签中能够嵌套文本或其他标签
- ` <head>`中定义文档的描述信息
- `<title>` 定义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="哔哩哔哩 (゜-゜)つロ 干杯~-bilibili" target="_blank">转到 B 站</a>
效果：
多媒介标签
照片标签
<img src="./smiley.gif">
视频标签
<video src="./video .mp4" controls></video>
音频标签
<audio src="./audio .mp3" controls></audio>
div标签
块级元素，并没详细的实质道理，重点功效是调节布局样式；
<div>
<h1>我的 第1个标题</h1>
<p>我的 第1个段落。</p>
</div> 布局标签<header>头部信息<nav>导航栏<aside>侧边栏<main>内容区域<footer>底部信息<article>文案详情<section>页面分区更加多资料参考
[菜鸟教程](HTML 教程 | 菜鸟教程)
[w3cschool](w3cschool官网 - 编程狮，随时随地学编程)
[若对您有帮忙，请点击转到B站一键三连哦！感谢支持！](七分钟学会 HTML 网页制作_哔哩哔哩_bilibili)
| 
发表于 2024-6-29 12:04:30
