HTML5的基礎知識介紹

時間 2020-08-11

標籤 html5 html 基礎知識介紹欄目 HTML5 简体版

原文原文鏈接

<!DOCTYPE html>
css

<head>
    
    
    <meta name="author" content="http://www.jredu100.com"/>
    
    <meta name="keywords" content="html5,網頁,web前端開發"/>
    
    <meta name="description" content="這是我在傑瑞教育開發的第一個網頁"/>
    
    <meta charset="UTF-8">



    
    <link rel="icon" type="image/x-icon"href="tupian/weixin.png"/>


    
    <title>個人第一個網頁</title>
</head>html

<body>
  
  
  
  
  
  <h1>基於佈局的塊級標籤</h1>前端

<ol>
   <li>列表第一項</li>
   <li>列表第二項</li>
   <li>列表第三項</li>
   <li>列表第四項</li>
  </ol>
  
  <ul>
   <li>列表第一項</li>
   <li>列表第二項</li>
   <li>列表第三項</li>
   <li>列表第四項</li>
  </ul>
  
  <dl>
  <dt>這是dl的列表</dt>
   <dd>描述項1</dd>
   <dd>描述項2</dd>
   <dd>描述項3</dd>
   <dd>描述項4</dd>
  </dl>
  
  <figure>
   <img src="tupian/weixin.png" />
   <figcaption>這是圖片的標題。</figcaption>
  </figure>html5

<div style="width:100%;height=100px;">
   這是div裏面的文字。
   <h1>我是div裏面的標題。</h1>
  </div>web

</body>瀏覽器

<body>
  
  
  姜老師真<span style="color：blue; font-size: 36px;">醜</span><br/>
  
  <em>我被em標籤強調了！！！</em><br/>
  <strong>我被strong標籤強調了！！！</strong><br/>
  
  <q cite="http://www.jredu100.com">我是用q標籤聲明的一句引用的話</q><br/>
   
   
   <img src="tupian/weixin.png" title="vivoX9，柔光雙攝" />
    <img src="weixin1.png" />
    <img src="../weixin2.png" />
  
   <a href="唐詩三百首.html#top" title="vivoX9,照亮你的美" target="_blank">這是
    一個超連接</a>



     
  <s>這是s標籤中的文字</s>

  
  <cite>這是cite標籤</cite>

  
  <pre>
  <code>
StringBuffer sb = new StringBuffer();
for(String s : arr){
      sb.append(s);
}
  </code>
  </pre>

  
  <bdo dir="ltr">1234567</bdo>

  
  請輸入「<kbd>Esc</kbd>」退出系統。

  
  X<sup>2</sup>
  X²
  
   © 空格  

  
  <u>這是u標籤</u>

  
  <mark>哈哈哈哈哈</mark>緩存

<!--[表格table]
   表格<table></table>
   表格的行<tr></tr>
   表格的列<td></td>
   表頭的表頭列<th></th>(將tr中的td，替換爲th，表示本行爲表頭)
      th默認加粗，且在單元格居中顯示安全

【table的經常使用屬性】
   一、Border ：表格的邊框屬性；當使用border=""設置邊框時，會在因此td一級table上嵌套邊框，
   當border加大時，只有table最外層框線加粗，td單元格上的框線不會變化
   二、Cellspacing：單元格和單元格之間的間隙，當cellspacing="0"時，單元格之間間隙爲0，但邊框線
   並無合併（邊框線仍是兩條線的寬度）
   [合併邊框的寫法] style="border-collapse:collapse;"使用邊框合併後，無需設置cellspacing
   三、Cellpadding：單元格內邊距，單元格中文字與單元格邊框之間的距離。
   四、Width/Height：表格的寬度高度；
   五、Align:設置表格在父容器中的對齊方式：left/居左    center/居中 right/居右
   [注意] 當表格使用align屬性時，至關於使表格浮動，可能會致使表格後面的元素受表格浮動影響，致使佈局錯亂。
   六、Bgcolor：背景色
   七、Background：背景圖片,後接相對路徑。當背景圖和背景色同時生效時候，背景圖會覆蓋背景色。
   八、Bordercolor：邊框顏色服務器

-->cookie

