七分钟学会 HTML 网页制作
2022-12-25 09:39:30 作者：admin
什么是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> | 页面分区 |
更多资料参考
菜鸟教程
w3cschool
若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！
猜你喜欢
联络方式：
400-123-789
邮箱：xiachao@163.com
Q Q：12345678
微信公众号 
微信二维码