HTML的概念 概念： HTML 是用來描述網頁的一種語言。 HTML 指的是超文本標記語言 (Hyper Text Markup Language) HTML 不是一種編程語言，而是一種標記語言 (markup language) 標記語言是一套標記標簽 (markup tag) HTML 使用標 ...
HTML的概念
概念：
HTML 是用來描述網頁的一種語言。
- HTML 指的是超文本標記語言 (Hyper Text Markup Language)
- HTML 不是一種編程語言，而是一種標記語言 (markup language)
- 標記語言是一套標記標簽 (markup tag)
- HTML 使用標記標簽來描述網頁
作用：
在瀏覽器中數據需要使用友好的格式展現給用戶。
告訴瀏覽器接收到的數據使用什麼樣的數據組織形式進行顯示。
使用：
HTML的標準文檔規範
HTML的標簽
互聯網的三大基石
URL：統一資源定位符（唯一的定位一個網路資源）
HTTP：超文本傳輸協議（規範了瀏覽器和伺服器之間數據交互格式）
HTML：超文本標記語言（有效的組織數據在瀏覽器端的顯示）
HTML的文檔聲明
文件名.html 或 文件名.htm
HTML的標準文檔結構
<html> <head> <!-- 主要是配置 瀏覽器顯示數據的配置信息 例如：字元編碼等 一般是給瀏覽器進行使用 --> </head> <body> <!--給用戶進行數據展示--> </body> </html>
標簽學習
head標簽
<head> <title></title> <meta /> <link /> </head>
網頁標題標簽：
<title>Title</title>
編碼格式標簽：
<meta http-equiv="content-type" content="text/html;charset=utf-8">
網頁搜索優化標簽：
<!--網頁關鍵字--> <meta name="keywords" content="關鍵字" /> <!--網頁描述--> <meta name="description" content="網頁描述" /> <!--作者--> <meta name="author" content="殤央" />
網頁指定跳轉標簽：
<meta http-equiv="refresh" content="3;url=https://i.cnblogs.com/shangyang" />
文本標簽
標題標簽h1...h6:
塊級標簽，自動換行。標題標簽會將其中的文本加粗加黑顯示，並從1到6依次減弱。
<h1>這是標題 1</h1> <h2>這是標題 2</h2> <h3>這是標題 3</h3> <h4>這是標題 4</h4> <h5>這是標題 5</h5> <h6>這是標題 6</h6>
段落標簽 p：
塊級標簽，自動換行。表示文本的段落，段落通常在可視媒體中表示為文本塊。段間距較大。
<p>這是一個段落。</p>
換行標簽 br：
換行符。換行間距較小。
<br />
水平線標簽 hr：
塊級標簽。表示段落級元素之間的主題劃分，會在瀏覽器中添加一條橫線。
<hr />
空格符  ：
空格符，告訴劉瀏覽器在此出輸出一個空格。可在標簽內使用。
 ；
