<!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基础笔记-表单、链接
猜你喜欢
转载自www.cnblogs.com/Lunix-touch/p/9785833.html
今日推荐
周排行