201029_TIL

8452 ワード
html CSS テキストリンク

WHAT IS HTML?

  • HyperTextタグ言語略語
  • Webフレームワークの寸法言語を作成する

    • HOW TO USE HTML?

  • HTMLはタグの集合
    • である.
  • Tag:不等号(<>)のHTMLの基本コンポーネント

    • TREE STRUCTURE

    <html>
<head>
  <title> Page title </title>
</head>
<body>
  <h1> Hello world </h1>
  <div> contents here
  	<span> here too! </span>
  </div>
</body>
</html>

    SELF-CLOSING TAG

    <img src = "codestates-logo.png"/>

    MOST USED TAGS IN HTML

    <div>		Division
<span>		Span
<img>		Image
<a>		Link
<ul>&<li>	Unordered List & List Item
<input>	Input 	(Text, Radio, Checkbox)
<textarea>	Multi-line Text Input
<button>	Button

    div VS. span


    divラベルが1行を占める
    division 2
    spanタグが占有する空間はコンテンツサイズと同じspan 2 span 3である
    division 3

    リスト冊

  • item 1
  • item 2

    • 各種入力タイプ

    <input type = 'radio' name = 'choice' value = 'a'>
<input type = 'checkbox' checked>
<input type = 'password'>
    Achievement Goals
  • HTMLはmarkup言語であることが理解できます.
    *自分の言語で「構造的な言語を表す」という意味を表すことができます.
  • HTMLの構造と構文を理解して適用することができます.
    *Opengtag、clostingtag、self-closstingtagについて説明します.
  • は、一般的に使用されるHTML要素(要素)を理解し、それらの違いを説明する.
    *div、spanとは何か、違いは何か知っています.
    *ul、ol、liは何ですか.いつ使いますか.
    *input typeを設定することで、様々なタイプのinputを利用できます.
  • HTMLは、動的Webアプリケーションの構成として記述することができる.
    *簡単なWebプランをHTMLドキュメントとして表示できます.
    *idとclassを使用すると、人やコンピュータが読みやすい詩的なHTMLドキュメントを作成できます.
    *HTML 5の意味タグを使用すると、必要に応じて人やコンピュータが読みやすい可視化されたHTMLドキュメントを作成できます.

    • CSSはスタイリング


    外観やデザインだけではありません.
  • 適切な位置に配置(レイアウト)
    • 最小フォントレイアウト(レイアウト、レイアウト)、たとえば
  • テキストハイライト
  • の最も低いアクセス性(例えば色)

    • 先端開発者の素質

  • 感覚
  • ユーザー体験
    • の原因分析

    CSSファイルの追加


    href属性でCSSファイルをリンクする
    <link rel = 'stylesheet' href = 'index.css' />

    id VS. class


    class:
    を選択します.
    必要に応じて自由に命名できます
    同じ値を持つ大量のエンティティ
    エンティティには複数の値があります.
    スタイル分類
    id:
    選択#
    必要に応じて自由に命名できます
    ドキュメントに一意の値を持つエンティティは1つしかありません
    1つの値のみ
    特定のエンティティの名前付けに使用

    Achievement Goals

  • CSSの目的は理解できる.
  • のフロントエンド開発者の素質を理解することができます.
  • CSSの基本構文と構造は理解できる.
  • CSSをHTMLに適用する方法について説明します.
    *CSSをHTMLで直接定義することを推奨しない理由を理解します.
  • idおよびclassに関連するセレクタ規則は理解できる.
  • CSSを使用してテキスト
    • を装飾することができる.
  • CSSで使用される単位の2つの区分が理解できる.
    *どの単位がどのような状況に適しているかを確認します.
  • CSS boxモデルが理解できます
    * box model
    * width, height
    * margin, padding, border
    *測定ボックスサイズの2つの基準の違いは理解できます.
  • MDNやw 3 schoolなどのリファレンスサイトを使用してCSSプロパティを検索して使用できます.
    • SvelteでWebコンポーネントを作成する方法
    iOS10でウィジェットのデザインが崩れる問題の対処法