年一度的中秋节马上就到啦，小伙伴们收到月饼了吗。

记得我的学生时代，邮件祝福还风靡过一段时间，打开QQ邮箱，各种转发邮件和祝福邮件，现在想想都觉得有点久远了。
相信小伙伴们也都用过群发邮件的功能，例如QQ邮箱，163邮箱等都有提供这种功能，直接发送或者密送都可以。但都会存在一个问题，就是一键发送时，邮件内容都是一样的，无法针对收件人而有个性化的称呼。针对这个需求，我们可以做一个群发邮件的桌面端软件。

我们首先整理下我们需要实现的最简单的功能：

• 可以输入并记住账号和密码
• 可以导入收件人信息
• 可以自由选择收件人
• 邮件内容可以针对收件人进行个性化修改，可以输入邮件标题，可以附带图片
• 有发送邮件的功能

需求整理完成，说干就干。

布局

首先新建一个窗体，定义为MainForm。将MainForm的初始状态修改为一打开就最大化。

this.WindowState = FormWindowState.Maximized;

我们可以用GroupBox将Mainform划分为三部分，“登录信息”，“收件人信息”，还有“邮件内容”，如图：

Tips：因为我们默认窗口最大化，所以我们需要先设置三个GroupBox的Anchor属性，依次分别为“Top,Bottom,Left”，“Top,Bottom,Left”和“Top,Bottom,Left,Right”。这样GroupBox就会随窗口大小变化而不至于打乱布局。

控件

划分布局之后，在每一个GroupBox中增加我们需要的控件。

“登录信息”：

两个Label(标注“账号”与“密码”)；

两个TextBox(用来输入账号与密码)；

两个CheckBox(一个用来记住账户密码，一个用来隐藏密码)。

用TextBox输入密码时，我们可以设置TextBox的UseSystemPasswordChar属性为True，则我们输入的文字都会以密文显示。与CheckBox联动，默认勾选CheckBox时，密码以符号显示，不勾选CheckBox时，密码以明文显示。

代码如下：

private void cbShowPwd_CheckedChanged(object sender, EventArgs e)
 {
       if (this.cbShowPwd.Checked == true)
            {
                this.tbPassword.UseSystemPasswordChar = false;
                
            }
            else
            {
                this.tbPassword.UseSystemPasswordChar = true;
            }
}

实际效果如图：

记住账户与密码涉及本地存储，我们后面具体写代码时再来实现这个功能，先按住不提。

“收件人信息”：

一个CheckBox(全选功能)；

一个CheckListBox(用来显示导入的收件人信息)；

两个Button(一个用来导入文件，一个用来确认选择收件人)；

一个Label(用来显示已选择的收件人数量)。

关于CheckListBox的相关设置与全选功能具体可以查看我的上一篇文章（「Winform开发小技巧05」批量操作单号-CheckListBox）

全选功能代码：

private void cbSelectAll_CheckedChanged(object sender, EventArgs e)
 {
   //全选功能
            if (this.cbSelectAll.Checked)
            {
                for (int i = 0; i < this.clbReceivers.Items.Count; i++)
                {
                    if (!this.clbReceivers.GetItemChecked(i))
                        this.clbReceivers.SetItemChecked(i,true);
                }
            }
            else
            {
                for (int i = 0; i < this.clbReceivers.Items.Count; i++)
                {
                    if (this.clbReceivers.GetItemChecked(i))
                        this.clbReceivers.SetItemChecked(i, false);
                }
            }
}

这里的操作逻辑是：点击Button导入收件人=>CheckListBox显示收件人=>全选=>Label显示已选人数=>点击Button确认选择，收件人数据传输到下一个部分“邮件内容”。

导入功能我们可以写一个方法，这里先暂时不写。

我们可以先解决Label的显示问题。Label显示选择人数时，需要根据CheckListBox中Item的实时勾选状态进行变化，这个比较有趣，我们可以在CheckListBox的Itemcheck事件中实现。

代码如下：

private void clbReceivers_ItemCheck(object sender, ItemCheckEventArgs e)
 {
            //这个事件是指示某项的选中状态将要被更改、在更改前会执行这个事件
            //所以checkedListBox.CheckedItems.Count获取的是更改之前的值           
            if (e.NewValue == CheckState.Checked)
            {

                this.lbSelectedCount.Text = "已选："+(this.clbReceivers.CheckedItems.Count + 1).ToString();

            }
            else
            {
                this.lbSelectedCount.Text = "已选：" + (this.clbReceivers.CheckedItems.Count - 1).ToString();

            }
}

实际效果如图：(因为还没有数据，为了展示效果，我先手动输入一些数据)

“邮件内容”：

两个Label；

两个TextBox(一个用来显示收件人，一个用来输入标题，显示收件人我们可以将其MultiLine属性设置为True,这样可以多行显示)；

一个RichTextBox(用来输入正文内容，后期我们用Html来发送文件，RichTextBox方便我们输入段落及图片)；

