天天看點
傳回

系統學習——HTML

筆記目錄

    • 标簽
      • 屬性
      • 格式化标簽
      • 預留實體字元
      • <form>
      • <fieldset> , <legend>
      • 内容類型（HTML）
      • <audio>，<video>
      • <progress>
      • <select>，<datalist>
      • <input>的輸入類型:type
      • SVG
        • 什麼是SVG?
        • SVG畫圖
        • SVG動畫
      • <caption>
    • API
      • Web存儲

寫在前面的：從今天（2019-11-04）開始系統的學習html，以w3cschool提供的微課和文檔為基準，記錄自己之前不知道的知識點。各位僅供參考。今天（2019-11-19）w3cschool的HTML微課學習完了，發現确實是微課講了很多基礎的東西也很實用，此文章之後就是在日常工作中的一點點補充了。

标簽

屬性

  • title

     ：大部分标簽都具有的一個基本屬性，用于滑鼠懸浮該标簽時展示提示文本。

格式化标簽

  • <b>

     :加粗，

    <i>

     ：斜體，

    <em>

     ：着重，

    <sub>

     ：下角标，

    sup

     ：上角标，

    ins

     ：插入，

    del

     ：删除，

    small

     ：小号字，

    strong

     ：強調。

預留實體字元

  • 空格： ，

    <

     小于号：

    &lt;

     ，

    >

     大于号：

    &gt;

     ，

  • &

     和号：

    &amp;

     ，

    "

     引号：

    &quot;

     ，

    '

     撇号：

    &apos;

     (IE不支援)，

  • ￠

     分：

    &cent;

     ，

    £

     鎊：

    &pound;

     ，

    ¥

     人民币/日元：

    &yen;

     ，

  • €

     歐元：

    &euro;

     ，

    §

     小節：

    &sect;

     ，

  • ©

     版權：

    &copy;

     ，

    ®

     注冊商标：

    &reg;

     ，

    ™

     商标：

    &trade;

     ，

  • ×

     乘号：

    &times;

     ，

    ÷

     除号：

    &divide;

     。

<form>

  • enctype

     ：<form>的一個屬性。

    application/x-www-form-urlencoded

     為預設值，在發送前對所有字元進行編碼（将空格轉換為 “+” 符号，特殊字元轉換為 ASCII HEX 值）。

    multipart/form-data

     ，不對字元串編碼，當使用有檔案上傳表單控件時必須為此值。注：隻有 method=“post” 時才使用 enctype 屬性。

  • autocomplete

     ：用于form或input域的輸入提示。當使用者在自動完成域中輸入時，浏覽器應該在該域顯示填寫的選項。值：

    on

     ，

    off

<fieldset> , <legend>

  • 兩者都是一種表單标簽，後者寫在前者裡。

    <fieldset>

     定義了一組相關的表單元素，并使用外框包含起來。

    <legend>

     定義了 元素的标題。效果如圖：
    系統學習——HTML

内容類型（HTML）

  • 中繼資料（Metadata）：通常出現在頁面的

    head

     中，設定頁面其他部分的行為和表現。

    <base>

     、

    <link>

     、

    <meta>

     、

    <script>

     、

    <noscript>

     、

    <style>

     、

    <title>

     。
  • 内聯（Embedded）：在文檔中添加其他類型的内容。

    <audio>

     、

    <video>

     、

    <canvas>

     、

    <iframe>

     、

    <img>

     、

    <math>

     、

    <object>

     、

    <svg>

     。
  • 互動（Interactive）：與使用者互動的内容。

    <a>

     、

    <audio>

     、

    <video>

     、

    <button>

     、

    <details>

     、

    <embed>

     、

    <iframe>

     、

    <img>

     、

    <input>

     、

    <label>

     、

    <object>

     、

    <select>

     、

    <textarea>

     。
  • 标題（Heading）：定義段落标題。

    <h1>

     、

    <h2>

     、

    <h3>

     、

    <h4>

     、

    <h5>

     、

    <h6>

     、

    <hgroup>

     、

    <svg>

     。
  • 短語（Phrasing）：文本和文本标記元素。

    <img>

     、

    <span>

     、

    <strong>

     、

    <label>

     、

    <br />

     、

    <small>

     、

    <sub>

     等。
  • 區段（Sectioning）：定義标題、内容、導航和頁腳的範圍。

    <article>

     、

    <aside>

     、

    <nav>

     、

    <section>

     。
  • 流（Flow）内容：包含在文檔正常流中的大多數HTML5元素。
  • 相同的元素可以屬于多個内容模型。

<audio>，<video>

  • 格式：mp3，wav，ogg。mp4，webm，ogg。 
    <audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏覽器不支援 audio 元素。
</audio>

