記事ディレクトリ

HTML
CSS記事

HTML

HTML の概要

参考：https://developer.mozilla.org/zh-CN/docs/Web/HTML

https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics

HTML (HyperText Markup Language) は、Web 世界を構成する構成要素です。Web コンテンツの意味と構造を定義します。通常、HTML 以外のテクノロジーは、Web ページの外観とプレゼンテーション (例: CSS )、または機能と動作 (例: JavaScript ) を記述するために使用されます。

「ハイパーテキスト」とは、単一の Web サイト内または複数の Web サイト間の Web ページを接続するリンクを指します。リンクは Web の基本的な側面です。コンテンツをインターネットにアップロードし、他の人が作成したページにリンクすると、World Wide Web に積極的に参加することになります。

HTML はインタープリタ型言語です。

HTML要素

この要素の主な部分は次のとおりです。

開始タグ: 大なり記号と小なり記号で囲まれた要素の名前 (この例では p) が含まれます。要素の開始位置または機能の開始位置を示します。この場合、段落が始まります。
終了タグ: 開始タグと似ていますが、要素名の前にスラッシュが含まれる点が異なります。これは要素の終わり、この場合は段落の終わりを示します。初心者は終了タグを含めるのを忘れるという間違いを犯すことが多く、これにより奇妙な結果が生じる可能性があります。
Content : 要素のコンテンツ、この場合は入力されたテキスト自体です。
要素(Element): 開始タグ、終了タグ、コンテンツの組み合わせが完全な要素です。

一般的な要素タグをいくつか示します。

要素は HTML の最も基本的なコンポーネントであり、対の山括弧 **<>** と括弧内のコンテンツで構成されます。例えば：<h1>你今天码代码了吗？</h1>。

HTML ページは 2 つのタグで構成されます。<html></html>

<html> は開始タグ、</html>は終了タグです

titleページのタイトルを表し、

<meta charset="xxx">エンコード方式の指定に使用できます

<br/>改行を示し、br タグは単一のタグです

単一タグ: 開始タグと終了タグが同じで、単語の後にスラッシュが配置されます。

<p>タグは段落を表します

<img>ラベル：

src 属性は画像のパスを示します

幅と高さは画像のサイズを表します

alt は画像のプロンプトを示します

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>:titleタグ

リストラベル:

<ol>順序付きリストのラベル
- start先頭からを示し*、type はタイプを示します [ A,a,1(default),i,I ]
<ul>順序なしリストタグ
内容は<li>タグ付きで一覧表示されます

太字ラベル:<b> </b>

斜体のタグ:<i> </i>

タグに下線を引く:<u> </u>

下付きラベル:<sub> </sub>

上付きラベル:<sup> </sup>

HTML エンティティ:

大なり記号>:>

小なり記号<:<

登録商標:®

より多くのエンティティを単独で検索できる

<span> </span>ラップされていないブロックタグ

<a> </a>ハイパーリンク (「アンカー」アンカー) を表し、href属性はリンクアドレス ( hypertext reference)を表します。

tragetAttribute_self が
このウィンドウで開きます

_blank 新しいウィンドウで開きます

_parent 親ウィンドウで開きます

_top トップレベルウィンドウで開く

<table>フォームタブ

<tr> </tr>各行

各<td> </td>列

フォーム<th> </th>ヘッダー

プロパティはborder境界線を表します

<style>和<script>

style 要素は HTML に CSS スタイルを追加できます。

結合には、インラインスタイル、内部スタイルシート、外部スタイルシートcss样式の 3 つの形式があります。

インラインスタイル:<h1 style="font-family:arial;"> 文字文字文字</h1>

内部スタイルシート:<style type="text/css"> body {background-color:yellow;} </style>

外部スタイルシート:<link rel="stylesheet" type="text/css" href="mystyle.css">

書き始める

HTML ファイルを記述するのは非常に便利です。ここでは VSCODE を使用します。以下はファイルdemo1.html;の内容です

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test</title>
  </head>
  <body>
    <h1>Hello html</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia nisi ullam sint delectus illo ad ea ipsam earum voluptatum adipisci voluptatem deleniti illum deserunt, qui aspernatur aliquid modi dicta quas.</p>
    <br/>
    <a href="www.google.com">google</a>
    <br/>
    <br/>
    <img src="back.jpg" alt="img" width = "720">
  </body>
</html>

loremはhtml内にランダムなテキストを生成するツールで、lorem+numberと入力すると指定した単語数のセグメントを自動生成します。

生成されたページ:

ここに画像の説明を挿入

CSS記事

CSSを知る

