ホームページ >ウェブフロントエンド >CSSチュートリアル >日 - HTML と CSS
日 - HTML と CSS
- Mary-Kate Olsenオリジナル
- 2025-01-03 20:54:45296ブラウズ
HTML:
HTML は Hyper Text Markup Language の略です。
HTML は、Web ページの作成に使用される標準言語です。
タグまたは要素のシステムを使用して Web ページの構造を定義します。
CSS:
CSS は、Cascading Style Sheets の略です。
HTML で作成された Web ページのレイアウトのスタイルと書式設定に使用されます。
色、フォント、間隔、位置、レスポンシブ デザインなどを制御します。
CSS を使用すると、構造 (HTML) をデザイン (スタイル) から分離できるため、Web サイトの保守が容易になり、より柔軟になります。
JS:
Js は JavaScript の略です。
これは、Web ブラウザー内で動的でインタラクティブな効果を作成するために使用されるプログラミング言語です。
HTML はページを構造化し、CSS でスタイルを設定しますが、JavaScript はページとの対話を可能にし、コンテンツを動的に変更できます。
HTML:
HTML は、Web コンテンツの構造と意味を定義するテキストベースの言語です。
スタンドアロンタグ:
HTML では、スタンドアロン タグは、終了タグを必要としない HTML 要素を指します。これらは、自己終了タグまたは void 要素とも呼ばれることがよくあります。
例:
<br> <hr> <input>
構造タグ:
タグは通常、開始タグと終了タグのペアで構成されます。
例:
<html> <head> <body>
要素:
要素は Web ページの構成要素であり、ドキュメント内のさまざまなタイプのコンテンツと構造を表します。
HTML 要素のコンポーネント:
Opening Tag: The starting part of the element that defines the type of content that follows.
Example:<p>, <h1>, <div>, <img>
Content: The content placed between the opening and closing tags (if applicable). This could be text, images, links, or other elements.
Example: This is a paragraph.
Closing Tag: The closing part of the element that indicates the end of the element. It is the same as the opening tag, but with a forward slash (/) before the tag name.
Example: </p>, </h1>, </div>
Attributes (Optional): Additional properties that provide extra information about the element. Attributes are added inside the opening tag.
Example:>
<p><strong>Example:</strong><br>
</p>
<pre class="brush:php;toolbar:false"><html>
<head>
<title>ILUGC</title>
<style>
.container{
border:1px solid;
height:200%;
width:85%;
margin:auto;
}
.header h4{
text-transform: uppercase;
color:#e22d30;
border-top:1px solid green;
width: fit-content;
padding-top:10px;
}
.header{
margin:25px;
}
</style>
</head>
<body>
<div>
<p><strong>Explanation of the HTML Structure:</strong><br>
</p>
<pre class="brush:php;toolbar:false"><html>: Root element of the HTML document.
<head>: Contains metadata for the page, including the title and styles.
<body>:Contains the content visible on the page.
Inside the <head>:
The <title> tag gives the webpage its title when viewed in the browser tab.
The <style> tag contains the internal CSS to style the page.
Inside the <body>:
.container:A container div with a class container that holds all the page elements.
It's styled with a border, height, width, and centered using margin:auto.
.header: A section that contains the main title (<h1>) and a subtitle (<h4>) about the ILUGC group.
The h4 tag is styled with uppercase letters, a red color, a border on top, and some padding.
navbar: This seems to be a placeholder for a navigation bar.
layout: A section for the main content layout, with two subsections:
mainLayout: Likely for the main content area.
sideLayout: Likely for a sidebar or additional content.
footer: Placeholder for the footer section.
div:
この要素は、他の要素をグループ化し、それらにスタイルやレイアウトのプロパティを適用するために使用されるブロックレベルのコンテナです。
クラスセレクター:
クラス セレクターは、特定のクラス属性を持つ要素を選択してスタイル設定するために使用されます。これは、CSS で最もよく使用されるセレクターの 1 つです。クラス セレクターは、ドット (.) とその後に続くクラス名によって定義されます。
構文:
.classname {
}
要素セレクター:
要素セレクター (タイプ セレクターとも呼ばれます) は、タグ名に基づいて HTML 要素を選択し、スタイルを設定するために使用されます。これにより、ドキュメント内の特定タイプの HTML 要素のすべてのインスタンスにスタイルを適用できます。
構文:
element {
}
マージン:
CSS の margin プロパティは、要素の外側にスペースを作成するために使用されます。
構文:
element {
margin: value;
}
パディング:
CSS のパディング プロパティは、要素内のコンテンツと境界線の間にスペースを作成するために使用されます。
構文:
element {
padding: value;
}
以上が日 - HTML と CSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。