<!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基础笔记-表单、链接的更多相关文章

  1. Bootstrap<基础六> 表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...

  2. 9. Javascript学习笔记——表单处理

    9. 表单处理 9.1 表单的基础知识 ///表单用 <form> 元素表示,对应的是 HTMLFormElement 类型,继承自 HTMLElement. //属性:action.me ...

  3. 玩转Django2.0---Django笔记建站基础七(表单与模型)

    第七章 表单与模型 表单是搜集用户数据信息的各种表单元素的集合,作用是实现网页上的数据交互,用户在网站输入信息,然后提交到网站服务器端进行处理(如数据录入和用户登录.注册等). 用户表单是web开发的 ...

  4. Django笔记 —— 表单（form）

    最近在学习Django,打算玩玩网页后台方面的东西,因为一直很好奇但却没怎么接触过.Django对我来说是一个全新的内容,思路想来也是全新的,或许并不能写得很明白,所以大家就凑合着看吧- 本篇笔记(其 ...

  5. 【ASP.NET 基础】表单和控件

    1.HTML表单的提交方式 对于一个普通HTML表单来说,它有两个重要的属性:action 和 method.action属性指明当前表单提交之后由哪个程序来处理,这个处理程序可以是任何动态网页或者 ...

  6. html基础之 表单提交方法

    最普通最常用最一般的方法就是用submit type..看代码: <form name=”form” method=”post” action=”#"> <input ty ...

  7. php学习笔记——表单

    13.表单 1)GET vs. POST GET 和 POST 都创建数组(例如,array( key => value, key2 => value2, key3 => value ...

  8. <玩转Django2.0>读书笔记:表单

    1. 表单字段 参考: 官方文档 Django表单字段汇总 2. 表单代码示例(forms.Form) # form.py代码 # 获取数据库数据 choices_list = [(i+1,v['ty ...

  9. bootstrap学习笔记(表单)

    1.基础表单 :对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制. fieldset { min-width: 0 ...

随机推荐

  1. 自制“低奢内”CSS3登入表单，包含JS验证，请别嫌弃哦。

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...

  2. 走进javascript——被忽视的DOM方法和属性

    isEqualNode() isEqualNode方法可以用来判断两个DOM节点是否相同,给我的第一感觉是没用,因为两个DOM的比较很容易让人想成是字符串的比较,心想直接用两个等号不就可以了吗,但马上 ...

  3. Leetcode 763. Partition Labels

    思路:动态规划.对于属于coins的coin,只要知道amount-coin至少需要多少个货币就能表示,那么amount需要的货币数目=amount-coin需要的货币数目+1:如果amount-co ...

  4. Java并发编程-ReentrantLock源码分析

    一.前言 在分析了 AbstractQueuedSynchronier 源码后,接着分析ReentrantLock源码,其实在 AbstractQueuedSynchronizer 的分析中,已经提到 ...

  5. Java @Repeatable

    查看@PropertySource注解时候,发现了@Repeatable,从来没见过的注解,学习了下: 首先介绍下@Repeatable注解: JDK1.8出现的,作用是解决一个类上不能标注重复的注解 ...

  6. dom操作------获取元素的若干方法

    // 1,getElementById:返回元素节点document.getElementById(); // 2,getElementsByClassName:返回HTMLCollection对象( ...

  7. 几句话的事儿，LogBack急速使用

    1.说说logback 在java的世界里面好像从来只有log4j,因为它是在太有名气了.说实话,我也没觉得它那里不好,至少在我自己的项目里,它工作的好好的.但是主流有一种声音,在慢慢的放弃它,最始作 ...

  8. [转]sp_OACreate WriteLine Writing nvarchar 中文汉字 非乱码to a text file

    本文转自:https://stackoverflow.com/questions/48135889/writing-nvarchar-to-a-text-file According to the S ...

  9. Repeater控件，判断最少选择一行记录

    本演示中,教会大家使用jQuery来判断Repeater控件,最少选择一行记录. 在Repeater控件中,每行第一列放置一个CheckBox,然后在Repeater控件之外,放置一个Button按钮 ...

  10. VS - 未能找到与解决方案关联的源代码管理提供程序

    今天打开一个解决方案,Visual Studio出现了提示“未能找到与解决方案关联的源代码管理提供程序”,如图1所示:  图1 错误提示 单击“否”,发现解决方案已经不接受TFS的管理了. 注册表中H ...