【html學習】html基礎
阿新 • • 發佈：2020-11-04
一、網頁和瀏覽器
1、認識網頁
網頁主要由文字，影象和超連結等元素構成。當然，除了這些元素，網頁還可以包含音訊，視訊等。網頁是程式設計師寫的程式碼經過瀏覽器的渲染，呈現在使用者眼前的介面。
網頁三劍客：
- HTML:超文字標記語言【結構】
- CSS:層疊樣式表【樣式】
- javascript:js【互動】
2、瀏覽器
- 常用瀏覽器
瀏覽器是網頁執行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱為五大瀏覽器。
國內瀏覽器有360瀏覽器、QQ瀏覽器、搜狗瀏覽器、遨遊瀏覽器等。
- 瀏覽器核心
核心：可大概為“渲染引擎”，不過我們一般習慣將之稱為‘瀏覽器核心’。負責對網頁語法的解釋（如標準通用標記語言下的一個應用HTML、JavaScript），並渲染網頁
四大核心：
（1）Trident：IE
（2）Gecko：Firefox
（3）Webkit：Safari
（4）Blink：Chrome ，Opera
不同的核心在渲染同一內容的時候會有差別。國內瀏覽器核心：
（1）360瀏覽器、獵豹瀏覽器核心：IE+Chrome雙核心；
（2）搜狗、遨遊、QQ瀏覽器核心：Trident（相容模式）+Webkit（高速模式）；
（3）百度瀏覽器、世界之窗核心：IE核心；
（4）2345瀏覽器核心：IE+Chrome雙核心；
二、HTML的基本概念
1、HTML的定義
Htyper Text Markup Language 即超文字標記語言。
超文字: 就是指頁面內可以包含圖片、連結，甚至音樂、程式等非文字元素。
標記語言: 標記（標籤）構成的語言。
2、HTML結構
<!-- <!doctype>標記:位於文件最前面，用於向瀏覽器說明當前文件使用的HTML標準。 --> <!DOCTYPE html> <!-- <html>標記:也稱為根標記，用於告知瀏覽器其自身是一個HTML文件。 --> <!-- <html>標記標誌著HTML文件的開始，</html>標記著HTML文件的結束。 --> <html lang="en"> <!-- <head>標記:用於定義HTML文件的頭部資訊，稱為頭部標記。主要用來封裝其他位於文件頭部的標記。 --> <head> <!-- <meta>：定義頁面元資訊標記，用於定義頁面的元資訊,可重複出現在<head>頭部標記中，是一個單標記。 --> <!-- 常見的幾種設定，例：頁面編碼、重新整理、跳轉、針對搜尋引擎和更新頻度的描述和關鍵詞 --> <!-- <meta charset="UTF-8"> 定義編碼格式為utf-8 --> <meta charset="UTF-8"> <!-- <meta name="名稱" content="值"> 可以為搜尋引擎提供資訊。 --> <meta name="keywords" content="html"> <meta name="description" content="html基礎"> <meta name="author" content="everydawn"> <!-- <link>：引用外部檔案標記 --> <!-- rel:指定當前文件與引用外部文件的關係，該屬性值通常為stylesheet，表示定義一個外部樣式表 --> <!-- type:指定所連線文件的MIME型別，css的MIME是type/css,一般使用type="text/css" --> <!-- href -- 指定需要載入的資源(CSS檔案)的地址URI --> <link rel="stylesheet" type="text/css" href="main.css"> <!-- <style>:內嵌樣式標記 --> <!-- 用於為HTML文件定義樣式資訊，在HTML中使用style標記時，常常定義其屬性為type,相應屬性值為text/css。 --> <style type="text/css"> h1{ color:red; } </style> <!-- <script>:標籤用於定義客戶端指令碼，比如 JavaScript。 --> <!-- script 元素既可以包含指令碼語句 --> <script type="text/javascript"> document.write("Hello World!") </script> <!-- script 也可以通過 src 屬性指向外部指令碼檔案。 --> <script type="text/javascript" src="main.js"></script> <!-- <title>：設定頁面標題標記，用於定義HTML頁面的標題，即給網頁取一個名字。 --> <title>Document</title> </head> <!-- <body>標記:用於定義HTML文件索要顯示的內容,也稱為主體標記。<body>標記中的資訊才是最終要顯示在網頁上的。 --> <body> <h1>hello world</h1> </body> </html>
三、標籤的概念、寫法
1、標籤的概念
HTML是網頁的基本結構，標籤就是組成網頁基本結構的元素。
標籤：html、head、meta、title、body、h1等等我們都稱為html的標籤，簡稱標籤即可。
元素：一對標籤所表示的東西，我們稱為元素。
2、標籤的寫法
<標籤名>content</標籤名>
<html></html>
<!-- 標籤的巢狀 -->
<標籤名>
<標籤名2>content</標籤名2>
</標籤名>
四、標籤的屬性和註釋的作用
1、HTML標籤的屬性
標籤具有屬性，屬性用來表示標籤的特徵。比如，我們用大小這個屬性，來衡量一個蘋果。所以，大小可以用來表示蘋果的特徵。屬性寫在標籤裡面的，而且是開始標籤內。
<標籤名 屬性名1="value1" 屬性名2="value2">content</標籤名>
每一個標籤都會擁有一堆屬性，來描述這個標籤的一些功能。所有標籤共有的屬性：
| 屬性名 | 含義 |
|---|---|
| class | 為html元素定義一個或多個類名(classname)（類名從樣式檔案引入） |
| id | 定義元素的唯一id |
| style | 定義元素的行內樣式 |
| title | 描述了元素的額外資訊（作為工具條使用） |
2、HTML註釋
合理的註釋可以增加對於程式碼的理解。
<!-- 這是一個註釋 -->
五、常用的標籤
1、結構標籤
<html></html> 根標籤
<head></head> 頭部標籤
<body></body> 主體標籤
<title></title> 標題標籤
<meta> 元標籤
2、標題標籤
<h1>-<h6>
基本語法格式為：
<h1>HTML標題一</h1>
<h2>HTML標題二</h2>
<h3>HTML標題三</h3>
<h4>HTML標題四</h4>
<h5>HTML標題五</h5>
<h6>HTML標題六</h6
屬性：
align:值：center、left、right、justify
| 值 | 描述 |
|---|---|
| center | 居中對齊內容。 |
| left | 左對齊內容。 |
| right | 右對齊內容。 |
| justify | 對行進行伸展，這樣每行都可以有相等的長度（就像在報紙和雜誌中）。 |
程式碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 280px;background-color: pink;float: left;">
<h1 align="center">這是標題一居中</h1>
<h1 align="left">這是標題一居左</h1>
<h1 align="right">這是標題一居右</h1>
<h1>不使用align:justify飛灑發fd達fasdf省sdf份發f送fdfd大df夫df薩</h1>
</div>
<div style="width: 280px;background-color: skyblue;float: left;margin-left:10px">
<h1 align="center">這是標題一居中</h1>
<h1 align="left">這是標題一居左</h1>
<h1 align="right">這是標題一居右</h1>
<h1 align="justify">使用align:justify飛灑發fd達fasdf省sdf份發f送fdfd大df夫df薩</h1>
</div>
</body>
</html>
頁面顯示：
3、功能標籤
<b>加粗</b>
<strong>加粗強調</strong>
<i>斜體</i>
<em>斜體</em>
<u>下劃線</u>
<s>刪除線</s>
<sup>上角標</sup>
<sub>下角標</sub>
<!-- br:換行 -->
<br>
<!-- hr:水平線 -->
<hr>
程式碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<b>b加粗</b>
<strong>strong加粗強調</strong>
<i>i斜體</i>
<em>em斜體</em>
<u>u下劃線</u>
<s>s刪除線</s>
<sup>sup上角標</sup>
<sub>sub下角標</sub>
<!-- br:換行 -->
<br>
<!-- hr:水平線 -->
<hr>
</body>
</html>
頁面顯示：
4、段落標籤
用於定義一個獨立的段落，每個段落獨佔一行，並且段落之間回有一定的間隙。
語法格式為：
<p align="center">這是一個段落</p>
屬性：
align:值：center、left、right、justify
| 值 | 描述 |
|---|---|
| center | 居中對齊內容。 |
| left | 左對齊內容。 |
| right | 右對齊內容。 |
| justify | 對行進行伸展，這樣每行都可以有相等的長度（就像在報紙和雜誌中）。 |
5、影象標籤
在網頁中顯示一張圖片，常見的圖片格式有JPEG(JPG)，PNG，GIF...
基本語法格式：
<img src="gaoyuanyuan.jpg">
屬性：
| 屬性 | 值 | 說明 |
|---|---|---|
| src | url | 影象資源的地址 |
| alt | 替代文字 | 圖片沒有載入成功時的提示 |
| title | 圖片資訊 | 滑鼠懸浮時的提示資訊 |
| width | 畫素（px） | 影象寬度 |
| height | 畫素（px） | 影象高度 |
程式碼示例
<img src="gaoyuanyuan.jpg" alt="高圓圓" title="高圓圓" width="100px" height="100px">
絕對路徑和相對路徑:
- 絕對路徑是指一個完整的可以從開頭找到這個圖片的路徑
- 相對路徑是指相對於當前的頁面所在的路徑
絕對路徑的寫法：
<img src="E:\html\images\gaoyuanyuan.jpg">
相對路徑的寫法：
<!--當前目錄:圖片和html檔案在同一個資料夾下-->
<img src="gaoyuanyuan.jpg">
<!--當前目錄:圖片和html檔案在同一個資料夾下-->
<img src="./gaoyuanyuan.jpg">
<!--當前目錄:儲存圖片的資料夾和html檔案在同一個資料夾下-->
<img src="images/gaoyuanyuan.jpg">
<!--當前目錄:儲存圖片的資料夾和html檔案在同一個資料夾下-->
<img src="./images/gaoyuanyuan.jpg">
<!--上一級目錄:儲存圖片的資料夾和儲存html的資料夾在同一個資料夾中 -->
<img src="../gaoyuanyuan.jpg">
相關說明：
./ 當前目錄
../ 回到上一層目錄
images/ 進入一層目錄
../images/ 回到上一層目錄，然後再進入images目錄
6、超連結標籤（錨標籤）
- 超連結，是給任何的html元素新增連結，可以被點選，跳轉到某個地址。
基本語法格式:
<a href="http://www.baidu.com>百度一下</a>
屬性：
| 屬性 | 值 | 說明 |
|---|---|---|
| href | URL | 規定連結指向的頁面的 URL。 |
| target | _self | 預設值，在原視窗中開啟。 |
| target | _blank | 在新視窗中開啟。 |
| target | _top | 在原視窗中開啟。 |
- 錨點連結
通過建立錨點連結，使用者能夠快速定位到目標的內容。
建立步驟：
（1）使用"<a href="#id名">連結文字</a>"建立連結文字。
（2）使用相應的id名稱注跳轉目標的位置。
程式碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#html">html基礎知識</a>
<a href="#css">css基礎知識</a>
<a href="#js">js基礎知識</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id="html">HTML</h3>
<p>這裡是關於html基礎知識的介紹</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id="css">CSS</h3>
<p>這裡是關於css基礎知識的介紹</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h3 id="js">JS</h3>
<p>這裡是關於js基礎知識的介紹</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
7、列表標籤
- 無序列表
Html中列表也是常用的元素。無序列表用<ul><li></li></ul>表示。
屬性：
| 屬性 | 值 | 說明 |
|---|---|---|
| type | disc | 預設值，實心圓點 |
| type | circle | 空心圓點 |
| type | square | 方形 |
示例程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>雪梨</li>
</ul>
<ul type="circle">
<li>蘋果</li>
<li>香蕉</li>
<li>雪梨</li>
</ul>
<ul type="square">
<li>蘋果</li>
<li>香蕉</li>
<li>雪梨</li>
</ul>
</body>
</html>
頁面顯示:
- 有序列表
有序列表使用數字或字母系統來組織列表裡包含的資訊。有序列表可以使用數字(預設)、大寫字母、小寫字母、大寫羅馬數字和小寫羅馬數字排列專案。
屬性：
| 屬性 | 值 | 說明 |
|---|---|---|
| type | 1、a、A、i、I | 用來設定專案前面的標記 |
| start | 數值 | 排序的起點數值 |
示例程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ol type="1" start="2">
<li>蘋果</li>
<li>香蕉</li>
<li>雪梨</li>
</ol>
<hr>
<ol type="a" start="5">
<li>蘋果</li>
<li>香蕉</li>
<li>雪梨</li>
</ol>
<hr>
<ol type="A">
<li>蘋果</li>
<li>香蕉</li>
<li>雪梨</li>
</ol>
<hr>
<ol type="i">
<li>蘋果</li>
<li>香蕉</li>
<li>雪梨</li>
</ol>
<hr>
<ol type="I">
<li>蘋果</li>
<li>香蕉</li>
<li>雪梨</li>
</ol>
</body>
</html>
頁面顯示：
- 自定義列表
<dl> 標籤定義了定義列表（definition list）。
<dl> 標籤用於結合 <dt> （定義列表中的專案）和 <dd> （描述列表中的專案）。
示例程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示資訊的裝置 ... ...</dd>
</dl>
</body>
</html>
頁面顯示：
8、表格標籤
表格由 <table> 標籤以及一個或多個 tr、th或td 元素組成。每一個<td></td>稱為一個單元格，單元格可以包含文字、圖片、列表、段落、表單、水平線、表格等等。
基本語法：
<table>
<tr>
<th>頭部一</th>
<th>頭部二</th>
</tr>
<tr>
<td>第一行，第一列</td>
<td>第一行，第二列</td>
</tr>
<tr>
<td>第二行，第一列</td>
<td>第二行，第二列</td>
</tr>
</table>
table屬性：
| 屬性 | 值 | 含義 |
|---|---|---|
| border | 畫素值(預設為0) | 設定表格的邊框寬度 |
| cellspacing | 畫素值(預設為2畫素) | 設定單元格與單元格邊框之間的空白間距寬度 |
| cellpadding | 畫素值(預設為1畫素) | 設定單元格內容與邊框線之間的空白間距寬度 |
| width | 畫素值 | 設定表格的寬度 |
| height | 畫素值 | 設定表格的高度 |
| align | left、center、right | 設定表格在網頁中的水平對齊方式 |
td/th標籤常用屬性：
| 屬性 | 值 | 含義 |
|---|---|---|
| width | 畫素值 | 設定單元格的寬度 |
| height | 畫素值 | 設定單元格的高度 |
| align | left、center、right | 設定單元格中的內容的水平對齊方式 |
| valign | top、middle、bottom | 設定單元格中的內容的垂直對齊方式 |
| rowspan | 要合併的數量 | 設定要跨行（縱向）合併的單元格數 |
| colspan | 要合併的數量 | 設定要跨列（橫向）合併的單元格數 |
table相關標籤
caption 標籤定義表格標題，必須緊隨 table 標籤之後。只能對每個表格定義一個標題。通常這個標題會被居中於表格之上。
thead 標籤定義表格的表頭。該標籤用於組合 HTML 表格的表頭內容。
tbody 標籤表格主體（正文）。該標籤用於組合 HTML 表格的主體內容。
tfoot 標籤定義表格的頁尾（腳註或表注）。該標籤用於組合 HTML 表格中的表注內容。
thead、tbody、tfoot 元素結合起來使用。
示例程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="300" cellpadding="10" cellspacing="0" align="center">
<caption><h1>帥哥排行</h1></caption>
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>1</td>
<td >彭于晏</td>
<td>男</td>
<td>49</td>
</tr>
<tr align="center">
<td>2</td>
<td>劉德華</td>
<td>男</td>
<td>55</td>
</tr>
<tr align="center">
<td>3</td>
<td>周杰倫</td>
<td>男</td>
<td>45</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td >總結</td>
<td colspan="3"></td>
</tr>
</tfoot>
</table>
</body>
</html>
頁面顯示：
9、表單標籤
<form> 標籤用於為使用者輸入建立 HTML 表單。
表單能夠包含 input 元素，比如文字欄位、複選框、單選框、提交按鈕等等。
表單還可以包含 menus、textarea、select、fieldset、legend 和 label 元素。
表單用於向伺服器傳輸資料。
基本語法：
<form action="/index" name="registerForm" method="POST" enctype="application/x-www-form-urlencoded">
username: <input type="text" name="username"><br>
password: <input type="password" name="password"><br>
<input type="submit">
</form>
可選屬性：
| 屬性 | 值 | 說明 |
|---|---|---|
| action | URL | 規定當提交表單時向何處傳送表單資料。 |
| name | form_name | 規定表單的名稱。 |
| method | get、post | 規定用於傳送 form-data 的 HTTP 方法。 |
| target | _blank、_self（預設）、_parent、_top、framename | 規定在何處開啟 action URL。 |
| enctype | application/x-www-form-urlencoded（預設）、multipart/form-data、text/plain | 規定在傳送表單資料之前如何對其進行編碼。 |
input標籤常用屬性
| 屬性 | 值 | 說明 |
|---|---|---|
| type | button\checkbox\file\hidden\image \password\radio\reset\submit\text |
規定 input 元素的型別。 分別是：按鈕\複選\檔案\隱藏\圖片\密碼\單選\重置\提交\文字 |
| name | field_name | 定義 input 元素的名稱。 |
| value | value | 規定 input 元素的值。 |
| required | required | 指示輸入欄位的值是必需的。 |
| readonly | readonly | 規定輸入欄位為只讀。 |
| size | characters/pixels | input 元素的寬度。 |
| maxlength | number | 規定輸入欄位中的字元的最大長度。 |
| max | number、date | 規定輸入欄位的最大值。與 "min" 屬性配合使用，來建立合法值的範圍。 |
| min | number、date | 規定輸入欄位的最小值。與 "max" 屬性配合使用，來建立合法值的範圍。 |
| step | number | 規定輸入字的的合法數字間隔。 step 屬性可以與 max 以及 min 屬性配合使用，以建立合法值的範圍。 |
| placeholder | text | 規定幫助使用者填寫輸入欄位的提示。 |
| pattern | regexp_pattern | 規定輸入欄位的值的模式或格式。 例如 pattern="[0-9]" 表示輸入值必須是 0 與 9 之間的數字。 |
| autofocus | autofocus | 規定輸入欄位在頁面載入時是否獲得焦點。（不適用於 type="hidden"） |
| checked | checked | 規定此 input 元素首次載入時應當被選中。 |
| disabled | disabled | 當 input 元素載入時禁用此元素。 |
| src | URL | 定義以提交按鈕形式顯示的影象的 URL。 |
| width | pixels | 定義 input 欄位的寬度。（適用於 type="image"） |
| height | pixels | 定義 input 欄位的高度。（適用於 type="image"） |
label標籤的常用屬性：
| 屬性 | 值 | 說明 |
|---|---|---|
| for | id | 規定 label 繫結到哪個表單元素。 |
| form | formid | 規定 label 欄位所屬的一個或多個表單。 |
select標籤的常用屬性：
| 屬性 | 值 | 說明 |
|---|---|---|
| name | name | 規定下拉列表的名稱。 |
| form | form_id | 規定文字區域所屬的一個或多個表單。 |
| size | number | 規定下拉列表中可見選項的數目。 |
| autofocus | autofocus | 規定在頁面載入後文本區域自動獲得焦點。 |
| disabled | disabled | 規定禁用該下拉列表。 |
| required | required | 規定文字區域是必填的。 |
select標籤內部option標籤的常用屬性：
| 屬性 | 值 | 說明 |
|---|---|---|
| disabled | disabled | 規定此選項應在首次載入時被禁用。 |
| selected | selected | 規定選項（在首次顯示在列表中時）表現為選中狀態。 |
| value | text | 定義送往伺服器的選項值。 |
textarea標籤的常用屬性：
| 屬性 | 值 | 說明 |
|---|---|---|
| name | name_of_textarea | 規定文字區的名稱。 |
| form | form_id | 規定文字區域所屬的一個或多個表單。 |
| cols | number | 規定文字區內的可見寬度。 |
| rows | number | 規定文字區內的可見行數。 |
| autofocus | autofocus | 規定在頁面載入後文本區域自動獲得焦點。 |
| disabled | disabled | 規定禁用該文字區。 |
| required | required | 規定文字區域是必填的。 |
| maxlength | number | 規定文字區域的最大字元數。 |
| placeholder | text | 規定描述文字區域預期值的簡短提示。 |
| readonly | readonly | 規定文字區為只讀。 |
示例程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/index" name="registerForm" method="POST" enctype="application/x-www-form-urlencoded" target="_top">
<table>
<tr>
<td><label for="username">使用者名稱：</label></td>
<td><input type="text" name="username" placeholder="username" required></td>
</tr>
<tr>
<td><label for="password">密碼：</label></td>
<td><input type="password" name="password" placeholder="password" required></td>
</tr>
<tr>
<td><label for="email">郵箱：</label></td>
<td><input type="text" name="email" placeholder="email" required pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"></td>
</tr>
<tr>
<td><label for="age">年齡：</label></td>
<td><input type="number" max="120" min="0" step="1"></td>
</tr>
<tr>
<td><label for="mobilephone">手機：</label></td>
<td><input type="text" placeholder="mobilephone" pattern="^1[3|4|5|7|8][0-9]{9}$"></td>
</tr>
<tr>
<td><label for="gender">性別：</label></td>
<td><input type="radio" name="gender" checked>男<input type="radio" name="gender">女</td>
</tr>
<tr>
<td><label for="hobby">愛好</label></td>
<td><input type="checkbox" name="hobby">足球<input type="checkbox" name="hobby">籃球<input type="checkbox" name="hobby">排球</td>
</tr>
<tr>
<td><label for="address">地址</label></td>
<td>
<select name="address" id="address">
<option value="請選擇一個省份" disabled>請選擇一個省份</option>
<option value="河南省">河南省</option>
<option value="江蘇省">江蘇省</option>
<option value="山東省">山東省</option>
<option value="福建省">福建省</option>
</select>
</td>
</tr>
<tr>
<td><label for="avatar">預設頭像：</label></td>
<td><input type="image" src="gaoyuanyuan.jpg" width="100px" height="100px"></td>
</tr>
<tr>
<td><label for="newavatar">修改頭像：</label></td>
<td><input type="file"></td>
</tr>
<tr>
<td><label for="introduction">自我介紹：</label></td>
<td><textarea name="introduction" id="introduction" cols="22" rows="10" placeholder="自我介紹"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit"></td>
</tr>
</table>
</form>
</body>
</html>
頁面顯示：
10、特殊字元
在html中，有些特殊字元是需要用html語言表示出來的。如下表格所示：
| HTML 原始碼 | 含義 |
|---|---|
| 空格 | |
| > | 大於號 (>) |
| < | 小於號 (<) |
| " | 引號 (") |
| ® | 註冊商標(®) |
| © | 版權(© ) |
11、iframe
iframe 框架用於在網頁內顯示網頁。
基本語法格式：
<iframe src="URL"></iframe>
屬性：
| 屬性 | 值 | 含義 |
|---|---|---|
| width | px , % | 指定框架的寬度 |
| height | px , % | 指定框架的高度 |
| scrolling | yes,no,auto | 是否顯示滾動條 |
| frameborder | 1, 0 | 是否顯示邊框 |
示例程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="http://www.baidu.com" frameborder="0" height="500px" width="500px"></iframe>
<iframe src="http://www.taobao.com" frameborder="1" height="500px" width="500px" scrolling="no"></iframe>
</body>
</html>
頁面顯示：
12、塊級標籤和內聯標籤
body裡面分為兩類標籤：塊級標籤和內聯標籤。
-
塊級標籤：<p><h1><table><ol><ul><form><div>
特點：
（1）總是在新行上開始；
（2）高度，行高以及外邊距和內邊距都可控制；
（3）寬度預設是它的容器的100%，除非設定一個寬度。
（4）它可以容納內聯元素和其他塊元素 -
內聯標籤：<a><input><img><sub><sup><textarea><span>
特點：
（1）和其他元素都在一行上；
（2）高，行高及外邊距和內邊距不可改變；
（3）寬度就是它的文字或圖片的寬度，不可改變
（4）內聯元素只能容納文字或者其他內聯元素
內聯元素：
（1）設定寬度width 無效。
（2）設定高度height 無效，可以通過line-height來設定。
（3）設定margin 只有左右margin有效，上下無效。
（4）設定padding 只有左右padding有效，上下則無效。注意元素範圍是增大了，但是對元素周圍的內容是沒影響的。