'HTML Reconstruction' Reading Notes & Mind Map_html/css

I recently read the book "HTML Refactoring". I will make my own summary below so that everyone can learn and communicate together.

What is refactoring? Refactoring is a process of making small changes without changing the behavior of the program. It is a process in which the code is basically gradually improved. It usually requires the help of some automated tools. A good website requires us to improve the code day by day. Search engine optimization (seo) is one of the main drivers of website reconstruction. Search engines value text more than images; they value front-end text more than back-end text, and they value titles or meta tags more. The author hopes that SEO can be done well by replacing more text content such as pictures, flash, etc. I personally feel that after reading this book, it will be very helpful for SEO

Baidu Encyclopedia’s definition of refactoring is: Refactoring is to improve software by adjusting program code Quality and performance make the design pattern and architecture of the program more reasonable, and improve the scalability and maintainability of the software.

The following mind map is a general summary of the general content of the book:

　Tools

The tools recommended in this book mainly include automated testing, but I think the ones actually used in the current development process will be more few. Here are some other excellent tools recommended:

1. YSlow

YSlow is a browser plug-in launched by Yahoo that can help you modify the pages of your website. Analyze and provide you with some optimization suggestions to improve website performance. Click me to view Yslow-23 rules

Firefox plug-in

Chrome plug-in

YSlow for Mobile/Bookmarklet

Source code

　2. PageSpeed

PageSpeed is also a browser plug-in, launched by Google, which can effectively optimize our Web website and help you easily optimize the website. Analyze performance bottlenecks and provide you with optimization suggestions.

Analyze your website online

Install browser plug-in (Chrome, Firefox)

Embed PageSpeed functionality in your application through Insights API

　3.Other excellent tools

Spider Simulator: This tool can analyze your page and provide some optimization suggestions.

Image SEO Tool: This tool can check the alt tags of images and provide some optimization suggestions.

Request Inspector: Find out which resources and services need to be loaded in the page.

Link Checker: Check internal, external and dead links in the page.

HTTP header inspection: Display the HTTP response headers of the web page or resource.

Social Checker: Check the social components in the page, such as Google, Facebook, Twitter, Linkedin and Pinterest.

If modified checker: Checks whether the page accepts the If-Modified-Since HTTP header.

Gzip checker: Check whether the page has been Gzip compressed.

CSS delivery tool: Check the CSS files used in the page.

Breadcrumb Tool: Provides breadcrumb navigation code based on the information you enter.

CSS compression tool: used to compress CSS code.

　Well-structured

　What is well-structured? From a technical point of view: it means that the document should follow certain strict endings. For example, every start tag should have an end tag, the start and structure of elements should be within the same parent element, and every entity reference should be defined in advance. good. Although most websites have now adopted:

<!DOCTYPE html> //dtd

Copy after login

Using the html5 tag allows us to not be so standardized when writing html tag statements, but I think from the documentation In terms of rigor, standardization and readability, it is still very necessary to follow the XML standard. The so-called well-structured compliance standards:

　 1. All start tags should have a matching end tag.

　2. Empty elements should use the tag syntax of empty elements.

　
-->

3. All attributes All must have a value

　4. All attribute values need to be enclosed in quotation marks

5. All ampersands must be converted Meaning &

Embedded JavaScript will cause problems here. & is not escapable in Javascript. You can move the script to an external file where escaping is not necessary or put the script in a comment.

　6. All less than signs < must be escaped as <

Embedded JavaScript will cause problems here. Javascript does not treat < as a less than sign. You can move the script to an external file where escaping is not necessary or put the script in a comment.

　　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" />

Copy after login

　　　　有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属性.

Copy after login

　　布局　　　

使用Css+Div替换表格布局

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

使用Css定位替代框架

正确标记列表

替换占位图片

添加id属性

　　Web应用程序　　

POST与GET的正确使用

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

　　　　1) 定购商品