【佚之狗】个人站长速成指南（第二版）

金刚光 2019-08-20

展开全文

本文旨在用最短的时间和最少的学习量达到零基础建站并尽可能完整了解整体概念的目的，会尽量使用简化概要的描述和介绍。由于高度简化表述，本文内容可能会不够规范甚至不准确，专有名词和术语保留了英文缩写，具体定义和解释还需要读者自行查阅百科资料。

本文配套视频教程地址：http://ab./z9Rb2

第一部分：术语和常识

必须了解的术语和概念：

网站离不开网页，目前的主流网页使用超文本标记语言（HTML）。网页上的每一个元素使用一个特定的标签表示，例如<title>yhhtech</title>表示网站的标题（也就是显示在浏览器顶端的标题）是“yhhtech”；<img src=”http:///ML128.jpg” alt=”这里写图片的信息，一般是用于图片加载不出来时显示的文字” width=”64px” />表示的是一个图像元素，其中，src、alt、width等为属性。src表示资源文件所在的位置，一般使用绝对位置（URL）来定位，如果这个资源在本站的文件夹内的话也可以使用相对路径。用相对路径和用绝对路径没有具体的要求，以具体情况方便操作就行。一般来说标签必须成对出现、标签内的参数可以不指定（可以在网页加载之后根据需要用脚本来修改需要的属性，比如图片的异步加载及切换等）。虽然主流浏览器在加载页面时都会自动关闭标签，即使标签不成对出现也能显示网页，但很容易造成错误，而且不符合规范。没有内容的标签或者没法成对的标签可直接使用“/>”来关闭，如<img />、<br />（<br />表示换行，部分特别的标签在HTML4.01、HTML5、XHTML上有差异，需要注意）。

客户端用浏览器等方式向服务器请求一个网页后，无论在服务器上的原始页面是什么形式的，发送到客户端的一定是HTML文件（用户也可以直接通过HTTP向服务器请求图像和压缩包等文件），HTML文件内可包含样式表（CSS）和JavaScript（JS，一种脚本语言，脚本语言是解释型的，与C语言等编译型语言对应，会由浏览器的解释器一条条解释运行）。浏览器加载了HTML写的网页之后会生成文档对象模型（DOM），每一个标签会按照嵌套层级形成DOM树。DOM提供了供JS的应用程序接口（API）。开发者编写的JS会被原样地发送给客户端浏览器，浏览器的JS解释器执行并实时更改当前的页面。使用JS使得用户可以在本地与网页互动的网页称为动态HTML，但不属于动态页面（动态页面一定是指由服务器生成结果的页面。动态页面内不一定有会变化的内容，但每次访问时内容都是由服务器根据设定的变量或常量临时生成的。值得注意的是URL的后缀不一定能确定网页的类型，.html的后缀也可能是动态页面在服务器端的插件如url重写服务等应用转换的）。

使用PHP（Professional Hypertext Preprocessor，超文本预处理器，一种适用于博客论坛等web运用的服务器端脚本语言）、VB、Python、Java等语言编写的，可以根据数据库或其他服务器上数据来输出HTML的页面文件属于动态页面（可以参考“CGI编程”），对于大多数运用场景，使用Apache+PHP+MySQL是较为高效便捷且可靠的方案，而且PHP、MySQL的社区版和Apache都是开源的，开源对于个人开发者来说最大的好处就是免费，可以放心地用于一般的非直接商业情景；同时开源社区也有大量的交流讨论，对自身的学习进步也很有帮助。（狗狗建议没有接触过Linux的初学者在Windows上使用IIS+PHP+MySQL，毕竟Windows的图形界面和操作方式更加友好，不容易产生畏难心理。）

