Web アプリケーション設計を改善するための HTML のリファクタリング_html/css

この記事では、過去のプロジェクト開発経験と組み合わせて、優れた構造、有効性、レイアウトの 3 つの観点から Web アプリケーションのデザインを改善するために HTML を再構築するためのいくつかのルールとプラクティスをまとめます。参照の一部は、「Web アプリケーションデザインを改善するための HTML の再構築」からのものです。

リファクタリング。リファクタリングとは何ですか?なぜリファクタリングするのか。

リファクタリングとは、プログラムの動作を変えずに小さな変更を加えるプロセスであり、コードを徐々に改善するプロセスです。時間の経過とともに蓄積された不良コードを削除して、より明確で保守、デバッグ、新機能の追加が容易なコードを作成することは、コーディングプロセスの後半だけで行うことはできません。また、必要なときにコードが実行不可能になったと認識した場合でも実行できません。書き換えるには、開発の最初から徐々に蓄積して修正する必要があります。以前は、日々のコーディングがランダムだったため、問題が蓄積し、徐々に広がり、最終的には最初からやり直す必要がありました。時間が経っても車輪の再発明ができない場合、唯一の選択肢はリファクタリングです。

何をするにしても、完璧を追求するあまり改善を怠らないように、少しリファクタリングをするのに十分な時間があれば、少しだけリファクタリングをしてください。将来、時間があるときにさらに多くのことを行うことができます。全体的な復興デザインは目を引く、忘れられないものですが、日々の積み重ねがなければ、どうやって大きな成果を達成できるのでしょうか？目標は、コードに毎日新しい変更を加えることです。数か月の粘り強さの後、誰もが誇りを持って明確なコードを作成できると思います。

整形式

最新の標準に準拠するようにマークアップを変換する際の最初のタスクは、整形式を実現することです。適切に構造化されていると、DOM の操作可能なドキュメントツリー構造の一意性が確保され、信頼性の高いクロスブラウザー JavaScript コードの基礎となります。混沌としたページの場合、信頼性の高い自動処理やテストを保証することは非常に困難です。第 2 に、ブラウザページの表示効果はさらに予測できません。文字化けしたページの場合、ブラウザごとに異なる方法を使用して、正しいフラグメントと正しいエラーを補足します。したがって、HTML を再構築する場合、最も重要なことは間違いなく、ページを適切に構造化することです。

適切に構造化するには、ほとんどの Web サイトで次の少なくともまたはすべてを実行する必要があります:

すべての実際のタグには一致する終了タグが必要です

空の要素は空の要素のタグ構文を使用する必要があります

すべての属性にはvalue

すべての属性は引用符で囲む必要があります

すべての&は&

としてエスケープする必要があります

未満の記号はすべて<

としてエスケープする必要があります

唯一のルート要素のみ

事前定義されていないエンティティアプリケーションはすべてDTD で宣言されています

個人的なプログラミングの習慣やランダム性によって過去に犯されやすかった間違いを考慮して、よく構造化された観点から考えると、将来 HTML を構築する際に特別な注意が必要な点がいくつかあります。

より適切な構造を実現するためのいくつかの重要なポイント:

名前を小文字に変更します。
は、
などに書き換えられます。XHTML では小文字の名前のみが使用され、すべての要素と属性は小文字でなければなりません。は Receive ではありません
属性値を引用符で囲みます 。はのように書き換えられます。スペースを含む一部の属性には、角括弧はあるものの、右角括弧が存在しないように見えることがあります。ブラウザごとに解析効果が異なるため、ブラウザ間で問題が発生する可能性があります。
不足している属性を入力してください。 などに変更されました。 XHTML は、属性名のみを含み値を含まない構文をサポートしていません。
空のタグを空の要素タグに置き換えます。 XML パーサーでは、すべての開始タグに一致する終了タグ
があり、対応する
、
が
などに書き換えられる必要があります。
重複を排除します。 xxxx は xxxx のように書き換えられます。ブラウザーが異なれば、重複する要素を含むドキュメントに対して異なる DOM ツリーが構築されます。要素が重複すると、DOM を読み取る必要がある JavaScript、CSS、およびその他のプログラムの作成、トラブルシューティング、および保守が困難になります。

Validity

Validity は、整形式性よりもわずかに厳密です。つまり、文書の構文が正しいことを保証するだけでなく、セマンティクスが正しいことも保証する必要があります。要素と属性は、それぞれのセマンティクスに従って適切な場所にのみ表示されるようにしてください。

効果は未来志向の開発の基礎です。効果的な Web サイトはデバイスに依存せず、効果的なページは、異なるインターフェイスのブラウザーを使用している場合でも、異なる読者に同じ情報を伝えます。

整形式チェックと妥当性チェックは基本的な文法制約の保証です。次に、セマンティクスが適切であることを確認する必要があります。

