それはあなたのHTMLスキルを過充電する時間です!🔋

21974 ワード
webdev javascript beginners html テキストリンク
はいはい、私は知っている.私は、あなたがそこのあらゆる熱いウェブ技術を知っているということを知っています.それは角度、イオン、デコ、ノード、Djangoとは何かどうか!本当に素晴らしい.
しかし、ここでは、HTMLを知っていますか?はい、そのハイパーテキストマークアップ言語?おっ!また、私はあなたがHTMLを知っているということを知っています、そして、あなたはこの言語でウェブサイトをコード化するとき、あなたは聖人です.あなたのHTMLゲームをパワーアップするいくつかの余分なバッテリーを追加する方法を知っていますか?
さて、私は何でも話しています!だけでいくつかの本当に素晴らしいHTML機能(特にHTML 5)を知ってマークアップゲームマークアップを提供してスクロールします.⚡

これをしましょう!

1️⃣ HTML 5 API🔌

HTMLジオロケーションAPIDocs 📃 ]
あなたのウェブサイトのナビゲーションのようなユーザーの位置情報を取得したり、マップを使用する必要がある場合は、ジオロケーションAPIはここにあります.
これは呼び出しによってアクセスされる navigator.geolocation これによりユーザのブラウザにプロンプトを追加し、位置情報にアクセスする許可を求めます.
例:
function getLocation() {
  // Check for the geolocation service
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    el.innerHTML = "Geolocation is not supported.";
  }
}
function showPosition(position) {
  el.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}

HTML WebワーカーAPIDocs 📃 ]
Webワーカーは、読み込み中にページのパフォーマンスに影響を与えずにバックグラウンドで実行されている独立したスクリプトです.
労働者は、そのコードによって指定されたイベントハンドラにメッセージを投稿することによって、それを作成したJavaScriptコードにメッセージを送ることができます.これは Worker() このような動作を行うコンストラクタです.
例:
// 1. CHECK FOR WEB WORKER SUPPORT
if (typeof(Worker) !== "undefined") {
  // Supported!
} else {
  // Not supported :(
}

// 2. CREATING A WEB WORKER OBJECT
if (typeof(w) == "undefined") {
  w = new Worker("worker_file.js");
}

// 3. SEND A MESSAGE FROM WORKER
w.onmessage = function(event){
  document.getElementById("workerdiv").innerHTML = event.data;
};

HTML SSE APIDocs 📃 ]
SSEサーバの送信イベントを表します.このイベントは、Webページが自動的にサーバーから更新を取得トリガされます.
このAPIは EventSource インターフェイス.
例:
// 1. CHECK SUPPORT
if(typeof(EventSource) !== "undefined") {
  // Supported
} else {
  // No server-sent events supported :(
}

// 2. RECIEVE EVENTS FROM SERVER
var source = new EventSource("myserver.php");
source.onmessage = function(event) {
  document.getElementById("serverresult").innerHTML += event.data + "<hr>";
};

HTML WebストレージAPIDocs 📃 ]
このAPIでは、Webアプリケーションは、ユーザーのブラウザ内でローカルにデータを格納できます.両方が含まれます localStorage and sessionStorage .
もう一つのオプションは、クッキーを作成することですが、Webストレージは、より安全であり、より良いですyou can store large amounts of data .
例:
// 1. CHECK SUPPORT
if (typeof(Storage) !== "undefined") {
  // supported!
} else {
  // No Web Storage support :(
}

// 2. USING LOCALSTORAGE

// Store
localStorage.setItem("name", "Vaibhav");

// Retrieve
document.getElementById("namediv").innerHTML = localStorage.getItem("name");

// 2. USING SESSIONSTORAGE
sessionStorage.setItem('myName', 'Vaibhav');

2️⃣ HTMLイベント属性🖱
以下にDOMで使用する属性のいくつかを示します.

これらの属性の各々のMDNドキュメンテーションにそれらをクリックすることによって行くことができます!
イベント番号.
属性
説明
例
1 .
onerror
エラーが発生したときに実行するスクリプト<img src="image.gif" onerror="error()">2 .
onload
ページ終了後の火災<body onload="load()">3 .
onresize
ブラウザウィンドウのサイズ変更時の火災<body onresize="resize()">4 .
onblur
要素がフォーカスを失う瞬間を発火する<input type="text" onblur="blur()">5 .
onsearch
ユーザーが検索フィールドに何かを書き込むときに発生する<input type="search" onsearch="search()">6 .
ondblclick
マウスで火災を起こす<button ondblclick="clicked()">Double-click</button>7.
onscroll
要素のスクロールバーがスクロールされているときに実行するスクリプト<div onscroll="scroll()">8 .
oncopy
ユーザーが要素の内容をコピーするときに発生する<input type="text" oncopy="copy()" value="Copy this tex">9 .
oncanplay
ファイルが再生を開始する準備ができているときに実行するスクリプト<video oncanplay="canPlay()">10 .
ontoggle
ユーザーが開いたり閉じたりするときに発生する<details> 元素<details ontoggle="toggleDetail()">
3️⃣ 一般的なHTMLタグ🤪
なぜ!教えてください、あなたはそれらを使用したことがありますか?
NO .
タグ
説明
例
1 .
<datalist>
あらかじめ定義されたオプションを持つデータリスト(要素に接続されている)
MDN Example
2 .
<optgroup>
グループ関連オプション<optgroup> タグ
MDN Example
3 .
<ins>
削除された部分と新しい、挿入された部分を持つテキスト
MDN Example
4 .
<wbr>
単語を破るテキスト
MDN Example
5 .
<cite>
引用された創造的な仕事への言及を記述するのに用いられる
ここでは不条理なHTMLタグを読みます.

Unusual HTML tags worth knowing 🧩

Christopher Kade ・ May 28 '19 ・ 3 min read

#webdev #html #a11y #beginners


4️⃣ HTML 5属性😋
以下のクールな属性をチェックしてください.
▶ accesskey : これはglobal attribute これは、要素をアクティブにする/フォーカスするショートカットキーを指定します.
例:
<a href="https://mailchi.mp/f59beeac6b9b/devupdates" accesskey="d">
Subscribe to Dev Weekly newsletter</a>
▶ draggable : 要素がdraggableかどうか指定するもう一つのglobal属性.
例:
<p draggable="true">This is a draggable paragraph.</p>
▶ itemprop : これにより、アイテムにプロパティを追加できます.この属性を持つ項目を簡単にグループ化できます.
例:
<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director:
    <span itemprop="director">James Cameron</span>
    (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html"
    itemprop="trailer">Trailer</a>
</div>
▶ spellcheck : 要素がスペルチェックと文法をチェックするかどうかを指定します.
例:
<p spellcheck="true">This is a paragraph with spell check on.</p>
▶ hidden : 要素がまだ指定されていないか、もはや関連していないことを示すBoolean属性です.
例:
<p hidden>This paragraph should be hidden.</p>

次はどこですか.🤔
私はあなたのプロジェクトでこれらのタグ/API/属性を実践するか、またはちょうどあなたの次のcodepenでそれをテストすることをお勧めします.以下のようなリンクがあります.
  • MDN Web Docs for Attributes .
  • W3School's page on HTML DOM
  • Some more HTML stuff!
    • 読んでくれてありがとう.良い一日を.(✿◕‿◕✿)

    This bathroom's commit history is making us all look bad! Has yours been Git-ing greener as well? 😝

    Image source: https://t.co/HEzYrUa6Ol pic.twitter.com/GWu5YFhCml

    — Microsoft Developer UK (@msdevUK)


    📫 Subscribe to my weekly developer newsletter 📫

    PS :今年から、Devコミュニティにここで書くことにしました.以前、私は媒体を書きました.誰かが私の記事を見たいならば.here 's私の媒体プロフィール.
    Git - .ignoreファイルが適用されない問題の解決
    MySQLチャージの有効期限はデータベースにフィールドを追加する必要はありません