フロントエンドの知識のチェックとギャップの補完 (1)_html/css_WEB-ITnose

小規模な前線攻城師団として、最近特に難しいのは基礎がしっかりしていないことです。そこで、過去の失敗を改め、知識をもう一度見直し、しっかりとした基礎を築くことにしました。この記事は純粋に私の見逃した知識ポイントのレビューです。もし読んでくれる人がいれば、気軽に読んでください。とにかくお金はかかりません。ははは。

最初のモジュール: HTML

(1) HTMLリンク - name属性

name属性はアンカーの名前を指定します。

name 属性を使用して、HTML ページにブックマークを作成できます。

ブックマークは特別な方法で表示されるわけではなく、読者には見えません。

名前付きアンカーを使用すると、名前付きアンカー (ページ上のセクションなど) に直接ジャンプするリンクを作成できるため、ユーザーは必要な情報を見つけるために延々とスクロールする必要がなくなります。

例 (ニャー(>^ω^<)~小さな例を教えてください!):

クリックしてジャンプしてください~

ここにジャンプしてください!

コードは次のとおりです:

<a href="#tips">点我跳转啊~</a><a name="tips">跳转到这里来咯！</a>

ヒント: アンカーの名前は任意の名前にすることができます。

ヒント: name 属性の代わりに id 属性を使用することもできます。名前付きアンカーも有効です。

注: サブフォルダーには必ずスラッシュを追加してください。リンクが href="http://www.w3school.com.cn/html" のように記述されている場合、サーバーに対して 2 つの HTTP リクエストが生成されます。これは、サーバーがアドレスにスラッシュを追加して、次のような新しいリクエストを作成するためです: href="http://www.w3school.com.cn/html/"。

ヒント: 名前付きアンカーは、大きなドキュメントの先頭に目次を作成するためによく使用されます。各章に名前付きアンカーを付けて、これらのアンカーへのリンクを文書の上部に配置できます。 Baidu Encyclopedia に頻繁にアクセスすると、Baidu Encyclopedia のほぼすべてのエントリでこのナビゲーション方法が使用されていることがわかります。

ヒント: ブラウザーは、定義された名前付きアンカーを見つけられない場合、ドキュメントの先頭を見つけます。エラーは発生しません。

(2) HTML5 グローバル属性

要素をドラッグできるかどうかを指定します Movable|要素をドラッグできないことを指定します|Y Y データをドラッグすると、ドラッグされたデータが新しい場所に移動されます |元のデータへのリンクを生成します

	定義と使用法	値	説明	IE	FireFox	Chrome	Safari	Opera
contenteditable	要素のコンテンツが編集可能かどうかを指定します	true|false	編集できる要素と編集できない要素を指定します	Y	Y	Y	Y	Y
contextmenu	要素のコンテキストメニューを指定します。 ユーザーが要素を右クリックすると、コンテキスト メニューが表示されます。	menu_id	開く 要素の ID	N	Y	N	N	N
data-*	ページまたはアプリケーションのプライベートカスタムデータを保存するために使用されます すべてのHTML要素にカスタムデータ属性を埋め込む機能を提供します 保存された（カスタム）データは、ページ JavaScript で使用され、 より良いユーザー エクスペリエンスを作成します (Ajax 呼び出しやサーバー側のデータベース クエリを実行せずに)	somevalue	属性の値を (文字列として) 指定します	Y	Y	要素をドラッグできるかどうかを指定します	true|false|auto
ブラウザのデフォルトの動作	Y	Y	Y		Dropzone	ドラッグしたデータをコピー、移動、またはリンクするかどうかを指定します要素上のデータをドラッグします	copy|move|link	データをドラッグすると、ドラッグされたデータのコピーが作成されます
Y	Y	Y	Y この属性の場合、hidden 属性はブール属性です。が設定されている場合、要素がまだ、またはもう関係ありません	N	Y	Y	Y	Y
spellcheck	规定是否对元素进行拼写和语法检查	true|false	对元素进行拼写和语法检查| 不检查元素	IE10+	Y	Y	Y	Y

(3)HTML5表单属性 - list

　　list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

　　注释：list 属性适用于以下类型的 标签：text, search, url, telephone, email, date pickers, number, range 以及 color。

Webpage: <input type="url" list="url_list" name="link" /><datalist id="url_list"><option label="W3Schools" value="http://www.w3school.com.cn" /><option label="Google" value="http://www.google.com" /><option label="Microsoft" value="http://www.microsoft.com" /></datalist>