15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 七分钟学会 HTML 网页制作

七分钟学会 HTML 网页制作

时间:2023-09-23 01:06:02 | 来源:网站运营

时间:2023-09-23 01:06:02 来源:网站运营

七分钟学会 HTML 网页制作:

什么是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>我的第一个标题</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="哔哩哔哩 (゜-゜)つロ 干杯~-bilibili" 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>

布局标签

<header>头部信息
<nav>导航栏
<aside>侧边栏
<main>内容区域
<footer>底部信息
<article>文章详情
<section>页面分区

更多资料参考

[菜鸟教程](HTML 教程 | 菜鸟教程)

[w3cschool](w3cschool官网 - 编程狮,随时随地学编程)

[若对您有帮助,请点击跳转到B站一键三连哦!感谢支持!](七分钟学会 HTML 网页制作_哔哩哔哩_bilibili)

关键词:学会

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