セレクタ
1. .demo> liは、デモでliサブ要素のみを選択します
2.：nth-child：親要素のどの子要素
| 例 | 説明 |
|---|---|
| ：nth-child（n） | セレクターは、その親要素に属するN番目の子要素と一致します |
| ：nth-child（2n） | セレクターは、その親要素に属する二重番号の子要素と一致します |
| ：nth-child（2n + 1） | セレクターは、その親要素に属する単一の子要素と一致します |
3.：nth-of-type：親要素の下のX番目の要素に属する各要素を指定します
| 例 | 説明 |
|---|---|
| p：nth-of-type（2） | 各p要素は、同じタイプの2番目の兄弟要素の背景色と一致します |
| p：nth-of-type（n） | 各p要素は、同じタイプのn番目の兄弟要素の背景色と一致します |
| p：nth-of-type（2n） | 各p要素は、同じタイプの2つの兄弟要素の背景色と一致します |
| p：nth-of-type（2n + 1） | 各p要素は、同じタイプの単一の兄弟要素の背景色と一致します |
4. .demo> li：hover .demo2 {display：block}マウスがli要素に移動すると、li要素の子要素.demo2が表示されます。
5.：first-child：親要素に属する最初の子要素を選択します
6. p：first-of-type：親要素の最初のp要素
7.：last-child：親要素の最後の子要素
8. p：last-of-type：親要素の最後のp要素
9.：fitst-letter：要素の最初の文字にスタイルを追加します
10.：fitst-line：要素の最初の行にスタイルを追加します。改行は2番目の行です
11。::selection：ユーザーが選択または強調表示した一致要素の部分
12.：focus：セレクターは、フォーカスのある要素を選択するために使用されます。
13.：checked：セレクターは、選択されているすべてのチェックボックスまたはラジオボタンを選択します。
14.プラス（+）セレクター（隣接する兄弟セレクター）：
// 选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素
h1 + p {
margin-top:50px;}
15.〜セレクター：その後のすべてのXX要素
// 为所有相同的父元素中，位于 p 元素之后的 所有 ul 元素设置背景
p~ul {
background:#ff0000; }
16.属性セレクター
// input标签 type为text 的元素
input[type=‘text’]{
}
17.セレクターの中央の要素にスペースがありません
//.abc 和 .aaa 之间没有空格，下面代码表示：表示class里面既有abc又有aaa下的P元素
.abc.aaa p{
}
HTMLタグ
1. iframe：別のWebページを含むインラインフレームを作成します
<a target='iframeName' href="url">
<iframe name='iframeName' src='url2'>
a链接可以通过target='iframeName'，和iframe标签绑定，点击后会修改iframe的src属性
2.他のタイプ属性を入力します
| 属性 | 説明 |
|---|---|
| 探す | 携帯電話のキーパッドの改行ボタンは、検索ボタン、またはブラウザが認識できない場合は通常のテキストボックスになります。 |
| 範囲 | スライダーが表示され、最大値と最小値を設定できます。スライダーはいくつかのポイントに分割されます |
| 色 | システムのカラーピッカーを呼び出します |
| Eメール | 電子メールアドレスを入力すると、送信時に電子メールの値が自動的に確認されます |
| url | URLアドレスを入力すると、送信時にURL値が自動的に確認されます |
| 数 | 入力は数値です。最大値と最小値を設定できます。値の間隔も設定できます。 |
3.optgroupはselectの関連オプションをグループ化します
使用label="titleName" 来设置分组名称
4.ボタンのtype属性、デフォルト値は送信です
5.ラベル：ラベルは、入力要素のラベル（マーク）を定義します（強調）
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本，就会触发此控件。
也就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
label标签的 for 属性应当与相关元素的 id 属性相同。
也可以在label里面嵌套input元素，就不用使用for了
6.可能な値はデータリストに記載されています
请使用 input 元素的 list 属性来绑定 datalist。datalist使用ID属性来对应input的绑定
点击input后会出现可能的值，类似搜索，如果是固定信息，可以使用datalist做搜索显示可能值
7. filedlist：フォームのグループ化
legend标签来设置title
8.読み取り専用：入力フォームは読み取りのみ可能で、ブール属性です
9.無効：入力フォームが無効、ブール属性
10.すべてのタブのtabindex属性：はタブキーの切り替え順序です。
CSSプロパティ
1.ボックスのサイズ設定：境界線のある2つのボックスを並べて指定します
| 属性 | 説明 |
|---|---|
| コンテンツボックス | 幅と高さはそれぞれ要素のコンテンツフレームに適用され、要素の内側の余白と境界線は幅と高さの外側に描画されます。 |
| ボーダーボックス | 要素に指定されたパディングとボーダーは、設定された幅と高さの範囲内で描画されます。コンテンツの幅と高さは、設定された幅と高さからそれぞれボーダーとパディングを差し引くことで取得できます。 |
| 継承 | box-sizing属性の値を親要素から継承する必要があることを指定します。 |
2. background-clip：背景の描画領域を指定します
| 属性 | 説明 |
|---|---|
| ボーダーボックス | 背景はボーダーボックスにトリミングされます。 |
| パディングボックス | 背景は内側の余白ボックスにトリミングされます。 |
| コンテンツボックス | 背景はコンテンツフレームにトリミングされます。 |
3.ワードブレイク：適切なワードブレイクでブレーク
| 属性 | 説明 |
|---|---|
| 正常 | ブラウザのデフォルトの改行ルールを使用します。 |
| ブレイクオール | 単語内で改行を許可します。 |
| すべて保ちます | 改行できるのは、半分の幅のスペースまたはハイフンのみです。 |
4.空白：段落内のテキストが折り返されないことを規定します
| 属性 | 説明 |
|---|---|
| 正常 | デフォルト。空白はブラウザによって無視されます。 |
| プレ | 空白はブラウザによって予約されます。その動作は、HTMLのpreタグに似ています。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
5. text-overflow：修剪文本
| 属性 | 解释 |
|---|---|
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
| string | 使用给定的字符串来代表被修剪的文本。 |
6. object-fit：对图片进行剪切
| 属性 | 解释 |
|---|---|
| fill | 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。 |
| contain | 保持原有尺寸比例。内容被缩放。 |
| cover | 保持原有尺寸比例。但部分内容可能被剪切。 |
| none | 保留原有元素内容的长度和宽度，也就是说内容不会被重置。 |
| scale-down | 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。 |
| initial | 设置为默认值。 |
| inherit | 从该元素的父元素继承属性。 |
7. opacity：属性设置元素的不透明级别，是整个元素，包括元素内的文字
8. cursor：属性规定要显示的光标的类型（形状）
cursor: url(xxx) auto; 后面的auto是如果图片不显示，使用auto
9. visibility：属性规定元素是否可见。即使不可见的元素也会占据页面上的空间
10. 默认背景图横标纵坐标图片重复
11. background-position：属性设置背景图像的起始位置
background-position：top left;
第一个值是水平位置，第二个值是垂直位置
12. background-attachment：属性设置背景图像是否固定或者随着页面的其余部分滚动（相对于视图窗口的位置）
| 属性 | 解释 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
13. 速写（简写）background
background：url(“imgs/images.jpg”) no-repeat 50% 50%/100% fixed #000
顺序为设置图片、不重复、位置、尺寸、视口、背景颜色，因为位置和尺寸都有可能为百分比，所有浏览器规定尺寸必须写在位置后面中间加/隔开。
有些属性可以不写，不写会按默认值处理
background： 背景颜色、背景图片地址、背景平铺、背景固定、背景位置、背景图片尺寸
14. sprite（雪碧图，也叫精灵图）：将很多的图片组成一张大的图片，通过控制图片显示位置来达到自己想要的图
15. resize：属性规定是否可由用户调整元素的尺寸。
| 属性 | 解释 |
|---|---|
| none | 用户无法调整元素的尺寸。 |
| both | 用户可调整元素的高度和宽度。 |
| horizontal | 用户可调整元素的宽度。 |
| vertical | 用户可调整元素的高度。 |