天涯论坛

 找回密码
 立即注册
搜索
查看: 94|回复: 6

七分钟学会 HTML 网页制作

[复制链接]

2997

主题

182

回帖

9920万

积分

论坛元老

Rank: 8Rank: 8

积分
99209272
发表于 2024-6-29 12:04:30 | 显示全部楼层 |阅读模式

什么是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>我的第1个标题</h1> <p>我的第1个段落。</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>我的第1个标题</h1> <p>我的第1个段落。</p> </div>

布局标签

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

更加多资料参考

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

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

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





上一篇:庆余年HTML网页制作之旅:手捧5页面期末网页作业成品,独一没二的web页面
下一篇:php怎么样获取网页中的html元素?(html获取网页内容)
回复

使用道具 举报

1

主题

886

回帖

-3

积分

限制会员

积分
-3
发表于 2024-9-10 04:32:56 | 显示全部楼层
外链发布论坛学习网络优化SEO。
回复

使用道具 举报

3123

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99108625
发表于 2024-10-3 06:39:39 | 显示全部楼层
你的见解独到,让我受益匪浅,非常感谢。
回复

使用道具 举报

3061

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139052
发表于 2024-10-15 17:26:10 | 显示全部楼层
哈哈、笑死我了、太搞笑了吧等。
回复

使用道具 举报

2996

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109194
发表于 2024-10-17 16:51:02 | 显示全部楼层
期待楼主的下一次分享!”
回复

使用道具 举报

3047

主题

3万

回帖

9606万

积分

论坛元老

Rank: 8Rank: 8

积分
96065852
发表于 2024-10-22 22:37:41 | 显示全部楼层
谢谢、感谢、感恩、辛苦了、有你真好等。
回复

使用道具 举报

2946

主题

2万

回帖

9997万

积分

论坛元老

Rank: 8Rank: 8

积分
99979427
发表于 2 小时前 | 显示全部楼层
外链论坛的成功举办,是与各位领导、同仁们的关怀和支持分不开的。在此,我谨代表公司向关心和支持论坛的各界人士表示最衷心的感谢!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-22 23:40 , Processed in 0.103316 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.