html / css / js basic.md

文字コード

すべてのデータはコンピューターに保存されるときにバイナリで保存され、テキストも例外ではありません。保存時にバイナリに変換し、読み取り時に文字に変換します

キャラクターセット

エンコードとデコードに使用されるルール。たとえば、aを1に対応させ、bを2に対応させます。一般的な文字セット：ASCII、GB2312、UTF-8（開発で使用される文字セットはすべてUTF-8です）など。

<頭>頭

ブラウザまたは検索エンジンがWebページを解析するのを支援する

<メタ>

charset：Webページの文字セットを指定します
name：指定されたデータの名前
content：指定されたデータのコンテンツ

// name中的keywords指的是搜索网站的关键字，也就是可以用content中的abc在浏览器中搜索的关键词
<meta name="keywords" content="abc">

// name中的description指的是这个网站的描述，对应的内容在content中。网站的描述会显示在搜索引擎的搜索结果中
<meta name="description" content="这是一个...的网站">


// 将页面重定向到另一个网站
// content 中的内容指的是3s之后跳转到另一个网站
<meta http-equiv="refresh" content="3; url=https://www.baidu.com/">

// title标签的内容是作为搜索结果的超链接上的文字显示
<title> ddddd </title>

ブロック要素
Webページでは、ブロック要素は通常、レイアウトに使用されます
行内元素
- インライン要素は、主にテキストを折り返すために使用されます。通常、インライン要素はブロック要素に配置されますが、ブロック要素はインライン要素に配置されません
- 基本的に何でもブロック要素に入れることができます
- P要素にブロック要素を配置することはできません
ブラウザがWebページを解析すると、Webページ内の非準拠コンテンツが自動的に修正されます。
- ラベルはルート要素の外側に書き込まれます
- ブロック要素はp要素にネストされています
- 頭と体以外の子要素がルート要素に表示されます
ハイパーリンク
- ハイパーリンクのhref属性を＃に設定し、クリックして先頭に戻ります
- ページの指定された位置にジャンプできます。hrefの属性値をに設定するだけです。 #目标元素的id属性

<a href="#" Top>
// 跳转到id为bottom的内容处
<a href="#bottom" Top>

内向的なフレームifream

現在のページに別のページを紹介するために使用されます

<iframe width="800" src="https://www.qq.com"></iframe>

セレクタ

共通セレクター

要素セレクター
クラスセレクター
IDセレクター

複合セレクター

交差点セレクター

以下のコードのように、同時に複数の条件を満たしている要素を選択divし、red
交差点選択の要素セレクタがある場合を⚠️、それは（それがなければならない要素の選択で開始しなければならないdiv.redことはありませんred.div）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  .red{
     
     
    color: red;
  }
  div.red{
     
     
    font-size: 30px;
  }
  </style>
</head>
<body>
  <div class="red">div</div>
  <p class="red">p</p>
</body>
</html>

ユニオンセレクター

複数のセレクターに対応する要素を同時に選択します

h1, div{
    
    
color: red;
}

#red, p{
    
    
color: red;
}

関係セレクター

子要素セレクター

指定された親要素の指定された子要素を選択します

div > p{
    
    
color: red;
}

子孫要素セレクター

指定された要素内の指定された子孫要素を選択します

div span{
    
    
color: red;
}

対照的に、子孫要素セレクターは子要素セレクターよりも広い範囲を持っています

兄弟要素セレクター

// 选择p标签后面的那个span
div + span{
    
    
color: red;
}

// 选择p标签后面的所有span
div ～ span{
    
    
color: red;
}

属性セレクター

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  div[title]{
     
     
    color: red;
  }
  p[title="dddd"]{
     
     
    color: aquamarine;
    font-size: 30px;
  }
  h3[title ^= "hhhh"]{
     
     
    /* 选择以指定值开头的属性，这里包括hhhh和hhhhii */
    color: coral;
  }
  h5[title $= "jjjj"]{
     
     
    /* 选择以指定值结尾的属性，这里包括jjjj和kkjjjj */
    color: crimson;
  }
  h2[title *= "mmmm"]{
     
     
    color: teal;
  }
  </style>
