「HTML再構築」読書メモ＆マインドマップ_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

「HTML再構築」読書メモ＆マインドマップ_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:58 AM

html 考え読書メモリファクタリング

最近「HTML リファクタリング」という本を読みました。皆さんが一緒に学び、コミュニケーションできるように、以下に私なりの要約を作成します。

リファクタリングとは何ですか？リファクタリングは、プログラムの動作を変更せずに小さな変更を加えるプロセスであり、通常、コードを徐々に改善するプロセスです。優れたウェブサイトを実現するには、コードを日々改善する必要があります。検索エンジンの最適化 (SEO) は、Web サイトの再構築を促進する主な要因の 1 つであり、検索エンジンは画像よりもフロントエンドのテキストを重視し、タイトルやメタタグを重視します。著者は、写真やフラッシュなど、より多くのテキストコンテンツを置き換えることでSEOがうまくできることを望んでいます。この本を読んだ後は、SEO に非常に役立つと個人的に感じています

Baidu Encyclopedia のリファクタリングの定義は次のとおりです: リファクタリングは、プログラムコードを調整してプログラムをより効率的にすることによって、ソフトウェアの品質とパフォーマンスを向上させることです。設計パターンとアーキテクチャがより合理的となり、ソフトウェアの拡張性と保守性が向上します。次のマインドマップは、本の一般的な内容の一般的な要約です。開発プロセス。他に推奨される優れたツールをいくつか紹介します:

1. YSlow

YSlow は、Yahoo によって開始されたブラウザプラグインで、Web サイトのページを分析し、Web サイトのパフォーマンスを向上させるための最適化の提案を提供します。 Yslow-23 ルールを表示するにはクリックしてください

Firefox プラグイン

Chrome プラグイン

YSlow for Mobile/Bookmarklet ソースコード

2. PageSpeed

PageSpeed もブラウザですサーバーGoogle によって開始されたプラグインは、Web サイトのパフォーマンスのボトルネックを簡単に分析し、最適化の提案を提供するのに役立つ、Web Web サイトの最適化方法を簡単に実行できます。 ...ページを確認し、いくつかの最適化の提案を提供します。

画像 SEO ツール: このツールは画像の alt タグをチェックし、最適化の提案を提供します。

リクエストインスペクター: ページにロードする必要があるリソースとサービスを見つけます。

リンクチェッカー: ページ内の内部リンク、外部リンク、デッドリンクをチェックします。

HTTP ヘッダー検査: Web ページまたはリソースの HTTP 応答ヘッダーを表示します。

ソーシャルチェッカー: Google+、Facebook、Twitter、Linkedin、Pinterest など、ページ内のソーシャルコンポーネントをチェックします。

変更された場合チェッカー: ページが If-Modified-Since HTTP ヘッダーを受け入れるかどうかを確認します。

Gzip チェッカー: ページが Gzip 圧縮されているかどうかを確認します。 CSS配信ツール: ページで使用されている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) 定购商品