過去には、我々はページの効果を参照してください、効果はこの記事のJSで使用する必要性、そして今日の多くのですが、私は自分自身の実用的な効果を作成するために、純粋なHTMLを使用する方法を紹介します。
1. ** **アコーディオンを折ら
使用詳細と何のJavaScriptコードの折り畳み式アコーディオンを作成しないために、[概要]タブ。
効果：
HTML
<details>
<summary>Languages Used</summary>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSS</p>
</details>
<details>
<summary>How it Works</summary>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. </p>
</details>
CSS
* { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
} details { border: 1px solid #aaa; border-radius: 4px; padding: .5em .5em 0;
} summary { font-weight: bold; margin: -.5em -.5em 0; padding: .5em;
} details[open] { padding: .5em;
} details[open] summary { border-bottom: 1px solid #aaa; margin-bottom: .5em;
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）ブラウザのサポート：
2. **プログレスバー**
ラベルとの進捗状況メーターの基本的な要素は、あなたが画面のプログレスバー上に表示プロパティを調整することができます。進捗状況は、2つのプロパティがありますmaxし、valueキャリブレーションプログレスバーを、そしてメーターラベルは、複数のカスタム属性を提供します。
効果：
HTML：
<label for="upload">Upload progress:</label>
<meter id="upload" name="upload"
min="0" max="100"
low="33" high="66" optimum="80"
value="50">
at 50/100
</meter>
<hr/>
<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>
CSS：
body {
margin: 50px;
}
label {
padding-right: 10px;
font-size: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
ブラウザのサポート：
3.複数の入力タイプ
入力要素を定義するときは、近代的なブラウザでは、あなたが入力十分の種類を指定できるようにすることを知っている必要があります。あなたはすでに、テキスト、電子メール、パスワード、これらのタイプの数に加えて、以下のものがあることを知っている必要があります。
- マシンは、日付の日付を表示しますセレクタ
- 日時ローカル豊かな日付と時刻のピッカー
- 月に優しいセレクタ月
- TELは、あなたが電話番号を入力できるようになります。携帯のブラウザでそれを開き、ポップアップキーボードが変更されます、同じ電子メールの真のです。
- フレンドリーなスタイルを検索するための検索テキストボックスに入力します。
効果：
HTML：
<label for="date">Enter date:</label>
<input type="date" id="date"/>
<label for="datetime">Enter date & time:</label>
<input type="datetime-local" id="datetime"/>
<label for="month">Enter month:</label>
<input type="month" id="month"/>
<label for="search">Search for:</label>
<input type="search" id="search"/>
<label for="tel">Enter Phone:</label>
<input type="tel" id="tel">
CSS：
input, label {display:block; margin: 5px;}
input {margin-bottom:18px;}
新しい入力タイプMDNドキュメントの様々な非常に広範かつ大量の情報です。また、キーボード入力型モバイルユーザーの行動を確認するためにチェックしたときに携帯電話のブラウザ上でこれらの入力要素。
4.ビデオとオーディオ
videoそして、audio要素が、それは、HTML標準の一部となっていますが、あなたが使用することができますで、あなたは驚かれることでしょうとしてvideo画面上にまともなビデオプレーヤーをレンダリングするためにタグを。
<video controls>
<source src="https://addpipe.com/sample_vid/short.mp4"
poster="https://addpipe.com/sample_vid/poster.png">
Sorry, your browser doesn't support embedded videos.
</video
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）注目に値するいくつかの属性videoタグは、次のとおりです。
- 動画URLカバーをダウンロードするときに表示されるポスター
- ページのロード全体ビデオあらかじめロードされているかどうかのプリロード
- ページのロード時に自動再生ビデオは自動的に再生されるかどうか
ブラウザのサポート：
**証明文**
あなたは歴史的事情の編集や校正の表示したい場合blockquote、delおよびins要素タグを便利になることができます。
例：
HTML：
<blockquote>
There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>
CSS：
del {
text-decoration: line-through;
background-color: #fbb;
color: #555;
}
ins {
text-decoration: none;
background-color: #d4fcbc;
}
blockquote {
padding-left: 15px;
line-height: 30px;
border-left: 3px solid #d7d7db;
font-size: 1rem;
background: #eee;
width: 200px;
}
6.より統一引用符
英語で異なる引用符のために、使用する<q>タグはあなたにこの問題に良い解決策を作ることができ、それはあなたのコンテンツがより一貫ほとんどのブラウザ上で引用符を提示することができます。
HTML：
Don Corleone said <q cite="https://www.imdb.com/title/tt0068646/quotes/qt0361877">I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party.</q></p>
<hr/>
Don Corleone said <i>"I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party."</i>
CSS：
body {
margin: 50px;
}
q {
font-style: italic;
color: #000000bf;
}
7. [キーボード]タブ
<kbd>ラベルにはあまり知られて人気のあるラベルでなければなりませんが、これはスタイルのキーの組み合わせを説明するためのより良い方法を使用することができます。
HTML：
<p>I know that <kbd>CTRL</kbd>+<kbd>C</kbd> and <kbd>CTRL</kbd>+<kbd>V</kbd> a are like the most used key combinations</p>
CSS：
body {
margin: 50px;
}
kbd {
display: inline-block;
margin: 0 .1em;
padding: .1em .6em;
font-size: 11px;
line-height: 1.4;
color: #242729;
text-shadow: 0 1px 0 #FFF;
background-color: #e1e3e5;
border: 1px solid #adb3b9;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
white-space: nowrap;
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）8. HTMLコードの共有
使用figcaption pre code``标签，您可以使用纯``HTML``和``CSS``呈现出不错的代码片段。
HTML：
<figure>
<figcaption>
Defining a css <code>color</code> property for a class called 'golden'
</figcaption>
<pre>
<code>
.golden {
color: golden;
}
</code>
</pre>
</figure>
CSS：
pre {
background-color: #ffbdbd;
}
この記事は、我々が見ることができより多くの方法があり、開始します。