欢迎来到前端与HTML课程笔记！在本课程中，我们将深入了解前端开发以及HTML的基础知识。前端开发是构建现代网页和Web应用程序的核心领域，而HTML是前端开发的基石，用于构建网页结构和内容。
1. 前端开发概述
前端开发是指开发人员负责构建用户界面和实现用户与网页之间的交互。它主要涉及三种核心技术：HTML、CSS和JavaScript。HTML用于创建网页的结构和内容，CSS用于样式美化，JavaScript用于实现网页的交互和动态效果。
前端开发的目标是创建用户友好、响应迅速、具有吸引力和良好用户体验的网页和Web应用程序。
2. HTML介绍
HTML（超文本标记语言）是一种标记语言，用于创建网页的结构和内容。它由一系列标签组成，每个标签代表一个不同的元素。通过使用这些标签，我们可以定义标题、段落、链接、图像等内容，从而构建网页的骨架。
HTML的基本结构如下：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<!-- 网页内容 -->
</body>
</html>
让我们逐行解释上述代码的含义：
-
<!DOCTYPE html>：这是HTML5的文档类型声明，它告诉浏览器正在使用HTML5版本解析页面。 -
<html>：这是HTML文档的根元素，所有HTML内容都包含在这个标签内。 -
<head>：在<head>标签内，我们可以设置文档的元数据和引用外部资源，例如样式表、JavaScript文件和图标等。在这里，我们设置了页面的标题，即浏览器标签页上显示的内容。 -
<title>网页标题</title>：<title>标签用于设置页面的标题，这个标题将显示在浏览器标签页上。 -
<body>：在<body>标签内，我们编写页面的主要内容，包括文本、图片和链接等。
3. 常用HTML标签
标题标签：<h1>到<h6>
标题标签用于定义文档的标题，其中<h1>为最高级标题，<h6>为最低级标题。例如：
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
段落标签：<p>
段落标签用于定义一个段落。例如：
<p>这是一个示例段落。</p>
链接标签：<a>
链接标签用于创建超链接，将用户导航到其他网页或资源。例如：
<a href="https://www.example.com">访问示例链接</a>
图像标签：<img>
图像标签用于插入图像到网页。例如：
<img src="example.jpg" alt="示例图片">
src属性指定了图片文件的路径，alt属性为图像设置了替代文本，当图像无法显示时，将显示这段文本。
列表标签：<ul>和<ol>
列表标签用于创建无序列表和有序列表。例如：
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
</ol>
4. 示例代码
下面是一个简单的HTML页面示例，包含一个欢迎消息、一个示例段落、一个超链接和一个图片。
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网页！</h1>
<p>这是一个示例段落。</p>
<a href="https://www.example.com">访问示例链接</a>
<img src="example.jpg" alt="示例图片">
</body>
</html>
这段代码中，我们使用了前面介绍的各种HTML标签来构建页面的结构和内容。
总结
在前端与HTML课程笔记中，我们深入了解了前端开发的概念和HTML的基础知识。HTML是前端开发的基石，用于构建网页结构和内容。通过合理使用HTML标签，我们可以创建丰富多彩、具有交互性的网页和Web应用程序。希望这些知识能够帮助你开始你的前端开发之旅，并构建出令人印象深刻的用户界面！
