標籤：legend 滑鼠 targe 高度 size highlight height 輸入 pat
html是什麼HTML 不是一種程式設計語言，而是一種標記語言 (markup language)
HTML 使用標記標籤來描述網頁
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>網頁標題</title><meta name="keywords" content="關鍵字" /><meta name="description" content="此網頁描述" /></head><body>網頁本文內容</body></html>
標籤的文法：
<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內容部分</標籤名>
<標籤名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
<h1> to <h6>
<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title></head><body><h1>AAA</h1><h2>AAA</h2><h3>AAA</h3><h4>AAA</h4><h5>AAA</h5><h6>AAA</h6></body></html>
效果如下：
2.html水平線<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title></head><body><h1>AAA</h1><hr/></body></html>
效果
3.html段落以及換行
<p>: 段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白.
當顯示頁面時，瀏覽器會移除原始碼中多餘的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML 程式碼中的所有連續的空行（換行）也被顯示為一個空格。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title></head><body><p>hello world</p><p>hello world</p></body></html>
效果
4.html超連結什麼是超級連結？ 所謂的超連結是指從一個網頁指向一個目標的串連關係，這個目標可以是另一個網頁，也可以是相同網頁上 的不同位置，還可以是一個圖片，一個電子郵件地址，一個檔案，甚至是一個應用程式
<a>比較重要的屬性有兩個，分別是href、target
href指定超連結位址
target指定開啟檔案
_blank 新頁面開啟
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><p>hello baidu</p><a href="http://www.baidu.com" target="_blank">百度</a><hr/></body></html>
5.html映像標籤
使用格式：<img src="url">
alt 定義當圖片無法載入時，顯示什麼資訊
width 定義寬度，單位可以為像素 也可以為百分比
height 定義高度
title: 滑鼠懸浮時的提示資訊.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title></head><body><p>hello world</p><a href="http://www.baidu.com"><img src="1.jpg", width="250" height="350" alt="logo",title="彌留之際 logo"/></a><hr/></body></html>
效果
6.html表格表格由<table>來定義，每行<tr> 有許多儲存格<td>。表頭可以使用<th>
<table>標籤屬性：
border 定義邊框
在<table>中可以嵌入<th> <tr> <td>等標籤
<tr> 定義行
<th> 定義表頭
colspan 定義表頭儲存格可以橫跨的列數。
rowspan 定義表頭儲存格橫跨的行數
heardes 定義與表頭儲存格相關聯的一個或者多個儲存格。(html5新增)
<td> 定義儲存格
colspan 定義儲存格可以橫跨的列數。
rowspan 定義儲存格橫跨的行數
heardes 定義與儲存格相關聯的一個或者多個儲存格。(html5新增)
border: 表格邊框. cellpadding: 內邊距 cellspacing: 外邊距. width: 像素 百分比.（最好通過css來設定長寬）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <table border="1" cellpadding="10px" cellspacing="5px"> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> <th>工資</th> </tr> <tr> <td>111</td> <td>111</td> <td>111</td> <td>111</td> </tr> <tr> <td colspan="2">222</td> <td>222</td> <td rowspan="2" o o>222</td> </tr> <tr> <td>333</td> <td>333</td> <td>333</td> </tr> </table></body></html>
效果
7.html列表列表分為
無序列表<ul>
有序列表<ol>
清單項目內部可以使用段落、分行符號、圖片、連結以及其他列表等等
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title></head><body><ul> <li>male</li> <li>female</li></ul><hr/><ol> <li>male</li> <li>female</li></ol></body></html>
效果
8.html表單表單是一個包含表單元素的地區。
表單元素是允許使用者在表單中（比如：文本域、下拉式清單、單選框、複選框等等）輸入資訊的元素
<form>中的屬性：
action：後面加url 指定當提交表單時向何處發送表單資料
method：get/post兩個值，get為明文 post為加密
name：指定表單的名稱
target：_blanket _self _parent _top 指定網頁開啟檔案
<from>標籤中較為常用的標籤有<input> <select> <label> <button>
<fieldset> 標籤可以將表單內的相關元素分組。 會在相關表單元素周圍繪製邊框。
name 規定fieldset的名稱
form 值：form_id 規定fieldset所屬的表單
<legend> 定義了 <fieldset> 元素的標題。
<input>系欄標籤
‘‘‘<1> 表單類型type: text 文本輸入框 password 密碼輸入框 radio 單選框 checkbox 多選框 submit 提交按鈕 button 按鈕(需要配合js使用.) button和submit的區別？ file 提交檔案：form表單需要加上屬性enctype="multipart/form-data" 上傳檔案注意兩點：請求方式必須是postenctype="multipart/form-data" <2> 表單屬性 name: 表單提交項的鍵. 注意和id屬性的區別：name屬性是和伺服器通訊時使用的名稱； 而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便用戶端編程，而在css和javascript中使用的value: 表單提交項的值.對於不同的輸入類型，value 屬性的用法也不同： type="button", "reset", "submit" - 定義按鈕上的顯示的文本 type="text", "password", "hidden" - 定義輸入欄位的初始值 type="checkbox", "radio", "image" - 定義與輸入相關聯的值checked: radio 和 checkbox 預設被選中readonly: 唯讀. text 和 passworddisabled: 對所用input都好使.‘‘‘
select標籤
‘‘‘ <select> 下拉選標籤屬性 name:表單提交項的鍵. size：選項個數 multiple：multiple <optgroup>為每一項加上分組 <option> 下拉選中的每一項 屬性： value:表單提交項的值. selected: selected下拉選預設被選中‘‘‘
<textarea> 多行文字框
<form id="form1" name="form1" method="post" action=""> <textarea cols=“寬度” rows=“高度” name=“名稱”> 預設內容 </textarea></form>
<label>標籤
定義：<label> 標籤為 input 元素定義圖說文字（標記）。
說明：
1 label 元素不會向使用者呈現任何特殊效果。
2 <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form method="post" action=""> <label for=“username”>使用者名稱</label> <input type=“text” name=“username” id=“username” size=“20” /></form></body></html>
前端基礎之html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
