【自学笔记】web前端 - HTML - DAY01（编辑器+基础标签）

最新推荐文章于 2024-10-18 19:19:52 发布

HelloJane…

最新推荐文章于 2024-10-18 19:19:52 发布

阅读量473

点赞数 2

分类专栏：【自学】web前端文章标签： html

本文链接：https://blog.csdn.net/m0_46169109/article/details/110198824

版权

【自学】web前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

这里是Jane的自学笔记之Web前端系列~ （希望周更ᕦ(･ㅂ･)ᕤ）

如果内容有问题，欢迎大家私信留言、批评指出，谢谢~

主要是记录和分享，嘻嘻(〃‘▽’〃)

编辑器

这里是一些我了解到的编辑器简介和使用感受，后面都跟上了官网链接，需者自取~

HBuilder

我使用的编辑器是HBuilder，感觉不错，适合我这样的新手+懒人(￣▽￣)／
下面是HBuilder的web项目界面，直接建立好了文件夹和模板，方便快捷；
打代码时有联想功能（之后的文章里会具体提及），下拉栏很多选择，适合刚入门的新手尝试，可以一个个参数尝试、调试，毕竟需要在实践中学习嘛；
右侧也有预览界面（未截图）；
编辑颜色时的颜色选择也很人性化；
具有快捷键语法设计、无鼠标操作等便捷应用。

在这里插入图片描述

官网下载

记事本Nodepad

可以在记事本上编辑，然后把后缀名改成.html就行。可以用作文本编辑。装逼必备(-ω-；)

Notepad++

Notepad++功能比上面提到的记事本强大，除了可以用来制作一般的纯文字说明文件，主打编写代码；有语法高亮度显示，也有语法折叠功能，支持宏以及模组。

一个程序文件可以右键用Notepad++打开，并且编辑。感觉更适合查看代码呢。

官网下载

Sublime Text

这是一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件，支持插件扩展机制。

网上说这个编辑也不错，但是下载之后没尝试过T^T。

官网下载（可能是我网问题叭，只有10M，我下载了三次，QAQ）

VS Code

一个免费、轻量、跨平台的编辑器，具有海量语言支持、并排编辑、连续不断的智能感应等优势特性，有很多快捷键和插件安装。

（记得我还是小白的时候，还用这个运行python）

官网下载

以上推荐的这三个编辑器建议安装一些插件哦，可以提高效率，插件可以去其他博客里捞一捞。

基础标签

标签简介

用来框定区域，指定这块区域的类别，或者说是格式，一对标签里夹着的是显示内容。

格式：由尖括号包围的关键词
通常是成对出现，如 <body> </body>
标签对中的第一个标签是开始标签，第二个标签是结束标签
有些标签独立出现，如 <br /> （空标签）
对大小写不敏感，但是为了美观，还是都小写叭~

基本格式

<html>
	<head>
		<meta charset="utf-8" />
		<title> Jane </title>
	</head>
	
	<body>
		<h1> Hello,visitor! </h1>
		<p> Welcome to Jane's home! </p>
		<img src="img/jane.jpg" />	
	</body>
</html>

标签讲解

头部元素：<head>
1. 标题（Title）：<title>
  
  显示在html的标题上。
2. 元信息（meta-information）: https://www.w3school.com.cn/tags/tag_meta.asp
  
  贴个链接叭，我解释不太清，尽量理解|*´Å`)ﾉ
标题（Heading）： <h1> - <h6>

六个等级的标题，h1级别最高，字体也越大越粗。
段落（Paragraph）： <p>

新起一行，开启一段新段落。
图像（image）：<img src="xxx.jpg" />加载图片是需要时间的，慎用图片。
1. 插入图片时，需要提前将图片放入对应项目的img文件夹中。
2. src （sourse） 源属性，值为图像的 URL 地址，URL 指存储图像的位置。
3. 插入图片时可以自动弹出。（代码助手快捷键：Alt+/）