HTML と CSS を説明する (超詳細)
提示：以下是我的一些经验之谈，下面案例可供参考
1. 初期の HTML と CSS
1. htmlの開発経緯
HTML 1.0 ハイパーテキスト マークアップ言語 (初版) - 1993 年 6 月に Internet Engineering Task Force (IETF) ワーキング ドラフトとして公開されました (標準ではありません)。
HTML 2.0 - 1995 年 11 月に RFC 1866 として公開され、2000 年 6 月に RFC 2854 が公開された後、廃止されたと宣言されました。
HTML 3.2 – 1996 年 1 月 14 日、W3C 勧告
HTML 4.0 – 1997 年 12 月 18 日、W3C 勧告
HTML 4.0 (マイナーな改善) - 1999 年 12 月 24 日、W3C 勧告
XHTML 1.0 – 2000 年 1 月 26 日に W3C 勧告として発行、2002 年 8 月 1 日に改訂および再発行
XHTML 1.1 – 2001 年 5 月 31 日リリース
HTML5.0 2014 年 10 月 28 日、World Wide Web Consortium は、8 年近くの努力の末、ようやく標準仕様が策定されたと発表しました。
例: pandas は、データ分析タスクを解決するために作成された NumPy ベースのツールです。
2.html
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言(标记语言是一套标记标签)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
3.css
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
2、HTML
1.基本的な枠組み
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面名字</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
< !DOCTYPE html > は HTML5 ドキュメントとして宣言されています。
< html > 要素は HTML ページのルート要素です。
< head > 要素には、< meta charset="utf-8" などのドキュメントのメタデータが含まれています。 > Web ページのエンコード形式を utf -8 として定義します。
<title> 要素はドキュメントのタイトルを記述します
<body> 要素は表示可能なページ コンテンツを含みます
<h1> 要素は見出しを定義します
<p> 要素は段落を定義します
2. HTML5 でよく使われるタグと属性
| ラベル | 説明 |
|---|---|
| ベース | |
| < p > | 段落を定義する |
| <br> | 単純な改行を定義する |
| <時間> | 水平線を定義 |
| < !–…-- > | コメントを定義する |
| フォーマット | |
| < b > | 太字のテキストを定義する |
| <私> | 斜体テキストを定義する |
| < ウ > | 下線付きテキストの定義 |
| <em> | 強調テキストを定義する |
| < デル > | 削除するテキストを定義する |
| ＜時間＞ | 時間/日付を定義する |
| <サブ> | 下付きテキストの定義 |
| <サップ> | 上付きテキストを定義する |
| 形状 | |
| ＜フォーム＞ | ユーザー入力用の HTML フォームを定義する |
| <入力> | 入力コントロールを定義する |
| <ラベル> | 入力要素の注釈を定義します |
| < ボタン > | 定義ボタン |
| <選択> | 選択リスト (ドロップダウン リスト) を定義する |
| < オプトグループ > | 選択リスト内の関連するオプションの組み合わせを定義します |
| ＜オプション＞ | 選択リストでオプションを定義する |
| <データリスト> | 入力要素の可能なオプションのリストを指定します |
| 画像 | |
| < 画像 > | イメージを定義する |
| ＜マップ＞ | イメージ マップを定義する |
| ＜エリア＞ | イメージ マップ内の領域を定義します |
| オーディオビデオ | |
| ＜オーディオ＞ | 音楽やその他のオーディオ ストリームなどのサウンドを定義する |
| <動画> | オーディオまたはビデオを定義する |
| <ソース> | メディア要素 ( および ) を定義するメディア リソース |
| <トラック> | メディア ( および ) 要素の外部テキスト トラックを定義する |
| リンク | |
| <あ> | リンクを定義する |
| < リンク > | ドキュメントと外部リソースとの関係を定義する |
| <メイン> | ドキュメントの本文を定義する |
| <ナビ> | ナビゲーション リンクを定義する |
| リスト | |
| <UL> | 順序なしリストを定義する |
| <オール> | 番号付きリストを定義する |
| <リ> | リスト項目を定義する |
| シート | |
| ＜表＞ | テーブルを定義する |
| <キャプション> | テーブルのタイトルを定義する |
| < 目 > | テーブルのヘッダー セルを定義する |
| <tr> | テーブルの行を定義する |
| < td > | 定义表格中的单元 |
| < thead > | 定义表格中的表头内容 |
| < tbody > | 定义表格中的主体内容 |
| < tfoot > | 定义表格中的表注内容（脚注） |
| 样式/节 | |
| < style > | 定义文档的样式信息 |
| < div > | 定义文档中的节 |
| < span > | 定义文档中的节 |
| < header > | 定义一个文档头部部分 |
| < footer > | 定义一个文档底部 |
| < section > | 定义了文档的某个区域 |
| < article > | 定义一个文章内容 |
| < aside > | 定义其所处内容之外的内容 |
| 程序 | |
| < script > | 定义客户端脚本 |
Html的一些全局属性
| 全局属性 | 描述 |
|---|---|
| accesskey | 设置访问元素的键盘快捷键。 |
| class | 规定元素的类名（classname） |
| contenteditableNew | 规定是否可编辑元素的内容。 |
| contextmenuNew | 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 |
| data-* | 用于存储页面的自定义数据 |
| dir | 设置元素中内容的文本方向。 |
| draggable | 指定某个元素是否可以拖动 |
| dropzone | 指定是否将数据复制，移动，或链接，或删除 |
| hidden | hidden 属性规定对元素进行隐藏 |
| id | 规定元素的唯一 id |
| lang | 设置元素中内容的语言代码 |
| spellcheck | 检测元素是否拼写错误 |
| style | 规定元素的行内样式（inline style） |
| tabindex | 设置元素的 Tab 键控制次序 |
| title | 规定元素的额外信息（可在工具提示中显示） |
| translate | 指定是否一个元素的值在页面载入时是否需要翻译 |
三、CSS
1.css的使用
CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:
p{
color: red;
/* 设置字体颜色为红色 */
text-align: center;
/* 设置文本对齐方式为居中 */
}
2.css选择器
大家可以看下面这个选择器参考表
| 选择器 | 示例 |
|---|---|
| 类型选择器 | h1 { } |
| 通配选择器 | * { } |
| 类选择器 | .box { } |
| ID选择器 | #unique { } |
| 标签属性选择器 | a[title] { } |
| 伪类选择器 | p:最初の子 { } |
| 疑似要素セレクター | p::最初の行 { } |
| 子孫セレクター | 記事p |
| 子セレクター | 記事 > p |
| 隣接兄弟セレクター | h1 + p |
| 汎用兄弟セレクター | h1 ~ p |
- タイプ、クラス、および ID セレクター
このセレクター グループである最初のセレクターは、すべての HTML 要素 < h1 > を参照します。
h1 {
}
また、クラス セレクターも含まれています。
.box {
}
または、ID セレクター:
#unique {
}
- タグ属性セレクター
この一連のセレクターは、要素のタグ属性の存在に基づいて、さまざまな方法で要素を選択します。
a[title] {
}
または、特定の値を持つタグ属性の有無に基づいて選択します。
a[href="https://www.baidu.com"] {
}
- 疑似クラスと疑似要素
この一連のセレクターには、要素の特定の状態のスタイルを設定するために使用される疑似クラスが含まれています。例: hover 疑似クラスは、マウス ポインターがその上に置かれたときに要素を選択します。
a:hover {
}
また、要素自体ではなく要素の一部を選択して、疑似要素を含めることもできます。たとえば、::first-line は要素の最初の行 (次の場合は < p >) を選択します。これは、書式設定された最初の行の外側にラップされた < span > と同様に、この < span > を選択します。
p::first-line {
}
- 演算子
セレクターの最後のセットを他のセレクターと組み合わせて、より複雑な要素の選択を行うことができます。次の例では、演算子 (>) を使用して <div> 要素の最初の子を選択しています。
div > p {
}
要約する
上記は主に、フロントエンドに足を踏み入れたばかりのかわい子ちゃん向けにまとめられていると思われる比較的基本的なドキュメントです. 参照できます, 今後も更新されます~~