网站不一定非要用动态网页，某个页面是否需要到动态技术取决于该页面是否需要与用户交互。如果只是单纯地展示固有的或者不需要实时更新的内容，那么使用静态页面较为合理，就比如很多商品的介绍页之类的H5（所谓的H5在圈内一般特指充分使用了HTML5的canvas+js等功能来做类似幻灯片效果的页面）页面，更适合使用静态页面。但如果需要有用户系统（用户登录、积分等级、留言评论等）的话，那就应考虑用动态页面（虽然在静态页面使用如AJAX等的异步加载和表单技术也可以实现部分要求）。动态页面，与用户交互，说简单点也就是把用户的数据存到服务器、在服务器上取用户需要的页面并发送给用户，针对这些数据，使用数据库（database，DB）是最合适的，因为数据库管理信息的效率更高且更安全可靠，此外符合规范的数据库都支持SQL（Structured Query Language，结构化查询语言），使用SQL可以方便地从数据库筛选查询内容以及修改数据库中的结构和内容，以便对信息资源的维护和利用（例如通过SQL来做大数据和数据挖掘）。

.PHP、.ASP、.JSP等文件也可以简单地理解成是在普通的HTML文件中插入相应服务器端脚本语言的代码块（代码块的定界符通常形如<? ?>），这部分HTML内容就由这部分脚本产生，在脚本运行结束后输出相应的HTML到页面中这部分代码所在的区域。PHP自带用于MySQL的函数，在PHP页面中先使用连接MySQL服务器的函数，然后即可执行SQL命令。

服务器搭建完成后应先在本地对自己网站中所有的页面和功能进行调试，确认无误后再绑定域名进行发布。如果服务器在大陆境内还需要在发布网站之前进行域名备案（ICP备案）以及公网安备案，服务器不在大陆的可以不用备案。但无论是否需要ICP备案，在申请域名时都需要实名认证。

网站开发大致流程：

确定目标需求并设计方案

首先应该明确任务目标：是为了学习还是为了解决一个当务之急、都有哪些方案可以解决问题。就比如，目的是项目宣传，那么就可以考虑做个宣传网站并把网址印在宣传册上。而演讲和发布介绍等情况更适合做PPT，应该根据具体情况具体分析。

确定一个适当的手段后再考虑后续步骤，这里假定确定使用网站的方式。

搭建服务器/安装服务程序

需要向互联网发布的信息必须要有信息的载体，互联网用户可以通过某些方式来访问这些信息，这个载体可以称为服务器，在这里的方式通常就是HTTP（超文本传输协议）。服务器通常是用运行Windows或者Linux等网络操作系统的计算机，也就是说个人笔记本电脑也可以作为网站服务器。

无论是静态网页、动态网页还是其他文件，在互联网用户访问一个地址时，浏览器会发送请求到服务器，这时必须有一个程序来响应这些请求，把页面或者相应的数据传输给用户。为了传输这些数据，必须要用传输协议，传输协议规定服务器和客户端如何收发和处理这些数据，在web应用中最基础的协议就是HTTP（以及在HTTP基础上更安全的HTTPS）。有非常多现成的支持HTTP的响应程序，如Windows自带的IIS以及开源的Apache。Apache服务器程序几乎可以在任何网络操作系统上提供web服务。不过，在简单的应用场合上不如IIS易用，IIS安装第三方功能也更加方便一些。作为个人开发者，为了方便省事，推荐在Windows环境上搭建自己的个人网站。应根据实际情况选择适合自己的方案。

Windows系统提供可选安装的IIS服务器，在控制面板里可以勾选安装；常见Linux发行版本的运营商都有提供相应的Apache软件包，直接安装即可。

如下图是在WindowsServer2016上以完成IIS安装的情况：

（在“服务器管理器”中点击“管理”，选择“添加角色和功能”根据向导，如上图所示添加IIS。详见百度经验，这里不再赘述）

如下图是在Windows10上完成IIS安装的情况，与WindowsServer差不多：

（在“控制面板中”找到“程序”中的“启用或关闭Windows功能”，勾选IIS。）

如下图是在Linux（Ubuntu/Debian）上安装Apache的情况：

（打开终端模拟器或者通过ssh连接shell，输入指令“sudo apt install apache2 php mysql-server” 等待安装）

安装动态页面处理程序及数据库

