HTML經常使用標籤

註釋

<!-- 註釋內容 -->

標籤使用樣式

開始標籤<a >  標籤體  </a>結束標籤
自閉合標籤，eg：<br>,<hr>,<input><img>

標籤屬性

• 一般爲鍵值對形式出現，eg：color=「red」 id = ‘new’
• 屬性只能出如今開始標籤和自閉合標籤內
• 屬性名字所有小寫，屬性值必須用單引或者雙引包裹
• 如屬性名和屬性值徹底同樣，直接寫屬性名便可，eg：「readonly」（input標籤屬性）
  
  

塊級標籤和內聯標籤

塊級標籤：<p>、<h1>、<table>、<ol>、<ul>、<form>、<div>
內聯標籤：<a>、<input/>、<img/>、<sub>、<sup>、<textarea>、<span>

• 塊級元素的特色
  • 總在新行上開始
  • 高度，行高以及外邊距和內邊距均可控制
  • 寬度缺省，則是它容器的100%
  • 能夠容納內聯元素和其餘塊元素
• inline元素特色
  • 和其餘元素在一行上
  • 高，行高以及外邊距和內邊距不可改變
  • 寬度就是其文字或圖片寬度，不可改變
  • 內聯元素只能容納文本或者其餘內聯元素
• 行內元素注意
  • 設置寬度width無效
  • 設置高度height無效
  • 設置margin只有左右margin有效，上下無效
  • 設置padding只有左右padding有效，上下則無效，注意元素範圍是增大了，可是對元素周圍的內容是沒影響的
    
    

列表標籤

• 無序列表
  • ul---li
• 有序列表
  • ol---li
• 定義列表
  • dl---dt---dd
• 快捷鍵
  • ul>li*n
  • ol>li*n
  • dl>dt+dd*n
  • pycharm中按table鍵生效
  • 其它標籤也可這樣生成、好比 table
    
    

圖片標籤

<img src="圖片地址" alt="下載失敗時的替換文字" title="提示文本"/>

超連接標籤

<a href="目標網址" title="鼠標滑過顯示的文本" target="_blank">連接顯示的文本</a> 

還能作錨點，進行跳轉
    <a href="#jump">跳轉</a>
    <span id ="jump">跳轉到這裏</span>

行內元素和塊級元素的轉換

• 行內元素→塊級元素
  • display : block;
• 塊級元素→行內元素
  • display : inline;
    
    

特殊符號

特殊符號以 & 開頭，分號結尾
< > " © ® " &

< > " © ® " &

空格：     

表格

• 表格標籤：table
• 行：tr
• 列：td
• 合併行：rowspan
• 合併列：colspan
  
  

表單

• action：提交時候的地址，默認使用當前頁面
• method：提交時候的方法，有get 和 post 兩種方法，默認使用 get
• entype：設置編碼格式
  • 默認：application/x-www-form-urlencoded
  • 上傳文件：multipart/form-data
• input標籤
  • name屬性：表單與後臺交互時最重要的一個屬性，要求input標籤都帶上
  • value屬性：表單提交項的值 
  • type屬性
    • type="button"/"reset"/"submit"
    • type="text"/"password"/"hidden"
    • type=「checkbox"/"radio"/"image"
  • 經常使用的type屬性值
    • text：文本框
    • password：密碼框
    • radio：單選框
    • checkbox：複選框
    • file：文件選擇
    • hidden：隱藏域
    • submit：提交
    • reset：重置
  • 其它屬性
    • placeholder：提示信息（ 提升用戶體驗度）
    • readonly：只讀
    • disabled：禁用
    • value：input的值，單選多選下拉框必須設置value屬性，這樣後臺才能得到你選中的究竟是哪一個或哪幾個選項
• textarea標籤：文本域，通常用於多行文本
• select標籤
  • 下拉框，通常用於選項
  • option：下拉選項
    • 下拉框的基本標籤，有多少個option 就有多少個下拉選項
  • selected：下拉狀態
    • 表示選中某個下拉選項
  • size：下拉框顯示
    • 表示下拉框，顯示多少個，默認爲一個
  • name：下拉框的名字
    • 表示下拉框向後臺提交數據的時候，所傳的名字
• fieldset 標籤：給表單設置分組
• legend 標籤：設置分組表單的標題
• label 標籤：提升用戶體驗度