具体的な実装方法:

1. 暫定的なDOCTYPE文を追加

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

ログイン後にコピー

　　过渡式DTD让你不必要完全语义标记就能让文档通过验证，并且他允许包含i,b和center等这些不推荐使用的表现性元书，因此，在进一步改善文档的语义之前，你可以找出比修复更严重的结构问题。

　　2，删除所有不存在的标签

　　3，用CSS替代center，i，font等不被推荐或弃用的标签。

　　4，把行内（inline）元素，放在块（block）元素中

　　要做到有效，文档中所有元素是有效的严格性XHTML元素还不够，还必须保证它们之间的正确关系，浏览器和其他程序处理XHTML需要依赖元素间的正确位置。

Do you like this pictrue?<br /><img src = "file.gif" />I think it's really <em>neat</em><!--改写为--><p>Do you like this pictrue?<br /></p><div><img src = "file.gif" /></div><p>I think it's really <em>neat</em></p>

ログイン後にコピー

布局

　　1，熟悉元素语义

　　每一个元素都应各司其职：ul是无序列表，ol是有序列表，table是表格式数据，blockquote是应用，h1~h6是标题等。恰当的语义元素有助于屏幕阅读器呈现更容易理解的结构，也能保证不同平台间正确显示。对于初学者，很多本来语义良好的元书，如ul,blockquote,table等，被滥用与实现某种特定布局效果。这些滥用的目的是给网页生成特定的外观，然而这些外观难以跨浏览器，几乎除了设计者自己的电脑，通常很多地方都不通用的。

失败经历：

　　为了实现导航效果，一开始没有考虑内容语义，无意中将导航主项和相关联的菜单分开，在利用css中的相对定位，设定top和left属性，将相关菜单移动到相关的主项下。这样会导致一个严重的问题。一旦将不同页面放置在不同的分辨率的屏幕上，菜单就会错位。就是说，针对不同分辨率的屏幕，还要设计不同的top和left属性。

<div class = "nav">     <div class="nav01">菜单一</div><div class="nav02">菜单二</div><div class="nav03">菜单三</div></div><div class = "menu">    <div class="menu01">子菜单一</div><div class="menu02">子菜单二</div><div class="menu03">子菜单三</div></div>

ログイン後にコピー

　　优化设计过的导航HTML结构，组合主菜单和子菜单：

<nav>    <ul class="clear">        <li class="first"><a href="#">菜单一</a></li>        <li>            <span class="Darrow"></span> <a href="#">菜单二</a>            <dl>                <dt><span class="arrow"></span></dt>                <dd><a href="#">子菜单一</a></dd><dd><a href="#">子菜单二</a></dd><dd><a href="#">子菜单三子菜单三</a></dd>            </dl>        </li>        <li>            <span class="Darrow"></span> <a href="#">菜单三</a>            <dl>                <dt><span class="arrow"></span></dt>                <dd><a href="#">子菜单一</a></dd><dd><a href="#">子菜单二</a></dd><dd><a href="#">子菜单三子菜单三</a></dd>            </dl>        </li>    </ul></nav>

ログイン後にコピー

HTMLを書く目的は、特定の構造やページの外観ではなく、コンテンツをより良く見せる方法であるため、HTMLを書く前に、このコンテンツにどの意味要素を使用するかを必ず考えてください。

適切な HTML は、ブラウザ間の問題を処理するのに最適です。 Web デザインを取得したら、Web アプリケーションの構築を開始する前に、ページがどのように見えるかについて考えるのをやめ、ページが何を意味するかを考え始める必要があります。

2. テーブルレイアウトを置き換える

CSSベースのページはテーブルベースのページより小さくてシンプルです。

a) 書き込みと編集が簡単になり、ダウンロードが速くなります。

b) CSS に切り替えることで、帯域幅を節約できます。同時に、外部 CSS ファイルをキャッシュして再利用することができ、ページがダウンロードされるたびに再度ダウンロードする必要はありません。

表形式のデータを表示するために使用される table 要素を乱用したり、テーブルレイアウトを使用したりする代わりに、頻繁に使用される列レイアウトを検討できます:

1) 2 つの列、左側に固定幅のサイドバー、左側に可変幅のサイドバー右コンテンツ列

2) 左右に固定幅のサイド列、中央にコンテンツの 3 つの列。

2 列レイアウトに関する限り、可能な幅は 3 つあります:

(2) 左の列は固定され、コンテンツの列が表示されます。はパーセンテージ幅です

( 3) 両方の列はパーセンテージです

ユーザーエクスペリエンスを向上させる観点から、メインコンテンツはさまざまなウィンドウ幅に適応するようにサイズ変更できる必要があります。

　　3，内容与样式分离

