HTML基礎語法
阿新 • • 發佈：2020-09-10
1. 概念：是最基礎的網頁開發語言 * Hyper Text Markup Language 超文字標記語言 * 超文字: * 超文字是用超連結的方法，將各種不同空間的文字資訊組織在一起的網狀文字. * 標記語言: * 由標籤構成的語言。<標籤名稱> 如 html，xml * 標記語言不是程式語言 2. 快速入門： * 語法： 1. html文件字尾名 .html 或者 .htm 2. 標籤分為 1. 圍堵標籤：有開始標籤和結束標籤。如 <html> </html> 2. 自閉和標籤：開始標籤和結束標籤在一起。如 <br/> 3. 標籤可以巢狀： 需要正確巢狀，不能你中有我，我中有你 錯誤：<a><b></a></b> 正確：<a><b></b></a> 4. 在開始標籤中可以定義屬性。屬性是由鍵值對構成，值需要用引號(單雙都可)引起來 5. html的標籤不區分大小寫，但是建議使用小寫。 3. 標籤學習： 1. 檔案標籤：構成html最基本的標籤 * html:html文件的根標籤 * head：頭標籤。用於指定html文件的一些屬性。引入外部的資源 * title：標題標籤。 * body：體標籤 * <!DOCTYPE html>：html5中定義該文件是html文件 2. 文字標籤：和文字有關的標籤 * 註釋：<!-- 註釋內容 --> * <h1> to <h6>：標題標籤 * h1~h6:字型大小逐漸遞減 * <p>：段落標籤 * <br>：換行標籤 * <hr>：展示一條水平線 * 屬性： * color：顏色 * width：寬度 * size：高度 * align：對其方式 * center：居中 * left：左對齊 * right：右對齊 * <b>：字型加粗 * <i>：字型斜體 * <font>:字型標籤 * <center>:文字居中 * 屬性： * color：顏色 * size：大小 * face：字型 * 屬性定義： * color： 1. 英文單詞：red,green,blue 2. rgb(值1，值2，值3)：值的範圍：0~255 如 rgb(0,0,255) 3. #值1值2值3：值的範圍：00~FF之間。如： #FF00FF * width： 1. 數值：width='20' ,數值的單位，預設是 px(畫素) 2. 數值%：佔比相對於父元素的比例 3. 圖片標籤：（自閉和標籤） * img：展示圖片 * 屬性： * src：指定圖片的位置 相對路徑 * 以.開頭的路徑 * ./：代表當前目錄 ./image/1.jpg * ../:代表上一級目錄 4. 列表標籤：（圍堵標籤） * 有序列表： * ol: * li: * 無序列表： * ul: * li: 5. 連結標籤：(圍堵標籤) * a:定義一個超連結 * 屬性： * href：指定訪問資源的URL(統一資源定位符) * target：指定開啟資源的方式 * _self:預設值，在當前頁面開啟 * _blank：在空白頁面開啟 6. div和span：(圍堵標籤) * div:每一個div佔滿一整行。塊級標籤 * span：文字資訊在一行展示，行內標籤 內聯標籤 7. 語義化標籤：html5中為了提高程式的可讀性，提供了一些標籤。 1. <header>：頁首 2. <footer>：頁尾 3.<section>: web頁面中獨立區域 4.<article>:獨立的文章 5.<aside>：相關內容和應用 6.<nav>：導航類輔助內容 8.內聯框架 <iframe> * 表單： * 概念：用於採集使用者輸入的資料的。用於和伺服器進行互動。 * form：用於定義表單的。可以定義一個範圍，範圍代表採集使用者資料的範圍 * 屬性： * action：指定提交資料的URL * method:指定提交方式 * 分類：一共7種，2種比較常用 * get： 1. 請求引數會在位址列中顯示。會封裝到請求行中(HTTP協議後講解)。 2. 請求引數大小是有限制的。 3. 不太安全。 * post： 2. 請求引數不會再位址列中顯示。會封裝在請求體中(HTTP協議後講解) 2. 請求引數的大小沒有限制。 3. 較為安全。 * 表單項中的資料要想被提交：必須指定其name屬性 * 表單項標籤： * input：可以通過type屬性值，改變元素展示的樣式 * type屬性： * text：文字輸入框，預設值 * placeholder：指定輸入框的提示資訊，當輸入框的內容發生變化，會自動清空提示資訊 * password：密碼輸入框 * radio:單選框 * 注意： 1. 要想讓多個單選框實現單選的效果，則多個單選框的name屬性值必須一樣。 2. 一般會給每一個單選框提供value屬性，指定其被選中後提交的值 3. checked屬性，可以指定預設值 * checkbox：複選框 * 注意： 1. 一般會給每一個單選框提供value屬性，指定其被選中後提交的值 2. checked屬性，可以指定預設值 * file：檔案選擇框 * hidden：隱藏域，用於提交一些資訊。 * 按鈕： * submit：提交按鈕。可以提交表單 * button：普通按鈕 * image：圖片提交按鈕 * src屬性指定圖片的路徑 * label：指定輸入項的文字描述資訊 * 注意： * label的for屬性一般會和 input 的 id屬性值 對應。如果對應了，則點選label區域，會讓input輸入框獲取焦點。 * select: 下拉列表 * 子元素：option，指定列表項 * textarea：文字域 * cols：指定列數，每一行有多少個字元 * rows：預設多少行。