Day 7

7333 ワード
おしゃれなライオンのように CSS html front end テキストリンク

📖Today I Learned


✅Tabular data


✔ <table>


:表、見出し(見出し)、行(tr)、列(col)、セル(td)、セル見出し(th)の作成<caption>:表のタイトルまたは説明、<table>要素の最初の子<thead><tbody><tfoot>:タイトル、本文、脚注
  • 表レイアウト影響X、CSS指定スタイル使用可能
    • <tr>:表行を分割する場合<th>:行、列の接頭辞(スクロール、中央揃え)<td>:セルを区切るために使用され、HTML要素のすべてのタイプを含めることができる<colspan="셀의 개수">:列の連結(横連結セル)<rowspan="셀의 개수">:行連結(縦連結セル)<colgroup><col>:一列に共通スタイル周期を使用可能
    <style>
  .구분 {
        width: 20%;
      }
  .이름 {
        width: 50%;
      }
  .판매량 {
        width: 20%;
      }
</style>
<colgroup>
        <col class="구분" />
        <col class="이름" />
        <col class="판매량" />
</colgroup>
    <scope>:<th>要素中<td>接続関係の確立
  • row:進行方向
  • col:熱方向進行

    • ✅HTML Living Standard


    HTML Living Standard (html.spec.whatwg.org) Multipage Version

    HTMLの整理

  • ロマンチックな表記でエンコード?
    -人またはマシン(特に検索エンジン)が寸法を読み、既知のコードで意図を記述します.
  • h 1~h 6匿名領域の生成
  • mataの「og:title」
    - open Graph Protocol(Facebook...)
    - https://ogp.me/ 
    • <head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
  • metaの「twitter.description」
    - https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
  • Entity code https://entitycode.com/
  • table:divはtableを作成することもできますが、最近は使用していません.
    • Quartz.net
    [Fluth]NotificationListener(無限スクロールなど)にスクロール