任何一种编程语言都需要有相应的软件来把程序员写的源文件转换为计算机可执行的文件，对于C/C++这样的编译型语言来说需要由编译器和链接器来处理并生成可执行文件，需要把整个源文件都编译和链接再执行之后才能输出结果，由于用户等待网页还可能受到网络状况和服务器负载情况的影响，编译型语言并不适合WEB应用，相比之下，执行一条语句就得到这条语句结果的解释型语言更适合存在网络延时、带宽限制、并行响应的WEB应用。（并不是说不适合就不能，实际上任何支持CGI库的编程语言都可以用来做网站后端，这需要根据具体情况来确定。比如用C++写网站后端的数据处理也是常见的、Java也被应用在很多如淘宝之类的商业网站上、Python丰富的库也给Web开发提供很大的便利而常用于博客/论坛网站）

动态页面本身还是属于“静态的信息”，尽管用户每次访问这个页面都是处理程序根据相关信息动态生成的，但是如何生成这些信息以及相关的处理过程都是固定的。如果想要更改服务器上储存的信息，比如新用户注册、用户发帖、管理员删帖之类的，最好的方法就是使用数据库。如果使用文本文件来提供增删改查等功能是非常低效的且不可靠的。SQL的中文名是“结构化查询语言”，顾名思义就是专门管理数据库的语言。而本文介绍的MySQL社区版是一款开源强大的数据库软件，非常适合个人网站和中小型网站，安装之后启用PHP的扩展功能即可使用PHP的内置函数管理数据库，非常方便。

上文介绍过的几种解释型语言响应的服务器端处理程序都可以在其官网或相关论坛找到，每种语言都有各自的风格和特色，不过基本上大同小异，开发者应根据项目要求和服务器情况以及自身偏好来酌情选择，本文以PHP为例。

在Windows上可以选择用IIS服务器也可以选择Apache服务器，本文以IIS为例。在Windows上安装和配置的具体方法如下：

下载PHP for Windows，如下图所示，由于我们使用IIS的CGI，需要选择“Non Thread Safe”版本。（需要注意的是必须保证系统上已经安装了Windows Visual C++ VC14+以上的版本，没安装的话可以到微软官网寻找其安装包。如果系统是32位的那就选择x86版本的。）

（关于“IIS配置PHP MySQL”的教程和帖子非常之多，很容易找到，本文就不在赘述）

测试和调试服务器及网站

在完成服务器的搭建和配置之后，应该先做充分的测试，避免以后的开发遇到奇怪的问题再花费不必要的时间来回检查。

个人网站的要求并不严格，需要测试的主要是几个方面：PHP能否正常输出信息页、网页（或其他后端程序）能否正常控制数据库、网站目录中的HTML文件是否可以正常浏览、网站的网页在其他主机上能否正常访问。针对这几个问题，供参考的测试方式分别是：使用PHP的phpinfo();函数来查看服务器环境信息来确定安装状况、用PHP的mysql_query()函数执行SQL指令（比如创建表删除表之类的操作）查看执行结果、在服务器上用浏览器输入localhost+网页名打开页面查看情况、使用局域网内的其他电脑访问服务器的内网ip地址。遇到问题可以上网查找解决方案并尝试重新设置。

注册域名，在互联网上发布网站

访问服务器必须要有该服务器的地址，域名就相当于服务器的名字，对应着其IP地址。域名的作用主要是方便记忆、发布以及网站配置。一个主机通常只有一个公网IP（甚至是多个主机共用一个公网IP），但是一个IP可以对应多个域名，这意味着一台服务器可以搭建多个网站，用不同的域名访问不同的网站。

对于个人开发者来说，申请固定公网IP是非常困难的，而使用域名还有一个最大的优点就是可以使用动态域名解析（DDNS）。在服务器上安装第三方的DDNS工具即可让域名实时解析到服务器当前的公网IP。

国内提供域名服务的注册机构非常多，比如oray、腾讯云、阿里云等，按提示填写信息并缴纳费用即可注册，在国内注册的域名必须要实名认证才可以使用。如下图是狗狗在Oray注册域名之后得到的域名证书：

域名注册成功之后，在注册商提供的控制台为域名添加解析，使域名在DNS上解析到服务器的地址或者跳转到可以访问服务器的URL。

后续完善及维护