<!--[form表單]
   一、兩個重要屬性：
    action：表單須要提交的服務器地址。
    method：表單提交數據使用的方法。get/post
    >>>get和post的區別
    ①get傳參使用URL傳遞，全部參數在地址欄可見，不安全;get傳參數據量有限；
    ②post傳參使用http請求傳遞，比較安全，post能夠傳遞大量數據；
    but，get請求的傳輸速率要比post快。

    >>>URL傳參的形式：連接URL地址？name1=value1&name2=value2

   二、input的經常使用屬性：
    ①type：設置input的輸入類型
    ②name：給input輸入框起名。通常狀況下，name屬性必不可少。由於，傳遞數據時，使用name=value
    （輸入內容）的形式傳遞
    ③value：input輸入框的默認值。
    ④placeholder：輸入框的提示內容。當input有默認的value或者輸入值時，placeholder消失。
   三、input-type屬性的經常使用屬性值：
    ①text：文本輸入框
    ②password：密碼輸入框，輸入內容默認顯示小黑點。
    ③radio：單選框/ checkbox：複選框
    >>>使用radio/checkbox時，value屬性必填。提交時，提交的爲value中的默認值。
    >>>radio/checkbox憑藉name屬性，肯定是否屬於同一組，name相同爲同組，只能選一個
    >>>使用checked="checked"屬性，設置默認選中項
    ④file：文件上傳
    >>>使用accept="類型"，設置只能上傳的文件類型，image/*任意格式圖片
    ⑤submit：提交按鈕，將全部表單數據，提交至後臺服務器
    ⑥reset：重置表單數據，將表單數據恢復到默認狀態。
    ⑦image：圖形提交按鈕，跟submit同樣，具備表單提交功能。
    >>>使用src屬性，選擇圖片路徑
    ⑧button：普通按鈕，沒有什麼用處。
   四、屬性名等於屬性值的狀況：
    ①checked="checked"設置radio或checkbox的默認選中項
    ②multiple="multiple" 設置select爲多選控件
    ③selected="selected" 設置select控件，默認選中的option選項
    ④readonly="readonly"設置textarea只讀，不容許編輯
    ⑤disabled="disabled"禁用控件。當input被disabled時，該input的name和value將沒法
    向後臺傳遞
    ⑥hidden="hidden"隱藏控件。等效於<input type="hidden"/>
   五、【下拉選擇控件 select】
     ① 寫法：<select>
     <option></option> //能夠有N多個
      </select>
   ② name屬性，應該寫在<select>上，全部選項只有一個name
   ③ multiple="multiple" 設置select控件爲多選，可在界面使用Ctrl+鼠標，進行多選。通常不用。
   ④ option經常使用屬性：
     value="":當option沒有value屬性時，日後臺傳遞的是<option></option>標籤中的文字；
          當option有value屬性時，日後臺傳遞的是value屬性的值。
     title="":鼠標指上後顯示的文字。
     selected="selected":默認選中。
   ⑤ <optgroup label="山東省"></optgroup> :用於將option標籤進行分組，label屬性表示分組名。
   六、【文本域 textarea】
   ① 寫法：<textarea></textarea>
   ② 設置寬高style="width: 200px; height: 150px;" 自身有cols="" rows=""兩個屬性，
   但不經常使用
   ③ readonly="readonly" 設置爲只讀模式，不容許編輯。
   ④ style="resize: none;" 設置爲寬高不容許修改。
   ⑤ style="overflow: ;" 設置當文字超出區域時，如何處理。
   >>> 也能夠經過overflow-x/overflow-y分別設置水平垂直方向的顯示方式。
   >>> 經常使用屬性值:hidden 超出區域的文字，隱藏沒法顯示
      scroll 不管文字多少，均會顯示滾動
      auto 自動，根據文字多少自動決定是否顯示滾動條（默認樣式）
   七、表格的邊框與標題
   <form>
   <fieldset>表格的邊框
    <legend>聯繫方式</legend>表格的標題
    。。。N多個表單元素（input/select/textarea）
   </fieldset>
   </form>
   注：一個表單，能夠有多組邊框+標題

-->

<!--【HTML5智能表單】
   ①H5新增input的form屬性，用於指向特定form表單的id，實現input無需放在form標籤之中，便可經過
   表單進行提交。
   <form id=foo>
    ...
   </form>

   <input...form="foo">
    ②新增N多個type新屬性，詳見表格

    ③新增input的屬性：
    Autocomplete：自動完成功能。
    >>>根據記憶以前輸入過的內容在下次輸入時根據之前的內容提示，自動完成。
    >>>絕大部分瀏覽器自動開啓。
    >>>有兩個屬性值：off/on
    >>>能夠在<form>標籤上設置autocomplete，控制整張表單的自動完成開關，但能夠在個別input
     上單獨設置，覆蓋form的總體設置。
    Autofocus：自動得到焦點。autofocus="autofocus"
    Form：所屬表單，經過form表單的id，指向特定表單。
    Required：必填。 required="required"設置input爲必填。
    Pattern：驗證input的模式
    Placeholder：提示

-->

<style type="text/css">
   /*CSS語法必須寫在<style>標籤中*/
    /*CSS註釋*/
    /*【僞類選擇器】
     一、寫法：選擇器名：僞類狀態{}
     常見的僞類狀態：
     ：link 未訪問   ：visited 已訪問
     ：hover 鼠標指上狀態：active 激活選定狀態
     注：當超連接同時具備以上四種狀態，則選擇器必須按照上述順序排列。

     ：focus 得到焦點，經常使用於input*/
    /*【通用選擇器】
     一、寫法：*{}
     二、做用：選中頁面中的全部HTML標籤
     三、優先級：最低！*/
    /*【標籤選擇器】
     *一、寫法HTML標籤名{}
     *二、做用：選中全部對應的HTML標籤，並修改其樣式*/

