自己动手设计一个简单的HTML网页

article/2025/10/9 7:50:12

目录

HTML介绍

HTML难不难?

HTML重要吗?

示例网页

网页显示效果

写在最后


HTML介绍

HTML是英文单词(HyperText Markup Language)的缩写,也就是超文本标记语言,之所以称之为超文本,那是因为它除了可以用来说明文字以外,还可以用来说明图形、动画、声音等等。

HTML难不难?

HTML不是编程语言,而是一种解释性语言,和C#、Java、JavaScript不同,HTML没有逻辑顺序,只有结构,只需简单了解就可以自己动手做,本文后面就会简单列举一个例子来帮助理解。

HTML重要吗?

网页一般由三个部分组成,HTML文件、CSS文件、JavaScript文件。我们把网页看成一个房子,大致可以理解为HTML是房子的结构,CSS文件是房子的装修,JavaScript是房子的管家,来响应人对房子的控制,比如开关灯操作。

示例网页

  1. 在桌面创建一个文本文件,一般默认名为“新建文本文档.txt”,如果你无法看到结尾的.txt后缀,那么可以参考 如何显示后缀名 。
  2. 将文件重命名为 HelloHTML.html 
  3. 右击文件,选择用记事本打开。
  4. 将代码复制进记事本并保存
  5. 右击文件,选择用浏览器打开即可
<!-- 这句告诉浏览器这是一个HTML网页 -->
<!DoctType html/>
<!-- 这是整个网页的根元素,也可以称作 节点或标签,本文称之为标签 -->
<html lang="zh"> <!-- lang="zh" 用来声明这是一个中文网页,这样浏览器就不会问你是不是需要翻译此网页了 --><!-- 一般在里面配置编码、标题或是引入其他资源文件 --><head><meta charset="utf-8" /><!-- 网页标题 --><title>小重山·昨夜寒蛩不住鸣</title></head><body><!-- 标题标签 --><h2>小重山·昨夜寒蛩不住鸣</h2><!-- 段落标签 --><p>昨夜寒蛩不住鸣。</p><p>惊回千里梦,</p><p>已三更。</p><p>起来独自绕阶行。</p><p>人悄悄,</p><p>帘外月胧明。</p><p>白首为功名。</p><p>旧山松竹老,</p><p>阻归程。</p><p>欲将心事付瑶琴。</p><p>知音少,</p><p>弦断有谁听?</p></body>
</html>

网页显示效果

 如果顺利的完成了这个步骤,那么恭喜你,你现在已经初步踏入HTML的世界了。

写在最后

希望本文对你有所帮助,如果有不理解、建议或意见欢迎留言、私信交流讨论,感谢阅读!


http://chatgpt.dhexx.cn/article/Zpd8TAJT.shtml

相关文章

HTML创作简单网页

今天一天的学习&#xff0c;了解的html基本的网页制作&#xff0c;可以通过一些简单的命令来制作一个简单的网 页&#xff0c;但是我们要先了解这些知识 什么是HTML? HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编…

简单的网页

制作一个简单的网页&#xff0c;首先需要下载安装好Dw软件&#xff0c;因为太简单就直接跳过进入正题。 1.首先打开Dw软件&#xff0c;在最上面的栏目中找到站点 2.点击选择新建站点 3.可以看到里面有一个站点名称&#xff0c;我命名为简单的网页站点。下方的本地站名文件夹最右…

Web入门(1)——制作简单的网页

文章目录 安装基础软件设计网站外观做出计划绘制草图选定内容文本主题颜色图像字体 处理文件网站应保存在何处&#xff1f;关于大小写和空格的提示网站应该使用什么结构&#xff1f;文件路径 安装基础软件 计算机WebStormWeb浏览器&#xff1a;Microsoft Edge图像编辑器版本控…

使用HTML+CSS制作一个简单的网页

简单学习了一下HTML和CSS&#xff0c;制作了下面这个网页&#xff08;第一次做还在学习中&#xff09;&#xff0c;里面包含一些基础的布局包括导航条、分页栏、悬浮列表等内容。 网页预览&#xff08;网页中的图片与图标均来自阿里巴巴矢量图标库&#xff09; CSS代码 里面…

简单HTML网页制作 实例

HTML网页制作 1.新建文本文档&#xff0c;以“html”结尾。 2.用html网页逻辑器打开&#xff0c;这里我们用Sublime Text打开。 Tips&#xff1a;使用 &#xff01;Tab 按键 那么就可以自动生成HTML文档模板 推荐大家使用的前端工具有 Vscode hbuilder sublime_text 等等 …

简单网页的制作

