七分钟学会 HTML 网页制作
什么是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>
- 起始行
<!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="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>
布局标签
<headet> |
头部信息 |
|---|---|
<nav> |
导航栏 |
<aside> |
侧边栏 |
<main> |
内容区域 |
<footer> |
底部信息 |
<article> |
文章详情 |
<section> |
页面分区 |