<video width="320" height="240" controls autoplay loop>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏覽器不支援 video 标簽。
</video>

  • <source>

     :标簽用來定義多種媒體資源。

  • controls

     :屬性提供播放、暫停、音量和下載下傳控件。

  • <audio>

     元素允許使用多個

    <source>

     元素。

    <source>

     元素可以連結不同的音頻檔案，浏覽器将使用第一個支援的音頻檔案。
  • 可以在

    <audio>

     和

    </audio>

     之間放置文本内容，這些文本資訊将會被顯示在那些不支援

    <audio>

     标簽的浏覽器中。

<progress>

  • 作用：定義運作中的任務程序，進度條。
  • max：進度條滿值。
  • value：進度條的目前值。
  • 其他：不設定任何屬性時，會有一個小塊一直循環往複的晃動。

<select>，<datalist>

  • 下拉選項框與自動完成清單。 
    <select>
	<option value="apple">Apple</option>
	<option value="banana">Banana</option>
	<option value="orange">Orange</option>
</select>

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
  • 下拉選項框：會預設展示一個值，标簽間的字元為展示字元，value的屬性值是擷取的真正值。
  • 自動完成選項框：沒有預設展示值，清單資料為動态比對輸入内容的自動完成選項。

<input>的輸入類型:type

  • search

     ：搜尋輸入框，放在form表單中，點選

    回車

     相當于直接點選了送出按鈕，有

    ×

     可以清除輸入内容。

  • email

     ：簡單的自動驗證郵箱格式。

  • tel

     ：簡單的自動驗證電話号格式。

  • url

     ：簡單的自動驗證網址格式。

  • date

     ：輸入框變為日期選擇期。

  • time

     ：輸入框變為時間輸入框。

SVG

什麼是SVG?

  • 可伸縮矢量圖形（Scalable Vector Graphics）。
  • 定義用于網絡的基于矢量的圖形。
  • 使用xml格式定義圖形。
  • 圖像在放大或改變尺寸的情況下其圖形的品質不會有損失。
  • 是網際網路聯盟的标準。

SVG畫圖 

<svg width="1000" height="1000">
	<circle cx="100" cy="40" r="40" fill="blue" />
	<rect width="200" height="200" x="150" y="25" fill="red" />
	<line x1="20" y1="30" x2="200" y2="300" style="stroke:#002233;stroke-linecap:round;stroke-width:20;" />
	<polyline style="stroke-linejoin:miter;stroke:black;stroke-width:2;fill:none;" points="100 100,150 150,200 100"/>
	<ellipse cx="200" cy="100" rx="150" ry="70" style="fill:green;" />
	<polygon points="300 50,400 150, 450 100" style="fill:grey;stroke:black;"/>
</svg>
  • 圓形：cx和cy為圓心，r為半徑，fill填充顔色。不寫cx和cy預設為（0，0）。
  • 矩形：x和y為矩形左上角坐标。坐标原點為svg框定範圍的左上角。
  • 直線：stroke:線條顔色，stroke-linecap:線條端點樣式（butt沒有端點預設值，round圓端點，square方端點），stroke-width:線條寬度。
  • 曲線：stroke-linejoin:兩條線交角的邊角形狀（bevel斜角，round圓角，miter尖角預設值），fill預設黑色。
  • 橢圓：rx和ry分别為橢圓的橫、縱周半徑。
  • 多邊形：寫不少于三個點的多邊形，自動依次連接配接形成封閉圖形。最後一個點連第一個點。

SVG動畫

  • SVG動畫使用

    <animate>

     元素建立。 
    <svg width="1000" height="250">
	<rect width="150" height="150" fill="orange">
 		<animate attributeName="x" from="0" to="300"
    	dur="3s" fill="freeze" repeatCount="2"/> 
	</rect>
</svg>
  • attributeNmae：圖形的哪個屬性産生動畫效果。
  • from：指定屬性起始值。
  • to：指定屬性結束值。
  • dur：指定動畫運作的時間。
  • fill：指定動畫結束後圖形所處的位置。freeze動畫結束的終點，remove動畫的初始位置。
  • repeatCount：動畫重複播放的次數。無限重複使用

    indefinite

     。

<caption>

  • <table>

     标簽的子标簽，表格的标題。

API

Web存儲

  • 儲存資料：localStorage.setItem(key,value);
  • 讀取資料：localStorage.getItem(key);
  • 删除單個資料：localStorage.removeItem(key);
  • 清除所有資料：localStorage.clear();
  • 得到某個索引的key：localStorage.key(index);
  • sessionStorage使用的API與localStorage的相同。
系統學習 html
上一篇: 系統學習——CSS
下一篇: ORACLE系統學習前傳

繼續閱讀