類似要素の意味 - HTML&CSS_html/css_WEB - ITnose-htmlチュートリアル-php.cn

類似要素の意味 - HTML&CSS_html/css_WEB - ITnose

WBOY

リリース： 2016-06-24 11:34:05

オリジナル

1164 人が閲覧しました

1.

効果:

これが短い引用であることをブラウザに伝え、ブラウザに適切な方法で表示させます

注:

の効果が二重引用符ではないためです。

モバイルデバイスや音声ブラウザでは二重引用符ほど単純に引用符が表示されないことを忘れないでください。

利点:

検索エンジンが参照されているWebページを見つけるのに便利です。

CSS を使用して参照のスタイルを設定できます。たとえば、参照を灰色の斜体で表示したいなどです。

2.

効果:

長い引用符を個別に表示し、独自の段落にします

注:

一部のブラウザーではわずかにインデントされますが、一部のブラウザーではインデントされません。

3. ブロック要素とインライン要素

ブロック要素は例外ですが、インライン要素はこの傾向に従います。

ブロック要素は、Web ページの主要な構成要素としてよく使用され、インライン要素は、コンテンツの小さな部分をマークするためによく使用されます

ページをデザインするときは、通常、大きなブロックから始めて、調整しながらインライン要素を追加しますページ

ブラウザは新しいブロック要素を開始するときにのみ改行を挿入します。アクティブな改行には
要素が必要です

はブロック要素です

4. ;

title:

....

title には値があり、リンク情報を提供します

target:

....

Link opens in a new window

ビジュアルで人を考える障害、ターゲットを使いすぎないでください。

注:

リンクラベルは簡潔にし、タイトルに追加情報を提供してください

ラベルが意味のあるものであることを確認し、「次のページをクリック」するためのクラスを使用しないでください

リンクをまとめて置かないでください

5 .id & class

複数の属性で特定のスタイルを使用したい場合は、class

を使用できます。ただし、要素が 1 つしかない場合は、id

を使用する必要があります。id 属性は、要素に一意の名前を付けるために使用されます。

たとえば、に複数の

がある場合、そのうちの 1 つ

をスタイル設定するだけで済みます。

6. img

注:

ブラウザはhtmlファイルをダウンロードしてページの表示を開始した後に画像をダウンロードします。

alt

alt を使用して、表示されていない画像を置き換えます

顧客がどのようなブラウザやデバイスを使用するか、またネットワーク速度。

width & height

幅と高さは、実際にブラウザが画像を読み込む準備をするのに役立ちます。

この属性が使用される場合、その値は画像の実際の幅と高さと同じである必要があります

サムネイルリンク

< img src= "" コンテキスト。

透明な画像

Webページに透明な画像を配置したい場合は、画像のマスクカラーがWebページの背景色と同じになるようにしてください

7.HTML5

基本形式要件:

rreee

8. ボックスモデル図

9.div & span

div の使用場面

確かに、複数の要素が 1 つのクラスに属することができます

しかし、を追加する必要がありますこれらの要素に大きな境界線を追加します

.Cat{ } を使用すると、Cat クラスに属するすべての要素に境界線が追加されます。これは明らかに私たちが望んでいることではありません。

そこで、 div を使ってすべての要素を囲み、 div ボックス全体の境界線を設定する必要があります

span

小さな要素の束にスタイルを指定します

10. 画像のレイアウト

ブラウザが2つ配置したとき画像を並べて表示、2 つの画像の余白の合計

　　上下共列放置时，以最大外边距高度为最终间隔距离

　　外边距会折叠条件：两元素的垂直外边距碰到一起，就一定会折叠。

11.页面布局

　　浮动（float）

　　　作用：

　　　　　float属性首先尽可能地向左或向右浮动元素

　　　　　然后它下面的所有内容会绕流这个元素

　　　幕后原理：

　　　　　浏览器正常地将元素导入页面

　　　　　遇到浮动元素会尽可能放在左或者右，还会从流中删除这个段落，就像浮在页面上一样

　　　　　由于这个浮动元素已经从正常流中删除，所有其它元素会依旧填满页面，就像没有浮动元素一样

　　　　　不过，内联元素定位时，会考虑的浮动元素的边界，因此会围绕浮动元素

　　　要求：

　　　　　对于所有的浮动元素都有一个要求：必须指定了宽度。

　　　clear：

　　　　所在元素左边或者右边或者两边，不允许有浮动内容，常用来处理浮动元素覆盖页底的情况。

　　冻结设计

　　what：

　　　　内容的宽度是固定的，不会随着视窗扩展或收缩。

　　　　但浏览器很宽时，浏览器右侧会有很多空白空间

　　注：

　　　　把主要内容都放在一个id中，并设计宽度。

　　eg：　　　

1 #allcontent{2     width: 800px;3 }

ログイン後にコピー

　　凝胶布局

　　what：

　　　　内容宽度固定，但是外边距会随着浏览器窗口扩展或收缩。通常会把内容放在中央。

　　How

　　　　由一个固定大小的

包围页面的所有内容，然后利用auto属性值允许外边距扩展。

　　eg：　　　

1 #allcontent{2     width: 800px;3     margin-left: auto;4     margin-right: auto; 5 }

ログイン後にコピー

12.定位

position：

　　　static（静态/默认），absolute（绝对），fixed（固定），relative（相对）

　　绝对定位

　　　　　what：

　　　　　　　允许将元素放置在页面上的任何位置。默认的，绝对定位会相对于页面边界来放置。

　　　　　注：

　　　　　　　一个元素绝对定位时，浏览器首先会将它从流中删除，然后将这个元素放置在top和right属性指定的位置上（也可以是bottom和left）

　　　　　　　在被绝对定位的元素下面，页面正常流中的所有元素根本不知道页面上有这个绝对定位的元素，包括内联元素。

　　　　　　　达到覆盖的效果。　　

　　　　　　　绝对定位元素不要求指定宽度，不过，若没有宽度，默认的，块元素会占浏览器的整个宽度（减去你指定的距左边或右边的偏移量）

　　　　　eg：　　　

1 #sidebar{2     position: absolute;3     top: 100px;4     right:200px;5     width: 280px;6 }

ログイン後にコピー

　固定定位

　what：

　　　让元素位于你指定的位置，且这个位置总是相对于浏览器窗口定位

　　　一旦放置好，就会一直呆在指定的位置，不再移动，即使你滚动页面它也不再改变

　　　页面中的其它元素会在这些固定定位元素下面正常滚动。

　eg：

1 #coupon{2     position: fixed;3     top: 300px;4     left: 100px;5 }

ログイン後にコピー

　相对定位

　　相对定位元素首先正常流入页面，然后按指定量偏移。

　　使用相对定位时，left，top，right，bottom是指距正常流中该元素的位置的偏移量。

　静态定位

　　让元素放在正常的文档流中。

13.CSS表格布局

创建一行两列的表格结构

示例代码：

1 <div id="tableContainer">2     <div id="tableRow">3         <!-- ... -->4     </div>5     <div id="sidebar">6             <!--  -->7     </div>8 </div>

ログイン後にコピー

 1 /*表格*/ 2 div#tableContainer{ 3     display: table; 4 } 5 /*行*/ 6 div#tableRow{ 7     display: table-row; 8 } 9 /*列1*/10 #main{11     display: table-cell;12 }13 14 /*列2*/15 #sidebar{16     display: table-cell;17 }

ログイン後にコピー