HTML育成記録「深淵の三王」_html/css_WEB-ITnose
第 3 章
「先生、昨日の練習の後、私は HTML の魔法のスキルについてすでに基本を理解しましたが、生徒は何か不明な点があります。」
「どうしたの? でも、それは問題ではありません。 「
」これが「ボックスモデル」です。「ボックスモデル」は仏陀の怒りの会社に次ぐもう一つのスーパーアーティファクトであると言われていますが、弟子はその原理を理解することができませんでした。写真を見てみましょう。
この箱を、中秋節に月餅を包装するために使用する月餅の箱と比較します。
2 つのケーキの箱の間の距離は、私たちが導入するものです - > そして、それぞれのケーキには最も外側の包装箱が必要です そして、この包装箱の厚さが私たちの境界です。月餅はすべて隣り合うことはできませんよね
次に、各月餅の間隔をパディングと呼びます
次に、月餅用の月餅箱を紹介しました。
はい、私たちの月餅の幅は -> 幅です
そして、私たちの月餅は -> 要素と呼ばれます。 ? "
"この写真わかりますか? "
CSS では、幅と高さはコンテンツ領域の幅と高さを指します。
パディング、境界線、余白を増やしても、コンテンツ領域のサイズには影響しませんが、要素ボックスの全体的なサイズは大きくなります。
ボックスの両側に 10 ピクセルのマージンと 5 ピクセルのパディングがあると仮定します。
この要素ボックスを 100 ピクセルにしたい場合は、コンテンツの幅を 70 ピクセルに設定する必要があります。
「理解できましたか？」
「弟子は理解しました。しかし、昨日はあまりにも多くの方法を学びすぎたので、難しさがあまりにも速く増加しました。」
「問題ありません、これらは将来あなたの毎日の必須演習です。」完璧です。」股間に手を当ててもいいよ、出してよ、若い人たち、いつもオナニーしてるんじゃないの？マスター、私たちは昨日 HTML の入門テクニックを学びました。昨日私が史上最もよく使われるタグ div について学んだのと同じように、「
」 div は何ができるのでしょうか? HTML の世界では千の顔を持つ男がいます。しかし、その後、女性のせいで... ああ、それについては話さないでください。 Web ページ「
」。彼は 1 行を単独で占有できますか?「
」その通りです。div を除いて、他のタグにも独自の対応するセマンティクスがあります。はい、マークに特別な英語の単語を追加することで、それぞれのラベルが独自の意味を持つことはありません。これの利点は、「
」「
」SEO?それは何ですか? "
" SEO は、Web ページを作成する過程で、対応するタグを使用する必要があります。Lang Jun の div 能力を使用して、それを形成できます。 「
」SEO とは何ですか? 「エンジン最適化」とは、Web サイトを内部およびサイト外で調整および最適化し、検索エンジンのランキング要件を満たし、キーワードのランキングを向上させることを指します。これにより、正確なユーザーを Web サイトに誘導し、無料のトラフィックを獲得し、直接販売やブランド プロモーションを生み出します。
「SEO には多くのタグが効果的だと言いましたが、タグを書くときにすべてのタグに注意する必要がありますか?」
「いえいえ、特別な方法をマスターすれば、半分の労力で 2 倍の成果が得られるのは当然です。 " 「あなたは、『9 つの光と 1 つの深さ』、『いちゃつくことが第一』という意味ですか?捕まりました。「
」ふん。」
SEO に役立つタグ 1.title
2.meta:keywords,description
3.h1 (1 回のみ表示可能)-h2 (あまり多くありません)
4 .strong (トーンを強調)
5.img-alt (置換テキスト、画像が正常に表示されない場合に表示されます)
6. 外部リンク
7.a
」これをマスターすればOKよく使われる 7 つのタグ 正しく使用したら、あとは少し注意するだけです。 「ああ、マスター。今日は『深淵の三王』を紹介するって言ってたよね？」 、何か実践的なことはできますか？」
「くそー、マスター、あなたは私をスパイしているんですね。」
「私は女性と付き合ったことがないんです。」
「マスター、私は男で、しかも異性愛者です。」
「ゲット「ああ、マスター、『深淵の三王』の物語を教えてください」
「ふん！～」
第4章
「天地玄皇、宇宙の始まり、太陽と月が満ち、星々が広がったとき、世界の本来の神聖な心は3つの大きな部分に分けられ、そのうちの1つは主に純粋な気を含んでおり、は「神界」の初期状態であり、濁ったものが宇宙の深淵に落ち、現在の人間界を形成したのは言うまでもない。形而上的なものは武器と呼ばれます。」 深淵には3人の悪魔がおり、より濁った空気を吸収し、その力が大幅に増加し、現在の「深淵の三王」が形成されました。これらの王の名前は何ですか? "
「『暴力皇帝』のブロック要素、『骨を蝕む魔法の水』のインライン要素、そして『白王』のインラインブロック要素です。」
「どれも素晴らしいですね。」 「
」 まず、「Raging Empire」のブロック要素について説明します。 「
特徴
ブロック要素はそれぞれ独自の行を占有します。ライン。 。デフォルトでは、ブロック要素の幅がその親要素の幅に自動的に収まります。
block要素は幅と高さの属性を設定できます。ブロックレベル要素の幅が設定されている場合でも、依然として排他的な行を占有します。
ブロック要素は、マージンとパディングの属性を設定できます。
ブロック要素はすべての CSS スタイルをサポートします
「彼には多くの有能な兵士がいますが、基本的には次のカテゴリに分類できます。」
基本要素
div
意味はなく、主にインターフェイスのレイアウト（デュアルラベル）に一致させるためですp
セマンティクス: 段落 (デュアルタグ)
h1~h6
第 1 レベルから第 6 レベルのタイトルを定義する
注
h2 には非常に重みが高く、一般的にページには必要ありません 10 個以上、大規模な Web サイトを除く
h3 は気軽に使用できます
「ただし、注意すべき点が 1 つあります。 div タグがその中にネストされていると、p タグ内のスタイルが分割されることに注意してください。「
」弟子は、「千の顔の人」の div もブロックレベルの要素であることを理解しています。
「はい、さらに、暴力的な皇帝の下には 2 組の双子がいます。兄弟は非常に強力です。彼らは順序付きリスト ol、順序なしリスト ul、そして 3 人の兄弟、dl、dt、dd です。」
」にどう対処する？伝説のPYトランザクションを使うべき？」
すべてのタグには特定のスタイルは CSS ですべてクリアできます
独自のreset.css ファイルを作成してください
/*margin的样式初始化*/body,h1,h2,h3,h4,h5,h6,p,ol,ul { margin:0;}/*padding的样式初始化*/ol,ul { padding:0;}/*列表点点的样式初始化*/ul,ol { list-style: none;}「こうすれば、好きなように処理できます。彼を好きなポーズにできます
」ふふふ、私の大好きな可愛い子です「
」 もう一度言いますが、「骨を蝕む魔法の水」のインライン要素は同じ行に配置されません。 . 1行配置できなくなるまで、新しい行が追加されます
コンテンツ展開幅inline要素のwidth属性とheight属性の設定は無効です。
インライン要素は上下のマージンとパディングをサポートせず、左右のマージンとパディングのみをサポートしますコードの改行は解析されます
「彼女のアンカー ポイントはどのように設定されていますか?」
href を設定することでジャンプできます。 = "# + アンカー名"。必ず #
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <span id=“top”></span> <p>asdnajsd</p> <br> <br> <br> <br> <br> <br> <br> <a href=“#top”>回到顶部</a></body></html>
「彼を強くさせてください、そうすれば風が吹くでしょう。」 「
「マスター、あなたは明らかにハーレムに数人を連れて行けるかどうか考えているようです。」
「剣に気をつけてください！」
リーリー
殴られた後、彼の鼻は打撲傷になり、顔は腫れていました。 )
「ふふ、マスター、私を殺す必要がありますか？ それに、正義の人として、どうやって『剣』の練習をして、猿を使って桃を盗むことができますか？
「これはマスターの戦略と呼ばれるものです、敵の意表を突いて、準備ができていない状態で攻撃してください。」
「マスターは素晴らしいです。それではマスター、なぜ深淵の三王の一人が『白王』と呼ばれているのですか？この名前はまったく強さを感じません。」
“不厉害？他当初为了某样神器，蹲点等了万年不世出的天才‘东伯雪鹰’近3千万年。”
“师傅，你不要以为我没看过《雪鹰领主》。”
“哈哈哈哈，不要在意这些细节。为师来给你说说‘白君王’内联块元素吧。”
特性
1.支持所有css的样式
2.除块属性的标签以外，同属性以及行属性标签排在一排
3.代码换行被解析
“‘白君王’内联块元素同时具有了宽元素可以设置宽度和高度的特点，同时又像内联元素一样，可以和其他行属性标签处于同一行，因为这个特点，他隐隐有超过其他两大君王的趋势。”
“那他岂不是无敌了？他这么厉害，既能设置宽高，又能处于同一行。”
“然而之所以现在还是三足鼎立，第一点是很多时候，在页面中还是要使用不同标签对应的特性。其次就是，内联块也并不是完美无缺的。”
“哦？他是去过泰国变性了么？”
“咳咳，并不是，而是因为设置内联块的时候，它的换行会被解析。”
可以看见，img 的边上，并没有 margin，但是实际展示的时候，会存在一条白的间隙。
而当我们把两个 img 标签连在一起写的时候，就正常了，如第一个 img 和第二个 img。
具体解决方法请参考下一篇文章，具体题目还没想好，大家记得看就好。
“哦哦，那我该如何去解决呢？”
标签的初始化图片样式img { border:none;}“但是，徒儿，你要记得一件事，你在网页中看到块元素，不一定就是块元素，他有可能已经是一个内联块元素了。”
“什么？难道他们还能变性？”
“虽不中，亦不差远已。他们在每次使用之前，可以使用深渊的一件超神器。”
“超神器？那是什么呀。”
“是传说中的 display。传说中在使用之前，可以使用 display 来对它原本的特性进行一个修改，可以让原本是块属性的元素变成行属性元素，同时内联属性也同样可以转化为块属性。”
“啊，这么厉害？那内联块也可以进行转化么？”
“嗯，当然可以。”
“徒儿，你要注意，在深渊中还存在一些隐藏的深渊强者，你要注意。”
“谢谢师傅关心，唉，这么长时间，还从来没见过师娘呀。”
“哼哼，等着吧，点赞数到100我就爆照了。”
今天文章就先到此为止了，今天写着文章，突然发现自己的脑洞已经大的不行不行了。
但是要是能让各位读者呵呵一笑，也就不算白费功夫了。
最后问一下各位读者，魔兽首映有多少人回去看呀？有没有北京的？一起约呀。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7566
15
1386
52
87
11
28
105
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
