ホームページ ウェブフロントエンド htmlチュートリアル Web デザインにおける HTML のよくある 5 つの間違い

Web デザインにおける HTML のよくある 5 つの間違い

Dec 16, 2016 pm 02:28 PM

1.网页背景色的设置

  犯错机率:很大

  普遍性:较广

  犯错可能性:懒/不知道

  约2年前我曾发现21cn上出现过一次没有设置背景色的情况,当时我用Email通知了他们,自此之后这个问题我从没犯过。

  绝大部分人的窗口背景颜色都是白色,但如果象我这样个性的人,就会把windows窗口的背景颜色改成灰色或其他色,这样一来,如果你没有设置网页的背景颜色的话,你以为正常的网页在我的电脑上看起来会是一团糟。

  2.Align center(自动居中)的滥用

  犯错机率:非常大

  普遍性:非常广

  犯错可能性:以为方便/以为好用

  工作中,修改、维护别人的网页是家常便饭,发现不少人有一个陋习:

  在表格中的文字或图片,你是这样来令它居中、靠左或靠右过?

  

大家好啊!!
 
  

  当有些表格很多、文字很多、内容分得很细的时候,爱用这种方法(它在DW里的快捷键是Ctrl+Alt+C,FP不知道是什么)的人往往会狂用,惨了,我一碰到这样的网页就头痛,为什么要用那么多

来居中呢?tell me why?难道表格没有居中属性吗?为什么要加入这些垃圾代码?特别修改的时候也不能把文字或图片删除了就能自动清除

建议使用来居中,当需要多重定位的时候,才考虑

,因为这个代码并不好处理,所以能用表格代替就用表格替代。

  3.重复使用实现相同功能的代码、或杂七杂八的乱套代码 
  
  犯错机率:非常普遍

  普遍性:非常普遍

  犯错可能性:复杂多样

  大家先来看一看下面的代码: 
  

标 题 

你觉得这样的代码看起来感觉怎么样呢?

  我不知道读者有什么感觉,压根我一看到这样的代码就会先自我麻木十来秒,这十来秒目的是为了找一个能表达我的思想感情的词(我?你想反问我吗?sorry~~,我一般不犯,因为我做网页至少有一半以上的时间在浏览代码,代码中多了不该多的东西我一眼就能看出来。)。

  看看上面的代码,使用了2个class,4个font来定义2个文本,其实这样的问题很多时候是在大家不断的修改中产生的,对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重,当然,事实上别人浏览这个网页的时候,是没有任何问题的,但维护的人就…………。 
这些多余的垃圾代码完全是可以省略掉的,其实上面的例子不够严重,更恐怖的我都见过。

  另外还有一个问题也要提提的,就是

...

...
,为什么要用它们呢?tell me why~~,有甚者是这样的:

  

 
  
 
  

 
  

标 题 

你觉得这样的代码看起来感觉怎么样呢?

そのようなコードを見ると、私は非常に無力になります (さらに無力なのは、頻繁に目にするので必ず読まなければならないということです)。簡単にしてみましょう:

title このコードは何だと思いますか?

世界がだいぶ静かになったように思えますか? 「タイトル」以降のテキストは、 のクラスで定義できます。CSS を使用しない場合でも、追加の <.font> を使用しても問題ありません。

4. テーブルが正しくネストされていません

エラーの確率: 一般

一般性: 一般的

エラーの確率: これについてはわかりません

実際、これはよく知られている問題ですが、人々はまだテーブルの入れ子が間違っていると、上司にオフィスに呼び出されて叱られる可能性があり、ADSL を 2 ~ 3 分間使用しても通常の Web ページを開くことができないと思われる可能性があります。 まず最初の問題について説明します。それは、大きなテーブル内でテーブルを連続的にネストすると、Web ページを開く速度が遅くなるということです (現在の IE ではこの問題は改善されていますが、これを行うことはまだ推奨されていません)。一方で、メンテナンスや変更が非常に不便です。一般的に、単純なアプリケーションであれば 3 つまたは 4 つのレイヤーでも問題ありませんが、すべてを表にまとめないでください。 2 番目の問題は、無料のカウンター コードを含むすべてを大きなテーブルに配置することです。へー、何が起こると思いますか?実際、これは大したことではありません。最も深刻なのは、IE がクラッシュしたようで何も表示されないことです。解決策は、カウンターを他のコンテンツと同じテーブルではなく、別のテーブルに配置することです。

5. コードのインデントを記述するときは、タブの代わりにスペースを使用してください

エラーの確率: 平均的

普遍性: 少ない

エラーの可能性: Tab を使用した方が良いかどうかはわかりません

この質問は js についてです、vbs、asp、phpなど、HTMLではタブを使用できません。インデントとは何か、プログラムの書き方を知っている人は知っていますか?スペースを使用する人もいれば、Tab を使用する人もいます。スペースを使用する場合は、今後は代わりに Tab を使用してください。

天极yesky

上記は、Web デザインにおける 5 つの一般的な HTML エラーの内容です。その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。



このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

CSS3をベースとしたWebデザインスキルと実践経験の共有 CSS3をベースとしたWebデザインスキルと実践経験の共有 Sep 08, 2023 pm 07:07 PM

CSS3をベースとしたWebデザインスキルと実践経験の共有 インターネット時代の今日、Webデザインの重要性はますます高まっています。 CSS3 の登場により、デザイナーはさまざまな素晴らしい効果を使用してユーザーを魅了できるようになりました。この記事では、読者の Web デザイン レベルを向上させることを目的として、CSS3 に基づいた Web デザインのスキルと実践的な経験を共有します。 1. トランジション効果を使用する トランジション効果は、ある状態から別の状態への要素のスムーズなアニメーション効果を生成できます。 CSS3 トランジション プロパティを使用すると、次のことができます。

