![HTML5+CSS3王者归来](https://wfqqreader-1252317822.image.myqcloud.com/cover/809/26846809/b_26846809.jpg)
2-5 我的第一个HTML文件
2-5-1 编辑我的第一个HTML文件
HTML是纯文本格式的文档,可以使用Windows内附的记事本来编辑HTML文件。除了记事本,目前也有一些公司开发了HTML文件编辑器,非常好用,例如Notepad++(2-5-3节将做简单说明)和WebStorm等。
程序实例ch2_1.html:下面笔者将以记事本为例做解说。在记事本中输入如下所示的内容。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P25_81942.jpg?sign=1738864485-TfGztHZjxDbsSm55gRkg9pzJ2qYzLAnd-0-b1f31f6f5c8332918b33a067d0ba9b81)
然后执行“文件”→“保存”命令。
随后可以看到“另存为”对话框,选择欲保存的文件夹,如“ch2”,然后在“文件名”输入框中输入“ch2_1.html”,在“编码”下拉列表框中选择“UTF-8”,然后单击“保存”按钮。HTML文件的扩展名是.html或.htm,本书全部使用.html为扩展名。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P25_81945.jpg?sign=1738864485-GslZhTXfaNu240vKrIiUanrQFEaFS8Nt-0-7b1938d34f60649b14f817d0512d8369)
文件保存完成后,可以在记事本标题栏看到所指定的文件名“ch2_1”。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P26_81975.jpg?sign=1738864485-3jCRnyzeRbEOKcpslxo5LJd09fyQEqM2-0-6e714ac6ca714bebd2c22f432d796e5c)
这时进入ch2文件夹可以看到下面的画面。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P26_81978.jpg?sign=1738864485-itUA0Yk5f4beTSOdd0XBF3lqA3NSaMCq-0-e268f64dee6f65b79829a044d5ccf9fa)
2-5-2 执行我的第一个HTML文件
双击上述ch2_1文件的图标或是将ch2_1文件的图标拖曳至浏览器,可以打开这份HTML文件,并显示如下结果。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P26_119229.jpg?sign=1738864485-BjHhjUNQ0Xpmc21XwBKYUNkDwVy29maO-0-d2a21bff4207f4536b77d2cc70f2131b)
说明,本例笔者使用的是Microsoft公司的Internet Explorer(简称IE)浏览器,该浏览器到9.0版以后才对HTML5有较好的支持。笔者在撰写本书时,除了使用Internet Explorer浏览器外,还使用了Apple公司的Safari、Google公司的Chrome、Opera公司的Opera和Mozilla基金会的Firefox浏览器做测试。
2-5-3 Notepad++
Notepad++是适合在Windows环境中使用的HTML文件编辑器,主要优点如下:
1. 具有智能输入功能,输入元素或属性时,只要输入前面的英文字母,其后关联的英文字母即跳出供选用。这个功能除了可以加快输入速度,还可以避免输入错误。例如,当输入“he”时,可自动跳出相关的元素或属性供选用。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P26_81988.jpg?sign=1738864485-4X3zLlhUqnLy6tnjz0lh9ftYe6Xvi0ND-0-3da7feb9e9aa41bbf47679dfd96710d2)
2. HTML文件设计完成时,元素、元素内容、属性与属性值分别用不同颜色显示,方便检查程序。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P26_81995.jpg?sign=1738864485-oNQzxpIXrEHSXxvW9aKKFTIppre1XAvT-0-fc9c82c67ffcbca6620b6d218c5874a0)
3. 方便除错(debug)。HTML文件语法出问题时,可通过显示为不同颜色的元素或属性找出错误。例如下图是<meta>元素名称输入错误时显示的画面。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P26_81998.jpg?sign=1738864485-h2rnXr7Xi5Z87nah9MYuVTVobFp2pIty-0-b9dca997a671f9cb92223aee5aaf45a0)
4. 可以选择使用哪一种浏览器执行所编写的HTML文件。
![](https://epubservercos.yuewen.com/9A66B6/15289822205524906/epubprivate/OEBPS/Images/Figure-P26_82001.jpg?sign=1738864485-NGxVDOIfNWOQ9eCKj42EdZ2dqnfuA0QX-0-03419cda4aa4b239574b2c2d984af3e9)
5. 文件左边有行号,方便用户了解目前的编辑状况与阅读文件。