　　当然我们的页面也需要漂亮的外观，以帮助我们在竞争中脱颖而出。这可以通过在独立的CSS样式中放置有关表现的信息来实现。CSS用来描述网页的外观，而浏览器可以自由选择不同的样式表或是修改过的样式表。实际上，你可以为不同的浏览器随意发送不同的样式表，也可以为它们独特的能力量身定制。这是响应式设计的基本实现方法。

　　“响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。”

　　出于方便或者是自身的编码习惯，在修改某种被更改的需求的样式代码时候，我们很容易在html代码中直接镶嵌样式代码。这样的做法除了更快的完成你暂时的任务之外没有任何好处。

　　4，使用CSS定位替代框架

　　网站使用框架的理由实际上就两种：

　　（1）为所有页面引入相同的静态内容，而不用单独编辑每个页面。例如导航，网页头部尾部。也就是说，单独的非框架页面可能比相应的框架页面更耗带宽，因为框架内容每次都要给客户端重新发送内容。

　　　（2）显示多栏外观。例如Java API，包含包和类的列表，主体内容

　　然而，过多使用框架将降低可用性：

　　　（1）难以标记数千或返回指定页面

　　　（2）难以保存和打印页面

　　（3）过多的滚动条占据屏幕的宝贵空间

　　在每一个页面上都有导航和其他相同或几乎相同的内容，对网站来说是非常普遍的，使用CSS取代框架，关键在于设立对应每个框架的div，每个div内容是对应框架里的文档内容。然而，这样做的问题在于，它违反了DRY原则（Don't Repeat Youself,别重复你自己），对于相同的内同，虽然有时候只是很小的变化，但还是需要不断在这一页那一页重复出现。重复内容通常也是代码的坏味道。框架在静态页面上避免恶劣不必要的重复，我提倡清晰，可维护的代码，在不损害用户界面的前提下，我更远一选择难看的代码而不是难看的用户界面。日常中原始的HTML是重复的，但不是我们必须编辑的，很多时候我们可以通过后台自动生成重复内容。

Apache服务器端包含：

　　通常，拥有服务器端包含的以.shtml结尾的文件会在发送到客户端之前，告诉服务器需要解析自身以及包含的内容

　　　几乎所有的Web服务器都支持某些形式的服务器端包含功能，使用服务器端包含各种非静态文件，性能有所降低，但影响不大。

<!DOCTYPE html><html>    <meta charset = "utf-8"><body>        <!--#include virtual = "/header.html" -->    <!---这里嵌套主内容-->    <!--#include virtual = "/footer.html"-->    <!--#include virtual = "/siderbar.html"--></body></html>

ログイン後にコピー

尽管Apache默认的编译会包含mod_include，但可能不会在所有目录上启用，你需要子啊Apache主配置文件或是.htacess文件中添加一下三行配置，以指向每一个使用服务器包含的目录：

AddType text/html .shtmlAddOutputFilter INCLUDES .shtmlOptions +Includes

ログイン後にコピー

PHP包含：

PHP的include函数有类似的功能

<!DOCTYPE html><html>    <meta charset = "utf-8"><body>    <!--主内容-->   <?php include("footer.html"); include("sidebar.html"); ?></body></html>

ログイン後にコピー

　　5，正确标记列表

　　正确标记列表能够提升可访问性，通常我们子啊列表中实现跳转和导航。

　　大部分浏览器给列表以及列表中的项目都制定特定的外观，通常表现为缩进和项目符号，可能不是你所需要的外观，因此很容易在搭建html的时候忽略它们的存在，放弃使用正确列表标记，而使用语义较差的标签，实现同样的效果。根据需求，你能够通过CSS可以容易地修复这些特定的外观。下面整理了开发中常用的CSS样式修改规则：

/*删除项目符号*/ ul{ list-style-type:none;       }/*载入外部图片自定义项目符号*/ ul li { list-style-image : url(images/str.gif);}/*去掉缩进的规则*/ ul{ margin-left : 0px; padding-left :0px;}/*把项目排成一行*/ ul,li{ display: inline; margin:0px; padding: 0px;}/*在列表项之间插入逗号*/ ul li:after{ content : ",";}/*制定项目的宽度，超出时显示省略号*/ div.titleholder { font-size: 8pt; width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}

ログイン後にコピー

　　然而，lu应用与列表上，blockquote应用在应用上。blockquote与ul相比，整理文本缩进更强大，更准确。

　　6，为图片添加width和height属性

　　　　width和height属性能让浏览器更快地样式化页面并展现给用户。但注意，这样做，对页面的显示速度有提升，但对下载速度并没有帮助。

　　　　出于一般项目开发触觉，改变图片的尺寸意味着要修改HTML，否则图片会奇怪地变大变小。如果需要经常改变图片，比如设计页面是，最好是在最后的阶段插入确定的宽度和高度。