本文是中南林业科技大学软件协会网页制作学习内容。介绍了网页制作前置知识，包括HTML、CSS基础，文本编辑器等。详细讲解了HTML各类标签和CSS基础概念、样式规则、选择器等内容，最后鼓励学习者实践制作简单静态界面。
⭐️ 软件协会第01次活动网页制作学习01
📍 来自：中南林业科技大学软件协会软件部：郭海斌
⏲ 时间：2023 - 11 - 27
🏠 官网：https://www.csuftsap.cn/
💬 任务布置说明：
- 考察范围：利用html、css制作简单界面
- 所有答案均放在我所写的
空代码块或空引用框中
1.网页制作前置知识
1.1欢迎进入网页制作的世界！
初次接触网页制作时，以下是一些前置知识，这些知识将帮助你更好地理解和开始网页开发：
- HTML（Hypertext Markup Language）： HTML是用于构建网页结构的标记语言。了解HTML标签的基本用法和常见元素（如标题、段落、图像、超链接等）是开始的关键。
- CSS（Cascading Style Sheets）： CSS用于设置网页的样式和布局。学习如何选择元素并应用样式，包括颜色、字体、边距、填充等。
- 基本的文本编辑器： 你需要一个文本编辑器来编写HTML和CSS代码。常见的选择包括VS Code、HBuilderX、Sublime Text、Atom等。
- 浏览器： 了解主流浏览器（如Chrome、Firefox、Safari）及其开发者工具。这对于调试和查看网页效果至关重要。
- 响应式设计： 学习如何使网页能够适应不同设备和屏幕尺寸，以确保在各种设备上都有良好的用户体验。
- 基本的文件路径： 了解相对路径和绝对路径，以确保正确引用你网页中的资源文件（如图片、样式表等）。
- HTTP协议： 了解基本的HTTP协议，理解客户端和服务器之间的通信过程。
- 版本控制（可选）： 了解基本的版本控制概念，如Git。这对于跟踪代码变化、团队协作和回滚操作非常有帮助。
- 基本的命令行知识（可选）： 一些开发任务可能需要使用命令行，因此了解基本的命令行操作也是有益的。
- 学习网上资源： 互联网上有大量的学习资源，包括教程、博客、视频等。利用这些资源帮助你更深入地了解网页制作。
初学时，可以先从构建简单的静态网页开始，逐步扩展你的技能和项目复杂性。实践是学习的最佳方式，所以不要害怕尝试创建自己的网页项目并在过程中学习。祝你在网页制作的旅程中取得成功！
1.2什么是静态页面
- 固定内容： 页面的内容在创建或更新时就已经确定，不会在用户访问期间动态改变。
- 加载速度： 由于没有服务器端的动态生成过程，静态页面通常加载速度较快。
- 相对简单： 制作和维护静态网页相对简单，不涉及复杂的服务器端逻辑或数据库交互。
- 适用于简单网站： 静态页面适用于一些简单的网站，如个人博客、简介性质的企业网站等。
相对于静态页面，动态页面是指其内容可以根据用户的请求、输入或其他条件而动态生成的页面。动态页面通常涉及服务器端的处理，可能包含数据库查询、用户身份验证等交互性操作。这使得动态页面更适用于需要实时更新内容、用户交互性强的网站，比如社交媒体、电子商务网站等。
在现代的Web开发中，很多网站采用了动静结合的方式，利用静态页面提供基本的内容展示和用户交互，同时通过动态技术获取实时数据或进行个性化呈现。
1.3学习视频推荐
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili
如果你是真的想深入学习网页开发，那么你一定要找个完整的视频坚持学习下去（上面这个黑马程序员看到300集就够了，平均1集10分钟不到，直接2倍速开干，一天30集加实践不是事，在寒假里10天不到就够了）
如果你只是有一点点兴趣，那么你看一下文档大致了解一下流程也就够了
1.4文本编辑器推荐
VS Code（Visual Studio Code）和 HBuilderX 都是流行的开发工具，但它们针对的开发场景略有不同。以下是它们在网页制作中的各自特点：
HBuilderX:
- 专注于Web开发： HBuilderX 主要专注于Web开发，包括HTML、CSS、JavaScript等前端技术。它是一个由DCloud（HTML5移动应用开发平台）推出的IDE。
- 内置前端框架和工具： HBuilderX 集成了一些流行的前端框架（如Vue、React）和工具，使得在创建和管理项目时更为便捷。
- 移动应用开发： HBuilderX 除了支持Web开发外，还专注于移动应用开发，尤其是基于HTML5的跨平台移动应用。
- Uni-app支持： HBuilderX 支持Uni-app，这是一个跨平台开发框架，可用于同时构建iOS、Android和Web应用。
- 自动化工具： HBuilderX 提供了一些自动化工具，用于加速开发流程，例如自动生成代码片段、自动补全等功能。
在选择使用 VS Code 还是 HBuilderX 时，取决于你的具体需求和个人偏好。如果你需要一个通用的、轻量级的编辑器，并希望有丰富的插件支持，那么选择 VS Code 可能更合适。如果你主要从事Web开发，并对移动应用开发有一些需求，那么 HBuilderX 可能更符合你的需要。
初学者推荐用HBuilderX，因为它有内置的浏览器，可以一边敲代码一边看到网页的变化，对新手很友好哦
VS Code:
-
通用性： VS Code 是一款通用的代码编辑器，支持多种编程语言，包括HTML、CSS、JavaScript等。它不仅用于前端开发，还可以用于后端、移动应用等多种类型的开发。
-
强大的插件生态系统： VS Code 的强项之一是其丰富的插件生态系统。有大量的社区开发的插件可供选择，可以通过插件来扩展编辑器的功能，满足不同开发需求。
-
集成调试工具： VS Code 集成了强大的调试工具，支持在编辑器中进行调试，提供直观的调试界面和丰富的调试功能。
-
社区支持和更新频率： VS Code 有着庞大的用户社区，因此有大量的教程、扩展和支持。而且，它的更新频率相对较高，引入了新的功能和改进。
-
轻量级： 相对于一些集成开发环境（IDE），VS Code 是一款相对轻量级的编辑器，启动速度快，占用系统资源相对较少。
运行html文件方式：
-
使用 Live Server 运行 HTML 文件（这样也可以实时更新页面）：
-
打开 VS Code。
-
转到 Extensions（Extensions 图标或使用快捷键
Ctrl+Shift+X）。 -
在搜索框中输入 “Live Server”。
-
找到 “Live Server” 扩展，点击安装。
-
-
打开你的 HTML 文件。
-
在文件编辑区域右键，选择 “Open with Live Server”。
-
这将启动一个本地服务器，并在默认浏览器中打开你的 HTML 文件。
-
-
-
手动运行 HTML 文件：
- 打开你的 HTML 文件。
- 在文件编辑区域右键，选择 “Copy Path”。
- 打开浏览器，粘贴路径到地址栏中，按回车键。
这两种方法都能让你在本地服务器上运行你的 HTML 文件，Live Server 还能实时更新页面，非常适合开发过程中的调试。如果你不喜欢或不需要使用扩展，你也可以使用一些其他本地服务器工具，比如 Node.js 自带的 http-server。
-
2.HTML学习
其实html也可以说是标签语言，语法基本都是标签的形式，大部分标签是成对出现的，如，标签中间是内容，当然也有部分标签是单独出现的，慢慢积累就行了，现在我们打开编辑器，创建一个文件，后缀为html，然后将如下的代码复制到创建的文件里，再运行到浏览器中，依次体会不同标签的作用，注意，代码应该复制到对应的地方哦，不懂的话可以看后面的示例
1.文档结构标签：
-
<html>: HTML文档的根元素。 -
<head>: 包含文档的元信息，如字符集、标题等。 -
<title>: 定义文档的标题，显示在浏览器标签上。 -
<body>: 包含文档的主体内容。( )
<!DOCTYPE html> <!-- 声明文档类型和HTML版本 --> <html lang="en"> <!-- 根元素，指定文档语言 --> <head> <!-- 包含文档的元信息，如字符集、标题等。 --> <meta charset="UTF-8"> <!-- 设置文档字符集为UTF-8 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置移动设备视口 --> <title>Your Page Title</title> <!-- 设置页面标题 --> </head> <body> <!-- 页面内容将在这里添加 --> </body> </html>
2.文本格式化标签：
-
<h1>到<h6>: 定义标题，h1是最高级别，h6是最低级别。 -
<p>: 定义段落。 -
<strong>或<b>: 定义粗体文本。 -
<em>或<i>: 定义斜体文本。 -
<span>: 内联元素，用于组合文档中的行内元素。<!-- 定义标题，h1 是最高级别，h6 是最低级别 --> <h1>This is a Heading 1</h1> <h2>This is a Heading 2</h2> <!-- 定义段落 --> <p>This is a paragraph.</p> <!-- 定义粗体文本 --> <strong>This is bold text.</strong> <!-- 定义斜体文本 --> <em>This is italic text.</em> <!-- 内联元素，用于组合文档中的行内元素 --> <span style="color: red;">This is a red span.</span>
3.列表标签：
-
<ul>: 定义无序列表。 -
<ol>: 定义有序列表。 -
<li>: 定义列表项。 -
<dl>: 定义描述列表。 -
<dt>: 描述列表中的项目术语。 -
<dd>: 描述列表中的项目描述。<!-- 定义无序列表 --> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <!-- 定义有序列表 --> <ol> <li>First Item</li> <li>Second Item</li> </ol> <!-- 定义描述列表 --> <dl> <dt>Term 1</dt> <dd>Description for Term 1</dd> <dt>Term 2</dt> <dd>Description for Term 2</dd> </dl>
4.表格标签：
-
<table>: 定义表格。 -
<tr>: 定义表格行。 -
<td>: 定义表格数据单元格。 -
<th>: 定义表头单元格。<!-- 定义表格 --> <table border="1"> <!-- 定义表格行 --> <tr> <!-- 定义表头单元格 --> <th>Header 1</th> <th>Header 2</th> </tr> <!-- 定义表格数据单元格 --> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>
5.表单标签：
-
<form>: 定义表单。 -
<input>: 定义输入字段。 -
<textarea>: 定义文本域。 -
<select>: 定义下拉列表。 -
<label>: 定义表单元素的标签。 -
<button>: 定义按钮。<!-- 定义表单 --> <form action="/submit" method="post"> <!-- 定义输入字段 --> <label for="username">Username:</label> <input type="text" id="username" name="username"> <br> <!-- 定义密码输入字段 --> <label for="password">Password:</label> <input type="password" id="password" name="password"> <br> <!-- 定义文本域 --> <label for="comments">Comments:</label> <textarea id="comments" name="comments"></textarea> <br> <!-- 定义下拉列表 --> <label for="options">Select an option:</label> <select id="options" name="options"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> <br> <!-- 定义按钮 --> <button type="submit">Submit</button> </form>
6.超链接和图像标签：
-
<a>: 定义超链接。 -
<img>: 定义图像。 -
<figure>: 定义媒体元素及其标题。 -
<figcaption>: 定义<figure>元素的标题。<!-- 定义超链接 --> <a href="https://www.example.com">Visit Example</a> <!-- 定义图像 --> <img src="image.jpg" alt="Description of the image"> <!-- 定义媒体元素及其标题 --> <figure> <img src="media.jpg" alt="Media Image"> <figcaption>Caption for the media</figcaption> </figure>
7.多媒体标签：
-
<audio>: 定义音频。 -
<video>: 定义视频。 -
<source>: 定义多媒体元素的源文件。<!-- 定义音频 --> <audio controls> <source src="audio.mp3" type="audio/mp3"> </audio> <!-- 定义视频 --> <video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> </video>
8.样式和格式标签：
-
<style>: 定义文档的样式信息。 -
<link>: 定义文档与外部资源的关系，通常用于引入样式表。 -
<meta>: 定义元数据，如字符集、关键字等。<!-- 定义文档的样式信息 --> <style> body { font-family: Arial, sans-serif; } </style> <!-- 定义文档与外部资源的关系，通常用于引入样式表 --> <link rel="stylesheet" href="styles.css"> <!-- 定义元数据，如字符集、关键字等 --> <meta charset="UTF-8"> <meta name="keywords" content="HTML, CSS, JavaScript">
9.分组标签：
-
<div>: 定义文档中的块级容器，用于组合其他HTML元素。 -
<span>: 定义文档中的内联容器，用于组合行内元素。<!-- 定义文档中的块级容器 --> <div> <p>This is inside a div.</p> </div> <!-- 定义文档中的内联容器 --> <span>This is inside a span.</span>
10.其他标签：
-
<br>: 插入换行符。 -
<hr>: 插入水平线。 -
<small>: 定义小号文本。 -
<sup>: 定义上标文本。 -
<sub>: 定义下标文本。常用HTML标签：<!-- 插入换行符 --> <p>This is a line of text.<br>This is a new line of text.</p> <!-- 插入水平线 --> <hr> <!-- 定义小号文本 --> <small>This is small text.</small> <!-- 定义上标文本 --> <p>This is <sup>superscript</sup> text.</p> <!-- 定义下标文本 --> <p>This is <sub>subscript</sub> text.</p>
简单的页面示例
<!DOCTYPE html> <!-- 定义文档类型和HTML版本 -->
<html lang="en"> <!-- 根元素，lang属性定义页面语言 -->
<head>
<meta charset="UTF-8"> <!-- 设置文档字符集为UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置移动设备视口 -->
<title>My First Web Page</title> <!-- 设置页面标题 -->
</head>
<body>
<header>
<h1>Hello, World!</h1> <!-- 标题元素，表示主标题 -->
<p>This is a simple HTML page.</p> <!-- 段落元素，表示文本段落 -->
</header>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li> <!-- 超链接元素，表示导航链接 -->
<li><a href="#section2">Section 2</a></li>
</ul>
</nav>
<section id="section1"> <!-- 区块元素，用于划分文档内容，id属性定义锚点 -->
<h2>Section 1</h2>
<p>This is the content of section 1.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>This is the content of section 2.</p>
</section>
<footer>
<p>© 2023 My Website. All Rights Reserved.</p> <!-- 特殊字符 © 表示版权符号 -->
</footer>
</body>
</html>
3.CSS学习
html可以说只是一个人的骨架，而css则是为这个人添加一个好看的皮囊，下次学习的js则是让这个人动起来
1. CSS基础概念：
-
选择器（Selectors）： 用于选择要样式化的HTML元素。
-
属性（Properties）： 控制元素的样式，如颜色、大小、边距等。
-
值（Values）： 指定属性的具体样式设置，如颜色值、尺寸值等。
/* 选择器、属性和值 */ h1 { color: blue; font-size: 24px; } /* 多个样式规则组成样式表 */ body { font-family: Arial, sans-serif; background-color: #f0f0f0; }
2. CSS样式规则：
-
样式规则由选择器、属性和值组成，形成
selector { property: value; }的结构。 -
多个样式规则可以组成样式表，可以内嵌在HTML文件中，也可以作为外部样式表链接到HTML文件中。
以下演示html文件加入css样式的2种方式
第一种，引入css文件
<head> <meta charset="UTF-8"> <!-- 引入公共样式的css 文件 --> <link rel="stylesheet" href="css/main.css"> <!-- 这个animate.js 必须写到 main.js的上面引入 --> <script src="js/animate.js"></script> <!-- 引入我们首页的js文件 --> <script src="js/main.js"></script> <title>主界面</title> </head>
第二种，添加css标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML with Inline CSS</title>
<!-- 在<head>中使用<style>标签嵌入CSS代码 -->
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
color: blue;
text-align: center;
}
.box {
width: 200px;
height: 100px;
background-color: #fff;
margin: 20px auto;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<div class="box">This is a box.</div>
</body>
</html>
3. 选择器的类型：
-
元素选择器（Element Selector）： 选择特定HTML元素。
-
类选择器（Class Selector）： 选择具有相同类名的元素。
-
ID选择器（ID Selector）： 选择具有唯一ID的元素。
-
属性选择器（Attribute Selector）： 选择具有特定属性的元素。
-
伪类和伪元素： 如
:hover、:nth-child、::before等，用于选择特定状态或元素。/* 元素选择器 */ p { text-align: center; } /* 类选择器 */ .my-class { font-weight: bold; } /* ID选择器 */ #my-id { color: red; } /* 属性选择器 */ input[type="text"] { border: 1px solid #ccc; } /* 伪类 */ a:hover { text-decoration: underline; }
4. CSS盒模型：
-
每个HTML元素都被看作是一个盒子，有内容框、内边距、边框和外边距组成。
-
控制盒模型的属性包括
width、height、padding、border、margin等。/* 控制盒模型的属性 */ .box { width: 200px; height: 100px; padding: 20px; border: 1px solid #000; margin: 10px; }
5. 布局和定位：
-
浮动（Float）： 将元素从正常的文档流中移动，允许文本和内联元素环绕它。
-
定位（Positioning）： 使用
position属性控制元素的定位方式，如相对定位、绝对定位等。 -
弹性盒子布局（Flexbox）： 通过
display: flex创建灵活的容器，方便进行水平和垂直布局。 -
网格布局（Grid）： 使用
display: grid创建二维网格布局，对元素进行定位。/* 浮动 */ .float-left { float: left; } /* 定位 */ .position-relative { position: relative; top: 10px; } /* 弹性盒子布局 */ .flex-container { display: flex; justify-content: space-between; } /* 网格布局 */ .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); }
6. 响应式设计：
-
利用媒体查询（Media Queries）来使网页适应不同的屏幕尺寸和设备。
-
使用相对单位（如百分比、em、rem）以及弹性盒子布局和网格布局来创建灵活的布局。
/* 媒体查询 */ @media screen and (max-width: 600px) { body { font-size: 14px; } }
7. CSS动画和过渡：
-
使用
@keyframes创建动画序列。 -
使用
transition属性实现简单的过渡效果。/* 关键帧动画 */ @keyframes slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } } /* 过渡 */ .transition-example { transition: width 0.3s ease-in-out; }
8. 字体和文本样式：
-
控制字体大小、颜色、样式等。
-
使用
line-height控制行高。 -
利用
text-align控制文本对齐。/* 控制字体和文本样式 */ .text-styling { font-size: 18px; color: #333; line-height: 1.5; text-align: justify; }
9. 颜色和背景：
-
使用颜色值（名称、十六进制、RGB）来定义颜色。
-
设置背景颜色和背景图像。
/* 颜色和背景 */ .bg-color { background-color: #e0e0e0; } .bg-image { background-image: url('background.jpg'); background-size: cover; }
10. CSS预处理器（选学）：
- 学习使用CSS预处理器，如Sass或Less，提高样式表的维护性和可复用性。
11. 工具和资源：
-
使用浏览器开发者工具进行样式调试。
-
利用在线资源和文档，如MDN Web Docs等，加深对CSS属性和用法的理解。
在浏览器中按F12，会如上图所示，你可以查看页面的元素，也可以查看浏览器向外发送的请求以及收到的回应等等
4.实践
本文档仅带你感受页面制作的大致流程，如若你真的对页面制作感兴趣，请一定要去学习更多的学习资料哦，黑马程序员html+css学习就有300集的视频，绝非一个文档可以囊括的哦
经过html和css的学习，相信你已经能够制作简单的静态界面了，接下来自己尝试一下吧，可以先规划一下自己打算做什么，建议初学者用一边用html一边用css，方便立刻查看自己写的是不是自己想要的效果。
快来制作你的页面吧！
预告：现在作的页面可能是不会动的，那是因为还没有学到高级的css语法和js，不要着急，下次的页面制作学习我们再进一步学习，让我们的页面动起来！
👇 代码写在代码块中
👇 页面截图放在引用框中
🔖 总结
在下面写下你对这次任务学习到的知识的总结
扫一扫
6259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
