ホームページ > 記事 > ウェブフロントエンド > 「HTML再構築」読書メモ&マインドマップ_html/css_WEB-ITnose
最近「HTML リファクタリング」という本を読みました。皆さんが一緒に学び、コミュニケーションできるように、以下に私なりの要約を作成します。
リファクタリングとは何ですか?リファクタリングは、プログラムの動作を変更せずに小さな変更を加えるプロセスであり、通常、コードを徐々に改善するプロセスです。優れたウェブサイトを実現するには、コードを日々改善する必要があります。検索エンジンの最適化 (SEO) は、Web サイトの再構築を促進する主な要因の 1 つであり、検索エンジンは画像よりもフロントエンドのテキストを重視し、タイトルやメタ タグを重視します。著者は、写真やフラッシュなど、より多くのテキストコンテンツを置き換えることでSEOがうまくできることを望んでいます。この本を読んだ後は、SEO に非常に役立つと個人的に感じています
Baidu Encyclopedia のリファクタリングの定義は次のとおりです: リファクタリングは、プログラム コードを調整してプログラムをより効率的にすることによって、ソフトウェアの品質とパフォーマンスを向上させることです。設計パターンとアーキテクチャがより合理的となり、ソフトウェアの拡張性と保守性が向上します。次のマインドマップは、本の一般的な内容の一般的な要約です。開発プロセス。他に推奨される優れたツールをいくつか紹介します:
1. YSlowYSlow は、Yahoo によって開始されたブラウザ プラグインで、Web サイトのページを分析し、Web サイトのパフォーマンスを向上させるための最適化の提案を提供します。 Yslow-23 ルールを表示するにはクリックしてください
Firefox プラグイン
Chrome プラグイン
YSlow for Mobile/Bookmarklet ソースコード
2. PageSpeed
PageSpeed もブラウザですサーバーGoogle によって開始されたプラグインは、Web サイトのパフォーマンスのボトルネックを簡単に分析し、最適化の提案を提供するのに役立つ、Web Web サイトの最適化方法を簡単に実行できます。 ...ページを確認し、いくつかの最適化の提案を提供します。
画像 SEO ツール: このツールは画像の alt タグをチェックし、最適化の提案を提供します。
変更された場合チェッカー: ページが If-Modified-Since HTTP ヘッダーを受け入れるかどうかを確認します。
Gzip チェッカー: ページが Gzip 圧縮されているかどうかを確認します。 CSS配信ツール: ページで使用されているCSSファイルを確認します。
ブレッドクラム ツール: 入力した情報に基づいてブレッドクラム ナビゲーション コードを提供します。
<!DOCTYPE html> //dtd
1. すべての開始タグには一致する終了タグが必要です。
2. 空の要素は空の要素のタグ構文を使用する必要があります。
埋め込まれた JavaScript はここで問題を引き起こします。 JavaScript は < を小なり記号として扱いません。エスケープが必要ない外部ファイルにスクリプトを移動したり、コメントにスクリプトを入れたりすることができます。
7.只有唯一的根元素
8.转义属性值中的引号
在属性值中把 ” 转义为" ,把 ’ 转义为' 。
9.所有未预定义的实体引用必须在DTD中声明
10.结束每一个实体引用,替换虚构的实体引用
XML要求实体引用以分号结尾。
11.将名称改为小写,所有元素的
12.把文本转化为UTF-8
Utf-8是一个标准的编码,可运作在所有浏览器上,被主流的文本编辑器个工具支持,支持所有Unicode字符。
内容
可访问性
作者说了三点
a、对于视力不好的用户可以通过感知来感知文本
b、可以加大搜索引擎的结果
c、可以提升网站性能,而且可以节省带宽成本及访问者的时间
作者还是那句话:HTML文档只有内容不应该有装饰
对非隐藏的input,textarea,select等表单元素确保它们都有相应的标签
为每个表单添加Tab索引这样用户就可以通过tab键进行跳转了
<input tabindex="1" type="checkbox" />
有7个元素支持tabindex分别为:a area button input object select textarea
// 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相分离的XHTML不要再使用表格型布局与font标签等表现性元素(//老生常谈)
Web应用程序
以下操作都应该通过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是URL的Entity Tag,用于标示URL对象是否改变,区分不同语言和Session等等。具体内部含义是使服务器控制的,就像Cookie那样。
簡単にまとめましたが、何か得るものがあれば幸いです。