ホームページ ウェブフロントエンド htmlチュートリアル HTML 初心者 (ここ 2 日間、女の子と一緒に div+css を書いていますが、彼女の理解が必ずしも正しくないように感じています)_html/css_WEB-ITnose

HTML 初心者 (ここ 2 日間、女の子と一緒に div+css を書いていますが、彼女の理解が必ずしも正しくないように感じています)_html/css_WEB-ITnose

Jun 24, 2016 am 11:35 AM

まず最初に、私も途中で僧侶になった者ですので、正確ではない部分があるかもしれないことを説明させていただきます。

この内容は、私が北京の会社に勤めていた時に習ったのですが、当時一緒に勉強してくれる人がいなかったので、他の人から W3C について教えてもらい、自分で読んでタイプし始めたのを覚えています。その内容に従ってコードを作成し、毎晩陵城 3 時にアクセスして、各タグの機能を理解し (標準ではないかもしれません)、タグの属性を 1 つずつ確認します。私が自主的に書いた最初のページは表を使った履歴書でした。

コード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>个人简历</title></head><body bgcolor="#BBFFFF">    <center><h2>个人简历</h2></center>    <table cellpadding="0" cellspacing="0" border="1px" width="800px" height="600px" align="center">        <tr align="center" height="50px">            <td>姓名</td><td>Strip_liu</td><td rowspan="4">照片区</td>        </tr>        <tr align="center" height="50px">            <td>性别</td><td>男</td>        </tr>        <tr align="center" height="50px">            <td>电话</td><td>180xxxxxxxx</td>        </tr>        <tr align="center" height="50px">            <td>E-mail</td><td>strip_liu@xxx.com</td>        </tr>        <tr >            <td align="center">工作经验</td><td colspan="2">上大学的时候……</td>        </tr>        <tr>            <td align="center">个人介绍</td><td colspan="2">我叫XXX,……</td>        </tr>        <tr>            <td align="center">兴趣爱好</td><td colspan="2">我喜欢象棋……</td>        </tr>    </table>    <center><a href="这里当时写的是QQ空间地址">我的空间</a></center></body></html>
ログイン後にコピー

レンダリング:

厳密に言えば、このコードはまだ問題があります。なぜなら、当時私は div についてすでに知っていましたが、その使い方をまったく知らなかったからです。作ってみようと思いました 履歴書というとまず表を思い浮かべますが、もともと表の形になっているので、ちょっとセルを結合するだけで大​​丈夫です。

ここでコードについて話しましょう。書き出した後、中央のタグが破棄されていることに気付きました。ここでは、北京カラーが bgcolor 属性としてボディに直接追加されています。テーブル内の cellpadding は、セルの外側の距離を表し、区切るために使用されます。セルとセルのスペースは通常 0 に設定されます。 cellspacing cell spacing table spacing - テーブルの境界線とセルのパディング間の距離を表し、通常は 0 に設定されます。属性は一般的です ブロック要素はありますが、表示するように設定するものと表示しないように設定するものがあります。border の一般的な使用方法は、幅と高さを設定するために使用されます。もちろん、テーブル全体のブロック要素 (ラベル) では、幅と高さの両方が設定されます。
tr は row 要素、つまり tr タグのペアは td に対応し、td は列に埋められることを意味します。複数の行にまたがるセルの結合。同様に、colspan は複数の列の範囲を表します。
上記のコードから、text-align="center" 属性が使用されていることがわかります。この書き方はひどいですが、初心者にとってはこのように書くのが一般的であり、この方法の効果を理解しやすいです。それらの一部は行の中央に配置する必要があるため、 tr に書き込みます。また、中央に配置する必要がある列は 1 つだけであるため、列の中央配置を個別に記述します。

最後は a タグ、a タグはハイパーリンク、href 属性はリンク先のページです (http:// を href に追加する必要があることに注意してください。つまり、リンクは http プロトコルを使用します) );

実際、コードは非常に簡単なので、初心者でも見てみることができます。これらは基本的にテーブルに関するいくつかのことです。実際にページを作成するには、現時点でテーブルを使用するのは明らかに非現実的ですが、これは基礎でもあります。いくつか断片的に述べましたが、初心者にとって役立つことを願っています。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

HTMLは初心者のために簡単に学ぶことができますか? HTMLは初心者のために簡単に学ぶことができますか? Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTML、CSS、およびJavaScriptの理解:初心者向けガイド HTML、CSS、およびJavaScriptの理解:初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

HTMLでの開始タグの例は何ですか? HTMLでの開始タグの例は何ですか? Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Apr 04, 2025 pm 11:54 PM

GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する

WebアノテーションにY軸位置の適応レイアウトを実装する方法は? WebアノテーションにY軸位置の適応レイアウトを実装する方法は? Apr 04, 2025 pm 11:30 PM

Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...

HTML、CSS、およびJavaScript:Web開発者に不可欠なツール HTML、CSS、およびJavaScript:Web開発者に不可欠なツール Apr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は? CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は? Apr 05, 2025 am 06:15 AM

画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...

See all articles