正规的网站运行之后还需要做很多相关的工作，比如：域名解析设置好之后，公布域名之前，应该先完成ICP域名备案。此外，监管、审查自己网站上的信息以及保障网站品质也是站长的职责。还应定期检查自己的网站以及网站服务器是否存在被攻击、被篡改的风险，保障网站的安全性和可靠性。

其他的维护比如优化网页外观及代码性能等，应根据实际情况制定维护计划。

第二部分：开发环境和页面语法

开发之前必要的操作：

同意本教程的免责声明：

本例的所有内容以及相关文档，仅供个人学习交流，仅作为技术知识的学习，禁止用于商业用途、禁止用于违法活动，请遵守相关法律法规并遵守互联网道德规范，否则后果自负。继续阅读即代表同意此免责声明。

搭建服务器：

任何一个应用的开发，往往会有相当大比重的时间花费在调试上。一个程序、一个布局甚至配色都很难一次就满意，如果每次修改都上传到服务器上再浏览的话，会浪费大量的资源。所以对于个人开发者来说配置好发布服务器之后最好再配置一个与发布服务配置相近的本地测试服务器以便在编辑器中编辑修改之后立即查看情况。编写页面（HTML）文件以及各种脚本（PHP、JS等）文件虽然可以利用任何文本编辑器，甚至可以用手机上的记事本，但是推荐使用一些集成开发环境（IDE）如Adobe Dreamweaver、Visual Studio Code（免费、跨平台、轻量、多功能、插件丰富）等。IDE集成了很多实用的功能，如自动补全代码、错误检查与提示、多段编辑等，能大幅提高开发效率、可视化和可读性。

至于发布服务器，可以使用自己的电脑也可以租用网络空间以及租用虚拟机/云服务器。要发布一个网站必须要有固定的IP（想想一下每次公网IP发生改变都要自己查询一次再告诉访问者是多么不现实）或固定的域名（普通的域名解析要基于固定的IP，不过现在动态域名解析的成本已经很低，可以用一个域名解析到无固定IP的服务器）。

租用第三方服务通常是最方便可靠的，例如租用腾讯云的CVM可直接使用固定公网IP还能辅助备案，第三方方案通常还会提供操作说明和人工服务，但相应的成本也较高；使用自己的电脑通常需要解决两个问题：一是个人无法申请静态公网IP（门槛很高且价格不菲），二是自己的电脑通常是在局域网内而非直接连接公网（比如通过路由器/WiFi上网，这种情况也可以尝试设置路由器中的DMZ主机或者使用虚拟服务，可以参考百度经验百度经验）。针对这两个问题，通常可以使用第三方内网映射的方式来解决，比如使用花生壳等第三方服务。这种内网映射的大致原理是在需要映射的内网中安装客户端软件，客户端软件获取当前公网IP并发送给服务方的服务器（提供内容转发），当客户绑定的域名（客户的域名会被解析到服务方的转发服务器上）被访问时，服务方的转发服务器会与客户端软件通信，之后客户端软件代替访客来访问客户的服务器资源并发送给服务方的转发服务器最后发送给访客。

使用多款不同内核的浏览器：

由于各浏览器内核并没有严格统一的规范，对HTML、CSS以及JS的解析和渲染存在差异，所以同一个网页在不同版本的浏览器都可能存在差异（有时这个差异甚至会导致页面在一个浏览器上能正常显示而另一个不能）。对于个人开发者来说，想要实现多浏览器兼容，除了需要积累常见兼容性问题解决方案之外还需要做大量的调试。个人推荐使用QQ浏览器+火狐浏览器+edge：QQ浏览器使用的是Chrome内核和IE内核，方便切换，调试网页时Chrome内核提供了强大且好看的开发人员工具（按F12可以查看或修改元素、控制台、网络等模块的信息，还可以设置内核功能如禁用JS禁用缓存等）；火狐浏览器提供了很好的插件环境，深受开发人员们的欢迎，使用一些实用的调试插件也能大幅提高开发效率；至于edge等主流浏览器，即使麻烦也还是需要考虑兼容性的。

熟记相关法律法规、遵守网络功德和规范：