参考：

https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics

https://developer.mozilla.org/zh-CN/docs/Web/CSS

HTML と同様、CSS は実際にはプログラミング言語でも、マークアップ言語でもありません。これはスタイルシート言語であり、これを使用して HTML 要素を選択的にスタイル設定できることを意味します。たとえば、 HTML ページ内のすべての段落要素を選択し、その中のテキストを赤に変更するには、次のように CSS を記述します。

p {
    
    
  color: red;
}

新しいファイルを作成して簡単に使えるように横にcssdemo.css置き、その中に上記の 3 行のコードを入れて、それを HTML ファイルに接続します。ここではリンクされた参照が使用されており、これも最も推奨される方法です。次のコード行をファイルヘッダーの位置 (ファイルヘッダーの位置、およびdemo1.html

<head></head>

<link href="cssdemo.css" rel="stylesheet">

demo1.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test</title>
    <link rel="stylesheet"  href="cssdemo.css">
  </head>
  <body>
    <h1>Hello html</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quia nisi ullam sint delectus illo ad ea ipsam earum voluptatum adipisci voluptatem deleniti illum deserunt, qui aspernatur aliquid modi dicta quas.</p>
    <br/>
    <a href="www.google.com">google</a>
    <br/>
    <br/>
    <img src="back.jpg" alt="img" width = "720">
    
  </body>
</html>

画面：
ここに画像の説明を挿入
文字が赤くなっているのを発見

CSS のコメントは /* で始まり */ で終わります。

これは単純な CSS の使用法です。CSS を詳しく見てみましょう。

「CSSルールセット」の説明

ここに画像の説明を挿入
全体の構造はルールセット (多くの場合、単に「ルール」) と呼ばれ、各部分は次のように説明されます。

选择器（Selector）
HTML 要素の名前はルールセットの先頭にあります。スタイルを設定する必要がある 1 つ以上の要素 (この場合は p 要素) を選択します。さまざまな要素にスタイルを追加するには、セレクターを変更するだけです。

声明（Declaration）
color: red; などの単一のルールを使用して、スタイル要素を追加する属性を指定します。

属性（Properties）
HTML 要素のスタイルを変更する方法。(この場合の色は

要素の属性。) CSS では、ルールを変更するためにどのプロパティを変更するかを決定するのは作成者の責任です。

属性的值（Property value）
属性の右側で、コロンの後には属性の値があり、指定された属性の多くの外観から値を選択します (色に使用できる赤以外にも多くの属性値があります)。

その他の重要な構文に注意してください。

每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
在每个声明里要用冒号（:）将属性与属性值分隔开。
在每个规则集里要用分号（;）将各个声明分隔开。

複数のプロパティを同時に変更する場合は、次のようにセミコロンで区切ってください。

p {
    
    
  color: red;
  width: 500px;
  border: 1px solid black;
}

複数の要素の選択
複数のタイプの要素を選択し、それらに同じスタイルのセットを適用することもできます。異なるセレクターはカンマで区切ります。例えば：

p, li, h1 {
    
    
  color: red;
}

セレクター
セレクターにはさまざまな種類があります。上記では、HTML ドキュメント内の特定の要素を選択するために使用される要素セレクターのみを紹介しています。ただし、選択操作はより具体的にすることができます。一般的に使用されるセレクターの種類をいくつか示します。

ここに画像の説明を挿入

CSSの初期使用

CSS を記述すると、サイズ、色、位置などを設定して、作業がボックスの周りに展開されているように見えることがわかります。ページ上のほとんどの HTML 要素は、積み上げられたボックスとして表示できます。
これは驚くべきことではありません。CSS レイアウトは主にボックスモデルに基づいています。ページスペースを占める各ブロックには次のようなプロパティがあります。

padding：即内边距，围绕着内容（比如段落）的空间。
border：即边框，紧接着内边距的线。
margin：即外边距，围绕元素外部的空间。

ここに画像の説明を挿入
ここでも使用されます:

width ：元素的宽度
background-color ：元素内容和内边距底下的颜色
color ：元素内容（通常是文本）的颜色
text-shadow ：为元素内的文本设置阴影
display ：设置元素的显示模式（暂略）

CSS にさらに情報を追加してみましょう

ページの色を変更する

html {
    
    
  background-color: #00539F;
}

body {
    
    
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

要素は現在です<body>。上記のステートメントを 1 つずつ見てみましょう。

width: 600px;-- ページの幅を常に 600 ピクセルに強制します。
margin: 0 auto;- margin やpadding などのプロパティに 2 つの値を設定する場合、最初の値は要素の上部と下部 (この例では 0 に設定) を表し、2 番目の値は要素の左右を表します (ここでは auto は特別な値、水平方向の左右対称を意味します）。1 つ、3 つ、または 4 つの値を使用することもできます。こちらを参照してください。
background-color: #FF9500;— 前述したように、要素の背景色を指定します。<html>ダークブルーの要素と対照的に、ボディには少し赤みがかったオレンジを使用しましたが、他の色を試すこともできます。
padding: 0 20px 20px 20px;- コンテンツの周囲に少しスペースを作成するために、パディングの 4 つの値を設定します。今回は上部のパディングを設定せず、右、下、左のパディングを 20 ピクセルに設定します。値は上、右、下、左の順にソートされます。
border: 5px solid black; —— ボディに直接 5 ピクセルの黒の実線を設定します。

ページのメインタイトルを配置し、スタイルを追加します

h1 {
    
    
  margin: 0;
  padding: 20px 0;
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

ページの上部に見苦しい隙間があることに気づくかもしれません。これは、ブラウザーが<h1> (en-US)CSS を使用せずにそのような要素にデフォルトのスタイルを設定しているためです。しかし、スタイルを設定せずに Web ページの基本的な読みやすさを求めているため、これは良いアイデアではありません。このギャップをなくすために、 margin: 0; を設定してデフォルトのスタイルをオーバーライドします。

これまでのところ、タイトルの上下のパディングを 20 ピクセルに設定し、タイトルテキストを HTML の背景色と一致するように設定しました。

ここでは、要素内のテキストに影を提供できる text-shadow 属性が使用されていることに注意してください。4 つの値の意味は次のとおりです。

第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。
第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。
第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。
第四个值设置阴影的基色。

中央の画像

img {
    
    
  display: block;
  margin: 0 auto;
}

変更されたページ:

p {
    
    
    color: red;
  }
img {
    
    
  display: block;
  margin: 0 auto;
}
h1 {
    
    
    margin: 0;
    padding: 20px 0;
    color: #00539F;
    text-shadow: 3px 3px 1px black;
  }
html {
    
    
  background-color: #00539F;
}
body {
    
    
    width: 600px;
    margin: 0 auto;
    background-color: #FF9500;
    padding: 0 20px 20px 20px;
    border: 5px solid black;
  }

ここに画像の説明を挿入

HTML での CSS の使用

CSS を使用するには、
インラインスタイル、内部スタイルシート、外部スタイルシートの 3 つの方法があります。

外部スタイルシート

これは、 CSS をドキュメントに添付する最も一般的で便利な方法です。CSS を複数のページにリンクして、すべてのページを同じスタイルシートでスタイル設定できるためです。ほとんどの場合、サイトの異なるページはほぼ同じように見えるため、同じルールのセットを使用して基本的な外観を得ることができます。

外部スタイルシートは、CSS が.css拡張子付きの別のファイルに記述され、 <link>HTML 要素から参照されるものです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

CSS ファイルは次のようになります。

h1 {
    
    
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
    
    
  color: red;
}

<link>要素のhref属性は
ここに画像の説明を挿入
、ファイルシステム内のファイルを参照する必要があります。上記の例では、CSS ファイルと HTML ドキュメントは同じフォルダー内にあります。使用されるパスは相対パスです。CSS ファイルが別の場所にある場合は、次を使用できます。絶対パス。

内部スタイルシート

内部スタイルシートとは、外部 CSS ファイルを使用せず、ファイルタグ内のタグHTML にCSS を配置することを意味します。<head><style>

HTML は次のようになります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
      
      
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
      
      
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

画面効果は外部スタイルシートと一致します

このアプローチは場合によっては便利ですが (たとえば、CSS ファイルを直接編集できないコンテンツ管理システムを使用している場合など)、外部スタイルシートよりも効率が低くなります。サイトでは、すべてのページに同じ CSS を繰り返し追加し、CSS を変更する必要がある場合は各ページファイルを変更する必要があります。

インラインスタイル

インラインスタイルシートは、HTML 要素の style 属性に存在します。特徴は、各 CSS テーブルが 1 つの要素のみに影響を与えることです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

よほどの理由がない限りやらないでください！保守が難しく (更新が必要な場合は同じドキュメントを複数の場所で変更する必要がある)、ドキュメントの構造とドキュメントの表示が混在しているため、コードが読みにくく、理解しにくくなっています。さまざまな種類のコードを別々に保持し、さまざまなドキュメントに保存すると、作業がより明確になります。

場所によっては、インラインスタイルの方が一般的であり、好まれる場合もあります。非常に厳しい環境 (HTML 本文の編集のみを許可する Web サイト管理システム (CMS) など) で作業している場合は、それらを使用する必要があるかもしれません。また、できるだけ多くの電子メールクライアントと互換性を持たせるために、HTML 電子メールでも長い間使用されてきました。

@ルール

Aat-ruleは、アットマーク@, で始まり、その後に識別子が続き、次のセミコロン、;または次の CSS ブロックのいずれか最初に来るまでのすべてが含まれる CSS ステートメントです。

以下に、識別子で指定された @ ルールをいくつか示します。それぞれ異なる構文を使用します。

@charset, 定义样式表使用的字符集。
@import, 告诉 CSS 引擎引入一个外部样式表。
@namespace, 告诉 CSS 引擎必须考虑 XML 命名空间。

ネストされた @ ルールは、ネストされたステートメントのサブセットであり、スタイルシート内のステートメントとしてだけでなく、条件付きルールグループ内でも使用できます。

	@media, 如果满足媒介查询的条件则条件规则组里的规则生效。
	@page, 描述打印文档时布局的变化。
	@font-face, 描述将下载的外部的字体。 Experimental
	@keyframes, 描述 CSS 动画的中间步骤 . Experimental
	@supports, 如果满足给定条件则条件规则组里的规则生效。 Experimental
	@document, 如果文档样式表满足给定条件则条件规则组里的规则生效。 (推延至 CSS Level 4 规范)

最も一般的な@rule ものの 1 つは@media、特定の条件が当てはまる場合にのみメディアクエリを使用して CSS を適用できることです (たとえば、画面の解像度が一定の量より高い場合、または画面の幅が一定の幅より大きい場合)。

以下の CSS では、<body> 要素。ただし、を使用して@media、30em より大きいビューポートを持つブラウザにのみ適用されるスタイルシートのセクションを作成します。ブラウザの幅が 30em より大きい場合、背景色は青になります。

body {
    
    
  background-color: pink;
}

@media (min-width: 30em) {
    
    
  body {
    
    
    background-color: blue;
  }
}

略記属性

フォント、背景、パディング、ボーダー、マージンなどの一部のプロパティは、短縮プロパティと呼ばれます。これは、複数のプロパティ値を 1 行に設定できるため、時間を節約し、コードをすっきりさせることができるためです。

例えば：

/* In 4-value shorthands like padding and margin, the values are applied
   in the order top, right, bottom, left (clockwise from the top). There are also other
   shorthand types, for example 2-value shorthands, which set padding/margin
   for top/bottom, then left/right */
padding: 10px 15px 15px 5px;

は、次の 4 行のコードに相当します。

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

この行:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

は、次の 5 行のコードに相当します。

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;

CSS の仕組み

ブラウザがファイルを表示するときは、ファイルの内容とファイルのスタイル情報を考慮する必要があります。以下では、ブラウザの標準的なファイル処理プロセスについて説明します。知っておく必要があるのは、次の手順は Web ページの閲覧と読み込みの簡略化されたバージョンであり、ブラウザによってファイルの処理方法は異なりますが、基本的には次の手順が表示されるということです。

ブラウザはHTMLファイル(Web から取得したものなど)。
HTML ファイルを、DOM（Document Object Model）コンピュータメモリ内のファイルの表現である DOM に変換します。
次に、ブラウザは、ページに埋め込まれた画像、ビデオ、CSS スタイルなど、HTML に関連するほとんどのリソースを取得します。JavaScript 後で処理されます。
ブラウザは CSS を取得すると、それを解析し、さまざまなタイプのセレクター (要素、クラス、ID など) に応じてさまざまな「バケット」に分割します。ブラウザは、検出したさまざまなセレクターに基づいて、さまざまなルール(要素セレクター、クラスセレクター、ID セレクターなどのセレクターベースのルール)を対応する DOM ノードに適用し、ノード依存のスタイルを追加します(この中間ステップはレンダーツリーと呼ばれます)。
上記のルールがレンダーツリーに適用されると、表示される構造に従ってレンダーツリーがレイアウトされます。
Web ページが画面に表示されます (このステップをレンダリングと呼びます)。

ここに画像の説明を挿入

JAVAWEB学習メモ - フロントエンドの基礎

記事ディレクトリ

HTML

HTML の概要

HTML要素

書き始める

CSS記事

CSSを知る

「CSSルールセット」の説明

CSSの初期使用

HTML での CSS の使用

外部スタイルシート

内部スタイルシート

インラインスタイル

@ルール

略記属性

CSS の仕組み

おすすめ