简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  "HTML Reconstruction" Reading Notes & Mind Map_html/css_WEB-ITnose

"HTML Reconstruction" Reading Notes & Mind Map_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:58:111026browse

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

    Using the html51a309583e26acea4f04ca31122d8c535 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.

    　df250b2156c434f3390392d09b1c9563 --> 2e943dbfa6913846401699a53672358e

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

    　　　　有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那样。

  • Use HTML to replace Flash

    • 　A simple summary, I hope you can gain something.

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：css scroll bar style_html/css_WEB-ITnoseNext article：css scroll bar style_html/css_WEB-ITnose

    Related articles

    See more