究極のHTML＆CSSのシート

45758 ワード
webdev css javascript html テキストリンク

HTMLのシート
構造
HTMLの基本的なテンプレートまたはBlabone構造です.
ボイラプレート
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>
見出し
HTMLには6つの見出しがあり、H 1はすべての中で最も大きく、H 6は最小です.
H 1タグ
<h1>Heading 1</h1>
H 2タグ
<h2>Heading 2</h2>
H 3タグ
<h3>Heading 3</h3>
H 4タグ
<h4>Heading 4</h4>
H 5タグ
<h5>Heading 5</h5>
H 6タグ
<h6>Heading 6</h6>
コンテナ
コンテナタグは、テキスト、イメージなどのいくつかのデータを含むタグです.
ディーフタグ
divタグまたは除算タグは、ドキュメント内のブロックまたは分割を行うために使用されます.
<div> This is div block </div>
スパンタグ
spanはインラインコンテンツのコンテナです
<span> This is span block </span>
Pタグ
段落
<p> This is a paragraph </p>
事前タグ
preタグはプリフォーマットされたテキストを表す
<pre> Hello World </pre>
コードタグ
コードタグはソースコードを表すのに使用されます
<code>
import python
</code>
テキストフォーマット
テキスト書式設定タグは、HTMLドキュメントのテキストまたはデータをフォーマットするために使用されます.あなたの文書をより魅力的で理解できるようにするためにイタリック体、大胆な、強力なテキストを作成するような特定のことを行うことができます.
ボールドタグ
<b>I'm bold text</b>
強いタグ
<strong>I'm important text</strong>
イタリックタグ
<i>I'm italic text</i>
EMタグ
<em>Emphasized text</em>
サブタグ
<sub>Subscript</sub>
supタグ
<sup>Superscript</sup>
リスト
リストは、数値、アルファベット、弾丸、または他のシンボルのいずれかです.リストの種類とリスト項目をHTMLで指定できます.
順序付きリストタグ
<ol>
<li>Data 1</li>
<li>Data 2</li>
<li>Data 3</li>
</ol>
順序なしリスト
<ul>
<li>Your Data</li>
<li>Your Data</li>
</ul>
メディア
メディアは、イメージ、ビデオ、オーディオなどのデジタル形式に存在するものです.
オーディオタグ
これは、ドキュメント内のサウンドコンテンツを埋め込むために使用されます.
<audio controls>
<source src="demo.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
IMGタグ
これは、Webページ内のイメージを埋め込むまたはインポートするために使用されます.
<img src="Source_of_image" alt="Alternate text">
ビデオタグ
これは、Webページにビデオを埋め込むために使用されます.
<video width="480" height="320" controls>
<source src="demo_move.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
テーブル
表は行と列のコレクションです.表形式のデータを表現するために使用されます.
表構造
<table>
<caption>Demo Table</caption>
<thead>
<tr>
<th>Column1</th>
<th colspan="2">Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data2</td>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>&nbsp;</td>
<td>Data</td>
<td>Data</td>
</tr>
</tfoot>
</table>
リンク
リンクは、いくつかの他のページにリダイレクトすることができますクリック可能なテキストです.
札
Aまたはアンカータグはハイパーリンクを定義します.
<a href="https://www.abhiraj.glitch.me/">Visit My Portfolio</a>
フォーム
試料形態
フォームは、ユーザーの入力を収集するために使用され、一般的なユーザーのデータは、さらなる処理のためのサーバーに送信されます.
<form action="/action.php" method="post">
Name: <input name="name" type="text" /> <br />
Age: <input max="90" min="1" name="age" step="1" type="number" value="18" /> <br />
<select name="gender">
<option selected="selected" value="male">Male</option>
<option value="female">Female</option>
</select><br />
<input checked="checked" name="newsletter" type="radio" value="daily" /> Daily <input name="newsletter"
type="radio" value="weekly" /> Weekly<br />
<textarea cols="20" name="comments" rows="5">Comment</textarea><br />
<label><input name="terms" type="checkbox" value="tandc" />Accept terms</label> <br />
<input type="submit" value="Submit" />
</form>
登場人物
いくつかのシンボルは、キーボード上に直接存在しないが、HTMLドキュメントで使用する方法がいくつかあります.エンティティ名、10進数、または16進値のいずれかを表示できます.
著作権記号
&copy;
より小さい
&lt
より大きい
&gt;
アンパサンド
&amp;
ドル($ )
&dollar;
ランダムテキスト
エロンムスク
Elon Reeve Musk FRS is an entrepreneur and business magnate. He is the founder, CEO, and Chief Engineer at SpaceX; early stage investor, CEO, and Product Architect of Tesla, Inc.; founder of The Boring Company; and co-founder of Neuralink and OpenAI. A billionaire, Musk is one of the richest people in the world.
意味要素
意味要素は、自己記述可能な要素、すなわち、その名前自体から、その意味を理解することができます.
セクションタグ
ドキュメントのセクションを定義します
<section>This is a section</section>
物品タグ
自己充足的内容
<article> Enter your data here </article>
脇札
これは、サイドバーのコンテンツを配置するために使用されます
<aside> Your data </aside>

