<!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. Element ui tree树形控件获取当前节点id和父节点id

    低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...

  2. vue子组件传参给父组件

    关于父组件传参给子组件,可以看我另一篇文章 教程开始: 我们要实现的效果是:在子组件的Input框输入,父组件中实时更新显示.(也就是把子组件中的数据传给父组件) 一.子组件代码 template部分 ...

  3. Spring开发步骤

    1) 源码, jar文件:此处用的是spring-framework-3.2.5.RELEASE commons-logging-1.1.3.jar                日志 spring- ...

  4. DataSet 多表关系

    protected void Page_Load(object sender, EventArgs e) { string connectionString = @"Data Source= ...

  5. 并发编程之 CAS 的原理

    前言 在并发编程中,锁是消耗性能的操作,同一时间只能有一个线程进入同步块修改变量的值,比如下面的代码 synchronized void function(int b){ a = a + b: } 如 ...

  6. Spring Security认证配置(一)

    学习本章之前,可以先了解下上篇 Spring Security基本配置. 本篇主要讲述Spring Security基于表单,自定义用户认证配置(上篇中的配置,本篇将不再阐述).一共分为三步: 1.处 ...

  7. VS2010 的 HTML 5验证

    前言 VS2010的HTML验证中,没有我们的HTML 5,网上我看到使用vs2010 sp1补丁的方法,但是我的安装不了,后来发现下面的方法,让你的vs2010具有html5的验证功能. 下载这个文 ...

  8. 15.C++-操作符重载、并实现复数类

    首先回忆下以前学的函数重载 函数重载 函数重载的本质为相互独立的不同函数 通过函数名和函数参数来确定函数调用 无法直接通过函数名得到重载函数的入口地址 函数重载必然发生在同一个作用域中 类中的函数重载 ...

  9. Android自定义Aop的Gradle Plugin

    [上一篇文章]中讲解了如何在Android使用AOP,会发现在Gradle配置aop会比较麻烦,每个module使用了aop都需要配置.接下来看如何简化配置. 1.创建Module 首先,需要建立一个 ...

  10. RabbitMQ安装教程

    最近几天在学习Spring Cloud,在学习Spring Cloud Config配置刷新使用Spring Cloud Bus时,其中用到消息代理组件RabbitMQ,在安装RabbitMQ的过程查 ...