Web フロントエンドの入門: 1 時間でページの書き方を学ぶ_html/css_WEB-ITnose

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

1 時間でページを書く方法を学びましょう

末期の怠惰ながん患者として、私は常に問題の単純な解決策を探すことに慣れており、問題を単純化することにも慣れているので、今日は次のことを共有したいと思いますWeb フロントエンドを始めるための簡単な方法です。
トピックが1時間設定されているので、これ以上くだらない話はやめて、時計が始まります

1. フロントエンドとは何ですか

フロントエンドとは簡単に言えば、Webページを作成することです(しないでください)マスター、この記事のすべてをシンプルにしてください)

2. フロントエンド テクノロジー

html の具体的な意味については、Baidu を参照してください。OK、あなたはテキストを表します。テキストはテキスト ファイルです。準備は完了です。Web ページの作成を開始します

コンピューターをお持ちの場合は、まず始めてください。ファイルに名前を付けて、サフィックスを html に変更します。ポップアップ ボックスが表示されるので、[OK] をクリックします。このファイルをクリックすると、ほとんどの人はそのファイルを開くことができます。このページを閉じずに次のステップに進みます

4. コンテンツを追加します

作成したファイルを右クリックして、メモ帳で直接開くことができます。OK、ドキュメントに「hello world」と入力します。今開いたページを更新します。ブラウザ~ 予想どおり、hello world があるはずです

5. ページ構造

ドキュメントに次のコードを入力します

< ;!DOCTYPE html>

Document

6.

このコード行はドキュメントの最初の行にあり、ドキュメント タイプを宣言するために使用されます

1 には、 の宣言が 3 つあります。 HTML5 には上記の 1 つの宣言のみがあります

2. 宣言は HTML タグではありません


..

全体ページドキュメントのコンテンツは HTML タグで囲まれています

1. この Web ページが英語の Web サイトであることをブラウザーに伝えます

2. lang="zh" は Web サイトが中国語の Web サイトであることを示します

3.省略します



....


head タグには、ドキュメントのさまざまな属性や情報を記述するタグ (、< など) を配置できます。 ; script>、<link>、<style><p><meta charset="UTF-8"></p> <p>meta 要素はページ情報を提供します</p>1. charset="UTF-8" の説明ページをメタに配置します。エンコード形式はUTF-8<p>2です。metaにname="keywords" content="html, css"を記述します</p><title>Document

タイトルを定義します必要に応じてドキュメントに名前を付けることができます



....

body タグには、画像の挿入、説明の記述など、ドキュメントのすべてのコンテンツが含まれます。 、ビデオの挿入など。これらはすべて本文に配置されます

7. 実際のページ

Baidu ならご存知でしょう

-left:20px;font-size:13px;font-weight:bold;}

.logo{text-align: center;}

.logo img{width:270px;height:129px;}

.search{ text-align:center;}

.search input{width:539px;height:34px;border:1px Solid #b6b6b6 ;}

.検索ボタン{{幅:100px; 高さ:38px; 背景:#3385ff;ボーダー: 1px ソリッド #3385ff;color:#fff;cursor:pointer;}

糯米

a href="#"&g t;マップ

&lt; img src = "bd_logo1.png" "&gt; lt;/button&gt;ファイルはstyleタグに追加されます。具体的な意味は後で説明します。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!