HTML（超文本标记语言，Hypertext Markup Language）和（层叠样式表，Cascading Style Sheets）是最基本的网页开发技术，也是网页文件最基础的组成代码，本文将讨论HTML与CSS的基本概念和应用。
HTML代码为文本格式，其文档也保存为文本文件，文档结构与内容由各种元素和文本内容定义，并在客户端（浏览器）解释和呈现内容。一般来讲，HTML文档使用.htm或.html扩展名。此外，在Web项目中采集一致的编码标准是非常重要的，包括网页文件、数据库等组成部分，本合集的HTML文档和CSS文档均采用UTF-8编码。
HTML中的元素由标记（tag）定义，按标记数量分为单标记元素和双标记元素。
单标记元素只有一个标记，使用一对尖括号定义，如<br>、<hr>标记等。在标记中可以使用元素属性，每个属性前使用空格与前面的内容分隔，稍后讨论元素属性的定义。请注意，XHTML标准中，单标记元素也需要结束标识，此时会在>符号前添加/符号，如<br>和<br />都表示一个换行标记，其中，<br>是HTML标准标记，<br />是XHTML标准标记。
双标记元素包括开始标记和结束标记，也称为打开标记和关闭标记。其中，开始标记使用一对尖括号定义，同样可以定义元素的属性；结束标记的格式为</元素名>，如段落元素就使用<p>和</p>标记定义，其中，<p>为开始标记，</p>为结束标记。双标记元素中还可以嵌套其它元素，如<p>X<sup>2</sup></p>显示为X2，其中的sup元素就是嵌套在p元素中的一个子元素，p元素称为sup元素的容器元素或父元素、上级元素，而X和2则为显示的文本内容。
HTML5标准中，元素的属性按格式也分为两类，一种是通过属性名和属性值定义，如id="element1"，在等号的左侧是属性名，等号的右侧是属性值，属性值可以使用一对双引号定义，也可以使用一对单引号定义。另一种属性则直接通过属性名定义，不需要属性值，如disabled、required等。
打开示例网站，在根目录下创建demo目录，然后在此目录添加test.html文件，文件类型如下图所示。
下面是test.html文档的默认代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>
首先是<!DOCTYPE html>，这是HTML5文档的标准声明。接下来的页面元素结构如下图所示。
这里，html为根元素，其中包括两个子元素，head元素定义了页面的头部信息，如meta元素中定义了页面的字符集（charset）使用“utf-8”标准，title元素定义此页面在浏览器标题栏或页标签上显示的内容。body元素定义了页面的主体部分，也就是在浏览器中呈现的页面内容。接下来，修改test.html文档内容如下。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>测试页</title> </head> <body> <h1>测试页内容</h1> </body> </html>
点击Visual Studio 2019工具栏中的运行按钮或使用键盘F5键（或Ctrl+F5）运行网站，此时会启动IIS Express服务并打开当前页面，显示结果如下图所示（Chrome浏览器）。
请注意，虽然HTML5标准并不需要显式的定义页面结构，但在学习和实际应用中，明确的文档结构可以提高代码的可读性和可维护性。
页面中，可视元素的基本形状是矩形，在整个文档流中会有不同的显示方式，这里先来了解两种基本的元素——块（block）元素和内联（inline）元素。
内联元素的特点是：元素内容会在一“行”显示，当内容到达容器的宽度时会自动换行。通用的内联类型是span元素，下面的代码演示了span元素的显示效果。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>内联元素</title> </head> <body> <span>Excel与数据处理系列文章包含了电子表格软件应用和数据处理工具全流程。</span> <span>其中，工具方面主要使用Excel，</span> <span>但大部分功能可以在WPS表格、Number、OpenOffice等软件中使用</span> </body> </html>
页面显示效果如下图所示，可以看到span元素的内容都显示在一行，到达浏览器宽度时自动换行。
块元素比较多，如div元素、p元素等；块元素的特点是：每个块元素都会对齐容器的左侧，即每个块元素都从新的一“行”开始。下面的代码会使用div元素定义前面示例中的内容。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>块元素</title> </head> <body> <div>Excel与数据处理系列文章包含了电子表格软件应用和数据处理工具全流程。</div> <div>其中，工具方面主要使用Excel，</div> <div>但大部分功能可以在WPS表格、Number、OpenOffice等软件中使用</div> </body> </html>
页面显示效果如下图所示，其中，每个div元素都会在新的一“行”中显示，也就是从容器的左侧开始显示。
CSS的本质是通过属性将样式应用到页面元素中，从而覆盖元素的默认样式，包括元素的位置、尺寸、颜色等效果。
将CSS属性应用到页面元素有三种基本的方法。首先，可以在元素标记中使用style属性指定，这种方法只会设置当前元素的样式，在样式不需要重复时使用。如下面的代码会指定h1元素的文本显示为红色。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>style属性</title> </head> <body> <h1 style="color:red;">标题一</h1> </body> </html>
在style属性值中，CSS属性同样分为属性名和属性值，它们使用冒号分隔（:），并使用分号（;）作为一个CSS属性的结束。本例使用color属性指定颜色为红色（red），页面显示效果如下图所示。
第二种应用CSS属性的方式是在style元素中指定应用的元素和样式属性，如下面的代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>style元素</title> <style> h1 { color:red; } </style> </head> <body> <h1>标题一</h1> </body> </html>
style元素一般定义在head元素中，其中可以定义本页面使用的CSS样式。本例，style元素中的h1表示一个元素选择器（selector），指定h1元素应用的样式；下一篇文章会介绍更多的CSS选择器类型。选择器后使用一对花括号定义CSS属性，每个属性同样使用冒号（:）分隔属性名和属性值，并使用分号（;）结束。本例，页面中的h1元素文本同样会显示为红色。
第三种应用CSS样式的方法，也是大型网站项目常用的方法，会将CSS定义在独立的文件中，然后在需要的页面中使用link元素引用这些文件。CSS文件一般使用.css扩展名，在/demo目录中创建test.css文件，文件类型如下图所示。
接下来，修改/demo/test.css文件内容如下。
h1 { color:red; }
下面的代码，在/demo/test.html页面中引用/demo/test.css样式表文件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>引用样式表文件</title> <link rel="stylesheet" href="test.css" /> </head> <body> <h1>标题一</h1> </body> </html>
代码中，在head元素中使用link元素引用了test.css文件，实际上，link元素最常用的功能就是引用样式表文件。link元素中，rel属性设置为stylesheet，href属性用于指定引用文件的位置，这里使用了文件名，此时会在页面同目录的位置查找此文件，如果使用网站中的绝对路径，可以将href属性值修改为“/demo/test.css”，即在网站根目录下的demo目录中查找test.css文件。运行网站，页面中的h1元素文本同样会显示为红色。
在style元素中，还可以在定义其它样式之前使用@import指令导入CSS样式表文件，如下面的代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> @import url(/demo/test.css); h2 {color:blue;} </style> </head> <body> <h1>标题一</h1> <h2>标题二</h2> </body> </html>
本例，在@import指令中使用url()函数指定样式表的路径。页面显示效果如下图所示。
下面做个小测试，保持test.css文件内容不变，然后，修改test.html文件内容如下。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>显示什么颜色？</title> <link rel="stylesheet" href="test.css" /> <style> h1{ color:blue; } </style> </head> <body> <h1 style="color:green;">标题一</h1> </body> </html>
本例，使用link元素引用的test.css文件中将h1设置为红色（red），style元素中将h1元素设置为蓝色（blue），而h1元素中使用style属性设置颜色为绿色（green）；那么，此h1元素最终显示什么颜色呢？
答案是：绿色（green）。如果一个元素多次设置了相同的样式属性，则会应用与元素最近的属性值，本例就是元素中使用style属性设置的绿色。如果将h1元素中的style属性删除，则显示为蓝色，即本页面使用style元素定义的属性值，将style元素也删除，则显示样式表文件中设置的红色。总的来说，元素应用样式的顺序就是：style属性>>style元素>>引用样式表文件>>默认样式。
改变元素的默认颜色时，除了可以直接使用颜色名称，还可以使用RGB颜色或HSL颜色，下面分别介绍。
RGB颜色由红色（red）、绿色（green）和蓝色（blue）值组成，可以使用rgb()或rgba()函数指定，也可以使用十六进制的数值指定。其中，rgb()函数需要三个参数，每个参数取值为0到255，分别指定红色（red）、绿色（green）和蓝色（blue）的值，而rgba()函数在这三个参数后添加了不透明度，取值为0（完全透明）到1（完全不透明）之间。如“color:rgb(255,0,0);”表示红色、“color:rgba(255,0,0,0.5);”表示半透明的红色。
使用十六进制值指定RGB颜色时，数值使用#号开始，每2位指定一个颜色值，取值从00到FF（十进制0到255）；如“color:#FF0000;”或“color:#ff0000;”同样是将颜色设置为红色。此外，如果三种颜色的两位数值都分别相同，也可以只取其中一位，如“color:#F00;”是红色、“color:#0F0”是绿色、“color:#000;”是黑色、“color:#FFF;”是白色等。
HSL（Hue-Staturation-Lightness）颜色由色轮中的角度、饱和度和亮度值确定颜色，hsl()函数中，参数一使用角度值（单位deg），参数二和参数三使用百分数指定饱和度和亮度；hsla()函数在角度、饱和度和亮度值之后，使用第四个参数指定不透明度，取值同样是0（完全透明）到1（完全不透明）之间。
此外，还可以opacity属性单独设置不透明度，同样是0表示完全透明，1表示完全不透明。
基本的颜色名称和调色功能可以参考http://caohuayu.com/tool/Color.aspx。
更多的命名颜色及显示效果可以参考http://caohuayu.com/tool/NamedColor.aspx，其中包含140个命名颜色，可以按英文名称查询使用。
页面元素的基本形状是矩形，包括宽度（width）和高度（height）两个方向，元素的完整尺寸从内到外又包括元素内容（content）、内缩进（padding）、边框（border）、外边距（margin），其结构如下图所示。
如图中所示，元素的完整宽度应该是：左外边距+左边框+左内缩进+元素内容宽度+右内缩进+右边框+右外边距。而元素的完整高度应该是：上外边距+上边框+上内缩进+元素内容高度+下内缩进+下边框+下外边距。在实际应用中可以看到，很多元素的内缩进、边框和外边距默认尺寸都是0；页面布局中，两个元素的边距还有可能重合，在后续内容中会看到更多应用。
页面中，元素的尺寸单位有绝对单位和相对单位两种。常用的绝对单位是px（像素）；而常用的相对单位有em和rem，或者使用百分数，如50%。
需要注意的，不同的显示设备中，像素的呈现效果可能是不同的，所以，页面效果是否能够达到设计要求，需要在不同分辨率的设备进行测试。
em单位是相对于元素当前字体尺寸的比例，如2em就是2倍尺寸，如下面的代码显示了em单位的应用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>em单位演示</title> <link rel="stylesheet" href="test.css" /> </head> <body> Excel与数据处理 <span style="font-size:1em;">系列文章</span> 包含了 <span style="font-size:2em;">电子表格软件应用和数据处理工具</span>全流程。 </body> </html>
本例，CSS样式中使用了font-size属性设置字体尺寸，两个span元素的字体分别设置为1em和2em，页面显示效果如下图所示。
rem单位是相对于根元素（html元素）字体尺寸的比例，下面的代码演示了em和rem单位的区别。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>rem和em单位演示</title> <link rel="stylesheet" href="test.css" /> </head> <body> <div style="font-size:32px;"> 32像素文本 <div style="font-size:2em;"> 2em文本 </div> <div style="font-size:2rem;"> 2rem文本 </div> </div> </body> </html>
本例，在body元素中定义了div元素，其字体尺寸定义为32像素，另外2个div元素都是此元素的子元素，第一个“2em文本”字体定义为2em，也就是32像素的2倍；第二个“2rem文本”则是相对于html元素字体尺寸的2倍。页面显示效果如下图所示。
使用CSS样式设置元素内容的尺寸时，width和height属性分别设置宽度和高度。边框可以设置宽度、风格和颜色，可以分别使用border-width、border-style、border-color属性设置，也可以通过border同时设置，如下面的代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="test.css" /> </head> <body> <div style="width:300px;height:200px;border:10px solid red;"> </div> </body> </html>
代码中，将div的宽度设置为300像素，高度设置为200像素，边框宽度10像素，显示为实线（solid）和红色（red）。页面显示效果如下图所示。
分别设置四个方向的边框时可以使用border-top（上）、border-bottom（下）、border-left（左）、border-right（右）属性。各方向边框的宽度、风格、颜色也可以分别设置，如上边框可以使用border-top-width、border-top-style、border-top-color属性，其它方向的属性名类似。
下面是常用的边框线条风格属性值：
内缩进与外边距只需要设置尺寸，同时设置四个方向的内缩进时使用padding属性，属性值使用四个参数时分别指定上、右、下、左缩进尺寸；使用三个参数时分别指定上、右、下缩进尺寸，左缩进与右缩进尺寸相同 ；使用两个参数时，第一个参数设置上和下的缩进尺寸，第二个参数设置左和右的缩进尺寸；使用一个参数时同时指定四个方向的缩进尺寸。下面的代码演示了缩进效果的应用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="test.css" /> </head> <body> <div style="border:1px solid red;"> 测试区域一 </div> <div style="border: 1px solid blue;padding: 1em;"> 测试区域二 </div> </body> </html>
代码中，测试区域一显示为红色边框，测试区域二显示为蓝色边框，并且内缩进设置为1em，即一个字的距离；页面显示效果如下图所示。
分别设置四个方向的内缩进时可以使用padding-top、padding-right、padding-bottom和padding-left属性。
外边距的设置与内缩进相似，同时设置四个方向的外边距时使用margin属性，使用四个参数时分别指定上、右、下、左边距尺寸；使用三个参数时分别是上、右、下边距尺寸，此时，左边距与右边距相同；使用两个参数时，第一个参数指定上、下边距尺寸，第二个参数指定左、右边距尺寸；使用一个参数时同时指定四个方向的边距尺寸。分别设置四个方向的外边距时可以使用margin-top、margin-right、margin-bottom和margin-right属性。
下面的代码演示了外边距重叠的情况。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="test.css" /> </head> <body> <div style="border:1px solid red;margin-bottom:1em;"> 测试区域一 </div> <div style="border: 1px solid blue;margin-top:2em;"> 测试区域二 </div> </body> </html>
本例，测试区域一下边距设置为1em，测试区域二上边距设置为2em，但它们上下的距离并不是3em，而是取较大值2em，页面显示效果如下图所示。
margin还有一个很实用的用法，可以将块元素定位在容器的中间位置，如下面的代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="test.css" /> </head> <body> <div style="width:300px;height:100px;border:1px solid red;margin:0px auto;"> 测试区域 </div> </body> </html>
本例，测试区域的margin属性值设置为“0 auto”，此时区域距离容器顶部为0像素，水平方向居中对齐，页面显示效果如下图所示。