前言: 当人们看到我计算机屏幕上密密麻麻的代码时,他们常常会感叹这些代码看起来很复杂,你真厉害!或者以为我一定非常聪明。然而,实际上,编写和创建网页代码并不是一件难事。你也可以轻松掌握这项技能,无需成为专业程序员。
在本系列中,我会用我学习的方法,与你分享网页开发的魅力,并揭示代码背后的秘密。我们将一起探索HTML、CSS和JavaScript等技术,学习如何创建令人惊艳的网页。你将发现,网页开发并不只是专属程序员的领域,任何人都可以通过学习和实践掌握这门技能。
无论你是刚开始学习还是想进一步提升你的技能水平,这个系列都将帮助你从零开始,逐步掌握网页开发的精髓。让我们一同揭开网页开发的神秘面纱,用代码创造令人赞叹的网页吧!
本系列教程介绍了绝大部分常用代码忽略了一些不常见代码(即使是网页编写人员也极少用的标签)
本章的重点是从零开始学习HTML,对于已经学习过HTML的人来说,这篇博客的内容可能会太基础、太简单,你可能学不到多少新的东西。因为博主在这里讲的是HTML的最基本知识,如果你已经掌握了,其实没必要再看这样的入门内容了。但是,如果你之前完全没有学习过HTML,这个章节的内容对你来说就非常适合了,可以让你系统地学到HTML的基础知识。所以,这篇博客的目标读者是HTML的初学者,如果你已经有一定基础,建议跳过这一章,去学习更高阶的HTML内容。
从零开始…
一.认识工具环境
首先问你一句当你学习HTML是否了解他是什么?他能干什么用?你是否了解编译器是什么?下定决心要学吗?(希望你不要半途而废.)
那我们就说什么是HTML呢,HTML (HyperText Markup Language) 是一种用于创建网页和展示信息的标记语言。它由一系列的标签组成,这些标签用于定义网页的结构和内容。HTML 使用起来相对简单,并且被广泛应用于构建互联网上的各种网页和应用程序。
与一些其他编程语言相比,HTML更关注网页的结构和内容,而不是逻辑和算法。它是前端开发的主流技术之一,我们可能在网上听过Java、C语言、Python等编程语言有所区别。当然,学习HTML并不需要你事先了解这些编程语言,它是一门独立的技术,任何人都可以学习和掌握。
另外,编译器是一种用于将源代码转换为可执行代码的工具。在网页开发中,我们常用的是文本编辑器,如Visual Studio Code、Sublime Text等,用于编写和编辑HTML代码。这些编辑器通常提供代码高亮、自动补全等功能,方便我们编写代码并检查语法错误。
如果你已经下定决心学习,我非常欢迎!我将在接下来的系列中为你提供详细的指导和示范,帮助你打下坚实的基础。请记住,学习是一个持续的过程,不要轻易放弃,坚持下去,你一定能够掌握这门技能!
我们要下载Visual Studio Code
我们要去官网下载并且安装地址在下边了
https://code.visualstudio.com/
等待下载之后我们安装实在不会这个具体我也不写了自行百度
教程:Visual Studio Code安装教程+设置中文(超详细)
在编写代码之前推荐款插件能更高效地编写代码
Live Server
启动具有静态和动态页面实时重新加载功能的本地开发服务器。可以在编写代码实时预览编写的代码
那么工具介绍完了开始编写代码吧!
HTML基本框架
<!DOCTYPE html>
<!-- 这是一个HTML文档声明 -->
<html>
<!-- 这是一个页面主体 -->
<body>
<!-- 这是一个一级标题 -->
<h1>我的第一个标题</h1>
<!-- 这是一个段落 -->
<p>我的第一个段落。</p>
<!-- 这是一个结束页面主体 -->
</body>
</html>
<!-- 这是一个注释 -->
如代码:
我的第一个标题
我的第一个段落。
以上是预览
<!DOCTYPE html> 这个是不可少的一个开头将向计算机说明这个文件是html然后遵守html的编写规范
<html> 与 </html> 这个元素要包含所有内容这个里面也可以标明lang属性可以对识别无障碍有用
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
有人说那为什么都要有一个两个呢如(<h1> </h1>)写一个不是很好吗
html标签一般是成对出现的第1个是开始标签第2个是结束标签
本期教程先到这里本文主要介绍html基本框架下一章主要讲解代码编辑和常用的语法
暂无评论内容