<!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. 详解C#特性和反射（二）

    使用反射(Reflection)使得程序在运行过程中可以动态的获取对象或类型的类型信息,然后调用该类型的方法和构造函数,或访问和修改该类型的字段和属性:可以通过晚期绑定技术动态的创建类型的实例:可以获 ...

  2. Python多版本管理器-pyenv 介绍及部署记录

    一. pyenv简单介绍 在日常运维中, 经常遇到这样的情况: 系统自带的Python是2.x,而业务部署需要Python 3.x 环境, 此时需要在系统中安装多个Python版本,但又不能影响系统自 ...

  3. Golang 反射reflection

    反射reflection 反射可大大提高程序的灵活性,使得interface{}有更大的发挥余地 反射使用TypeOf和ValueOf函数从接口中获取目标对象信息 反射会将匿名字段作为独立字段(匿名字 ...

  4. ibatis in的用法

    <dynamic-mapped-statement name="queryLabelservicecodeLogSize" result-class="java.l ...

  5. （转）request.getSession()几种获取情况之间的差异

    一.三种情况 HttpSession session = request.getSession(); HttpSession session = request.getSession(true); H ...

  6. 并发编程之 线程协作工具 LockSupport

    前言 在前面的文章中,我们介绍了并发工具中的4个,Samephore,CyclicBarrier,CountDownLatch,Exchanger,但是我们漏了一个,非常的好用的工具,楼主在这里必须加 ...

  7. 24.ArrayBuffer

    ArrayBuffer ArrayBuffer ArrayBuffer对象.TypedArray视图和DataView视图是 JavaScript 操作二进制数据的一个接口.这些对象早就存在,属于独立 ...

  8. 你得学会并且学得会的Socket编程基础知识

    这一篇文章,我将图文并茂地介绍Socket编程的基础知识,我相信,如果你按照步骤做完实验,一定可以对Socket编程有更好地理解. 本文源代码,可以通过这里下载 http://files.cnblog ...

  9. 【JavaFx教程】第一部分：Scene Builder

    第一部分的主题 开始了解 JavaFX . 创建并运行一个 JavaFX 项目. 使用 Scene Builder 来设计用户界面. 使用 模型 - 视图 - 控制器(MVC)模式 构造基础的应用. ...

  10. python内置函数每日一学 -- all()

    all(iterable) 官方文档解释: Return True if all elements of the iterable are true (or if the iterable is em ...