HTMLを教える記事
|
アーティストになるつもりがない場合は、開発者として HTML を読んで、必要に応じて簡単な変更を加えるだけで済みます。以下の私の考え方に従ってください。この記事は HTML を理解するのに役立つことを保証します。もちろん、読みながら自分で試してみると、より深い理解が得られます。では、始めましょう: (以下の記号はすべて英語で入力されています) 1. HTMLの基本ルール <html> <ヘッド> <title>私のウェブページ</title> ………………………….. </head> <本文> ………………。 </本文> </html> ほぼすべての Web ページはこの形式に従います。これは Web ページに必要なタグです。各タグは < > 内に配置され、</ > で終わりますが、省略記号の代わりに多くの乱雑なものが追加されますが、これが私たちが目にするコンテンツです。 上記のコードをメモ帳にコピーし、.html ファイルとして保存して Web ページを作成します。 次に、メモ帳で開き、<body> の間に「Home」という単語を追加して保存し、開いて次の画像を確認します。 次に、ホームページの前後にタグ <a> を追加して <a href=”#”>ホームページ</a> に変更し、保存して効果を確認します。 それはインターネットでよく見かけるハイパーリンクでしょうか?ここで「ホーム」をクリックしても何も変わりません。空のリンクを追加したからです。ですから、鉄は熱いうちに打て、というわけです。前の方法に従ってページを作成し、b.html として保存し、上記の「#」を b.html に置き換えて、ページを開いて「ホーム」をクリックします。ページ b にジャンプするでしょうか? (もちろん、ページ a とページ b は同じディレクトリにある必要があります。) ここまでで、Web ページ上のすべての機能が <a> などのさまざまなタグによって実装されていることを理解できたはずです。これらのタグの機能を覚えておくだけで十分です。 2. Webページの構造 インターネットを閲覧するときに注意してみると、ウェブページは実際には図に示すようにブロックに分割されています。 もちろん、これはあくまでも大まかな構造です。必要に応じて、多くのブロックに分割することができます。ブロックに分割する主な目的は、側面を変更し、それぞれの表現スタイルを決定することです。 これは主に <div></div> タグによって実現されます。「ホームページ」に <div> タグを追加してみます。 <div> <a href=”b.html”>ホームページ</a> </div> 保存してもう一度開いてみてください。効果はどうですか? 変更前と同じですか? いくつか変更を加えてみましょう: <div style=”幅:200px;高さ:100px;境界線スタイル:solid;” > 操作中は、マークした領域が青い背景で表示されます。 <div></div> ブロックをたくさん追加すると、Web ページを 8 つの部分に分割して、各ブロックに必要なものを配置できます。 もちろん、多くの <div> は style="" を追加します。これらのスタイル設定が類似している場合、それぞれを設定するのは面倒です。通常は、これらのスタイルを別の .css ファイル (Web ページ内の各タグの表示スタイルを制御する) に配置し、必要な場所で呼び出します。以下で試してみましょう。 新しいメモ帳を作成し、名前を c.css に変更して開き、次のように記述します。 #ヘッダー{幅:200px;高さ:100px;境界線スタイル:solid;} そしてa.htmlで削除します 次に、</head>の前に<link rel="stylesheet" type="text/css" href="c.css" />を追加します。 それは c.css ファイルを導入することです。 CSS を別のファイルに配置する利点は、このスタイルが多くの場所で参照されている場合、この 1 か所を変更するだけですべてが変更されることです。そうでない場合は、各場所を手動で変更する必要があり、後でメンテナンスを行うのに不便です。 最後に、a.htmlの<div>を<div id=header>に変更します。 効果は以前と同じですか？ ここまでくれば、もう「詩は書けなくても暗唱できる」はずです。この記事は主に、HTML の一般的な理解と HTML が何であるかを知ることを目的としています。まだ取り上げていないタグがたくさんあります。そのためには、Web デザインに関する本を見つけて読んで覚える必要があります。 |
<<: CSS の border 属性と display 属性の使い方の簡単な分析
推薦する
カンマで区切られたmysqlの分割関数の実装
1: 文字列を区切るためのストアドプロシージャを定義する 区切り文字 $$ `mess`$$ を使う...
React の国際化 react-intl の使用
React で国際化を実現するにはどうすればよいでしょうか? react-intlプラグインは、Re...
JS を使って CSS3 で丸い角を実装する方法
IE で CSS3 を使用して角を丸くする方法を探していたときに、例を見つけました。まだテストして...
Vue3.0 手書き拡大鏡効果
達成される効果は、固定ズームが 2 倍になり、マウスが左側の画像領域に入るとマスク レイヤーが表示さ...
NginxとLuaによるグレースケールリリースの実装
memcachedをインストールする yum インストール -y memcached #memcac...
Windows Server 2008 R2 マルチユーザー リモート デスクトップ接続ライセンス
仕事ではリモート サーバーが必要になることが多く、次の 2 つの問題に遭遇することがよくあります。 ...
Centos7のシステム言語を簡体字中国語に変更する方法
例示するシステムを自分でインストールする場合は、通常、システム言語をカスタマイズできます。ただし、ク...
Docker ベースの Etcd 分散デプロイメントの方法と手順
1. 環境整備1.1 基本環境NTP設定: 省略 #時間の一貫性を確保するためにNTPサービスを設定...
Nginx 書き換えジャンプの適用シナリオの詳細な説明
アプリケーションシナリオ1: ドメイン名ベースのリダイレクト会社の古いドメイン名は www.accp...
Vueはページdivボックスのドラッグアンドドロップソート機能を実装します
vue は、ページ上の div ボックスのドラッグ アンド ドロップ ソート機能を実装します。 序文...
シンプルなページカウントダウンを実現するJavaScript
この記事では、参考までに、シンプルなページカウントダウンを実装するためのJavaScriptの具体的...
Reactのref属性を深く理解する方法
目次概要1. Refsオブジェクトの作成1.1 React.createRef() 1.2React...
コネクタコンポーネントから Tomcat のスレッドモデルを見る - BIO モード (推奨)
Tomcat の上位バージョンでは、デフォルト モードは NIO モードを使用することになります。...
ネイティブ CSS で無限テキストカルーセルを実装する一般的な方法
テキストカルーセルは私たちの日常生活で非常に一般的です。スーパーマーケットや実店舗の入り口には、テキ...
Vue フロントエンド開発における keepAlive の使用方法の詳細な説明
目次序文keep-avlive フック関数keep-avliveはどのコンポーネントをキャッシュする...