首頁 > 開發者 > JavaScript
html，html教程
html標籤 1、head標籤
<head> 標籤用於定義文檔的頭部，它是所有頭部元素的容器。<head> 中的元素可以引用指令碼、指示瀏覽器在哪裡找到樣式表、提供元資訊等等。文檔的頭部描述了文檔的各種屬性和資訊，包括文檔的標題、在 Web 中的位置以及和其他文檔的關係等。絕大多數文檔頭部包含的資料都不會真正作為內容顯示給讀者。<title> 定義文檔的標題，它是 head 部分中唯一必需的元素。
下面這些標籤可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<head> <meta charset="UTF-8"> <meta name="keywords" content="搜尋引擎根據這裡面的東西"> <meta name="description" content="網頁的描述資訊"> <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> # 2秒後重新導向到某網站 <title>web</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> # 網頁表徵圖 <link rel="stylesheet" href="mycss.css"> # 外部css檔案</head>
2、body標籤
body 元素定義文檔的主體。body 元素包含文檔的所有內容（比如文本、超連結、映像、表格和列表等等）
<p id="abc">affffdaddddddda</p> <img src="a.png" alt="tupian" height="200" width="200" title="sss"> # 圖片標籤 <a href="http://www.baidu.com" target="_blank">這是一個連結</a> <ol> # 有序列表 <li>a</li> <li>b</li> <li>c</li> </ol> <ul> # 無序列表 <li>a</li> <li>b</li> <li>c</li> </ul> <dl> # 自訂欄表 <dt>a</dt> <dd>1</dd> <dd>2</dd> <dd>3</dd> </dl> <table border="2px" cellpadding="1" cellspacing="1"> # 表格，邊框，內邊距，外邊距 <thead>表單</thead> # thead和tbody 可以不用寫 <tr> <td>一</td> <td>二</td> <td>三</td> </tr> <tbody> <tr> <td>1</td> <td colspan="2">2,3</td> # 合併儲存格 </tr> <tr> <td>4</td> <td>5</td> <td rowspan="2">6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </tbody> </table>
3、form標籤
表單用於向伺服器傳輸資料。表單能夠包含 input 元素，比如文字欄位、複選框、單選框、提交按鈕等等。表單還可以包含textarea、select、fieldset和 label 元素。
1.表單屬性
HTML 表單用於接收不同類型的使用者輸入，使用者提交表單時向伺服器傳輸資料，從而實現使用者與Web伺服器的互動。表單標籤, 要提交的所有內容都應該在該標籤中.
action: 表單提交到哪. 一般指向伺服器端一個程式,程式接收到表單提交過來的資料（即表單元素值）作相應處理，比如https://www.sogou.com/web
method: 表單的提交方式 post/get 預設取值 就是 get（信封）
get: 1.提交的索引值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.
post:1.提交的索引值對 不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.
get/post是常見的兩種請求方式.
2.表單元素
<input> type:
text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框
submit 提交按鈕
button 按鈕(需要配合js使用.) button和submit的區別？
file 提交檔案：form表單需要加上屬性enctype="multipart/form-data"
在表單提交一定要明確表單中name和value具體值的是什麼
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 和 password
disabled: 對所用input都好使.
3、<select> 下拉選標籤屬性：
name:表單提交項的鍵.
size：選項個數
multiple：multiple
<option> 下拉選中的每一項 屬性：value:表單提交項的值. selected: selected下拉選預設被選中
<optgroup>為每一項加上分組
4、<textarea> 文本域 name:表單提交項的鍵. cols:文本域預設有多少列 rows:文本域預設有多少行
5、<label>
<label for="www">姓名</label>
<input id="www" type="text">
6、<fieldset>
<fieldset>
<legend>登入吧</legend>
<input type="text">
</fieldset>
<form action="" method="" enctype="multipart/form-data"> username<input type="text" name="query" > <br> password<input type="password" name="pd"> <br> 男<input type="radio" name="sex" value="male" > 女<input type="radio" name="sex" value="female"> <br> 籃球<input type="checkbox" name="hobby" value="basketball"> 足球<input type="checkbox" name="hobby" value="soccer"> <p><input type="button" value="按鈕"></p> <p><input type="file" name="file_name"></p> <select name="it"> <optgroup label="it"> <option value="java">java</option> <option value="C++">C++</option> <option value="C">C</option> </optgroup> </select> <br> <textarea name="textarea"> </textarea> <p> <label for="in">姓名</label> <input id="in" type="text"> </p> <p><input type="submit" value="提交"></p> <fieldset>><span>block（塊）元素的特點
① 總是在新行上開始；
② 高度，行高以及外邊距和內邊距都可控制；
③ 寬度預設是它的容器的100%，除非設定一個寬度。
④ 它可以容納內嵌元素和其他塊元素inline元素的特點
① 和其他元素都在一行上；
② 高，行高及外邊距和內邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內嵌元素只能容納文本或者其他內嵌元素
對行內元素，需要注意如下
設定寬度width 無效。
設定高度height 無效，可以通過line-height來設定。
設定margin 只有左右margin有效，上下無效。
設定padding 只有左右padding有效，上下則無效。注意元素範圍是增大了，但是對元素周圍的內容是沒影響的。額外知識點
1、border-collapse: collapse;如果可能，邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
2、border-spacing: 5px; border-spacing 屬性設定相鄰儲存格的邊框間的距離（僅用於“邊框分離”模式）
3、caption 元素定義表格標題，caption 標籤必須緊隨 table 標籤之後
4、clear:both，在左右兩側均不允許浮動元素。
5、 <input type="radio" name="gender" value="male" checked> Male checked會預設選上
6、<option value="fiat" selected>Fiat</option> selected預設被選上的
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
