【Web前端】怎样用记事本写一个简单的网页-html

简介: 【Web前端】怎样用记事本写一个简单的网页-html

一. 对网页设计的基本了解


1. 网站

1)一个网站由若干个网页构成,这些网页是用超级链接有逻辑地联系起来的。

2)网站由网址来识别和存取。

3)网页需要上传到网络空间中,才能供浏览者访问网站中的内容。

即,一个网站需要有域名(网址)、网页、网络空间三部分。


2. 网页编辑工具

1)语言

我们可以使用HTML来编写网页,HTML文件就是增加了标记的普通文本文件。

可以简单的使用记事本来编写一个网页,只需将文件后缀名该为html,然后用浏览器打开。


现在编写网页的语言其实由三部分构成:HTML,CSS,JavaScript。

1)HTML:早期编写网站的语言。

2)CSS:负责网站内容的表现形式。是在HTML原来的功能中分离出来的,这种分离可以使维护站点外观更容易,也让文档代码更简练,网页加载快。

3)JavaScript:负责动态部分。 使网页更加生动活泼,增加和用户互动。


2)软件

前面已经讲到,可以简单地使用记事本来编辑网页。

这里在提出两款编辑软件:EditPlus,Dreamweaver。它们的能力是递增的。


EditPlus:


image.png


EditPlus相比记事本的优点是,可以带有html语言的语法高亮,而且可以在这个编辑页面中直接预览网页(点击左上角部分的小地球图标)。


二. 第一个网页


前面已经提到,html语言文件就是增加了标记的普通文本。

那么首先,我们就要了解标记的作用:

一些简单的标记,可以让文本在网页中以另一种形式呈现出来。


1. 实操——用记事本写个朴素的网页

简单起见,接下来就使用记事本来编写我们的网页。


image.png

首先,新建一个文本文件(txt),给它起个随便的名字。


image.png


然后用记事本打开它,输入以上内容,记得保存。


image.png


重命名文件,将文件后缀名改为html。


image.png


接着选择打开方式为某个浏览器(系统默认的浏览器就可以),就可以显示出我们刚刚编写的网页啦!

是不是感觉朴素地有点过头了?没关系,第一次嘛。


2. 代码讲解

<html>
<body>
这是我们第一个网页的内容哈。
</body>
</html>

这里我们用到了两个基本的标签:<html>和<body>。

其中<html>标志着我们html文件的开始,<body>则表示正文内容的开始。而</html>和<body>分别代表着对应部分的结束。<body>和</body>之间的一行文本,则是我们要展现的内容。

(是不是有点明白为什么”html是增加了标记的普通文本了”?)


3. 更丰富一点

增加一些其它的标签,让我们的网页更加生动一点。


<!doctype html>
<html>
<title>第一个网页</title>
<body 
  background = "宇宙.jpeg"
  text = "#00ff33"
  leftmargin = "300">
<h1>这是我们的第一个网页!</h1>
<p>可以简单留作一个纪念。</p>
<p>但我们的征途,是星辰大海!</p>
</body>
</html>


标签 功能
< !doctype html > 标识文件的语言标准,这里指的是html5
< title > 网页的标题,即浏览器中页面的名字
< h1 > 一级标题
< p > 一个段落的开始

注意:标签的括号和字母之间是没有空格的,我这里是因为不加空格显示不出来。


在<body>标记中,还可以控制一些全局的呈现效果:


下面是新的网页:

标识符 控制内容
background 背景图片(需要在html文件相同目录下,加入相应的图片文件)
text 文本内容的颜色
leftmargin 两边间距大小

image.png

相关文章
|
1天前
|
Web App开发 缓存 前端开发
如何优化前端网页加载速度:最佳实践和工具推荐
本文探讨了如何通过采用最佳实践和利用先进的工具来优化前端网页加载速度。从压缩资源到使用CDN,从减少HTTP请求到利用缓存策略,我们将介绍一系列提高网页性能的技术手段。同时,我们还将推荐一些广受好评的工具,帮助开发者更轻松地实施这些优化策略。
|
1天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
5天前
|
前端开发 JavaScript UED
如何优化前端网页加载速度
在当今互联网时代,网页加载速度是用户体验的关键因素之一。本文将探讨如何通过优化前端技术,提升网页加载速度,包括压缩资源、使用CDN加速、减少HTTP请求等方法。
|
9天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
9天前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
|
9天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
9月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
98 0
|
9月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端学习笔记202305学习笔记第二十三天-地图单线程配置
68 0
前端学习笔记202305学习笔记第二十三天-地图单线程配置
|
9月前
|
前端开发 API
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
55 0
|
9月前
|
前端开发
前端学习笔记202306学习笔记第五十一天-工厂模式4
前端学习笔记202306学习笔记第五十一天-工厂模式
34 0