コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 「HTML再構築」読書メモ＆マインドマップ_html/css_WEB-ITnose

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

WBOY
リリース： 2016-06-24 11:58:11
オリジナル
1073 人が閲覧しました

最近「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)  定购商品

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

  • Flashの代わりにHTMLを使う

    • 簡単にまとめましたが、何か得るものがあれば幸いです。

    関連ラベル：
    html 考え 読書メモ リファクタリング
    ソース：php.cn
    前の記事：CSS スクロール バー style_html/css_WEB-ITnose 次の記事：複数のボックスを一列に配置する完全な方法 レスポンシブウェブレイアウト_html/css_WEB-ITnose
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    戻り値の変数の形式は何ですか? 私はphpの初心者です。コードを見つけました: if($x<time()){return[false,'error'];} ロジックや変数は重要ではありませんが、[false...
    から 2024-04-06 21:55:20
    0
    1
    778
    クラスのプライベート メンバーをコンストラクター パラメーターとして設定する classFoo{#one#two#three#four#five#six#seven#eight#nine#ten#eleven#twelve#thirteen#fourteen...
    から 2024-04-06 21:48:47
    0
    1
    637
    CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
    から 2024-04-06 20:22:15
    0
    1
    454
    3 レベル階層のカスタム分類を使用して woocommerce 関連製品を選択します 「スポーツ」というカスタム分類を持つ woocommerce ストアがあります。分類には、親、子、子という 3 つのレベルがあります。たとえば、屋内スポーツ > アリーナ ス...
    から 2024-04-06 20:05:30
    0
    1
    544
    MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
    から 2024-04-06 19:39:29
    0
    1
    441
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート