今日は、HTMLの最も基本的なことを見てみましょう
HTMLベースとコード実装
正直なところ、これらはHTMLに馴染みがないわけではありません。これは、前年度のccf試験では、実際の質問の3番目の質問にHTML関連の知識があることが多いためです。世界は丸いので、どうすれば戻ってくることができますか。世界の調和!
基本コンポーネント
HTMLタイトル
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
HTML段落
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
HTMLリンク
ターゲット属性が「_blank」に設定されている場合、リンクは新しいウィンドウで開きます
<a href="https://www.baidu.com">这是一个链接</a>
<a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
HTML画像
<img src="/images/1.jpg" /><!--width="258" height="39" -->
HTMLの空白行と水平線
空行
<br>
水平線
<hr>
HTMLその他のタグ(タグリファレンスマニュアル)
合計コードと実行結果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<a href="https://www.baidu.com">这是一个链接</a>
<br>
<img src="/images/1.jpg" /><!--width="258" height="39" -->
</body>
</html>
テキストの書式設定
コードと効果を見る
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
<br />
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<br>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
</body>
</html>
その他のレーベル紹介
ベース
定義ページのすべてのリンクにデフォルトのリンク宛先アドレスを使用します。
<base href="//www.runoob.com/images/" target="_blank">
<a href="//www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
頭
head>要素には、すべてのheadタグ要素が含まれます。head要素には、スクリプト、スタイルファイル(CSS)、およびさまざまなメタ情報を挿入できます。
ヘッド領域に追加できる要素タグは、タイトル、スタイル、メタ、リンク、スクリプト、noscript、およびベースです。
リンク
リンクタグは、ドキュメントと外部リソースの間の関係を定義します。
リンクタグは通常、スタイルシートにリンクするために使用されます。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
スタイル
styleタグは、HTMLドキュメントのスタイルファイル参照アドレスを定義します。
style>要素では、スタイルを直接追加してHTMLドキュメントをレンダリングすることもできます。
<head>
<style type="text/css">
body {
background-color:yellow}
p {
color:blue}
</style>
</head>
メタ
メタタグは、いくつかの基本的なメタデータを記述します。
メタタグはメタデータを提供します。メタデータはページに表示されませんが、ブラウザによって解析されます。
META要素は通常、Webページの説明、キーワード、ファイルの最終変更時刻、作成者、およびその他のメタデータを指定するために使用されます。
メタデータは、ブラウザー(コンテンツの表示方法またはページの再読み込み方法)、検索エンジン(キーワード)、またはその他のWebサービスで使用できます。
メタは通常、ヘッドエリアに配置されます
脚本
scriptタグは、JavaScriptなどのスクリプトファイルをロードするために使用されます。
スクリプト要素については、後の章で詳しく説明します。
前の要約表
ラベル | 説明 |
---|---|
頭 | ドキュメントの情報を定義します |
題名 | ドキュメントのタイトルが定義されています |
ベース | ページリンクラベルのデフォルトのリンクアドレスを定義します |
リンク | ドキュメントと外部リソース間の関係を定義します |
メタ | HTMLドキュメントのメタデータを定義します |
脚本 | クライアントのスクリプトファイルを定義します |
スタイル | HTMLドキュメントのスタイルファイルを定義します |