alert() 彈出個提示框 （確定），無返回值。
confirm() 彈出個確認框 （確定，取消)，按確定,返回true; 按取消返回false。
prompt() 彈出個輸入框 讓你輸入東西，返回 用戶輸入的值。
alert(顯示警告框的信息) :
confirm(顯示警告框的信息) :
prompt("信息" , 顯示輸入框的默認值 ) :
<button onclick="alert( 'ⓐⓑⓒⓓⓔⓕⓖ \n ⒶⒷⒸⒹⒺⒻ' )">我是按鈕</button>
<button onclick="myFunction()">Try it</button>
<span id="demo1"></span >
<script>
function myFunction() {
if (confirm("Press a button!")) { demo1.innerHTML = "You pressed OK!"; }
else { demo1.innerHTML = "You pressed Cancel!"; }
}
</script >
<script>
function myFunction() {
var person = prompt("Please enter your name:", "Harry Potter");
if (person == null || person == "") { demo2.innerHTML = "User cancelled the prompt."; }
else { demo2.innerHTML = "Hello " + person + "! How are you today?"; }
}
</script>
<div style="background-color: #c7ff91; height: 100px;
line-height: 100px; text-align: center; width: 300px;">
測試文字垂直置中
</div>
<p>1234</p>
<center>
<p>5678</p>
</center>
1234
5678
<marquee direction="down" width="100%" height="200" behavior="alternate" >
<marquee behavior="alternate">
This text will bounce
</marquee>
</marquee>
HTML button 屬性
disabled : 不能夠動作的按鈕，僅能看不能按。
name : 按鈕的名稱 。
type : 按鈕的類型 button單純按鈕/reset清空表單/submit送出表單。
value : 就是按鈕的値 。
autofocus : 規定當頁面加載時按鈕應當自動地獲得焦點。
HTML button 事件
用來觸發某種 JavaScript 動作，例如 onclick="function ()"
onclick="{javascript}"
<button class="Bt" type="button">我是按鈕</button>
<style>
.Bt { background-color:silver;border: 3px outset #d5d5d5;
color: black; cursor: pointer; font-size: 20px; width: 150px; height:50px; }
.Bt:active {border: 5px inset #d5d5d5;}
</style>
<button class="Bt1" type="button">我是按鈕</button>
<style> .Bt1 { background-color: silver;
border-radius:50% 50% 50% 50%; border: 3px outset #d5d5d5; color:black;
cursor:pointer; font-size:20px; height:50px; width:150px;}
.Bt1:active {border: 5px inset #d5d5d5;}
</style>
<button class="Bt1" type="button">我是按鈕</button>
<button class="Bt1" type="button"><marquee scrollamount="5" width="40"><<<</marquee>按我 <marquee scrollamount="5" direction="right" width="40">>>></marquee></button>
<style>
.Bimg{
background:url( https://XXX.jpg ) no-repeat;
cursor:pointer;
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
background-position: center;
background-repeat: no-repeat;
border: 5px outset #d5d5d5;
background-size: cover;
height: 150px;width:180px }
.Bimg:active { border: 5px inset #d5d5d5; }
</style>
<button class="Bimg1" value="按我"><marquee scrollamount="40" scrolldelay="600" style="width:120px" >按我</marquee></button>
<style>
.Bimg1 {background-color: silver;
border: 3px outset #d5d5d5;
color: black;
cursor: pointer;
font-size: 20px;
height: 50px; width: 150px;}
.Bimg:active { border: 5px inset #d5d5d5; }
</style>
| 值 | 描述 |
|---|---|
| none | 此元素不會被顯示。 |
| block | 此元素將顯示為塊級元素，此元素前後會帶有換行符。 |
| inline | 默認。此元素會被顯示為內聯元素，元素前後沒有換行符。 |
| inline-block | 行內塊元素。（CSS2.1 新增的值） |
| list-item | 此元素會作為列表顯示。 |
| run-in | 此元素會根據上下文作為塊級元素或內聯元素顯示。 |
| compact | CSS 中有值 compact，不過由於缺乏廣泛支持，已經從 CSS2.1 中刪除。 |
| marker | CSS 中有值 marker，不過由於缺乏廣泛支持，已經從 CSS2.1 中刪除。 |
| table | 此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有換行符。 |
| inline-table | 此元素會作為內聯表格來顯示（類似 <table>），表格前後沒有換行符。 |
| table-row-group | 此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。 |
| table-header-group | 此元素會作為一個或多個行的分組來顯示（類似 <thead>）。 |
| table-footer-group | 此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。 |
| table-row | 此元素會作為一個表格行顯示（類似 <tr>）。 |
| table-column-group | 此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。 |
| table-column | 此元素會作為一個單元格列顯示（類似 <col>） |
| table-cell | 此元素會作為一個表格單元格顯示（類似 <td> 和 <th>） |
| table-caption | 此元素會作為一個表格標題顯示（類似 <caption>） |
| inherit | 規定應該從父元素繼承 display 屬性的值。 |
<a id="div1"> <div id="div2"> <p id="Myid" onclick="Fparent(this)"></p> </div> </a> |
| |
| <div id="Cdiv"> |
