HTML Day-1
15380 ワード
HTML
基本用語の理解
ネットワーク
最初のインターネットは1969年に米国防総省所属の高肯研究局(ARPA)が核電荷中で安定した情報交流を行うためにネットワーク研究を開始し、1983年を起点にTCP/IPパケット伝送方法に移行した.
1980年代、コンピューターは拡散したが、コンピューター間の通信はなかった.(米国防総省を除く)
今まではイントラネットでした.1989年、研究機関の各種ファイル、全世界に広がるファイルも交換する必要があるため、CERNのソフトウェア会社は1990年12月に世界ブロードバンドという最初のサービスを発売した.
これにより、インターネットはWWWの誕生を起点に大きく拡散し、NETSCAPE社は市場で大きな成功を収めたが、MicrosoftのWebブラウザExplorerはWeb市場の80%を独占した.(現在、Chromeは速度が速く、機能が強く、グーグルは主流/間もなく発売されるサービスが中断しています)
インターネットにはこのようなwwwだけでなく、電子メール、ファイル共有、ネットゲームなど多くのサービスが含まれています.私たちはここでまずwwwのhtmlを勉強します.
クライアントとサーバ
サーバ(情報を提供するユーザまたはコンピュータ)
---お願い↑--------回答↓----------
クライアント(情報を提供するユーザーまたはコンピュータ)
サーバはクライアントの要求に応答します.
クライアントは、Webブラウザを介してサーバにリクエストを送信します.
WebにはWebクライアント、Webサーバがあり、機能は同じです.
Webクライアントがデータを要求すると、Webサーバはhtmlとしてデータを送信し、Webブラウザでそのhtmlを解析し、情報を可視化して表示します.
PHP
サーバ側で実行されるプログラミング言語であり、Webクライアントが要求するurl拡張子がphpである場合、Webサーバ側はPHP言語で解釈し、Webサーバ側でHTML形式でWebクライアントに提供する.
Webブラウザ
Webクライアントとも呼ばれ、Webブラウザの種類はChrome、MasoAtge、FireFoxなどがあり、URLを通じてWebサーバにクライアントリクエストを出す機能です.また,Webサーバからデータを受信する場合,HTMLを解析して可視化することができる.
プロトコル
ネット上のパソコン同士でコミュニケーションをとるとき、共通の言語を使うと理解しやすい(通信).当時使われていた公用語をプロトコルと呼ぶ.インターネットプロトコル(HTTPS、HTTP、feed、tel)
IP
インターネットプロトコルの略で、ネットワーク上のコンピュータを区別するアドレス値です.
私のipアドレスをチェックする方法->cmd->ipconfig
HTML
HyperTextタグ言語の略.
プログラミング言語が反応する.ボタンを押すと、プログラミング言語である動的体験をユーザーに提供する関数が実行されます.逆に、表示言語はこの語がどこにあるのか、この文がどこにあるのか、本を読むように、静的に動作します.
△動的言語と静的言語を組み合わせて、ユーザー体験を増やす行為がWeb開発である.
Webサイトのスケルトン、フレームワークを作成する言語
HyperText
ハイパーテキストとは,最初にネットワークに登場したとき,研究者の論文を共有することを目的としている.論文には脚注があると言っていますが、これはハイパーリンクです.
自分の欲しいページを直接表示するように、ハイパーテキストと呼ばれるものに由来します.
CSS
HTMLドキュメントを視覚的かつ動的にする言語
(ただしCSSはプログラミング言語ではありません.Style Sheet言語と呼ばれ、内蔵の要素を選択的に使用して設計されています.Webブラウザの発展により、ダイナミックな機能も発揮できます.)
Javascript
プログラミング言語の1つ.コンテンツの変更と動的ページの作成を支援する言語
Node.js
JavaScriptベースの拡張可能なネットワーク開発フレームワーク
React.js
オープンソースのJavaScriptライブラリに基づいて、Webアプリケーションのユーザーインタフェースを作成
△Facebookで開発され、派生型物語本は旅行サイトAir&Bが作成した.
Webアクセス性
Webコンテンツを正常に使用できる一般ユーザから、高齢者や障害者などの身体や環境に制限のあるユーザまで、すべてのユーザがこれらのコンテンツに平等にアクセスできるようにするコンテンツの作成方法.
アクセス性が悪い:体の調子が悪くて見えない.
近接性が良い:音を聞く必要がなく近づく
Web規格
複数のブラウザに同じユーザ体験を持たせる技術、方法など.
クロスブラウザ(html、css)
本番
整理HTMLは以下の通りです.
1. HyperText Markup Language
2.テキストタグを使用したページ構造とデータの下図
3.HTMLドキュメントの拡張子は.htmlです.
4.HTMLドキュメントは、ドキュメントを作成できる任意のプログラムで作成できます.
5.HTMLドキュメントは大文字と小文字を区別しません.
6.HTMLドキュメントでは、スペースと改行は区別されません.(タグと機能を使用する必要があります)
7.HTMLドキュメントはカッコ(<コマンド>)で表記されています.
HTML要素
(1)<P>(3)Hi I'm HTML(2)</p>
(1) 여는 태그(opening Tag) : 요소의 이름(p)과 열고 닫는 꺽쇠 괄호로 구성
(2) 닫는 태그(Closing Tag) : 요소의 이름 앞에 슬래쉬가 있다.
(3)내용(Content) : 요소의 내용이며, 단순한 텍스트이다.
1から3を総称して要素と呼ぶ.大文字と小文字は区別されませんが、小文字で読めるようにしましょう.
HTMLの特殊文字
개행(Enter) : <br>
띄어쓰기 :
< : <
> : >
ⓒ : ©
[ : [
] : ]
特殊文字コード表の表示
コメントの使用
コメントとは、コードを実行しない部分を指します.
HTMLでコメントを使用する場合は、次のように入力します.
ショートカットキーはcntl+/<!-- 여기는 실행되지 않습니다. -->
段落タグ
断章取義の部分を段落と言います.作成段落のマークは以下の通りです.<p> 문단 내용 </p>
見出しラベル
タイトルを表すタグ
検索エンジンでキーワードとして使用されます.<h1>제목</h1>
<h2>작은제목</h2>
<h3>더 작은 제목</h3>
<h4>더욱 작은 제목</h4>
<h5>더더욱 작은 제목</h5>
<h6>더더더욱 매우 작은 제목</h6>
htmlドキュメントの表示
<-- ! 또는 html:5 를 치고 엔터 누르면 자동으로 틀이 완성된다. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> // 브라우저 상단 제목에 표시
</head>
<body>
// 아래는 주석처리된 문장, 실행되지 않음
<!--
제 9조 (서비스 이용시간)
서비스 이용시간은 당일 09시 0분 부터 ~~~
제 2조(개인정보의 처리 및 보유기간)
정부24 회원정보
수집근거 : 정보주체 동의
정자민원 신청이력
수집근거 : 정보주체의 동의
-->
<p> //문장 시작
<h3>제 9조 (서비스 이용시간)</h3>
//실제로는 이렇게 띄어쓰기 하지 않지만 사용은 할 수 있네...
서비스 이용시간은 당일 09시 00분터~~~
</p>
<h3> 제 2조(개인정보의 처리 및 보유기간)</h3>
<h5> 정부24 회원정보</h5>
수집근거 : 정보주체의 동의
<h5> 전자민원 신청이력</h5>
수집근거 : 정보주체의 동의
</body>
</html>
スペースを入力することで書くことができますが、非常に不適切なコードです.したがって、HTMLの効率を向上させるためには、ul、liなどのリストタグを使用する必要があります.
リストのラベルは今度調べましょう.
<meta>タグについて
charset
画面に文字を表示するときに使用するエンコーディング方法を指定します.英語以外の文字を画面に表示するには、予め定められた文字セットを使用する必要がありますが、HTML 5のデフォルトではmetaタグを使用して、Webブラウザにutf-8という文字セットを使用することを通知します.<meta charset="UTF-8">
文字セットについては、次のサイトを参照してください.
文字セットの表示
http-equiv, name, content
http-equivとnameが作成されている場合は、コンテンツを設定する必要があります.
アトリビュート値については、次を参照してください.
viewport
次の説明欄では、ある環境を考慮するために設定された属性値の1つである属性名のnameに入ります.
2、3年前までは、ユーザーの少ないサイトにアクセスしていたとき、モバイル環境では、インターネットの画面が小さくなったり大きくなったりするように、非常に小さなハイヒールを見ることができました.これは,移動環境を考慮せずにウェブサイトを作成することによる誤りである.
これは画素差によるエラーであり,この問題を解決するために反応型サイトが出現し,反応型ページを作成するために属性値を設定する必要があるためviewportを用いる.
ex)
参考にする。hrefのハイパーテキスト参照について
linkラベルプロパティで使用される参照.linkプロパティのhrefを使用して、cssを外部から接続できます.詳細はlinkラベルを学習するときに議論します.
Reference
この問題について(HTML Day-1), 我々は、より多くの情報をここで見つけました
https://velog.io/@km2535/HTML-Day-1
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
(1)<P>(3)Hi I'm HTML(2)</p>
(1) 여는 태그(opening Tag) : 요소의 이름(p)과 열고 닫는 꺽쇠 괄호로 구성
(2) 닫는 태그(Closing Tag) : 요소의 이름 앞에 슬래쉬가 있다.
(3)내용(Content) : 요소의 내용이며, 단순한 텍스트이다.개행(Enter) : <br>
띄어쓰기 :
< : <
> : >
ⓒ : ©
[ : [
] : ]<!-- 여기는 실행되지 않습니다. --><p> 문단 내용 </p><h1>제목</h1>
<h2>작은제목</h2>
<h3>더 작은 제목</h3>
<h4>더욱 작은 제목</h4>
<h5>더더욱 작은 제목</h5>
<h6>더더더욱 매우 작은 제목</h6><-- ! 또는 html:5 를 치고 엔터 누르면 자동으로 틀이 완성된다. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> // 브라우저 상단 제목에 표시
</head>
<body>
// 아래는 주석처리된 문장, 실행되지 않음
<!--
제 9조 (서비스 이용시간)
서비스 이용시간은 당일 09시 0분 부터 ~~~
제 2조(개인정보의 처리 및 보유기간)
정부24 회원정보
수집근거 : 정보주체 동의
정자민원 신청이력
수집근거 : 정보주체의 동의
-->
<p> //문장 시작
<h3>제 9조 (서비스 이용시간)</h3>
//실제로는 이렇게 띄어쓰기 하지 않지만 사용은 할 수 있네...
서비스 이용시간은 당일 09시 00분터~~~
</p>
<h3> 제 2조(개인정보의 처리 및 보유기간)</h3>
<h5> 정부24 회원정보</h5>
수집근거 : 정보주체의 동의
<h5> 전자민원 신청이력</h5>
수집근거 : 정보주체의 동의
</body>
</html><meta charset="UTF-8">linkラベルプロパティで使用される参照.linkプロパティのhrefを使用して、cssを外部から接続できます.詳細はlinkラベルを学習するときに議論します.
Reference
この問題について(HTML Day-1), 我々は、より多くの情報をここで見つけました https://velog.io/@km2535/HTML-Day-1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol