[ゼロベースのダイブフロントエンド] 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その他のタグ(タグリファレンスマニュアル)

HTMLリファレンスマニュアル(HTML5標準)

合計コードと実行結果

<!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ドキュメントのスタイルファイルを定義します

おすすめ

転載: blog.csdn.net/qq_42136832/article/details/114983579