《HTML重构》读书笔记&思维导图_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

《HTML重构》读书笔记&思维导图_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:58 AM

html思维读书笔记重构

　　最近读了《HTML重构》这本书，以下做出自己的总结归纳，大家可以一起学习交流。

　　什么是重构？重构是在不改变程序行为的基础上进行小的改动是代码基本逐渐完善的过程，通常需要一些自动化工具的帮助。好的网站是需要我们对代码进行日臻完美的改善。而搜索引擎优化（seo）是网站重构的主要驱动之一，跟图片相比搜索引擎更看重文本；跟后端文本相比更看重前端文本，他们更看重标题或元标签。作者希望通过更多的文本内容取代如图片、flash等可以做好SEO。我个人觉得看完了这本书对做 SEO是非常有帮助的

百度百科对重构的定义是：重构（Refactoring）就是通过调整程序代码改善软件的质量、性能，使其程序的设计模式和架构更趋合理，提高软件的扩展性和维护性。

　　下面这张思维导图，是我对全书大体内容的一个概括性总结：

　　工具

　　本书推荐的工具主要包含的是自动化测试，但是我觉得现行的开发环节当中实际用到的会比较少。这里就推荐一下其他方面的优秀工具：

　　1. YSlow

　　YSlow是雅虎推出的一款浏览器插件，可以帮助你对网站的页面进行分析，并为你提供一些优化建议，以提高网站的性能。戳我查看Yslow-23条规则

Firefox插件

Chrome插件

YSlow for Mobile/Bookmarklet

源码

　　2. PageSpeed

　　PageSpeed也是一个浏览器插件，由google推出，可以很好地对我们的Web网站进行优化实践??帮助你轻松对网站的性能瓶颈进行分析，并为你提供优化建议。

在线分析你的网站

安装浏览器插件（ Chrome、 Firefox）

通过 Insights API在应用中嵌入PageSpeed功能

　　3.其他优秀工具　　

蜘蛛模拟器：这个工具可以分析你的页面，并提供一些优化建议。

图像SEO工具：这个工具可以检查图片的alt标签，并提供一些优化建议。

请求检查器：找出页面中需要加载哪些资源和服务。

链接检查器：检查页面中内部、外部和无效链接。

HTTP头检查：显示网页或资源的HTTP响应头。

社交检查器：检查页面中的社交组件，比如Google+、Facebook、Twitter、Linkedin和Pinterest。

If modified检查器：检查页面是否接受 If-Modified-Since HTTP头。

Gzip检查器：检查页面是否经过了Gzip压缩。

CSS delivery工具：检查页面中所使用的CSS文件。

面包屑工具：可根据你输入的信息提供面包屑导航的代码。

CSS压缩工具：用于压缩CSS代码。

　　良构

　　什么是良构？从技术角度来讲：它表示文档要遵循某种严格的结束比如每个起始标签都应该有一个结束标签、元素的开始与结构都在相同的父元素内以及每个实体引用都要事先定义好。虽然现在多数网站都已经采用：

<!DOCTYPE html> //dtd

　　采用html5 标签让我们在书写html标签语句的时候可以不需要那么规范，但是我觉得从文档的严谨性和规范性以及可读性上而言，遵循xml标准还是十分有必要的。所谓的良构符合标准：

　　1.所有的起始标签都应有一个匹配的结束标签。

　　2.空元素应该使用空元素的标签语法。

　　
-->

　　3.所有的属性都必须有一个值

　　4.所有的属性值都需要用引号括起来

　　5.所有的&号都必须转义为&

　　内嵌的JavaScript在这里会出现问题。Javascript中&是不可转义的。可以把脚本移出到一个没必要转义的外部文件中或者把脚本放进注释中。

　　6.所有小于号

　　内嵌的JavaScript在这里会出现问题。Javascript不会把

　　7.只有唯一的根元素

　　8.转义属性值中的引号

　　在属性值中把 ” 转义为" ，把 ’ 转义为' 。

　　9.所有未预定义的实体引用必须在DTD中声明

　　10.结束每一个实体引用，替换虚构的实体引用

　　XML要求实体引用以分号结尾。

　　11.将名称改为小写，所有元素的

　　12.把文本转化为UTF-8

　　Utf-8是一个标准的编码，可运作在所有浏览器上，被主流的文本编辑器个工具支持，支持所有Unicode字符。

　　内容　　

修正拼写错误，错别字

保证所有连接的可用性

移动页面（自动化检查连接）

重新组织URL的结构，对开发者、访问者和搜索引擎更透明，但要保证旧的URL能够继续工作

删除入口页面（用户体验优先）

隐藏电子邮件

　　可访问性 　　

把图片转化为文本

　　　　作者说了三点

　　　　a、对于视力不好的用户可以通过感知来感知文本

　　　　b、可以加大搜索引擎的结果

　　　　c、可以提升网站性能，而且可以节省带宽成本及访问者的时间

　　　　作者还是那句话：HTML文档只有内容不应该有装饰

为表单输入框添加标签

　　　　对非隐藏的input,textarea,select等表单元素确保它们都有相应的标签

使用标准的字段名称

开启自动完成

为表单添加Tab索引

　　　　为每个表单添加Tab索引这样用户就可以通过tab键进行跳转了

<input tabindex="1" type="checkbox" />

　　　　有7个元素支持tabindex分别为：a area button input object select textarea

适当为较长的网页添加跳转

加大输入框

加入表格描述

加入lang属性

