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屬性:為選項組規定描述。 -->