列表標簽
列表項目標簽 li：
<li> 標簽定義列表項目。
<li>列表項</li>
無序列表 ul：
表示HTML頁面中項目的無序列表，一般會以項目符號（黑色實心圓）列表呈現。
<ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
有序列表 ol：
在 HTML 中表示有序列表，是 ordered lists 的縮寫。reversed屬性可以指定列表倒序。
<ol> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ol> <ol reversed> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ol>
自定義列表 dl dt dd：
<dl> 標簽代表一個描述列表。<dt> 標簽只能夠作為 <dl> 標簽的一個子元素出現，常常後跟一個 <dd> 標簽。
<dt> 標簽定義一個描述列表的項目/名字。<dd> 標簽被用來對一個描述列表中的項目/名字進行描述。
<dl> <dt>編程語言</dt> <dd>Java</dd> <dd>C++</dd> <dt>資料庫</dt> <dd>mysql</dd> <dd>orcale</dd> </dl>
圖片標簽
圖片標簽 img：
行內元素，不自動換行。用於展示 HTML 頁面中的圖像。<img> 標簽有兩個必需的屬性：src 和 alt。
註釋：從技術上講，圖像並不會插入 HTML 頁面中，而是鏈接到 HTML 頁面上。<img> 標簽的作用是為被引用的圖像創建占位符。
<img src="http://images.cnblogs.com/cnblogs_com/shangyang/1431105/o_background.jpg" alt="background" width="42" height="42" />
<!-- src:規定顯示圖像的 URL。 alt:規定圖像的替代文本。 width:規定圖像的寬度。 height:規定圖像的高度。
寬度或高度如果只設置一個會等比例縮小或放大。 -->
超鏈接標簽
超鏈接標簽 a：
<a> 標簽用於定義超鏈接，作用是從一個頁面鏈接到另一個頁面。
<a> 標簽最重要的屬性是 href 屬性，用於創建指向另外一個文檔的鏈接（或超鏈接）。
<a href="https://www.cnblogs.com/shangyang/" target="framename">歡迎來到殤央的博客</a> <!-- target:規定在何處打開目標 URL。 值： _blank 在新視窗中打開被鏈接文檔。 _self 預設。在相同的框架中打開被鏈接文檔。 _parent 在父框架集中打開被鏈接文檔。 _top 在整個視窗中打開被鏈接文檔。 framename 在指定的框架中打開被鏈接文檔。 -->
表格標簽
一個 HTML 表格包括 <table> 元素，一個或多個 <tr>、<th> 以及 <td> 元素。
<tr> 元素定義表格行，<th> 元素定義表頭，該標簽中的內容會以粗體顯示。<td> 元素定義表格單元。
<table border="1"> <tr> <th>語文</th> <th>數學</th> </tr> <tr> <td>123</td> <td>145</td> </tr> </table> <!-- table屬性： border:規定表格單元邊框的像素。 th屬性： colspan：規定表頭單元格可橫跨的列數。 rowspan：規定表頭單元格可橫跨的行數。 -->
內嵌標簽
內嵌標簽 iframe：
會創建包含另外一個文檔的內聯框架，有效地將另一個 HTML 頁面嵌入到當前頁中。
iframe標簽可以在當前網頁載入其他網頁的資源。src屬性規定在 <iframe> 中顯示的文檔的 URL。
<iframe src="https://www.baidu.com/" width="600" height="600" scrolling="yes"> <p>您的瀏覽器不支持iframe 標簽。</p> </iframe> <!-- height:規定 <iframe> 的高度。 width：規定 <iframe> 的寬度。 scrolling：規定是否在 <iframe> 中顯示滾動條。 值： auto：在需要的情況下出現滾動條（預設值）。 yes ：始終顯示滾動條（即使不需要）。 no ：從不顯示滾動條（即使需要）。 -->
表單域標簽
表單標簽
表單標簽 form：
<form> 標簽用於創建供用戶輸入的 HTML 表單。使用 <form> 標簽可以向伺服器傳輸數據。
當點擊提交數據時，form標簽會將用戶輸入的數據按照method指明的提交方式提交給action屬性所指明的提交地址。
<form name="login" action="/login" method="post"> <input type="submit" value="登錄"/> </form> <!-- 屬性： name:規定表單的名稱。 action：規定當提交表單時向何處發送表單數據。 method:規定用於發送表單數據的 HTTP 方法。 enctype:屬性規定在將表單數據發送到伺服器之前如何對其進行編碼。 值： application/x-www-form-urlencoded：預設。在發送前對所有字元進行編碼（將空格轉換為 "+" 符號，特殊字元轉換為 ASCII HEX 值）。 multipart/form-data：不對字元編碼。當使用有文件上傳控制項的表單時，該值是必需的。 text/plain：將空格轉換為 "+" 符號，但不編碼特殊字元。 -->
input標簽
行內元素，不自動換行。<input> 標簽用於創建互動式控制項，這類控制項是基於 web 表單的，它可以接收用戶的數據、信息。
<input> 標簽規定了用戶可以在其中輸入數據的輸入欄位。
type 屬性規定要顯示的 <input> 元素的類型。name 屬性規定 <input> 元素的名稱。value屬性指定 <input> 元素 value 的值。
提交的數據以name-value鍵值對的形式提交。
<form name="login" action="/login" method="post"> 用戶名：<input type="text" name="username" /><br /> 密碼：<input type="password" name="pwd"><br /> E-mail: <input type="email" name="usremail"><br /> <!--name 值相同的單選框只能選擇一個值 --> 性別：<input type="radio" name="gender" value="女">女 <input type="radio" name="gender" value="男">男 <br /> 選擇一個文件: <input type="file" name="img"><br /> <input type="checkbox" name="vehicle[]" value="Bike">我有一輛自行車<br> <input type="checkbox" name="vehicle[]" value="Car">我有一輛小轎車<br> <input type="checkbox" name="vehicle[]" value="Boat">我有一艘船<br> 選擇你喜歡的顏色: <input type="color" name="favcolor"><br /> 生日: <input type="date" name="bday"><br /> <input type="submit" value="登錄"/> <input type="reset" value="重新輸入" /> </form> <!-- type屬性: text:預設。定義一個單行的文本欄位（預設寬度為 20 個字元）。 password:定義密碼欄位（欄位中的字元會被遮蔽） email:定義用於 e-mail 地址的欄位。 radio:定義單選按鈕。 file:定義文件選擇欄位和 "瀏覽..." 按鈕，供文件上傳。 button:定義可點擊的按鈕（通常與 JavaScript 一起使用來啟動腳本）。 checkbox:定義覆選框。 color:定義拾色器。 date:定義 date 控制項（包括年、月、日，不包括時間）。 datetime:定義 date 和 time 控制項（包括年、月、日、時、分、秒、幾分之一秒，基於 UTC 時區）。 datetime-local:定義 date 和 time 控制項（包括年、月、日、時、分、秒、幾分之一秒，不帶時區）。 hidden:定義隱藏輸入欄位。 image:定義圖像作為提交按鈕。 month:定義 month 和 year 控制項（不帶時區）。 number:定義用於輸入數字的欄位。 range:定義用於精確值不重要的輸入數字的控制項（比如 slider 控制項）。 search:定義用於輸入搜索字元串的文本欄位。 tel:定義用於輸入電話號碼的欄位。 time:定義用於輸入時間的控制項（不帶時區）。 url:定義用於輸入 URL 的欄位。 week:定義 week 和 year 控制項（不帶時區）。 reset:定義重置按鈕（重置所有的表單值為預設值）。 submit:定義提交按鈕。 -->
文本標簽
<textarea> 標簽表示多行純文本編輯控制項，用戶可在其文本區域中寫入文本。
文本區域中可容納無限數量的文本，其中的文本的預設字體是等寬字體（通常是 Courier）。可以通過 cols 和 rows 屬性來規定 textarea 的尺寸大小，不過更好的辦法是使用 CSS 的 height 和 width 屬性。
<textarea name="text" cols="40" rows="40" wrap="hard"> 文本框 </textarea> <!-- 屬性： cols：規定文本區域內可見的列數。 rows：規定文本區域內可見的行數。 wrap：規定在表單提交時文本區域中的文本是如何換行的。 值： soft：在表單提交時，textarea 中的文本不換行。預設。 hard：在表單提交時，textarea 中的文本換行（包含換行符）。當使用 "hard" 時，必須指定 cols 屬性。 -->
下拉列表
<select> 元素用來創建下拉列表。
<select> 元素中的 <option> 標簽定義了列表中的可用選項。
<select name="語言"> <option value="Java">Java</option> <option value="C++">C++</option> <option value="HTML">HTML</option> <option value="CSS">CSS</option> </select> <!-- disabled屬性：當該屬性為 true 時，會禁用下拉列表。 -->
<optgroup> 標簽用於對 <select> 元素所提供的選項進行分組。當您使用一個較長的選項列表時，對相關的選項進行組合會使處理更加容易。
<select> <optgroup label="前端"> <option value="HTML">HTML</option> <option value="CSS">CSS</option> </optgroup> <optgroup label="後臺"> <option value="Java">Java</option> <option value="C++">C++</option> </optgroup> </select> <!-- label屬性：為選項組規定描述。 -->
