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

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

WBOY

リリース： 2016-06-24 11:18:58

オリジナル

1144 人が閲覧しました

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

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

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

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

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

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

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

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

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

5. ページ構造

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

< ;!DOCTYPE html>

Document

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

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

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

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

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

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

3.省略します

....

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