/*【類選擇器class選擇器】
     *一、寫法: .class名{}
     *二、調用：在須要修改樣式的HTML標籤上，使用class="選擇器名"
     *三、優先級：看成用於同一層時，class選擇器>標籤選擇器*/
    /*【ID選擇器】
     一、寫法：#選擇器名{}
     二、調用：在須要修改樣式的HTML標籤上，使用id="選擇器名"
     三、優先級：同一層時，id選擇器>class選擇器
     四、ID選擇器是惟一的！同一頁面嚴禁出現同名ID！！！*/
    /*【後代選擇器】
     一、寫法：選擇器1空格選擇器2空格……選擇器N{}
     二、生效規則：選擇器2必須是選擇器1的後代……以此類推
     【子代選擇器】
     一、寫法：選擇器1>選擇器2>……>選擇器N{}
     二、生效規則：選擇器2必須是選擇器1的直接子代！！！！*/
    /*【交集選擇器】
     一、寫法：選擇器1選擇器2……選擇器N{}
     二、生效規則：必須同時知足全部選擇器，纔會生效*/
    /*【並集選擇器】
     一、寫法：選擇器1,選擇器2,……,選擇器N{}
     二、生效規則：知足任意一個選擇器，都可生效*/
    /*【選擇器命名規範】
     一、只能有字母、數字和下劃線組成；
     二、開頭不能是數字。
     */
    /*【選擇器優先級】
     一、就近原則：近者優先。
     二、看成用於同一層時：可用權重計算
     權重劃分：標籤選擇器爲1
        class選擇器爲10
        ID選擇器爲100
        行級樣式表style="" 1000
        */
  </style>

/*[顏色經常使用單位]
     十六進制：#ffffff
     顏色名稱：red
     RGB顏色:RGB(255,255,255) 255，255，255是白色   0，0，0是黑色
     RGBA:第四位數表示透明度。可選值0~1*/