// en定义语言为英语// zh-CN定义语言为中文<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">// 如果网页定义为XHTML1.1或者XML格式,那么可以使用xml:lang属性(因为xml:lang属性是在XML中确定语言信息的标准用法).// 如果网页使用HTML格式,那么应该同时使用xml:lang和lang属性.

　　布局　　　

使用Css+Div替换表格布局

　　创建现代网页需要使用与CSS相分离的XHTML不要再使用表格型布局与font标签等表现性元素（//老生常谈）

使用Css定位替代框架

正确标记列表

替换占位图片

添加id属性

　　Web应用程序　　

POST与GET的正确使用

　　以下操作都应该通过POST操作

　　　　1) 定购商品

　　　　2) 签署法律文档

　　　　3) 从CMS中删除页面

　　　　4) 签署申述

　　　　5) 发送电子邮件

　　　　6) 向数据库插入新内容

　　　　7) 打印地图

　　　　8) 操控机器

　　以下操作都应该通过GET操作，因为这是安全的。且不必强制用户接受

　　　　1) 读取文档

　　　　2) 从CMS下载一份可编辑文档的副本

　　　　3) 读取电子邮件

　　　　4) 查看地图

　　　　5) 检查机器的当前状态

　　通过GET访问的URL可以链接、被爬虫抓取、收藏、预抓取，缓存。GET的形式的URL让用户可以使用后退键。总的来说，在这些情况下GET操作比POST操作对用户更友好。GET形式的URL对搜索引擎也更友好，可以提高搜索引擎排名。

启用 & 阻止缓存

　　启用缓存某些不常改变的资源（如网页icon）可以大大提高用户访问页面的速度，提升用户交互性能。

使用ETag　

　　ETag：Etag是URL的Entity Tag，用于标示URL对象是否改变，区分不同语言和Session等等。具体内部含义是使服务器控制的，就像Cookie那样。

使用HTML替换Flash

　　简单的总结，希望各位能有所收获。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

如何解决Python的代码的可维护性差错误？Jun 25, 2023 am 11:58 AM

Python作为一门高级编程语言，在软件开发中得到了广泛应用。虽然Python有许多优点，但很多Python程序员经常面临的问题是，代码的可维护性较差。Python代码的可维护性包括代码的易读性、可扩展性、可重用性等方面。在本篇文章中，我们将着重讨论如何解决Python代码的可维护性差的问题。一、代码的易读性代码可读性是指代码的易读程度，它是代码可维护性的核

web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

如何解决Python的代码中的代码复杂度过高错误？Jun 24, 2023 pm 05:43 PM

Python是一门简单易学高效的编程语言，但是当我们在编写Python代码时，可能会遇到一些代码复杂度过高的问题。这些问题如果不解决，会使得代码难以维护，容易出错，降低代码的可读性和可扩展性。因此，在本文中，我们将讨论如何解决Python代码中的代码复杂度过高错误。了解代码复杂度代码复杂度是一种度量代码难以理解和维护的性质。在Python中，有一些指标可以用

如何做好Java代码的重构Jun 15, 2023 pm 09:17 PM

作为世界上最流行的编程语言之一，Java已成为许多企业和开发者的首选语言。然而，代码的重构对于保持代码质量以及开发效率至关重要。Java代码由于其复杂性，随着时间的推移可能会变得越来越难以维护。本文将讨论如何进行Java代码的重构，以提高代码质量和可维护性。了解重构的原则Java代码重构的目的在于改进代码的结构、可读性和可维护性，而不是简单的“改变代码”。因

Go语言中的优化和重构的方法Jun 02, 2023 am 10:40 AM

Go语言是一门相对年轻的编程语言，虽然从语言本身的设计来看，其已经考虑到了很多优化点，使得其具备高效的性能和良好的可维护性，但是这并不代表着我们在开发Go应用时不需要优化和重构，特别是在长期的代码积累过程中，原来的代码架构可能已经开始失去优势，需要通过优化和重构来提高系统的性能和可维护性。本文将分享一些在Go语言中优化和重构的方法，希望能够对Go开发者有所帮

深入理解Go语言中的函数重构技巧Mar 28, 2024 pm 03:05 PM

在Go语言程序开发中，函数重构技巧是十分重要的一环。通过优化和重构函数，不仅可以提高代码质量和可维护性，还可以提升程序的性能和可读性。本文将深入探讨Go语言中的函数重构技巧，结合具体的代码示例，帮助读者更好地理解和应用这些技巧。1.代码示例1：提取重复代码片段在实际开发中，经常会遇到重复使用的代码片段，这时就可以考虑将重复代码提取出来作为一个独立的函数，以

Python开发经验分享：如何进行代码重构和优化Nov 22, 2023 pm 07:25 PM

Python开发经验分享：如何进行代码重构和优化引言：随着软件开发的不断发展，代码的重构和优化已成为开发过程中不可或缺的一环。而Python作为一门动态、简洁的高级编程语言，也同样需要进行代码重构和优化来提高程序的性能和可维护性。本文将分享一些Python代码重构和优化的经验，帮助开发者写出更高效、更可靠的Python代码。第一部分：代码重构代码重构是指对已

Go语言中的该如何进行代码重构Jun 02, 2023 am 08:31 AM

随着软件开发的不断深入和代码的不断积累，代码重构已经成为了现代软件开发过程中不可避免的一部分。它是一种对系统的既定代码进行修改，以改善其结构、性能、可读性或其他相关方面的过程。在本文中，我们将探讨如何在Go语言中进行代码重构。定义好重构的目标在开始代码重构之前，我们应该制定一个清晰的重构目标。我们需要问自己一些问题，比如这段代码存在哪些问题？我们要通过重构

See all articles