HTMLの紹介

9263 ワード
webフロントエンド
HTMLの紹介
記事の目次
  • HTML紹介
  • CSアーキテクチャ＆BSアーキテクチャ
  • Webフロントエンド技術体系
  • 開発ツール選択
  • テキストエディタ
  • 統合開発環境
  • HTML概要
  • HTML構造
  • 基本文法
  • 元素（Element）
  • タグ
  • 属性
  • 常用HTMLタグ
  • 特殊文字
  • グローバル属性
  • フォーマットラベル
  • テキストラベル
  • ハイパーリンクラベル
  • 絶対経路（Absolute Path）と相対経路（Relative Path）
  • 画像ラベル
  • メディアタグ
  • 表ラベル
  • フレームラベル
  • フォームラベル
    • CSアーキテクチャ&BSアーキテクチャ
    CSはClient/Server（クライアント/サーバ）構造であり、C/S構造は技術的に成熟しており、その主な特徴は相互性が強く、安全なアクセスモード、ネットワーク通信量が低く、応答速度が速く、大量のデータの処理に有利である。しかし、この構造のプログラムは性に対して開発され、変更が柔軟ではなく、メンテナンスと管理が難しいです。通常は小型LANに限られており、拡張には不利です。また、この構造のクライアントごとに、対応するクライアントプログラムをインストールする必要があるため、分布機能が弱く、互換性が悪いため、迅速な配置と配置が実現できず、クライアント更新ごとに再インストールが必要となるため、汎用性に欠けるため、大きな限界がある。一定の専門レベルの技術者が完成することを要求します。
    BSはBrowser/Server（ブラウザ/サーバ）構造であり、一つのサーバーを維持するためだけにインストールされ、クライアントはブラウザを使ってソフトウェアを実行している。B/S構造アプリケーションは、従来のC/S構造アプリケーションに対して非常に大きな進歩を遂げています。B/S構造の主な特徴は、分布性が強く、メンテナンスが便利で、開発が簡単で、共有性が強く、全体的にコストが低いことです。しかし、データの安全性の問題、サーバに対する要求が高すぎて、データの転送速度が遅くて、ソフトウェアの個性化の特徴が明らかに減少しています。例えばブラウザを通じて大量のデータ入力やレポートの応答、専用プリント出力などを行うのは難しいです。また、複雑な応用構造を実現することは大きな困難がある。
    Webフロントエンド技術システム
  • HTML：ウェブページを実現するためのタグ型言語である構造
  • CSS：ウェブページの構造を美化するための記述型言語
  • JavaScript：シナリオ言語であり、事項ページのダイナミック効果（特効、フォーム検証など）
  • JQuery/zepo：JSライブラリでは、多くのツール関数
  • Bootstrap：UIフレーム
  • Vue/AnglarJS/ReactJS：JSフレーム（MVVM）
  • Webpack：パッケージ
  • モバイル端末／WeChatウィジェット：モバイル端末技術
  • nodeJS：JS運行環境（サービスエンド技術）
    • 開発ツールの選択
    テキストエディタ
  • 手帳
  • Editplus
  • Notepad++
  • ユーティリティ
  • SublimeText
  • VS Code
  • Vim
  • Atom
    • 統合開発環境
  • Dreamweaver
  • Hbuilder/Hbuilder X
  • Webstrom
  • Apple
  • ・
    • HTMLの概要
    HTML（Hypertext Markp Language）ハイパーテキストマーク言語は、ウェブ文書を構成する主要言語であり、インターネット上で最も広く使用されているマーク型言語でもある。
    HTML構造
    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body bgcolor="blue">
    
    hello
body>
html>
    HTMLは一連のラベル、属性及びテキストから構成されており、ブラウザにウェブページを表示するための構造であり、HTMLはブラウザの母国語である。
    基本文法
    一つのHTML要素（Element）は、一般に開始ラベルと終了ラベルから構成され、ラベルの間に他のサブラベルとテキスト内容が含まれている可能性がある。また、開始ラベルにはいくつかの属性が含まれています。
    元素（Element）
    サブ要素
    
<div class="wrap" id="main">       div>
    ラベル
    ラベルには通常、開始ラベルと終了ラベルが含まれています。開始ラベルの内部には属性が含まれています。終了ラベルと開始ラベルの同名がありますが、ラベルの前には「/」を使用して終了ラベルとして表示する必要があります。
    <a href="http://www.softeem.com">      
a>
    ラベルはペアで表示されるのが一般的ですが、例えばシングルタグ：meta、br、hr、img、inputなど、これらのラベルは最初だけで終わっていません。
    属性
    属性はスタートラベルの内部に含まれています。キーから構成されています。左は属性名、右は属性値です。
    <input type="text" name="username" id="username">
    以上のtype=「text」、name=「username」、id=「username」を属性と呼びます。
    また、HTMLタグの属性には属性値の属性がありますか？属性名だけがあります。属性値は属性名自体です。
    audioタグのautay属性、controls
    inputラベルのreadonly、selected、checked
    注意事項
    HTML 5のタグと属性は大文字と小文字を区別しません。
    常用HTMLタグ
    特殊文字
    場合によっては、htmlページにいくつかの特殊な記号を表示する必要があります。例えば、著作権、「<>」などの記号です。したがって、これは特殊な意味を表すエンティティを提供します。
    HTMLコード
    ページ表示の説明
    &
    &
    "
    」
    ®
    ®
    ©
    ©
    &トラッド
    ™
    <
    ><
     
    スペース
    以上)コードは末尾に「;」をつける必要があります。
    グローバル属性
    HTMLタグにはグローバル属性が含まれています。つまり、すべての要素がサポートしている属性です。具体的には以下の通りです。
  • id：設定要素の一意の表示
  • class：要素を分類し、統一様式の制御
  • style：インラインのスタイル属性で、要素を設定するためのスタイル情報
  • title：元素にヒントテキスト情報を追加する
  • data-*：httlm 5に追加されたデータラベル
    • 書式ラベル
  • p
  • ul、ol、li、dt、dd
  • ブロックquot
  • br
  • pre
    • テキストラベル
  • h 1~h 6
  • b、i、u、del、strong
    • ハイパーリンクラベル
    aラベルはハイパーリンクラベルとして表示され、一般的にはページジャンプ、ページ内ジャンプ（アンカーリンク）、jsスクリプトを実行するために使用されます。
    絶対パス（Absolute Path）と相対パス（Relative Path）
    画像ラベル
  • img
    • メディアタグ
  • アウディ
  • video
  • canvas
    • テーブルラベル
  • テーブル
  • thead、tbody、tfoot
  • tr、td、th
    • フレームラベル
  • iframe
    • フォームラベル
  • form
  • input
  • text、date、time、week、moth、email、url、number、カラー、range
  • password
  • hidden
  • checkbox、radio
  • button、submit、reet
  • セレクト、オプト
  • textarea
  • button
  • button
  • submit
    • 先端学習ノート2-1 CSS