任何技术都只是工具，可以带来正面的积极的益处也可能造成负面的消极恶果。个人开发者对风险和灾难的承受能力是十分有限的，必须对自己的行为负责，永远不能因为自己有技术而得意忘形。应当明确自己开发和发布的意图，不忘初心，了解并遵守法律法规，最好不要打擦边球，因为违规的代价对于个人开发者来说是相当难以承受的。

在大陆提供任何形式的网络信息服务必须经过ICP备案，个人备案不能出现任何商业内容，按要求还需要进行网安备案（虽然很多个人站长没有网安备案很多年也没遇到过什么问题，但是被打电话叫去还是挺麻烦的，建议还是按照要求和提示操作）。

网页编写的相关概念：

HTML：

作为标记语言的一种，一般由标签、属性和内容组成，把文本和其他如格式、结构等信息结合起来，通常组成树形结构。比如：

<父标签属性名=”属性值”>

<子标签属性名=”属性值”>内容1</子标签>

<子标签属性名=”属性值”><子标签属性名=”属性值” /></子标签>

</父标签>

对于HTML来说，一般完整的HTML页面必须至少要有<html>、<head>和<body>。<html>作为整个文档的父标签，所有的页面相关内容放在其中，属性值通常设置语言信息等；<head>内放置网页的相关信息如字符集（charset）、标题（title）、和样式（style）等；<body>中放置页面要展示的内容。

如下图是一个最简单完整网页：

使用浏览器查看

目前主流的浏览器都支持HTML5，建议除了有特殊需求的情况之外都使用HTML5。HTML5最有特色的新标签之一是<canvas>它配合JS进行绘图可以做出很多有趣且美观的交互界面，所谓的H5页面也就是充分利用了这些新标签做交互效果的网页。

HTML中每一个标签在浏览器中对应一个元素，每个元素的层级关系是HTML中的嵌套关系，当网页文件被浏览器加载时，浏览器读到<body>或<frameset>时创建浏览器对象模型（BOM，相当于窗口对象），而完成了整个HTML文件的加载即遇到</html>时生成文档对象模型（DOM，页面中元素节点的结构）。可以使用JS增删改查DOM元素以及对现有元素的属性、值、事件等进行增删改查。

JavaScript：

JavaScript简称JS，是一种脚本语言，值得注意的是，我们只是用js操作对象，这些被操作的对象必须是存在的。主浏览器都提供对js的解释，但不同浏览器可能会有不同的解释结果。还需要注意，各版本浏览器的解释尚且存在差异，所以用于web的js通常来说复制到其他使用的js操作的环境（如我的世界编辑器、AE表达式、xp框架）里没有意义。另外，Java与JavaScript没有关联，只是名字像而已，就像雷锋和雷峰塔没什么联系一样。

Js是基于对象的脚本语言，用于操作对象且一切引用类型都是对象。这样说不太好理解，这里举个简单的实例：

使用浏览器查看

CSS：

CSS的中文名是“层叠样式表”，语法为：

选择器{属性1:属性值; 属性2:属性值; …… ;}

（其中的“属性:属性值”称为声明，选择器的表示方法根据要选择的范围类型确定）

看百科定义不容易理解其含义，这里为了方便讲解，简单理解成“渲染规则按优先级覆盖叠加的样式表”。其中“层叠”(cascading)的含义大致可以理解成：对一个元素设定的不同声明会在最后按优先级覆盖和叠加成一条规则。如下图，在<head>中对所有的<p>标签设置了样式（称为内部样式表），又在<p>元素中单独设置了样式（称为内联样式），重复的声明会按优先级（浏览器默认<外部样式表<内部样式表<内联样式）覆盖，不同的声明会叠加在一起：

CSS常见的使用方式有4种：

使用外部样式表文件，把相关的CSS语句按项目需要写在一个.CSS文件中以便统一管理和维护。使用时在页面的<head>中引用外部样式表文件（使用<link>），例如<link href="U.css" rel="stylesheet" type="text/css" />

在页面的<head>中写本页面需要的CSS语句（放在<style>中），如上图。

将声明写在元素的“style”属性中，如上图。

使用js设置或修改css，常用的方式为某个对象.style.属性="属性值"，例如 document.getElementById("demo").style.display="block"

PHP：

PHP是脚本语言，解释器逐条运行语句，把输出（echo等）放到相应的位置（PHP文件通常是把PHP脚本嵌入到HTML中，让PHP生成HTML进行输出）。其语法和结构类似C，有C语言基础的话很容易上手。PHP属于弱类型，定义变量可以直接$变量名，也有权限修饰，如使用var表示公有。函数也和js基本一致，如下图，PHP脚本读取数据库并输出到相应的位置（文件拓展名应为.php，否则<?php ?>的部分会被作为注释）：

上图中的函数是在另一个PHP文件中定义的，项目中通常会把要用到的类、函数、全局配置等单独写在别的PHP文件，尽管PHP是“嵌入在HTML”中的，但不意味着一个PHP文件中必须要有HTML成分。如下图所示是一个简易发送邮件的库：

在各种论坛和社区如GitHub可以找到符合自己需求的库，只需要在自己的页面中使用include_once()即可使用这些库提供的函数和功能，方便开发、提高效率。

第三部分：常见问题及参考解决方案

关于网站搭建：

Q：为什么用浏览器访问localhost无法打开页面？

A：可能的原因很多，常见的是1.IIS没有访问网站所在目录的权限，在网站的基本设置里点击“连接为…”，选择特定账户，输入管理员的账号和密码即可；2.绑定信息设置了主机名，只能用设置的域名访问，可以修改hosts文件将绑定的域名解析到127.0.0.1；3.站点配置有误，查看网站目录里是否有web.config文件，如果有，将其备份到其他目录并在IIS里重新设置网站。

Q：为什么修改了网站绑定的端口后无论如何都无法访问？

A：可能是端口已经被其他应用占用，建议修改端口的数值是10000之后的数值，多修改几个值试试。也可能是防火墙限制，打开“高级安全 Windows Defender 防火墙”手动添加所选端口的入站规则TCP。

关于网站发布：

Q：为什么网站启动后在局域网内能访问但用公网IP无法访问？

A：局域网内所有主机共用一个外网IP，外网无法直接访问局域网，可以在路由器或者网关中设置虚拟服务器来将内网主机的端口映射到公网IP的端口，或者设置DMZ主机，将服务器完全暴露在公网中。另外，即使服务器是直接拥有公网IP，通常也不能直接用IP访问，因为国内运行商通常会屏蔽:80端口，可以在IIS中给网站绑定其他的端口，比如8080、2333、6666。例如，在百度搜索IP查看到本机使用的公网IP为119.62.124.70，IIS中绑定的端口为2333，那么互联网上的访客可以输入http://199.62.124.70:2333来访问。

Q：为什么把刚查询到的IP发给别人，自己能正常访问，对方却无法访问？

A：可能是因为缓存错误。这个缓存可能是DNS缓存也可能是对方浏览器的缓存。国内的运营商提供的都是动态IP，即每次联网以及联网一段时间之后本机的IP都会改变。可能对方之前访问过的网站的IP可能正好和自己当前的IP相同。可以让对方尝试清空浏览器缓存再试。使用具有固定公网IP的服务器就不存在此问题。

Q：我使用花生壳内网映射，输入域名还需要输入花生壳分配的端口，如何才能只用域名就能访问？

A：可以开通域名的URL跳转，使用URL隐性跳转，跳转到花生壳分配的域名:端口上即可只发布自己的域名。

（暂时就想到这么多……

遇到问题欢迎加入QQ群“电子自学友交流群”（483537882）交流讨论）

第四部分：附录和笔记

A．继续学习

本文至此已包含制作并在互联网上发布一个网站的所有必备知识，制作一个网站真的很容易，但是要想做好一个网站，那就还需要不断地学习和实践与反思。由于篇幅有限，狗狗掌握的知识也很肤浅，无法给读着们带来所有信息，我们应该一起学习共同进步，一起动手吧！这里推荐一些平台和资源，希望能给有兴趣的朋友们带来帮助。

w3school 在线教程：

做全栈工程师必须知道的网站。先来张截图：

免费、详尽、易懂。

