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

已于 2023-02-28 19:20:31 修改
阅读量5.3w 收藏 298
点赞数 88
分类专栏： HTML 文章标签： html servlet 前端
于 2022-10-04 07:20:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzl10211345/article/details/127158648
版权

<🍩作者介绍：

🎈作者：小刘在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/中指定文章内容

运用到位置

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

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

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

小刘在C站
关注
  • 88
    点赞
  • 踩
  • 298
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 34
    评论
专栏目录
html网页制作
qq_38601073的博客
09-20 1063
课程需要，这几天开始学习写html网页，首先开发环境可以选择NetBeans和eclipse，但是因为NetBeans包含了Tomcat，所以我选择了使用NetBeans。之前的电脑已经进行过JAVA程序的开发，所以环境变量的配置已经配置好，若没有进行过配置的，可以按照下列方法进行配置。 第一步：右键-我的电脑→属性→高级系统设置→环境变量 第二步：设置CLASSPATH变量，新建一个系统
HTML简单制作一个网页
yyds2022的博客
11-29 3453
一个简单的由一个网页标注声明开始的可以有也可以没有，具体的组成有响应函；响应头；响应体。 其中的尖括号里的东西要有头有尾，前后对应前面用什么后面用什么在后面记得加上/,如 在做简单网页之前先在桌面上新建一个文本文档然后文件后缀记得改成htm，或者html 然后右击用编辑器打开，如果没有的话直接打开也是可以的 ，然后直接打开新建的文本文档开始编辑。 <p>这是一个段落</p>，<h1>这是一个标题</h1>。 还可以插入一...
个人网页制作 大学生个人网页设计 个人网站模板 简单静态HTML个人网页作品 个人博客
07-10
临近期末, 你是否还在为HTML网页设计期末作业而发愁，是否为还在为老师的网页制作作业要求感到头大？是否觉得HTML网页作业无从下手？，网页要求的总数量太多？是否找不到合适的模板？等等一系列问题。本资源就可以为你解决你所面临的这些问题，原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作资源合集，画面精美，非常适合初学者学习使用。 多套(HTML+CSS+JS)网页设计的学生期末大作业，都符合学校或者学生考试期末作业的水平，都是div+css框架代码写的，可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载!
HTML网页制作——简单个人网页制作 个人介绍网页模板 静态HTML留言表单页面网站模板
而风不止
01-12 1467
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
制作一个简单HTML静态网页（HTML+CSS）
最新发布
STU网页设计
06-02 1630
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒
HTML+CSS项目实战
m0_48069349的博客
08-14 1094
这里实战的网站是小米商城。首先是项目的搭建 引入favicon和css，这个commoncss就是一个公共的css。成为一个合格的页面重构师所有的公共样式书写到 中 这里的list-style: none;就是可以清除小点。a元素里面的color: inherit;这个是在之前的属性计算里面讲过 通用容器 这个是小米商城上有很多都符合这个特征。这部分属于CSS3的知识，现阶段只需要知道如何使用即可在页面所有样式之前引入一个CSShttps://at.alicdn.com/t/font_2960521_r
制作一个简单的HTML个人网页
里查叔叔
02-25 3211
HTML，全称超文本标记语言（Hyper Text Markup Language），是构建和设计网页的基础。无论你是编程新手，还是有一定经验的开发者，都可以通过HTML来制作自己的个人网页。在这篇博客中，我将引导你一步一步地制作一个简单的HTML个人网页。首先，我们需要创建一个HTML文件。你可以使用任何文本编辑器，如记事本、Sublime Text、VS Code等。创建一个新文件，并将其保存为.html格式，例如index.html。打开你创建的HTML文件，开始编写HTML的基础结构。
HTML网页制作
05-20
HTML网页制作——中国五大名山，主要介绍五大名山的地理环境
如何使用html制作网页
2301_76469377的博客
07-10 2万+
超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，这种语言制作的文件保存的是一个文本文件，文件的扩展名为 .html 或者 .htm。HTML文本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容 ，它的标记语法是以“<”和">"，主要有两种形式的标签，分别是双标签（<标签名字>标签内容<标签名字>）和单标签（<标签名字/>）。<p>HTML称为超文本标记语言，是一种标识性的语言。
制作一个简单HTML个人网页网页（HTML+CSS）
热门推荐
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
网页制作基础学习——HTML+CSS常用代码
北辰的博客
02-01 4万+
HTML（HyperText Markup Language）,即超文本标记语言，是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
基于HTML、CSS、JavaScript语言设计的钢铁侠网页.rar
02-01
在本项目中，"基于HTML、CSS、JavaScript语言设计的钢铁侠网页.rar"是一个压缩包，其中包含了使用三种核心技术——HTML、CSS和JavaScript构建的网页示例，主要目的是供学习者进行网页制作的学习和参考。这是一份很好...
网页制作，从零开始学会如何制作网页
11-01
我的第一个网页 欢迎来到我的网站！ 这是我的第一段文字。 访问示例网站 </html> ``` 在这个简单的例子中，`<h1>`定义了主标题，`<p>`定义了一段文字，`<a>`定义了一个链接。完成文档后，可以使用浏览器进行...
一便士主题个人日志网页模板
01-14
`轻松设计漂亮的网页-mobanwang.com.url`是一个网址书签，指向可能是一个网页设计资源网站，比如模版网。这个网站可能提供了更多类似的设计模板、教程或者设计工具，对用户进一步学习和提升网页设计技能非常有帮助。...
个人网页制作.zip
10-23
总的来说，通过这个"个人网页制作"教程，你将能够学习到网页三剑客——HTML、CSS和JavaScript的基础知识，以及如何将它们结合在一起构建一个简单而完整的网页。这是一个非常实用的起点，对于想要踏入互联网世界，...
网页设计制作课程与素材代码复制
08-29
网页设计是数字时代的一种基本技能，它涉及到创建和维护网站的外观、布局和交互性。...通过实践课程中的示例和项目，你将能够逐步掌握网页设计的各个环节，最终制作出属于自己的个性化的个人网页。
制作一个html文件 效果如下图,一周学会网页制作——HTML基础
05-20
很抱歉，作为 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、付费专栏及课程。

余额充值