類似元素存在的意義---HTML&CSS

時間 2019-11-18

標籤類似元素存在意義 html&css html css 欄目 CSS 简体版

原文原文鏈接

1.<q>

　　效果：

　　　　告訴瀏覽器這是一段短引用，讓瀏覽器以合適的方法來顯示css

　　注：

　　不能直接以雙引號直接代替<q>，由於有些瀏覽器<q>的效果不是雙引號。html

　　不要忘了移動設備，和語音瀏覽器，對引用的表現不是雙引號這麼簡單。web

好處：

　　方便搜索引擎尋找帶引用的網頁。瀏覽器

　　能夠用CSS對引用設置樣式，好比：要灰色斜體的引用。ide

2.<blockquote>

　　效果：

　　單獨顯示較長引用，使其自成一段佈局

注：

　　有些瀏覽器會對其稍稍縮進，但有些不會。搜索引擎

3.塊元素與內聯元素

塊元素特例獨行，內聯元素隨波逐流。spa

塊元素一般用作web頁面中的主要構建模塊，內聯元素一般用來標記小段內容設計

設計一個頁面時，一般從較大的塊開始，而後在完善頁面時再加入內聯元素3d

瀏覽器只有當你開始一個新的塊元素時，纔會插入換行，主動換行須要<br>元素

<ol>和<li>爲塊元素

4.<a>

　　title:

　　<a href="...." title="...">....</a>

　　　　title有一個值，提供連接信息

target：

　　<a href = "...." title = "..." target="_blank">....</a>

　　新窗口打開連接

　　　　考慮到有視力障礙的人羣，不能過分使用target。

注意：

　　　　保證連接標籤簡潔，可在title中提供額外的信息

　　　　保證標籤有意義，不要使用類時「單擊下一頁」

　　　　不要把連接放在一塊兒

5.id & class

要對多個屬性使用某種樣式時，可使用class

但若是隻有一個元素時，就應該使用id

id屬性偏偏就是用來惟一地命名元素。

例如，<body>裏有多個<p>，咱們只要對其中一個<p>進行樣式設置。

6. img

　　注意：

　　　　瀏覽器是在下載了html文件並開始顯示頁面後才下載圖像的。

　　alt

　　　　<img src="..." alt="..." >

　　　　用alt代替未顯示的圖像

　　　　你永遠不知道客戶會用什麼瀏覽器和設備，以及網速。

width & height

　　<img src="..." width="..." height="...">

　　width和height其實是幫助瀏覽器爲要加載的圖像預留空間

　　若使用這個屬性，則他們的值應與圖像實際的寬高相同

　　縮略圖連接

　　　　<a href ="../..html"><img src="..." alt ="..."><a>

　　　　不建議直接連接到圖像，由於這樣瀏覽器會在一個空白頁面上顯示圖像

　　　　而一般須要爲所要顯示的圖像提供一些上下文。

　　透明圖

　　　　若是要把一個透明的圖像放在web頁面上，要確保圖像的蒙版顏色和web頁面的背景色相同

7.HTML5

基本格式要求：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <link rel="stylesheet" type="text/css" href="">
 7     </head>
 8     <body>
 9 
10     </body>
11 </html>

8.盒模型圖

9.div & span

　　div的使用場合

　　　　多個元素確實能夠屬於一個類

　　　　但當須要把這些元素加上一個大邊框時

　　　　若是使用.Cat{ }，則會給全部屬於Cat類的元素都會加上邊框，顯然這不是咱們想要的。

　　　　因而，就要使用div包圍全部元素，給整個div盒設置一個邊框

　　span

　　　　爲一堆小元素指定樣式

10.圖片的佈局

　　瀏覽器並排放置兩張圖片時，兩張圖片的外邊距相加

　　上下共列放置時，以最大外邊距高度爲最終間隔距離

　　外邊距會摺疊條件：兩元素的垂直外邊距碰到一塊兒，就必定會摺疊。

11.頁面佈局

　　浮動（float）

　　　做用：

　　　　　float屬性首先儘量地向左或向右浮動元素

　　　　　而後它下面的全部內容會繞流這個元素

　　　幕後原理：

　　　　　瀏覽器正常地將元素導入頁面

　　　　　遇到浮動元素會盡量放在左或者右，還會從流中刪除這個段落，就像浮在頁面上同樣

　　　　　因爲這個浮動元素已經從正常流中刪除，全部其它元素會依舊填滿頁面，就像沒有浮動元素同樣

　　　　　不過，內聯元素定位時，會考慮的浮動元素的邊界，所以會圍繞浮動元素

　　　要求：

　　　　　對於全部的浮動元素都有一個要求：必須指定了寬度。

　　　clear：

　　　　所在元素左邊或者右邊或者兩邊，不容許有浮動內容，經常使用來處理浮動元素覆蓋頁底的狀況。

　　凍結設計

　　what：

　　　　內容的寬度是固定的，不會隨着視窗擴展或收縮。

　　　　但瀏覽器很寬時，瀏覽器右側會有不少空白空間

　　注：

　　　　把主要內容都放在一個id中，並設計寬度。

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

　　凝膠布局

　　what：

　　　　內容寬度固定，可是外邊距會隨着瀏覽器窗口擴展或收縮。一般會把內容放在中央。

　　How

　　　　由一個固定大小的<div>包圍頁面的全部內容，而後利用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 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。