A站（ACFUN弹幕视频网）：

国内最大的视频资源库，无广告、很良心，各类视频教程非常丰富，还可以用弹幕和其他爱好者交流学习。

CSDN（中国软件开发者社区）：

如其官方标题所述“CSDN-专业IT技术社区”，其中有精彩的讨论和问答、丰富的资源和例程，还有CSDN学院提供了很多课程。

B．常用标签

想要使用HTML制作网站就必须了解HTML的标签，至少需要记住大致有哪些用途的标签、什么时候适用。在W3Cschool参考手册上能找到详尽的HTML标签定义和说明以及示例，本文不再赘述，仅分享常用标签的笔记。

<a>：

用于定义超链接，标签中可以放置文本和图像等内容使其点击时跳转。这个跳转可以是到其他的网页也可以是本网页内的书签（比如做目录，称为锚点链接），以及提供下载。<a>标签也经常用于点击运行脚本的操作，比如

<a href="javascript:someFunc();" >点击这个超链接运行某个脚本</a>

或者

<a href=" javascript:void(0);" onclick="someFunc()">点这里运行某个脚本</a>

<a>中可以嵌套文本和图像等部分行内元素，如

<a href="http://" ><img src=”http:///ML128.jpg” width=”64px” /><br /><span>点击这个图片的时候跳转</span></a>

但需注意的是，并不是所有的标签都能放在<a>里，这样的嵌套不仅要符合HTML的嵌套规范，还需熟记标签间是否能搭配使用。

<b>、<i>、<strong>、<em>：

用于加粗文本，相当于给标签内文本添加了粗体的属性，常和<i>连用表示强调或者引用的内容。比如 <p>这里有一段文本，到这里是普通字体<b>到这里开始变粗体，<i>加粗并斜体，</i>还是粗体</b>又到正常字体</p>

就效果来说，<b>与<strong>、<i>与<em>在大多浏览器的默认情况下显示效果很接近，但是它们的含义不同——<b>和<i>是“物理元素”，是指定浏览器如何渲染；<strong>和<em>是“逻辑元素”，是表达一种语义，虽然不直接指定浏览器如何渲染但浏览器会根据这些信息来渲染，能表达更多的信息所以更推荐使用。

<br>、<hr>、<wbr>：

换行、水平线、单词换行时机。换行是让<br />后的内容在下一行显示；水平线会将其前后的内容在页面垂直方向上分隔开。

<wbr>是添加换行的位置，但是如果浏览器宽度足够显示的话就不会换行，多用于可能会无法在一行显示又需要对齐的长文本，例如

<p>Hier gibt es ein Skript:<wbr />javascript:<wbr />this<wbr />Is<wbr />a<wbr />LongName<wbr />Function();</p>

如果浏览器的宽度足够在一行显示这段文字的话，则不会换行，会看到：

Hier gibt es ein Skript: javascript:thisIsaLongNameFunction();

可以理解成浏览器在宽度不够时，把每次换行前最近的一个<wbr />转换成<br>而忽律其他的<wbr />标签，这样可在合适的位置换行而避免一个单词显示不下被拆开到下一行的情况。

<canvas>：

画布，就是字面含义，一个可以通过js绘制图形的容器。<canvas>本身是透明的没有任何信息，必须要配合js来绘制需要的内容：可以是固定的图形（用来做遮罩什么的）、可以是交互动画（比如动态背景、鼠标轨迹效果）、还可以是图像动画（所谓的H5页面会大量使用canvas做类似PPT的效果）。

<div>：

Div是分割的意思，含义是分隔区域。<div>用于组合块级元素，其中可以放置大多数的标签并通过CSS来设置这些元素的样式。需要注意的是，<div>本身单独使用没有任何效果，它必须配合CSS才有意义。DIV+CSS也是主流的网页布局方式（另一种常见的布局方式是表格，比如狗狗的第一个网站就是典型的表格布局）。

<form>、<input>:

Form的中文含义是表单，通常也用它来做供用户填写的表单，比如填写用户名和密码、调查问卷、留言发帖之类的。其中，<input>放置在<form>中供用户填写信息，<input>有多种类型（type），其中一个特殊的类型是“submit”，表现是个按钮，点击时提交数据。