</head>
<body>
  <div title="aaaa">div</div>
  <div title="bbbb">div</div>
  <div title="cccc">div</div>
  <p title="dddd">p</p>
  <p title="eeee">p</p>
  <p title="ffff">p</p>
  <h3 title="gggg">span</h3>
  <h3 title="hhhh">span</h3>
  <h3 title="hhhhii">span</h3>
  <h5 title="jjjj">span</h5>
  <h5 title="kkjjjj">span</h5>
  <h5 title="llll">span</h5>
  <h2 title="mmmm">span</h2>
  <h2 title="nmmmmn">span</h2>
  <h2 title="oooo">span</h2>
</body>
</html>

擬似クラスセレクター

疑似クラスは存在しないクラスまたは特別なクラスであり、要素の特別な状態（最初の子要素、クリックされた要素、マウスによって移動された要素など）を記述するために使用され、疑似クラスは通常、:始まり

ul>li:first-child {
    
    
  color: aquamarine;
  }
  ul>li:first-child {
    
    
    color: aquamarine;
  }

  /* 选中偶数位 */
  ul>li:nth-child(2n){
    
    
    color: tomato;
  }
  /* 选中偶数位 */
  ul>li:nth-child(even){
    
    
    color: tomato;
  }

  /* 选中奇数位 */
  ul>li:nth-child(2n+1){
    
    
    color: tomato;
  }
  /* 选中奇数位 */
  ul>li:nth-child(odd){
    
    
    color: tomato;
  }

以上所有的伪类都是根据所有的元素进行排序的

もちろん、同じタイプの要素に分類されているものは次のとおりです。

ファーストオブタイプ
最後のタイプ
n番目のタイプ
…

：not

// 选中ul下面所有的li，除了第三个
ul>li:not(:nth-child(3)) {
    
    
 color: red;
}

ハイパーリンク疑似クラス

ハイパーリンクのステータス：

訪問した
一度も訪れたことがない

/* link代表没访问过的链接 */
a:link{
    
    
   color: burlywood;
 }
 /* visited代表访问过的链接 ，由于保护隐私的原因，visited这个伪类只能设置链接的颜色，大小等其他的都不能设置*/
 a:visited{
    
    
   color: violet;
 }
 /* 鼠标移入的状态 */
 a:hover{
    
    
   color: teal;
 }
 /* 鼠标点击的状态 */
 a:active{
    
    
   color: steelblue;
 }

疑似要素セレクター

疑似要素は、ページに存在しないいくつかの特別な要素（特別な場所）を表します。

::冒頭を使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 表示第一个字母 */
    p::first-letter{
     
     
      font-size: 30px;
    }
    /* 表示第一行 */
    p::first-line{
     
     
      background-color: thistle;
    }
    /* 表示选中的元素 */
    p::selection{
     
     
      background-color: teal;
    }

    /* 通过 ::before 和 ::after添加的内容在页面是不能用鼠标来选中的，因为这些是通过css添加的*/
    /* 必须结合content来使用 */
    /* 元素的开始 */
    div::before{
     
     
      content: "abc";
      color: aquamarine;
    }
    /* 元素的结束 */
    div::after{
     
     
      content: "def";
      color: cadetblue;
    }
  </style>
</head>

<body>
  <div>
      Hooray! It's snowing
  </div>
  <p>
      Hooray! It's snowing! It's time to make a snowman.James runs out. He makes a big pile of snow. He puts a big snowball on top. He adds a scarf and a hat. He adds an orange for the nose. He adds coal for the eyes and buttons.In the evening, James opens the door. What does he see? The snowman is moving! James invites him in. The snowman has never been inside a house. He says hello to the cat. He plays with paper towels.A moment later, the snowman takes James's hand and goes out.They go up, up, up into the air! They are flying! What a wonderful night!The next morning, James jumps out of bed. He runs to the door.He wants to thank the snowman. But he's gone
  </p>
</body>

</html>