「HTML」从零开始学网页制作 html入门网页制作
gaoyangw 2024-11-13 10:35 18 浏览 0 评论
网页是一个包含HTML标签的纯文本文件
网页制作离不开浏览器和制作网页工具
浏览器推荐【谷歌浏览器】或【火狐浏览器】
制作网页工具用电脑自带的【记事本】即可
六步即可学会最基础的网页制作！
第一步
右击桌面，选择新建，选择文本文档
第二步
打开新建的文本文档，输入以下内容（建议照敲一遍）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
</body>
</html>上面这些内容就是超文本标记语言，也称为HTML，现在HTML已经发展到第五代——HTML5，上面这些HTML5代码是帮助我们写出网页的基础。
第三步
右击文档重命名，修改文件后缀，将文件扩展名修改为.html
如果你看不到文件的扩展名那么就打开此电脑（我的电脑），在菜单栏查看勾选文件扩展名即可。
第四步
双击打开它，你会发现一片空白。
但并不是什么都没有，上图中箭头指的那一串字母就叫URL，也称“统一资源定位器”。因为这个文件只是本地文件，所以它现在的作用是定位你的文件存放位置，显示文档地址，说明文档放在什么地方。
第五步
忍受不了空空的感觉，那么就开始添加一些东西吧！
右击选择打开方式，选择用记事本打开
试试看把标题改成“这是一个标题”，按快捷键ctrl+s保存
刷新一下浏览器，于是标题就变成了“这是一个标题”
那么我们就可以知道，修改<title></title>里面的内容可以改变标题；同时<title>标签是<head>标签中唯一要求包含的东西。
第六步
一鼓作气，再添加一些内容吧！
在<body></body>这一对标签里面加上这样一段话：
<p>Hello</p>
<p>World</p>然后保存刷新
恭喜你，你已经学会了最基础的网页制作了。
<p>这是什么意思呢？
这些被称为标签，上面出现尖括号的都属于标签，它们通常都是成对的，由开始标签和结束标签（结束标签加上斜杠）构成一组标签，例如<title></title>、<p></p>。
<p>标签定义段落，我们写文章一般是敲一下回车就换一行，但是网页不一样，你敲多少个回车都是不被识别的。
<p>有志者，事竟成，破釜沉舟，百二秦关终属楚;
苦心人，天不负，卧薪尝胆，三千越甲可吞吴!</p>
<p><p></p>可以看到上面的一段话，敲多少个回车都没有用，而下面的一段话，用两个<p>标签就换行了。
相关推荐
- 设计师必备8个小众实用设计网站（比较出名的设计网站）
-
作为一个设计师，兜底儿式分享,真敲好用！！！你们一定好保存好！要不然以后刷着刷着就找不到了，也会对不起我的良苦用心的。还是一样有设计问题可以问我哈！很开心为大家解答！以后还会为大家继续分享自己的设计经...
- 收藏不看系列，这几个设计类网站希望对你有用
-
1.POP服装趋势，从专区、趋势解读、流行分析、款式、图案、T台、素材、读物、视频等几个版块。https://www.pop-fashion.com2.热点趋势网，从时装发布会、视频、T台分析、零售分...
- 设计人看到请收藏，这几个独特素材资源网站
-
在当今的设计行业中，素材的获取是每位设计师日常工作中不可或缺的一部分。高质量的素材不仅能提升设计的专业性，还能激发设计灵感，帮助设计师更快地完成项目。为了满足这个需求，网络上涌现出了许多素材资源网站。...
- 设计师刚需!8个小众实用设计网站（好一点的设计网站）
-
对于设计师而言，这东西就不怕多，因为你不知道突然哪个网站就不能用，所以多备点还是有好处的，今天再来8个。不同种类的都有哈，都是我平时做设计的时候找参考的地方，分享给你们。一、Reeoo网址：https...
- 自媒体人必须要知道的5个创意设计网站，让你创意十足!
-
在自媒体这个充满竞争与创意的领域，拥有一个源源不断的灵感库是每位创作者梦寐以求的。今天，我将为大家介绍五个创意设计网站，它们不仅能够激发你的创作灵感，还能提供丰富的素材和工具，帮助你打造出独具一格的内...
- 设计师需要收藏的10个国外灵感网站
-
转自：优设封面作者：AviNaim品牌、平面类设计有哪些顶尖的灵感参考网站？今天这10个网站都是有关品牌、海报等平面设计类型的灵感站点，并且可以在任何网络环境下正常访问，是设计师们拓展视野的极佳网...
- 探索几个独特设计元素的宝藏图片网站
-
在数字创作的时代，寻找高质量的设计素材是每位设计师和创作者不可或缺的一部分。随着互联网资源的丰富，越来越多的素材网站应运而生，其中一些独具特色，成为了设计师们的“宝藏”。本文将为您介绍三个独特的设计元...
- 设计师必备9个网站，迅速get最前卫设计流行趋势
-
020设计趋势工具大赏三维深度与现实主义www.vectary.com无需下载就能使用的三维渲染工具！还有海量的模板和模型材料哦,支持导出平面、3D、AR等各种类型文件。...
- 9个超高质量设计素材网站（设计类素材网站）
-
不仅免费且打开速度快，工作效率从此按时下班不用加班！MixkitArthttps://mixkit.co/art/高质量免费插画素材网站，全部免费可商用，支持一键下载。...
- 建议收藏:2024年10个AI设计网站(附网址)
-
以下是一些AI设计网站：1.**AdobeSpark**-快速创建精美的图形、网页和视频内容。-网址：[https://spark.adobe.com/]2.**Canva**-拖放式...
- 哪几种高端品牌网站设计案例，令人喜爱
-
在读图时代，高端品牌网站设计里网页设计升级用户交互体验，审美上限是重中之重，东莞星凯希望今天海外案例网站能带来新启发，建议打开链接，网站设计的互动和细节只有亲自交互才能感受设计者的构思的精妙。内容摘要...
- 网站定制开发和模板的区别是什么，西安软件网站开发服务公司
-
模板网站和定制开发的网站区别是什么呢？关于这个问题，这里给大家做一个简单的介绍，模板网站是已经做好的网站，而定制开发的网站是根据客户的需求开发的网站，模板网站的页面相对来说比较简单，而定制开发的网站不...
- 网站建设——高端网站定制设计（知名网站建设定制）
-
在当今数字化时代，网站已经成为一个企业官方形象展示的窗口。不管是大型企业还是小型企业，拥有一个能够展示企业形象、传递信息和吸引用户的高质量网站已经变得至关重要。因此，高端网站定制设计成为企业发展中不可...
- 高品质网页定制开发公司有哪些?（高品质网页定制开发公司有哪些公司）
-
成为一家优秀的网站定制设计公司不容易，选择一家合适自己的高端网站定制设计公司也不容易，需要花心思货比三家，从设计、制作、开发、费用等多方面做对比。以下是一些高品质网页定制开发公司的例子：...
- 定制型网站搭建小攻略，你 get 了吗?
-
在数字化时代，企业官网早已不再是“面子工程”，而是连接用户、传递价值的核心枢纽。但千篇一律的模板网站难以精准匹配品牌需求，这时，定制型网站便成为了企业突破同质化、提升竞争力的关键。今天，豆包为你整理...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表