Html网页入门

门——01

1.首先打开Sublime Text 3，这是一款超级好用的文本编辑器。

Sublime Text 3

2.新建html文件，先点击file，创建文档

新建文档

3.Ctrl+s保存，注意后缀名为 .html。比如（我的网页.html）

4.开始写代码了，下面的几行代码是网页的基本框架。头部引入外部css样式，主体内容是网页的内容。

<!DOCTYPE html>
<html>
<head>
	》
</head>
<body>
 
</body>
</html>

截图

4.下面开始写内容了

<!DOCTYPE html>
<html>
<head>
	<title>我的网页</title>
</head>
<body>
 <div style="width: 100%;height: 400px;background: blue">
 	<h1 style="color:#fff;text-align: center;">我是h1标签</h1>

 </div>
</body>
</html>

一个div标签里面写了个h1标签。div标签是相当于一个容器，容器里摆放了一个h1标签，其中容器颜色为蓝色，h1标签默认颜色是黑色，所以给他白色。效果如下：

效果

家好，上一篇文章介绍了HTML+CSS的基础知识和开发工具，接下来就要开始实战编写了

首先在桌面创建一个新文件夹，重命名为网页开发，进入文件夹右键创建一个文本文档，然后重命名为index.html，我们的第一个网页文件就创建好了。注意：有些同学的电脑无法编辑后缀，文件夹头部有个查看，点击进去进入选项，然后再点击查看，下面有个隐藏已知文件类型的扩展名，去掉选择框确定就可以了。

打开notepad++编辑器，把index.html直接拖进去，然后在里面写上如下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>网页设计</title>
</head>
<body>
<style type="text/css">
body{
 background: #000;
}
</style>
</body>
</html>

直接点击index.html，浏览器会直接打开并解析，就会显示一个全黑的网页，哈哈哈！！！

那么这些标签都代表什么意思呢？首先html网页头部都会有一个版本声明，这里的<!DOCTYPE html>代表HTML5版本，每个网页都需要写上此声明，这样浏览器就能判断用哪个html版本解析当前的页面，而<html lang="zh-CN">则表示网页内容属于中文简体语法。
<head>标签表示网页头部元素的容器，这里可以放网页的标题、关键词、描述等，也可以包含脚本、样式以及其他meta等其他信息。这里我写了一个标题，它就会在浏览器头部显示出来。<meta charset=utf-8"/>标签则是告诉浏览器我这个网页的编码是utf-8编码，这个很重要哦，否则网页容易出现乱码。
<body>标签表示网页主体元素的容器，它包含了网页所有的html标签如：文本、图片、列表等等。以后我们编写的网页标签都需要放在这里面，这些就构成了html网页的基本格式，大家也不需要去背，知道表示什么意思就行，需要的时候直接拿来用。
<style type="text/css">标签表示规定样式表的MIME类型，它告诉浏览器这里面的文本内容text要当css样式表来解析，常用的有两种引用方法（内部和外部引用），外部引用就是用<link>标签引用css文件，后面的文章我会讲解。它以分号(;)开始和结束，每个属性有一个值，属性和值用冒号分开，如：body{background:#000;}表示指定给body标签一个颜色为黑色的背景。

接下来我们就开始编写我们的网页代码，我写一段图文标签，大家把下面一段代码插入到body里面

<!--HTML-->
<div>
<h2>这是我的第一个网页</h2>
<p>BODY标签表示网页主体元素的容器，它包含了网页所有的html标签如：文本、图片、列表等等。以后我们编写的网页标签都需要放在这里面，这里我写了一段文字，它就会在浏览器里显示出来。这些就构成了我们网页的基本格式，大家也不需要去背，知道表示什么意思就行，需要的时候直接拿来用。</p>
<p><img src="http://www.hmttv.cn/uploadfile/2024/0807/20240807025415861.png"></p>
</div>
<!--CSS-->
<style type="text/css">
div {
	width: 300px;
	padding: 20px;
	margin: 20px;
	border: 1px solid #eee;
}
h2 {
	font-size: 18px;
	color: #000;
	text-align: center;
}
p {
	line-height: 24px;
	font-size: 14px;
	color: #000;
}
img {
	width: 100%;
}
</style>

效果图如下：

这是我的第一个网页

大家可以先尝试一下解释这些标签的意义，下一篇我会详细为大家讲解，谢谢观看！！！

人网页已经成为展示自己技能和更好地传达信息的有力工具，个人网页设计关键是坚持自己的风格，充分展示自己的专业技能，选择合适的颜色、排版、图片和视频，简化设计，与互联网趋势同步，独特的个人网页设计可以帮助个人在竞争激烈的数字市场中脱颖而出，吸引人们的注意力。

确定自己的风格

一个出色而独特的个人网页需要创建自己的风格，这可以是一个个人的标志，也可以是一种独特的设计风格。

在开始设计之前，你应该首先接近你的个性、偏好或专业领域，并确定个人网页的风格，以帮助你更好地表达自己，更好地展示你真实的自己。

颜色与排版的搭配

颜色和排版是所有网页设计中最基本和最重要的元素之一。

当你确定你的网页的风格时，你应该考虑的下一件事是颜色和排版的搭配，以及如何使用颜色和排版来突出个人网页的独特性和个性特征。

对于颜色的使用，你可以选择柔和或明亮，但必须符合主题和整体风格。

对于排版设计，您可以选择自己独特的字体、排版形式或插入图片等，以创建一个独特的个人网页。

使用图片和视频

你可以通过选择漂亮的图片和视频来吸引用户的注意，但也可以让用户更好地了解自己。

因此，在选择图片和视频时，你应该选择符合主题和整体风格的材料来为网页注入活力。

同时，不要忘记使用图片和视频来轻松地展示你的个人才能、技能和文化，这可以使你的个人网页更加生动和可读。

设计简洁明了

简洁明了的设计是良好UI设计的重要目的。

如果你的网页设计太复杂，用户会不知道从哪里开始，最终失去兴趣。

因此，在设计个人网页时，要注意网页的整体结构布局、清晰的排版和优化的质量，避免过度的装饰和过多的插图。

相反，要保证网页简洁易懂，让人轻松找到自己想要的内容，更好地展现自己的个人特色。

与互联网潮流同步

设计一个时尚的个人网页不仅要考虑个人的风格、偏好和表达形式，还要与互联网的趋势保持同步。

除了了解自己的喜好和兴趣外，还要关注市场的流行趋势和当前前沿的网页设计趋势，还要跟上时代的步伐，界面的设计应该符合当前人们的审美观点，而不是过时和僵化的设计。

来源

https://yncaili.com/22997.html

在线咨询

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商