<form>可以向服务器传输数据，传输方式通常用get和post两种。get相当于把表单的信息附加在当前URL之后再访问一次服务器，页面读取URL做处理并返回处理好数据之后的页面；post相当于把表单信息添加到HTTP头发送给服务器，主要用于更新服务器的信息，比如用户登录。

Get和post使用情况不同，应根据具体情况选择合适的方式。

<iframe>：

按字面意思就是i（内部，内联）-frame（框架），作用是构成框架页，把一个页面像框架一样展示两个或多个别的HTML页面。比如导航栏、侧边选项之类的，可以做在其他的页面里，方便跳转等操作。但需要注意，iframe虽然可以方便地将别的网页嵌入到一个网页中，但是iframe有可能会被当成广告而被浏览器或其它插件给拦，能通过其他手段实现的功能就尽量不要使用iframe。

<img>：

Img是image的缩写，作用就是显示图像。按照HTML规范，<img>必须包含两个属性：src和alt。src用于指定图像的地址；alt用于注解图像，是当图像无法加载时替代图像用的解释文字。

实际中缺少src、alt也能正常显示图像，比如异步加载时先用未指定src、alt等属性的<img>占位，当浏览到该图像时使用js修改其属性。

<meter>：

<meter>用于展示范围（会显示出个比例条形图），用于增强数据可视化等方面。其实也不是很常用，但是很有趣，比如可以配合js做进度条动画、配合input如<input type=”range”>做滑块效果等。有时做表单、列表、倒计时等场合时，用它配合js能很好地增加交互性。（IE不支持）

<p>、<span>：

段落（paragraph）的缩写，用于显示文本段落，是块级元素。

<span>是行内元素，通常用在<p>内，用于对部分元素（文本和图像）进行分组，可以用css指定某部分文本的样式。

<sub>、<sup>：

下标、上标，写文章的时候很常用。

<script>：

用于放置脚本，通常是JavaScript。可以在<script></script>中放置js代码，也可以直接用<script>的src属性指定外部脚本，这时相当于把外部js文件中的内容放到当前位置。脚本在解释运行的时候是逐条的，所以应该注意<script>的位置，要注意变量和函数是否已经定义、是否已经更改、是否会被覆盖等问题。

C．相关开发工具推荐

适用于网站开发的工具软件非常多，视频里所介绍的VScode其实并不是很适合web开发，这里只是介绍和推荐一些常用工具供参考。

Adobe Dreamweaver：

Dreamweaver作为专门的web开发环境，当然是个人站长的首选。它不仅操作简便、界面美观、能方便地编辑与网页有关的代码，还能直接管理网站、实时调试，新版本的功能更加强大方便。不过Adobe家的软件都是付费的，如何购买以及如何“试用”在百度上很轻松就能搜到。

Visual Studio Code：

VScode的优势是开源、跨平台、轻量、插件丰富、非常万用，不仅能编辑HTML、JS、CSS，还能编辑和调试Python、Java、C++等语言的文件。但默认的扩展对于JS和CSS补全还不太好使，HTML也不能实时调试。

QQ浏览器：

之所以推荐最新版本的QQ浏览器的主要原因还是因为它使用的Chrome和IE内核，两个内核可以一键切换。

Chrome有非常棒的开发人员工具，比如HTTP抓包、元素审查、性能分析等工具全都集合在了一起，非常方便调试。而IE至今仍是主流内核，尽管IE内核在许多方面和其它几个主流内核不太一样，兼容性问题很头疼，但是作为个人开发者还是需要考虑跨浏览器支持，所以使用IE浏览器调试网页还是有必要的。

FlashFX：

使用FTP来管理网站上的文件是最方便、最有效的方式，尽管Windows的资源浏览器原生支持FTP，但是如果网站使用的是主动FTP那么还得设置一下IE选项，也不便多站点的管理。FlashFX是一个方便多网站管理的FTP工具，连接方便（会自动判断连接方式）、操作方便、可以直接修改远端文件。

站长工具（站长之家的在线工具）：