ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML育成記録「深淵の三王」_html/css_WEB-ITnose
HTML育成記録「深淵の三王」_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:16:07839ブラウズ
第 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我就爆照了。”
今天文章就先到此为止了，今天写着文章，突然发现自己的脑洞已经大的不行不行了。
但是要是能让各位读者呵呵一笑，也就不算白费功夫了。
最后问一下各位读者，魔兽首映有多少人回去看呀？有没有北京的？一起约呀。