HTML學習隨筆

最後更新：2018-09-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：技術分享高度邊框顏色 row 置中 china 載入杭州隱藏

通用標籤

<body>屬性（含有bgcolor背景顏色；text字型顏色）
<h1>-<h6>字型的大小，h1最大，一般做標題
<b></b>字型變粗
<u></u>底線
<i></i>斜體字
<p></p>段落
<br>換行
&nbsp；空格
span行內元素；內容多大佔多大空
div塊元素；預設佔一行

常用標籤

<a></a>

超連結 href屬性寫明指向的方向
下載 href指向下載的檔案文字文件、網頁、圖片無法下載
錨點回到當前頁面頂端等操作

<a href="https://www.baidu.com">跳轉到百度</a>

<a href="ab20ac122c8f7823b2ee031c6372ab33.rar">下載</a>

<a name=“top”></a> <a href="#top">回頂部</a>

<img/> 圖片

src 圖片的路徑
width 圖片的寬度
height 圖片的高度
alt 圖片載入失敗時顯示的文字
title 滑鼠放圖片上時顯示的文字
圖片作超連結 <a href=""><img width="" height=”" src="" /></a>

<img src="ab20ac122c8f7823b2ee031c6372ab33.jpg" width="100" height="50" title="這是我的圖片" alt="這也是我的圖片"/>

表格標籤

<table></table> 表格
width 寬度
border 邊框粗細
cellspacing 儲存格與邊框的距離
cellpadding 儲存格之間的距離
bordercolor 邊框顏色

<table width="100%" bordercolor="green" border="1" cellspacing="0" cellpadding="0"></table>

<tr></tr> 行
<td></td> 代表儲存格
width 寬度
height 高度
align 水平對齊
left 靠左對齊
right靠右對齊
center置中對齊
top上對齊
button下對齊
middle中間對齊
colspan 左右合并
rowspan 上下合并
<th></th> 用作表頭

<tr>                <th align="center" valign="center">姓名</th>                <th>性別</th>                <th>班級</th>            </tr>            <tr>                <td>張三</td>                <td>男</td>                <td>0806</td>            </tr>

表單元素

<form></form> 代表表單
action 提交的頁面地址
method 提交頁面的方式
get 顯式提交
post 隱式提交
target 開啟頁面的方式
_blank 新頁面開啟
_self 自身頁面開啟

<form action="https://www.baidu.com" method="get" target="_self"></form>

文本類
文字框<input/>
type=“text”
value 文字框值
name 文字框名稱
form傳值時以name=value形式

<input type="text" name="" id="" value="" placeholder="請輸入使用者名稱"/>

密碼框<input/>
type="password"
value 密碼框值
name 密碼框名稱
form傳值時以name=value形式

<input type="password" name="" id="" value="" placeholder="請輸入密碼"/>

隱藏欄位<input/>
type=“hidden”
value 隱藏欄位值
name 隱藏欄位名稱
form傳值時以name=value形式

<input type="hidden" name="" id="" value="" />

文本域<textarea></textarea>
文本寫在標籤內
rows 行數
cols 橫向字元數

<textarea name="text" rows="2" cols="2"></textarea>

placeholder 文字框預設顯示的文字
按鈕類
普通按鈕<input/>
type=button”
name 按鈕名稱
value 按鈕顯示的文字
提交按鈕<input/>
type=“submit” 提交
重設按鈕<input/>
type=“reset” 將表單內容重設
圖片按鈕<input/>
type="image" 提交到<form>中action指向的檔案
src 引入圖片

<input type="submit" name="" id="" value="提交" /><input type="reset" name="" id="" value="重設" /><input type="button" name="" id="" value="普通" /><input type="image" src="58e88f04ea30c.jpg" width="50" height="50" id="" value=""/>

選擇類
選項按鈕<input/>
type=“radio”
name按鈕的名稱
value按鈕的值

<p>                <input type="radio" name="sex" id="" value="1" />男                <input type="radio" name="sex" id="" value="2" />女            </p>

複選框<input/>
type=“checkbox”
name複選框的名稱
value複選框的值

<p>                <input type="checkbox" name="地區1" id="" value="zd"/>張店                <input type="checkbox" name="地區2" id="" value="ht" checked="checked"/>桓台                <input type="checkbox" name="地區3" id="" value="lz"/>臨淄            </p>

下拉式清單
<select></select> 代表下拉 name下拉式清單的值
<option></option> 代表項 value該項的值

<p>                <select name="chinaarea">                    <option value="hz">杭州</option>                    <option value="bj" selected="selected">北京</option>                    <option value="sh">上海</option>                    <option value="js">江蘇</option>                </select>            </p>

檔案選擇<input/>
type=“file”
name 檔案選擇的名稱

<p>                <input type="file" name="upfile" id="" value=""/>            </p>

其他屬性
readonly ="readonly" ：唯讀可以提交value值

<p>                <input type="text" name="read" id="" value="ceshi" readonly="readonly" />            </p>

disabled ="disabled"：不可用不可以提交value值

<p>                <input type="text" name="dis read" id="disceshi" value="ceshi" disabled="disabled" />            </p>

cheched ="checked" :是radio checkbox的預設選中

<input type="checkbox" name="地區2" id="" value="ht" checked="checked"/>桓台

selected = "selected" 用在下拉式清單中，設定哪一項選中

<option value="bj" selected="selected">北京</option>

其他

<marquee></marquee>
滾動效果
direction：滾動方向
<mark>標記
<hr>分割線

<hr />        <marquee direction="right">             大家好        </marquee>        <hr />        <p>            <mark>大家好</mark>        </p>

HTML學習隨筆

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More