一个Button(用来确认发送邮件)。

效果如图：

至此，我们的布局就全部完成了！

但是大家又没有发现一个问题，由于Winfrom界面缩放问题，我们生成的界面有点模糊，很难看，针对这个问题，微软有专门的解决方案。

首先右键项目=>添加新建项=>添加应用程序清单文件。

打开app.manifest文件，取消application节点注释

打开App.config文件，添加节点EnableWindowsFormsHighDpiAutoResizing，值为true

此时我们重新按F5进行编译，可以发现界面分辨率正常了，瞬间好看不少有没有。

下篇文章，我们就开始正式编码了，或许可以赶上中秋给大家拜个晚年了，哈哈哈

如果各位觉得我写的对你有那么一点点帮助，欢迎一键三连~感激不尽~

什么学习网页制作？

互联网时代的今天，各种各样的网页充斥着我们的生活。只要使用浏览器，打开的每一个页面都可以称之为网页。即使使用头条这样的APP，其内容布局、展示的方法也脱胎于网页页面设计的方法与原则。可以说页面的概念已经遍布我们的信息化世界。

作为芸芸众生中的一员，学习网页制作对我们的事业、生活有怎样的帮助呢？

第一，学习网页制作有助于理解网络信息的传播运行机制，即使通过本课程不能全面了解这些核心机制，也能为大家铺垫下继续深入学习的知识基础。即使自己不必亲自制作网页，在使用第三方工具时，比如微信公众号、微信小程序或者其他自动网页或网站生成工具时也会比没有基础的人更快的掌握这些工具。

第二，学好网页制作是制作网站的基础，如果您因为事业需要或者个人爱好打算制作自己的网站或博客，无论是打算使用php还是Java还是Python去构建您的网站，精通网页制作技术是您的第一块技术基石。

第三，如果您打算学习网络爬虫来分析一些网络数据，了解网页页面构成也是必要基础，至少您要知道一个网页页面中每个标签中对应的是哪些信息，才能有的放矢拿到自己想要的信息。

第四，如果您想学习编程，但是缺少相应的基础知识，看不懂复杂的C语言教学，那么从网页制作入手尝试理解编程的语法也是一个很不错的选择。

除此之外，浏览器可以做的事情越来越多，比如webgl的出现，可以让我们通过浏览器构建3d世界，无论是虚拟现实（VR）还是增强现实（AR）都有很多开源免费的解决方案。TensorFlow的JavaScript版本的出现，让我们可以通过结合浏览器学习使用人工智能技术，且非常容易实现。

所以，新的一年里，我打算做网页制作的学习教程，让更多没有基础却对网络技术感兴趣的小伙伴能加入进来。

制作网页需要学习哪些技术？

简单来说学习网页制作需要掌握三门技术。

第一，也是最基础最核心的内容是HTML超文本标记语言。大家不必纠结HTML到底是什么，但是一定要记住它能干什么。HTML通俗来说可以比喻成容器。大家试想，网页里都有哪些内容呢？

一般网页中都会有文字、图片、声音、视频、表格等内容，这些内容就是靠HTML中的标签添加进页面的。

所以说HTML这个工具就是个容器，我们使用HTML标签语言为网页添加所有需要的信息内容。

第二，CSS层叠样式表，这是一个用来装饰页面的工具。如果说HTML是个信息容器，那么如何让这些信息条理清晰的显示出来呢？那就需要CSS来帮忙了。如下图所示，这是一个最简单的页面，只用到了HTML，里面装了一个标题和一个只有六个字的段落。

为了让这个页面看起来美观些，我们为其添加css样式表。添加后如图所示：

我们可以看出来，CSS让标题文字换了颜色，也居中显示了，背景也变成了蓝色。

第三，JavaScript，这个工具相比HTML和CSS来讲是最难学习的，学习JavaScript就是在学习编程了。它虽然只是个脚本语言，但是用到的知识和其他编程语言相差不大。

那JavaScript能干什么呢？

首先，它能为页面中添加很多交互效果。举个例子，我们常见的图片翻页、轮播很多就是基于JavaScript脚本实现的。

其次，JavaScript可以为传统页面扩展出很多新功能，例如结合three.js我们可以很容易的在页面中构建三维空间，或者实现一些3d游戏或其他三维动态演示效果。举个例子（https://renaultespace.littleworkshop.fr/），打开可能略慢。3d展示的汽车广告是不是很酷！

再次，JavaScript可以以网页为基础，实现各种各样的在线小游戏，例如Phaser.js就是目前非常火的一个开源免费网页游戏制作库。phaser官网：http://phaser.io/

JavaScript为网页的功能拓展提供了很多可能性，无论是3d显示还是游戏制作还是未来的人工智能工具，都是由JavaScript都为大家提供了将功能引入到页面的接口，这也是学习难度比较大的原因。不过只要坚持下去一定能学通的！

网站与网页的区别？

