什么是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>`	页面分区

巴特西

七分钟学会 HTML 网页制作

什么是HTML

编写HTLML

HTML文件结构

HTML常用标签

标题标签

段落标签

文本样式标签

列表标签

无序列表

有序列表

超链接标签

多媒体标签

图片标签

视频标签

音频标签

div标签

布局标签

更多资料参考

最新文章

热门文章