整理的html5相關知識



<q>表示對別人的話的引用,差不多類似於在這句話兩遍打上雙引號,也便於設置樣式。
<blockquote>的作用也是引用別人的文本。但它是對長文本的引用
    
<span> 沒有什麼實際意義,主要是將分割某段文字做特殊處理!
<br>回車  &nbsp空格  <hr>網頁橫線
<address>網頁地址或聯繫方式之類的信息,與<em>的區別是雖然都是斜體但這個會另起一段    

<pre>顯示有具體格式的文字段落

表格
    摘要 摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化),使搜索引擎更好的讀懂表格內容,還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。
標題 用以描述表格內容,標題的顯示位置:表格上方。
<table summary="本表格記錄2012年到2013年庫存記錄,記錄包括U盤和耳機庫存量">
  <caption>2012年到2013年庫存記錄</caption>
  <tr>
    <th>產品名稱 </th>
    <th>品牌 </th>
    <th>庫存量(個) </th>
    <th>入庫時間 </th>
  </tr>
  <tr>
    <td>耳機 </td>
    <td>聯想 </td>
    <td>500</td>
    <td>2013-1-2</td>
  </tr>
  <tr>
    <td>U盤 </td>
    <td>金士頓 </td>
    <td>120</td>
    <td>2013-8-10</td>
  </tr>
  <tr>
    <td>U盤 </td>
    <td>愛國者 </td>
    <td>133</td>
    <td>2013-3-25</td>
  </tr>

如果想在新窗口中打開鏈接, 可以在<a>中設置 target=“_blank”


Mailto 使用mailto能讓訪問者便捷向網站管理者發送電子郵件。
後爲收件人地址,cc後爲抄送地址,bcc後爲密件抄送地址,subject後爲郵件的主題,body後爲郵件的內容,如果Mailto後面同時有多個參數的話,第一個參數必須以“?”開頭,後面的每一個都以“&”開頭。下面是一個完整的實例:Mailto:[email protected]?cc=[email protected]&bcc=[email protected]&subject=主題&body=郵件內容

label標籤不會向用戶呈現任何特殊效果,它的作用是爲鼠標用戶改進了可用性。如果你在 label 標籤內點擊文本,就會觸發此控件。就是說,當用戶單擊選中該label標籤時,瀏覽器就會自動將焦點轉到和標籤相關的表單控件上(就自動選中和該label標籤相關連的表單控件上)。

例子:
<form>
   <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <br />
  <label for="email">輸入你的郵箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
  
</form>
本來選擇單選框要點擊到框,而加了label,設置了for屬性後,點擊文字就可以勾選這個選項!
CSS
font-size:默認是16px
font-weigth:默認是normal

line-height:
在設置字體時如果設置font-size,font-weight, font-family,linr-height四個屬性就顯得有些麻煩,所以就可以使用font屬性統一設置!
font:[font-style] [font-weight] font-size/font-height font-family;即可!



background

當一個塊級元素的背景圖片比塊級元素小時就會在頁面中重複顯示。
可以用background-repeat:no-repeat;

background-color  background-image  background-repeat background-position 
background-attachment 背景圖片滾動屬性:scroll | fixed | inherit;
scroll會隨着頁面滾動,而fixed不會!



一個盒子的大小由content的寬高和padding還有border決定,設置一個元素的width和height實際上就是設置內容的寬高,一個盒子的面積即是
(width+leftpadding+rightpadding+border)*(height+toppadding+bottompadding+border)


要想讓網頁能呈現想已被廢除的<center>效果,可以在內容版塊加個width和margin:0 auto即可
想讓div裏面的內容超出了範圍就自動換行可以設置white-space:normal,相關:

相關屬性介紹:

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;

white-space 屬性設置如何處理元素內的空白,其值:
  • normal 默認。空白會被瀏覽器忽略。
  • pre 空白會被瀏覽器保留。其行爲方式類似 HTML 中的 pre 標籤。
  • nowrap 文本不會換行,文本會在在同一行上繼續,直到遇到 br 標籤爲止。
  • pre-wrap 保留空白符序列,但是正常地進行換行。
  • pre-line 合併空白符序列,但是保留換行符。
  • inherit 規定應該從父元素繼承 white-space 屬性的值。

word-wrap: normal|break-word;

word-wrap 屬性用來標明是否允許瀏覽器在單詞內進行斷句,這是爲了防止當一個字符串太長而找不到它的自然斷句點時產生溢出現象。
  • normal: 只在允許的斷字點換行(瀏覽器保持默認處理)
  • break-word:在長單詞或URL地址內部進行換行
  • word-break: normal|break-all|keep-all;

word-break 屬性用來標明怎麼樣進行單詞內的斷句。

  • normal:使用瀏覽器默認的換行規則。
  • break-all:允許再單詞內換行
  • keep-all:只能在半角空格或連字符處換行
還有怎麼使div內的元素水平排列和一些其他乾貨:http://www.myexception.cn/HTML-CSS/2099946.html


元素類型:
一、block塊級元素:
    1、獨佔一行
    2、不設置寬度樣式時,寬度自動撐滿父元素的寬度。
    3、和相鄰的元素依次垂直排列
    4、可以設置高度和寬度和四個方向的內外邊界值
塊級元素一般是其他元素的容器,如div,常見的塊級元素有div,p,h1~h6,ul, ol,dr,dt,dd以及h5新增元素section、header、footer、nav等元素!
二、inline行內元素:
行內元素也稱爲內聯元素或內嵌元素。行內元素具有以下特點:
    1、行內元素不會獨佔一行,相鄰得行內元素會從左往右一次排列在同一行裏。知道一行排不下才會換行
          注意:源代碼中換行會被解析成空格。
    2、不可以設置寬度width和高度height
    3、可以設置四個方向的內邊距的大小以及左右方向的外邊距。但不可以設置上下方向的外邊距。
    4、行內元素的高度有元素高度覺得,寬度有內容的長度來控制,即寬高有內容來撐開!
行內元素一般不能包含塊級元素,常見的行內元素有span,a,em,strong,以及H5新增的mark,time元素。

三、inline-block行內塊元素     
行內塊元素可以看成是行內元素和塊級元素的結合體。它同時具有行內元素和塊級元素的特點。
    1、和相鄰的行內元素以及行內塊元素相鄰會從左向右依次排列在一行。直到排不下就換行。換行同樣被解析成空格!
    2、可以設置寬高。
    3、可以設置四個方向的內外邊距。
對於行內塊元素來說兩個左右響鈴的行內塊元素,間距等於左邊右邊距+右邊左邊距,上下相鄰的上下邊距等於上面下邊距+下面上邊距!
發佈了41 篇原創文章 · 獲贊 22 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章