html基礎筆記-表單、鏈接
阿新 • • 發佈：2018-10-14
包含 color ans 自動刷新 cti 間隔 下拉 htm cap
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 字符編碼UTF-8 --> <meta http-equiv="refresh" content="100"> <!-- 自動刷新，間隔時間為100s --> <title>HTML測試界面</title> <script> function answer() { //嵌入js腳本 x = document.getElementById("problem") if(x.innerHTML=="答案：藍鯨") { //判斷 id 的內容並改變內容 x.innerHTML="問題：世界上最大的哺乳動物是什麽？" x.style.color="#5566FF" } else { document.getElementById("problem").innerHTML="答案：藍鯨" x.style.color="#FF0000" } } </script> <style> /*重寫標簽類 */ p{ color: #5566FF; } </style> </head> <!-- 背景固定 --> <body background="../img/backgroud.jpg" style="background-attachment: fixed;"><center> <!-- 整個body布局 --> <h1>This is title</h1><hr> <!-- 標題h1 --> <p>This is content</p> <!-- 段落 --> <img src="../img/up.jpg" width=‘120‘ height="120"/><br> <!-- 添加圖片，使用相對路徑，包括定義尺寸等 --> <a href="http://www.baidu.com">百度一下</a><br> <!-- 添加網絡鏈接，本窗口刷新 --> <a href="http://www.baidu.com" target="_blank"> <!-- 添加鏈接，開啟新窗口 --> 百度一下（新窗口）</a><br><br> <b>加粗字體</b><br> <!-- 字體模式，字體加粗 --> <i>傾斜字體</i> <!-- 傾斜字體 --> <div style="opacity: 0.3; position: absolute;left: 400px; top: 200px; background-color: #ffffff;">Hello World!</div> <!-- div控件 --> <h1 style="font-size: 30px;">World</h1> <h2 style="text-align: right;">字體在右邊對齊</h2> <!-- 自定義形式 --> <img src="../img/up1.jpg" alt="成績圖標" width="50px"><br> <!-- alt：當讀取圖片失敗的時候顯示“文字” --> <table border="3"> <!-- table表格，border：外邊框厚度 --> <caption>介紹 細節</caption> <!-- 表格標題 --> <tr> <th>姓名</th> <!-- th：標題列， tr：段落列 --> <th>外號</th> </tr> <tr> <td>小明</td> <td>明明</td> </tr> </table></center> <ul> <!-- 無序列表 --> <li>時間</li> <li>地點</li> </ul> <ol> <!-- 有序列表 --> <li>時間</li> <li>地點</li> </ol> <div style="color:#0000FF; position: absolute; left:100px;top:100px"> <!-- div控件中可包含一部分東西 --> <h3>這是一個在 div 元素中的標題。</h3> <p>這是一個在 div 元素中的文本。</p> </div> <div style="color #0000FF; position: absolute; left:700px; top:400px"> <!-- 如div中包含表單 --> <form action="http://www.baidu.com" method="post"> 賬號：<input type="text" name="user"><br> <!-- 文本框 --> 密碼：<input type="password" name="pwd"><br> <!-- 密碼框 --> <input type="radio" name="sex" value="male">男生 <!-- 單選框 --> <input type="radio" name="sex" value="female">女生<br> <input type="checkbox" name="loving" value="book">看書 <!-- 多選框 --> <input type="checkbox" name="loving" value="run">跑步<br> <select> <!-- 下拉選框 --> <option value="time">時間</option> <option value="day">日期</option> </select><br> <input type="reset"> <input type="submit" value="登陸"> <!-- 提交按鈕 --> </form> </div> <div style="position:absolute; left:900px; top:100px"> <!-- 使用script腳本實現控件改變顏色及字體大小 --> <h2 id="test">顏色測試案例</h2> <script> function chagecolor() { x = document.getElementById("test") x.style.color = "#FF0000" x.style.fontSize="36px" } </script> <button type="button" onclick="chagecolor()">改變</button> </div> <div style="position:absolute; left:900px; top:240px"> <p id="problem">問題：世界上最大的哺乳動物是什麽？</p> <button type="button" onclick="answer()">答案</button> <!-- 點擊按鈕則會觸發answer（） --> </div> <!--<iframe src="http://fanyi.baidu.com/" style="width: 600px; height: 600px;"></iframe> <!--內嵌框架 --> </body> </html>
html基礎筆記-表單、鏈接