小小林熬夜学编程

这个屌丝很懒，什么也没留下！

热门标签

HTML新手快速学习

作者：小小林熬夜学编程 | 2024-06-03 09:13:34

踩

HTML新手快速学习

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

第一步，下载编译器（仅限于Windows）

推荐编译器：Sublime Text

推荐理由：免费，无广告，适合新手使用，不占空间，人性化

下载地址：Sublime Text (tzfeijaing.cn)https://sublime.tzfeijaing.cn/index.html?bd_vid=11536276919236235820

第二步，导入基本框架

点击右上角加号，新建文档

点击红圈位置选择语言

点击后，找到HTML并点击

最后，输入<html 之后再按下Tab键

这样一个最基本的HTML框架就做好了

第三步，学会HTML基本函数和CSS设定

创建一个盒子（div）

<div></div>

你可以在盒子里面写东西，例如：

<div>我是div盒子</div>

效果（右键点击Open in Browser）：

你也可以改变字的样式：

设置样式首先需要在<title></title>这行代码的正下方写：


<style type="text/css">
		
	</style>

写好之后我们要在刚刚创建的盒子里面定义为“one”：

<div class="one">我是div盒子</div>

写好之后我们要跳转到style里面修改它的样式，就像这样：


<style type="text/css">
		.one {
			
		}
	</style>

我们可以修改文字的字体，就像这样：


.one {
		font-size: 50px;
	}

我们发现字变大了很多

与此同时，盒子也可以让他显现出来，只需要将他的背景颜色设定一下


.one {
		font-size: 50px;
		background-color: blue;
	}

但是我们发现，这个盒子是无限长的，所以我们要设定它的宽度


.one {
		font-size: 50px;
		background-color: blue;
		width: 300px;
	}

我们也可以将他的位置改变，需要使用到margin函数


.one {
			font-size: 50px;
			background-color: blue;
			width: 300px;
			margin-left: 100px;
			margin-top: 100px;
		}

它很明显的从左/上两个方向移动了100格像素，接下来，我们要学习p标签和h标签。

首先我们来学习p标签：

<p> 元素表示文本的一个段落。在视觉媒体中，段落通常表现为用空行和/或首行缩进与相邻段落分隔的文本块，但 HTML 段落可以是相关内容的任何结构分组，如图像或表格字段。

p标签里面可以写如字符或者一段话

<p>我是p标签，我是p标签</p>

他就会跟div一样显现出文字，如果我们要改变它的大小或位置也可以同div方法，在html中，绝大部分标签和函数都可以设置样式。

如果是很长一段文字

<p>东汉末年，群雄割据，董卓独霸朝纲，祸乱朝廷，涿郡刘、关、张桃园结义，征战四方，三顾茅庐、结孙权、破曹操、借荆州、取巴蜀，成就一番霸业。江东孙权，兵精粮足，又有三江之固、长江天堑，据江东而虎视天下。典军校尉曹操，据陈留、讨董卓、破吕布、征袁术、败袁绍、远征乌桓，一统北方，而后征马超、破韩遂，拿定西凉，欲征荆州以霸天下，但兵败于赤壁。此后三国鼎立，互相争斗，互有胜负，三国归晋。</p>

它的效果是这样的，但是我们想要它们全部对齐

它占据了整个页面很长的空间，这时候我们就需要使用到<br>函数

<p>东汉末年，群雄割据，董卓独霸朝纲，祸乱朝廷，涿郡刘、<br>关、张桃园结义，征战四方，三顾茅庐、结孙权、破曹操、借荆州、取巴蜀<br>，成就一番霸业。江东孙权，兵精粮足，又有三<br>江之固、长江天堑，据江东而虎视天下。典军校尉曹操，据陈<br>留、讨董卓、破吕布、征袁术、败袁绍、远征乌桓，一统北方，而后征马超、破韩遂，拿定西凉<br>，欲征荆州以霸天下，但兵败于赤壁。此后三国鼎立，互相争斗，互有胜负，三国归晋。</p>

<br>也就是强制换行标签，它可以在任何可以书写字符的函数里面添加，这是它的效果：

但是它还没有完全达到我们的效果，如果一个位置一个位置试那就非常慢，这时候，我们就可以将<br>标签删除，在它的外面套上一个div，然后调整它的宽度，这就会达到我们想要的效果：


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.one {
			font-size: 50px;
			background-color: blue;
			width: 300px;
			margin-left: 100px;
			margin-top: 100px;
		}
		.two  {
			width: 400px;
		}
	</style>
</head>
<body>
	<div class="one">我是div盒子</div>
	<p>我是p标签，我是p标签</p>
	<div class="two">
		<p>东汉末年，群雄割据，董卓独霸朝纲，祸乱朝廷，涿郡刘、关、张桃园结义，征战四方，三顾茅庐、结孙权、破曹操、借荆州、取巴蜀，成就一番霸业。江东孙权，兵精粮足，又有三江之固、长江天堑，据江东而虎视天下。典军校尉曹操，据陈留、讨董卓、破吕布、征袁术、败袁绍、远征乌桓，一统北方，而后征马超、破韩遂，拿定西凉，欲征荆州以霸天下，但兵败于赤壁。此后三国鼎立，互相争斗，互有胜负，三国归晋。</p>
	</div>
</body>
</html>

然后，我们开始学习h标签

h标签一共有六个，从大到小分别是<h1><h2><h3><h4><h5><h6>,h标签一般用于标题和开头，效果：

当然，你也可以通过style修改他的大小。h标签比较简单，这里我们就不多说了，下节课，我们将要学习a标签。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/666594