网页是指我们看到的单个页面。这些页面分为静态页面和动态页面两种。静态页面指的是不能与服务器进行数据交互的页面，顾名思义动态页面指的是可以与服务器进行数据交互的页面，这一点大家不必纠结。

简单来说，静态页面写好后什么样就是什么样，谁打开都是事先编辑好的内容，而动态页面写好后会随着不同的访问变换不同数据，动态页面更像是一个页面模板，随时套用不同信息。

大部分网站中的页面都是动态页面。

如果使用静态页面做网站会出现什么问题呢？如果您有300篇博客文章，那您就要做300个静态页面来显示，大型资讯网站信息量更加庞大，如果都用静态页面来做，占用的服务器空间也是庞大到不可想象。

网站中的动态页面就解决了这个问题，例如一个简单的网站我们只需一个主页、文章页、搜索页基本上就可以了，这些页面中没有具体内容，我们称之为模板。当您打开后，显示的内容都是在数据库中调出的。这样，一个数据库用来存储压缩过的精简信息，这些信息通过不同页面模板显示在用户面前就成为网站的基本运行模式。

例如在静态页面中显示文字字数的代码是这样

<p>300字</p>

如果使用以php编写的WordPress网站框架来动态显示文章字数就是这样

<p><?php echo zm_count_words($text); ?></p>

<?php echo zm_count_words($text); ?>这条语句可以调取数据库中文章字数的记录并显示出来。这也我们通过这一条语句就可以显示不同文章的字数了。

无论是静态页面还是动态页面，他们的核心内容都是一样的，HTML，CSS，JavaScript都是必修知识。只是静态页面在HTML中插入信息，而动态页面插入的是调取数据库信息的语句。

因此，我们这个教程看起来是在做静态页面，但是我们学习的也是制作网站的基础知识。

本教学学完能干什么？

第一，可以写出静态页面。

第二，有能力读懂他人写好的页面代码。

第三，为继续深入学习网站制作或更为炫酷的页面制作打下基础。

第四，掌握编程基础，至少是基于JavaScript的。

我是大鱼，致力于数字艺术技术分享！欢迎大家关注！祝愿大家2020年学有所成！

HTML学习目录

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

天是女神节，也就是国际妇女节（International Women's Day，简写IWD）全称“联合国妇女权益和国际和平日”（United Nations women's rights and international peace day），在中国又称“国际劳动妇女节”、“三八节”和“三八妇女节”。

作为一名集万千技能于一身的程序员，你准备以什么样的方式为她送上节日的祝福呢？在这个女神专属的节日里，如果只是和大多数人一样肆无忌惮的 买！买！买！吃！吃！吃！的话，就太没有新意了，这怎么能在朋友圈晒图大赛里脱颖而出呢？

作为程序员，你的技能不仅仅只是用来谋生的，也可以为你的生活增添一份情趣。W3Cschool小师妹为同学们准备了一份女神祝福源码，可以直接抄作业哦。

我们直接看效果图

效果图

话不多说，直接上源码：

源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>女神节快乐 | w3cschool.cn</title>
    <style>
        body {
            background-color: rgb(250,227,221);
            font-family: Source Han Sans CN, Source Han Serif SE;
        }
        h1 {
            text-align: center;
            color:pink;
            }
            img {
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
            p {
                text-align: center;
                font-size:20px;
                color: rgb(200,0,0);
            }
    </style>
</head>
<body>
    <h1>38女神节快乐！</h1>
    <img src="https://atts.w3cschool.cn/attachments/image/20230308/1678258787377870.gif" alt="女神节" width="300" height="300">
    <p>你是最美最棒的女程序员！</p>
    <p>愿你每天都开心❤幸福！</p>
</body>
</html>

使用方法：

1. 首先在桌面上新建一个文本文档
2. 修改文件名为女神节快乐
3. 双击打开文档，将上面代码完整复制粘贴进文档里
4. Ctrl+S保存文档，然后关闭文档
5. 修改后缀为.html
6. 用浏览器打开
7. 大功告成

说明

• <img src="可以替换为你女神的照片" alt="女神节" width="300" height="300">

• <p>可以替换为你想对女神说的祝福</p>
• 以上用到的都是简单的HTML+CSS的基础知识，哪怕你只是编程小白，也只要在编程狮上花2个小时就能学会。

最后

不得不说的是现在“三八妇女节”普遍被称为“女神节”、“女王节”是因为很多女性反感自己被叫作妇女，毕竟还年轻着。显然，这是很多人对“妇女”的误解。我们来看看这两个字的意思：

妇者，指已婚女子；

女者，未婚女子也。

因此“妇女”一词，内涵广泛，泛指女性，绝无贬低人的意思。这个节日得来不易，让妇女节保持初心，是对妇女最好的问候与致敬。

最后W3Cschool小师妹要说的是，再花哨的表白方式都不如长久的陪伴。三八女神节，不妨考虑早一点下班，毕竟钱是赚不够，工作是干不完的。一辈子时间就那么长，不妨多留些时间给自己和自己的亲人吧。