传送门链接&#xff1a; 聊聊制作网站那些事 开头先开个小灶&#xff1a;响应式网站 响应式网站就是让网页自适应手机端和PC端&#xff0c;是一种网络页面设计布局&#xff0c;其理念是:集中创建页面的图片排版大小&#xff0c;可以智能地根据用户行为以及使用的设备环境进行…

用html制作简易网页

一.案例展示 案例图展与项目位置如下&#xff1a; 二、使用步骤 1.HTML代码&#xff1a; 代码如下&#xff1a; 圣诞节案例&#xff1a;<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta http-equiv&…

html简单的网页制作

1.用html做一个简单的网页&#xff0c;需要注意布局&#xff0c;布局就需要好好运用css 下面是我做的一个页面效果图&#xff1a; 还有一些不够完善的地方&#xff0c;需要继续摸索努力。下面上代码: <html> <head><meta charset"utf-8"><ti…

一个简单完整的网页

获得源码链接&#xff0c;点击这里https://github.com/suviwang312/SimpleFullPage 网页头部banner和信息部分新闻部分底部 一 头部 效果&#xff1a; 先对css进行初始化 分析&#xff1a;头部有一张图片和一个input输入框还有一个按钮下面的通栏 因为用到左浮&#xff0c…

【手把手】制作一个简单的HTML网页

前些天发现了一个巨牛的人工智能学习博客&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转 新建一个html文件&#xff1a; 我要给body添加一些样式&#xff0c;就在head元素上挂载一个style元素。 然后&#xff0c;写样式表&#xff1a; 效…

HTML写一个简单网页

最近学习了一点HTML&#xff0c;闲来无事写个网页看看&#xff0c; 欢迎、改进、留言。 演示地点&#xff1a;跳转到演示地点 一、初始化页面 body,button,dd,dl, dt,form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul,a,div,span {m…

HTML-01-最简单的网页

一、&#xff08;1&#xff09; 首先&#xff0c;新建一个文本文档 &#xff08;2&#xff09;完成后&#xff0c;在里面输入你想写入的内容 &#xff08;3&#xff09;最后&#xff0c;把文件拓展名改为html&#xff0c;更改之后&#xff0c;我们会发现文本图标会变成浏览器的…

如何用html制作一个简单的网页

哈喽&#xff0c;大家好&#xff01;我是小张。大家在浏览网页的时候有没有好奇过这个网页是怎么制作&#xff0c;其实只是制作一个简单的网页是很简单的。今天我就教一下大家如何用HTML制作一个简单的网页。 了解html 1. 学习html之前先要知道html是什么 HTML的全称为超文本标…

制作一个简单的网页(入门篇)

使用HTML和CSS来制作一个简单的网页 前言一、HTML1.1常见元素介绍1.2借助工具&#xff0c;浏览器开发者工具 二、实现个人名片1.基本框架2.使用CSS美化1.CSS书写位置1、以元素的style 属性来指定 &#xff08;内联样式&#xff09;2、以style 标签包裹 &#xff08;内部样式&am…

一个简单的HTML网页

一个简单的HTML网页&#xff0c;这是朋友写的&#xff0c;里面没有什么内容的&#xff0c;和大家分享一下&#xff0c;不喜勿喷。 先看下效果图 这里的登录和注册都是没有实际功能的&#xff0c;只是一个样式 下面来看看代码 登录 <!DOCTYPE html> <html><h…

return的使用方法

这里是修真院前端小课堂&#xff0c;每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能&#xff0c;本篇分享的是&#xff1a; 【return的使用方法 】 今天给大家分享一下&am…

if中return的用法

C#编程中&#xff0c;在if语句中&#xff0c;使用return语句&#xff0c;用于退出该if语句所在类的所在方法。例如程序&#xff1a; namespace RETU {class Program{static void Main(string[] args){IFR ifr new IFR();ifr.Kan();//Console.Read();}}class IFR{public stati…

【Java SE】return的用法(快速扫盲)

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 前言 1.定义 2.return的用法 3.break和retur…

python中 return 的用法

# 说明&#xff1a; 1&#xff0c;return 语句后面跟的表达式可以省略&#xff0c;省略后相当于 &#xff08;返回&#xff09;return None # 2&#xff0c;如果函数没有retur…

Java中return的两种用法

一、return语句总是用在方法中&#xff0c;有两个作用。 一个是返回方法指定类型的值&#xff08;这个值总是确定的&#xff09;。 一个是结束方法的执行&#xff08;仅仅一个return语句&#xff09;。 一般的就百是用在有反回值的方法中&#xff0c;用来返回方度法指定问类…