【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

相关文章
|
9天前
|
前端开发 JavaScript API
(前端3D模型开发)网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先,通过官方教程搭建基本项目环境,了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着,编写了加载和保存STEP模型的具体代码,包括HTML界面设计和TypeScript逻辑实现。最后,通过运行项目验证功能,展示了从模型加载到保存的全过程。此外,`mxcad3d`还支持多种其他格式的三维模型文件操作。
|
1月前
|
缓存 前端开发 JavaScript
前端开发的必修课:如何让你的网页在弱网环境下依然流畅运行?
【10月更文挑战第30天】随着移动互联网的普及,弱网环境下的网页性能优化变得尤为重要。本文详细介绍了如何通过了解网络状况、优化资源加载、减少HTTP请求、调整弱网参数和代码优化等方法,提升网页在弱网环境下的加载速度和流畅性,从而改善用户体验。
128 4
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
58 3
|
2天前
|
数据采集 前端开发 数据挖掘
利用 html_table 函数轻松获取网页中的表格数据
本文介绍了如何使用 R 语言中的 `html_table` 函数结合代理 IP 技术,轻松提取网页表格数据并规避反爬机制。通过设置代理和请求头,示例代码展示了如何从 58 同城采集租房信息并保存为 CSV 文件。该方法适用于需要频繁采集数据的场景,确保数据采集的高效和稳定性。
利用 html_table 函数轻松获取网页中的表格数据
|
1月前
|
XML 前端开发 JavaScript
前端大神揭秘:如何让你的网页秒变炫酷,让用户欲罢不能的5大绝招!
前端开发不仅是技术活,更是艺术创作。本文揭秘五大前端开发技巧,包括合理运用CSS动画、SVG图形、现代JavaScript框架、优化网页性能及注重细节设计,助你打造炫酷网页,提升用户体验。
70 30
|
22天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
31 6
|
27天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
40 5
|
1月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
存储 编解码 前端开发
惊!前端新手也能秒懂的高级技巧,轻松提升网页颜值与性能!
本文针对前端新手,介绍了三个简单易学的高级技巧,帮助提升网页的颜值和性能。包括使用CSS框架快速美化网页、优化图片资源加快加载速度,以及利用ARIA属性和媒体查询提高网页的可访问性和响应性。示例代码清晰,适合初学者上手实践。
35 3
|
1月前
|
存储 前端开发 搜索推荐
(前端直接编辑CAD)网页CAD二次开发中线型表的使用方法
在DWG数据库中,线型样式存储在线型样式表 `McDbLinetypeTable` 中,每个线型表记录对象 `McDbLinetypeTableRecord` 对应一种线型样式。本文介绍了如何获取、添加、遍历、删除和修改线型样式,并提供了绘制不同线型的示例代码,包括虚线、点划线和带文字的线型。通过在线示例demo,用户可以实践修改CAD图纸中的实体线型及其样式。
下一篇
DataWorks