Web デザインにおける絶対配置の独自の利点を明らかにする Web デザインにおける絶対配置の独自の利点を明らかにする Jan 23, 2024 am 08:16 AM

Web デザインにおける絶対配置の独自の利点を探る Web デザインでは、絶対配置が一般的に使用されるレイアウト方法です。絶対配置を使用すると、Web ページ上の指定された位置に要素を正確に配置でき、特殊なレイアウト効果を簡単に実現できます。この記事では、これらの利点を検討し、具体的なコード例で説明します。要素の正確な配置 絶対配置により、Web ページ上の要素の位置を正確に制御できます。要素のtop、right、bottom、left属性を指定することで、要素を

簡単なガイド: Web デザインのプロ意識と美しさを高める優れた CSS フレームワークを作成する 簡単なガイド: Web デザインのプロ意識と美しさを高める優れた CSS フレームワークを作成する Jan 16, 2024 am 09:02 AM

完璧な CSS フレームワークを作成する方法を説明する 5 つのステップ: Web デザインをよりプロフェッショナルで美しくする プロフェッショナルで美しい Web デザインを維持することは、すべての Web デザイナーの夢です。そして、完璧な CSS フレームワークを確立することが、この目標を達成するための鍵となります。 CSS フレームワークは、デザイナーが Web ページのレイアウトとスタイルを迅速に構築するのに役立つ、事前に決定されたスタイル シートとルールのセットです。今日は、完璧な CSS フレームワークを作成するための 5 つのステップの方法を紹介します。具体的な手順は次のとおりです。 ステップ 1: 要件を分析し、最初にフレームワーク構造を決定します。

ドリームウィーバーとは ドリームウィーバーとは Jun 13, 2023 pm 02:53 PM

Dreamweaver は、Adobe が発売した Web デザイン ソフトウェアで、ビジュアル ページ エディターを提供し、HTML、CSS、JavaScript コードの手動編集もサポートしています。ユーザーがレスポンシブな Web ページ、アプリ、モバイル アプリを簡単に作成できるようにする多くの機能とツールが備わっています。

CSS サードパーティ フレームワークの導入が Web デザインに及ぼす影響を調査する CSS サードパーティ フレームワークの導入が Web デザインに及ぼす影響を調査する Jan 16, 2024 am 10:32 AM

CSS へのサードパーティ フレームワークの導入が Web デザインに及ぼす影響を調査する はじめに: インターネットの急速な発展に伴い、Web デザインの重要性がますます高まっています。ユーザー エクスペリエンスを向上させ、より豊富な機能を提供するために、開発者は多くの場合、設計と開発を支援するサードパーティのフレームワークを使用する必要があります。この記事では、CSS サードパーティ フレームワークの導入が Web デザインに及ぼす影響を調査し、具体的なコード例を示します。 1. CSS サードパーティ フレームワークとは何ですか? CSS サードパーティ フレームワークは、Web ページの構築時に直接呼び出すことができる、事前定義された CSS スタイルとコンポーネントのセットです。これらのフレームワークは内容が豊富で、

CSS3 テクノロジーを使用してクールな Web ページ効果を作成する方法 CSS3 テクノロジーを使用してクールな Web ページ効果を作成する方法 Sep 11, 2023 pm 12:54 PM

CSS3 テクノロジーを使用してクールな Web ページ効果を作成する方法 インターネットの発展に伴い、Web デザインの重要性がますます高まっています。 CSS3 テクノロジーの出現により、Web デザイナーにより多くのインスピレーションと創造的な空間がもたらされました。 CSS3 には豊富な機能と効果があり、簡単にクールな Web ページ効果を実現できます。この記事では、一般的に使用される CSS3 機能をいくつか紹介し、例を使用してこれらの機能を使用してクールな Web ページ効果を作成する方法を示します。境界線の効果 境界線は Web デザインの一般的な要素であり、CSS3 の境界線機能を使用して、境界線にさらに効果を追加できます。

CSS 位置レイアウトを使用して Web ページのカード レイアウトをデザインする方法 CSS 位置レイアウトを使用して Web ページのカード レイアウトをデザインする方法 Sep 28, 2023 am 08:17 AM

CSSPositions レイアウトを使用して Web ページのカード レイアウトをデザインする方法 Web デザインでは、カード レイアウトは一般的で人気のあるデザイン方法です。コンテンツを独立したカードに分割し、各カードには特定の情報が含まれており、きちんとした階層化されたページ効果を簡単に作成できます。この記事では、CSSPositions レイアウトを使用して Web ページのカード レイアウトをデザインする方法を紹介し、具体的なコード例を添付します。 HTML 構造の作成 まず、カード レイアウトを表す HTML 構造を作成する必要があります。

Web デザインにおける要素セレクターの適用分野 Web デザインにおける要素セレクターの適用分野 Jan 13, 2024 am 10:35 AM

Web デザインで要素セレクターを適用するには、特定のコード サンプルが必要です。Web デザインでは、要素セレクターは非常に重要な CSS セレクターであり、Web ページ内の要素のスタイルを制御および調整するのに役立ちます。要素セレクターを柔軟に使用することで、さまざまな絶妙な Web デザイン効果を実現できます。 1. 要素セレクターの基本構文と使い方 要素セレクターは CSS セレクターの中で最も単純なタイプで、HTML 要素のタグ名を指定して、対応する要素を選択します。要素セレクターの基本構文は次のとおりです。 タグ名 {

See all articles