CSSシート
フォント
顔、重さ、スタイルなどのフォントに関連する多くのプロパティがあります.これらのプロパティを使用すると、スタイルやテキストの完全な外観を変更することができます.
フォントファミリ
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
フォントスタイル
font-style: italic;
フォント変形
font-variant: small-caps;
フォント重量
font-weight: bold;
フォントサイズ
font-size: larger;
フォント
font: style variant weight size family;
テキスト
テキストプロパティでは、ドキュメント内の位置、間隔、装飾、インデントなどを操作できます.
テキスト整列
text-align: justify;
文字間隔
letter-spacing: .15em;
テキスト装飾
text-decoration: underline;
語間隔
word-spacing: 0.25em;
テキスト変換
text-transform: uppercase;
テキストインデント
text-indent: 0.5cm;
線高
line-height: normal;
背景
名前が示すように、これらのプロパティは背景に関連します.つまり、ドキュメントの色、イメージ、位置、サイズなどを変更できます.
背景画像
background-image: url("Path");
背景位置
background-position: right top;
背景サイズ
background-size: cover;
背景反復
background-repeat: no-repeat;
背景添付
background-attachment: scroll;
背景色
background-color: fuchsia;
背景
background: color image repeat attachment position;
ボーダー
ボーダープロパティは、ドキュメントのボタンやその他のアイテムのスタイル、半径、色などを変更するために使用されます.
ボーダー幅
border-width: 5px;
ボーダースタイル
border-style: solid;
ボーダーカラー
border-color: aqua;
境界半径
border-radius: 15px;
ボーダー
border: width style color;
ボックスモデル
ClayBoxモデルでは、すべてのHTML要素をラップするコンテナです.これは、マージン、ボーダー、パディング、および実際のコンテンツで構成されます.これは、Webページのデザインとレイアウトを作成するために使用されます.
フロート
float: none;
クリア
clear: both;
ディスプレイ
display: block;
高さ
height: fit-content;
幅
width: auto;
マージン
margin: top right bottom left;
パディング
padding: top right bottom left;
越流
overflow: hidden;
視程
visibility: visible;
色
カラープロパティの助けを借りて、1つのテキスト、形、またはその他のオブジェクトに色を与えることができます.
色
color: cornsilk;
不透明度
opacity: 4;
テンプレートレイアウト
テンプレート内のコンテンツの外観を指定します
ボックスアライメント
box-align : start;
ボックス方向
box-direction : normal;
ボックスフレックス
box-flex : normal;
ボックスフレックス
box-flex-group : 2;
ボックスオリエント
box-orient : inline;
ボックスパック
box-pack : justify;
ボックスサイジング
box-sizing : margin-box;
最大幅
max-width: 800px;
幅
min-width: 500px;
マックスハイト
max-height: 100px;
高さ
min-height: 80px;
テーブル
表プロパティは、ドキュメント内のテーブルにスタイルを与えるために使用されます.ボーダー間隔、テーブルレイアウト、キャプションなどの多くのものを変更できます.
ボーダー崩壊
border-collapse: separate;
空のセル
empty-cells: show;
ボーダー間隔
border-spacing: 2px;
表レイアウト
table-layout: auto;
キャプション側
caption-side: bottom;
コラム
これらのプロパティは、テーブルの列で明示的に使用され、テーブルを信じられないほどの外観を与えるために使用されます.
コラムカウント
column-count : 10;
コラムギャップ
column-gap : 5px;
カラムルール幅
column-rule-width : medium;
カラムルール
column-rule-style : dotted ;
コラムルールカラー
column-rule-color : black;
カラム幅
column-width : 10px;
コラムスパン
column-span : all;
リストとマーカー
リストとマーカーのプロパティは、ドキュメント内のリストをカスタマイズするために使用されます.
リスト形式
list-style-type: square;
リストスタイルの位置
list-style-position : 20px;
リストスタイルイメージ
list-style-image : url(image.gif);
マーカーオフセット
marker-offset : auto;
アニメーション
CSSのアニメーションは、Webページ上の遷移やその他のメディアファイルをアニメーション化することができます.
アニメ名
animation-name : myanimation;
アニメーション期間
animation-duration : 10s;
アニメーションタイミング機能
animation-timing-function : ease;
アニメーション遅延
animation-delay : 5ms;
アニメーション反復カウント
animation-iteration-count : 3;
アニメーション方向
animation-direction : normal;
アニメーション再生状態
animation-play-state : running;
アニメーションフィルモード
animation-fill-mode : both;
遷移
遷移を使用すると、要素の2つの状態間の遷移を定義できます.
遷移プロパティ
transition-property: none;
遷移期間
transition-duration : 2s;
遷移タイミング機能
transition-timing-function: ease-in-out;
転移遅延
transition-delay : 20ms;
CSSフレックスボックス
Flexboxは、HTMLを簡単にフォーマットできるCSSのレイアウトです.Flexboxは、行と列を使用して垂直方向と水平方向の項目を整列することが簡単になります.アイテムは“フレックス”異なるサイズにスペースを埋めるためになります.そして、全体的に、それは敏感なデザインをより扱いやすくします.
親プロパティ( flexコンテナ)
ディスプレイ
display: flex;
屈曲方向
flex-direction: row | row-reverse | column | column-reverse;
フレックスラップ
flex-wrap: nowrap | wrap | wrap-reverse;
フレックスフロー
flex-flow: column wrap;
内容を正当化する
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly |
start | end | left | right ... + safe | unsafe;
アイテムの整列
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
コンテンツの整列
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
子のプロパティ( flex項目)
順序
order: 5; /* default is 0 */
フレックスグロー
flex-grow: 4; /* default 0 */
フレックスシュリンク
flex-shrink: 3; /* default 1 */
フレックスベース
flex-basis: | auto; /* default auto */
フレックスショー
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
セルフアライン
align-self: auto | flex-start | flex-end | center | baseline | stretch;
CSSグリッド
グリッド・レイアウトは、より簡単に、そして、一貫してブラウザー全体で複雑な反応するウェブ設計レイアウトをつくるCSSへの2次元Gridシステムです.
親プロパティ(グリッドコンテナ)
ディスプレイ
display: grid | inline-grid;
グリッドテンプレート
grid-template-columns: 12px 12px 12px;
グリッドテンプレート行
grid-template-rows: 8px auto 12px;
グリッドテンプレート
grid-template: none | <grid-template-rows> / <grid-template-columns>;
コラムギャップ
column-gap: <line-size>;
ロウギャップ
row-gap: <line-size>;
グリッドカラムギャップ
grid-column-gap: <line-size>;
グリッド行ギャップ
grid-row-gap: <line-size>;
ギャップ短縮
gap: <grid-row-gap> <grid-column-gap>;
グリッドギャップ
grid-gap: <grid-row-gap> <grid-column-gap>;
アイテムを正当化する
justify-items: start | end | center | stretch;
アイテムの整列
align-items: start | end | center | stretch;
地場
place-items: center;
内容を正当化する
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
コンテンツの整列
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
コンテンツを入れる
place-content: <align-content> / <justify-content> ;
グリッドオートコラム
grid-auto-columns: <track-size> ...;
グリッドオートロウ
grid-auto-rows: <track-size> ...;
グリッドオートフロー
grid-auto-flow: row | column | row dense | column dense;
子のプロパティ(グリッド項目)
グリッド開始
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
グリッドカラムエンド
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
グリッド開始
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
グリッド行端
grid-row-end: <number> | <name> | span <number> | span <name> | auto;
格子柱速記
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
グリッド行速記
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
グリッドエリア
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
自己を正当化する
justify-self: start | end | center | stretch;
セルフアライン
align-self: start | end | center | stretch;
自己
place-self: center;
あなたはhereからこのチートシートをダウンロードすることができます

これらのチートシートのような場合は、多分私はコーヒーをサポートすることができます.下記をクリック👇
Database SQL
[Terminal] Error