/* [CSS經常使用文本屬性]

* 一、字體、字號：
font-weight:字體的粗細，可選屬性值：bold加粗 lighter細體 100~900數值(400正常，700 bold)

font-size:字體大小 **PX **%（瀏覽器默認字體大小的百分比，絕大部分默認16px）

font-family:字體族，設置字體。
    >>>多個字體樣式間用逗號分隔，瀏覽器解析時，會從左往右依次解析，選擇可用字體。
    >>>通常前面使用具體字體名稱，最後一個使用字體族類名稱。
        （經常使用字體族名稱：襯線體serif 非襯線體sans-serif(經常使用) 等寬體Monospace）
    >>>例如：font-family:Arial, 'Microsoft Yahei', sans-serif;

font-style:字體樣式,正常(normal) 斜體(italic)

* font-variant：small-caps; 將字母轉爲小型大寫字體。

(瞭解)font縮寫形式：font-style font-variant font-weight font-size/line-height font-family
   >>> 使用注意事項：
     ① 順序必須嚴格按照上述順序；
     ② 多個樣式之間用空格分割，並且font-size/line-height 必須做爲一對用/分割
     ③ font-size和font-family必須指定，其餘樣式不指定將採用默認樣式顯示；
   >>> 例如：font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif;
        斜體加粗字號/行高   字體族(微軟雅黑，非襯線字體族)

二、字體顏色：
   color:字體顏色
   opacity:透明度,0~1之間的數字。調整時控件以及子控件均會透明，而使用rgba調整時，只會時本控件透明，子控
   件不會發生透明度變化。

三、行距、對齊等：
line-height:行高 ① 像素單位 48px ② 不帶px 正常行高的倍數 ③百分數同2
>>> 典型應用，調整控件中文垂直居中的方式：控件的height=控件的line-height

text-align:塊級元素中的行級元素的文字的水平對齊方式 left center right

letter-spacing:字符間距,字與字之間的間距

text-decoration:文本修飾下劃線underline、刪除線line-through、上劃線overline、none

overflow:控制超出範圍文本的顯示方式(auto 根據文字多少自動顯示滾動條，scroll始終顯示滾動條， hidden
超出範圍文本隱藏) 能夠經過overflow-x overflow-y分別設置水平垂直方向

text-overflow:設置多餘文字的顯示方式 clip裁剪掉 ellipsis省略號
    >>>【重點】讓每行多餘文字顯示省略號：
    ① white-space: nowrap; 設置行末不斷行
    ② overflow: hidden; 設置控件超出範圍隱藏
    ③ text-overflow: ellipsis; 設置多餘文本省略號顯示

white-space: nowrap; 設置行末不斷行顯示

word-break: 瀏覽器默認在空格處斷行，當一個單詞長度超出範圍時，會不斷行顯示， break-all 容許在單詞內
換行。

text-shadow:文本陰影，有四個屬性值：
     ①水平陰影距離必選，數值越大，陰影右移
     ②垂直陰影距離必選，數值越大，陰影下移
     ③陰影模糊距離可選，數值越大，陰影越模糊。默認爲0，不模糊
     ④陰影顏色可選，默認爲黑色

text-indent:首行縮進，可用像素值調整縮進大小

* text-stroke: -webkit-text-stroke: 0.2px #008000; 描邊的粗細，描邊的顏色*/

/* 【CSS經常使用背景屬性】
  background

  background-color:背景色

  background-image:背景圖,background-image: url(圖片地址相對路徑);背景圖和背景色同時存在時，背景圖會覆蓋背景色

  background-repeat：背景圖重複方式，no-repeat不平鋪 repeat平鋪(默認) repeat-x水平平鋪 repeat-y垂直平鋪

  background-size:背景圖大小。

【指定寬度高度】
   >>> 寬高的寫法，第一個屬性值爲寬度，第二個屬性值爲高度，能夠：①直接寫像素 ②寫百分比（父容器寬高的百分比）
   >>> 當只有一個屬性值時，默認爲寬度。高度等比縮放。
      當有兩個屬性值時，會按照指定的高度寬度進行壓縮/拉伸顯示。
     【其餘屬性值】
   >>> contain:圖片等比縮放，縮放到寬或高的某一邊等於父容器的寬高，另外一邊按照圖片大小縮放（可能致使部分空餘區域沒法覆蓋）
   >>> cover:圖片等比縮放，使背景圖像徹底覆蓋背景區域。(可能致使背景圖部分區域沒法顯示)

  background-position：位置座標、偏移量
   >>> 指定位置：left/center/right top/center/bottom
      當只寫一個屬性值時，另外一個默認居中
   >>> 填寫座標：水平位置垂直位置 (像素或百分比形式)
     ① 當只寫一個屬性值時，默認寫的爲水平方向，則垂直居中
     ② 當使用像素時：圖片的左上角往各個方向移動的實際距離
     水平方向：正數右移負數左移垂直方法：正數下移負數上移
         (左負有正上負下正)
     ③ 當使用百分數時，通常只能是正數。表明去掉圖片後，剩餘空白距離的分佈比例。例如 background-position：30%; 水平方向去掉圖片後，剩餘區域3:7分

相關標籤/搜索

每日一句

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