十五条HTML初学者必备实践指南

140 浏览量更新于2024-08-31 收藏 97KB PDF 举报

在本文档中，针对HTML初学者提供了十五条重要的最佳实践，帮助他们更好地理解和编写符合标准的HTML代码。以下是这些建议的具体内容： 1. **保持标签闭合**：在编写HTML时，务必确保所有开始标签都有相应的结束标签，如<ul>和<li>对齐。过去的实践中，有人会遗漏关闭某些标签，这在现代编码规范中是不可接受的，可能导致验证错误。正确的方式是像这样： ``` <ul> <li>Sometext</li> <li>Somenewtext</li> ... </ul> ``` 2. **声明正确的文档类型**：在HTML文档开头，必须声明文档类型DOCTYPE，以便浏览器了解其解析规则。常见的DOCTYPE声明包括： - HTML 4.01 Strict: `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">` - HTML 4.01 Transitional: `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">` - XHTML 1.0 Transitional: `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">` 使用正确的doctype有助于浏览器以适当的标准解析文档。 3. **使用语义化标签**：利用HTML5提供的语义化标签（如<header>, <nav>, <main>, <article>, <footer>等），让代码更具可读性和搜索引擎优化（SEO）友好。 4. **避免使用内联样式**：尽量将样式写入外部CSS文件，保持HTML结构清晰，便于维护和复用。 5. **正确处理链接**：确保<a>标签的href属性指向准确，使用`rel`属性明确链接关系，如`<a rel="noopener noreferrer" href="...">...</a>`。 6. **优化表单元素**：使用适当的表单控件（如<input type="email">）并提供必要的验证提示。 7. **处理文本格式**：使用`<mark>`, `<strong>`, `<em>`, 和 `<code>`等标签来增强文本可读性，而非直接使用`<font>`或`<i>`（已弃用）。 8. **处理图片`alt`属性**：对于`<img>`标签，`alt`属性应提供图片描述，利于访问者理解和搜索引擎索引。 9. **合理嵌套结构**：遵循结构良好的层级关系，如`<header>`, `<section>`, `<article>`, `<aside>`, `<footer>`等。 10. **使用`<meta>`标签**：提供元数据，如`<meta charset="UTF-8">`指定字符集，`<meta name="viewport">`控制移动设备布局。 11. **保持简洁与一致性**：避免冗余代码，保持代码风格一致，便于阅读和维护。 12. **响应式设计**：考虑不同设备的屏幕尺寸，使用媒体查询`<meta name="viewport">`和灵活布局。 13. **更新HTML5支持**：HTML5引入了许多新特性，如`<video>`, `<audio>`, `<canvas>`, `<progress>`等，熟悉并合理使用它们。 14. **测试跨浏览器兼容性**：确保代码在主流浏览器（Chrome, Firefox, Safari, Edge等）上表现一致。 15. **及时学习更新**：HTML和相关技术不断发展，定期查阅最新规范和最佳实践，持续提升技能。遵循这些最佳实践，不仅能让HTML代码更易阅读和维护，还能提高网页的可用性和性能。对于初学者来说，这是快速掌握HTML基础并建立良好编码习惯的关键。

HTML初学者适用的十五条最佳实践初学者适用的十五条最佳实践

主要为HTML初学者推荐了适用的三十条最佳实践，感兴趣的小伙伴们可以参考一下

以下就是HTML初学者适用的三十条最佳实践，分享给大家供大家参考，具体内容如下

1.保持标签闭合保持标签闭合

以前，经常见到类似下面的代码（译注：这是多久以前啊……）：

XML/HTML Code复制内容到剪贴板

1. <li>Some text here.

2. <li>Some new text here.

3. <li>You get the idea.

注意外面包裹的UL/OL标签被遗漏了（谁知是故意还是无意的），而且还忘记了关闭LI标签。按今天的标准来看，这是很明显

的糟糕做法，应该100%避免。总之，保持闭合标签。否则，你验证html标签的时候可能遇到问题。

更好的方式

XML/HTML Code复制内容到剪贴板

1. <ul>

2. <li>Some text here. </li>

3. <li>Some new text here. </li>

4. <li>You get the idea. </li>

5. </ul>

2.声明正确的文档类型声明正确的文档类型

笔者早先曾加入过许多CSS论坛，每当用户遇到问题，我们会建议他首先做两件事：

1. 验证CSS文件，保证没有错误。

2. 确认添加了正确的doctype

DOCTYPE 出现在HTML标签之前，它告诉浏览器这个页面包含的是HTML，XHTML，还是两者混合，这样浏览器才能正确解

析。

通常有四种文档类型可供选择：

XML/HTML Code复制内容到剪贴板

1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

4. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

7. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd”>

10. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd”>

11.

关于该使用什么样的文档类型声明，一直有不同的说法。通常认为使用最严格的声明是最佳选择，但研究表明，大部分浏览器

会使用普通的方式解析这种声明，所以很多人选择使用HTML4.01标准。选择声明的底线是，它是不是真的适合你，所以你要

综合考虑来选择适合你得项目的声明。

3.永远不要使用内联样式永远不要使用内联样式

当你在埋头写代码时，可能会经常顺手或偷懒的加上一点行内css代码，就像这样：

XML/HTML Code复制内容到剪贴板

1. <p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>

这样看起来即方便又没有问题。然而，这在你的编码实践中是个错误。

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38565003

粉丝: 6
资源: 913

十五条HTML初学者必备实践指南

掌握HTML与VSCode：编程初学者的最佳实践

React JS游乐场：初学者的最佳实践探索

HTML5初学者必看：11大在线学习平台

html操作——适合初学者

适合初学者的HTML5教程

asp初学者入门最佳学习资料

HTML教程！适合刚开始学习HTML的初学者！

HTML5初学者必备

html初学者课件ppt3

Node.js初学者工程搭建教程与实践

最新资源