HTML网页制作——制作一个属于自己的网页

<🍩作者介绍:

🎈作者:小刘在C站

🐽每天分享课堂笔记

🌹互帮互助,共同进步。


目录

<🍩作者介绍:

🌞HTML概念:

🍎HTML工作原理:

❄️名词:

🐼网页:

🎀网站:

🍩主页:

💧视图

🐽​编辑

🌹HTML基本结构为:

🎈 HTML结构解释

🏀运用到位置


HTML概念:

🍩HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字图形动画声音表格链接等。🍩


HTML工作原理:

            浏览器对接收到的HTML纯文本代码做进一步的解释并执行

名词:

网页

一个纯文本格式的文件,代码属于HTML代码为主

网站

有很多个网页构成的网页集合,

主页

打开网站的第一个网页就是主页。


视图

接下里是我自己做的一个网页代码,HTML的基本网页格式如下图:

💧呈现出的效果有点违规,看代码可以自行脑补一些,小刘就不发出来了哦💧

HTML基本结构为:

<html>
   <head>
        <title>网页标题</title>
   </head>
   <body>
网页内容

   </body>
</html>

 HTML结构解释

🍎<html>网页整体</html>

🍎<head>网页头部</head>

🍎<body>网页身体</body>

🍎HTML的基本常用标签

🍎<h1></h1>——<h6></h6>网页内容标题标签

🍎<br/>换行标签

🍎<hr/>水平线标签

🍎<p></p>段落标签

🍎<span></span>范围标签

🍎<img/>图片标签

🍎<a></a>超链接标签

🍎<ol></ol>有序列表

🍎<ul></ul>无序列表

🍎<li><li>;列表中的项

🍎<dl></dl>图文混遍的列表定义

🍎<dt></dt>d/中指定图片路径

🍎<dd></dd>d/中指定文章内容

运用到位置

🎀做一个我的家乡🎀🎀我的个人介绍🎀🎀一个属于自己的小店🎀🎀宣传网站🎀

🐼关注,就是我创作的动力

❄️点赞,就是对我最大的认可

  • 88
    点赞
  • 296
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 34
    评论
很抱歉,作为 AI,我无法提供图片或者文件的上传功能。但是,我可以提供一个基本的 HTML 代码,可以帮助你完成这个效果。你可以在本地编辑器中打开 HTML 文件,将代码复制到其中,然后保存并在浏览器中打开查看效果。 下面是 HTML 代码: ```html <!DOCTYPE html> <html> <head> <title>一周学会网页制作</title> <style type="text/css"> body { background-color: #f2f2f2; font-family: Arial, sans-serif; } h1 { color: #333; text-align: center; } .container { margin: 0 auto; max-width: 800px; padding: 50px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.3); } .row { display: flex; flex-wrap: wrap; margin: 0 -15px; } .col { flex: 1; padding: 0 15px; } .card { background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.3); padding: 20px; margin-bottom: 30px; } .card h2 { color: #333; margin-top: 0; } .card p { color: #666; line-height: 1.5; } </style> </head> <body> <div class="container"> <h1>一周学会网页制作</h1> <div class="row"> <div class="col"> <div class="card"> <h2>HTML 基础</h2> <p>HTML网页制作的基础,掌握 HTML 可以让你搭建出简单的网页。在学习 HTML 的过程中,你需要学习 HTML 的各种标签,如标题、段落、链接等。</p> </div> </div> <div class="col"> <div class="card"> <h2>CSS 样式</h2> <p>CSS 是用来美化网页的,它可以让网页变得更漂亮、更有吸引力。在学习 CSS 的过程中,你需要学习各种样式属性,如颜色、字体、边框等。</p> </div> </div> <div class="col"> <div class="card"> <h2>JavaScript 编程</h2> <p>JavaScript 是网页交互的基础,它可以让网页变得更加动态。在学习 JavaScript 的过程中,你需要学习变量、函数、条件语句等基本概念。</p> </div> </div> </div> </div> </body> </html> ``` 你可以根据需要进行修改,比如调整背景颜色、字体样式、卡片内容等,以达到更好的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 34
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小刘在C站

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值