- A+
所属分类：Web前端
什么是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" alt="七分钟学会 HTML 网页制作"> 视频标签
<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> |
页面分区 |
