<!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 Drop-Shadows效果制作教程分享

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器 演示地址 演示地址 Drop-Shadow效果,其实就是大家熟 ...

  2. 详解C#泛型（三）

    一.前面两篇文章分别介绍了定义泛型类型.泛型委托.泛型接口以及声明泛型方法: 详解C#泛型(一) 详解C#泛型(二) 首先回顾下如何构建泛型类: public class MyClass<T&g ...

  3. docker（三）docker镜像和镜像发布方法

    一.从公网docker hub 拉取image ~ # 搜索docker search centos~ » docker pull centos admin@steven- Using default ...

  4. Hibernate常出现的报错

    刚开始学习hibernate的时候,第一次就遇到了空指针异常,结果是我的配置文件处理错误(主要是数据库表的字段与就java实体类的属性名单词写错了):一般是报空指针异常的话,多半是配置文件的问题. 但 ...

  5. Spring IOC 源码之ResourceLoader

    转载自http://www.blogjava.net/DLevin/archive/2012/12/01/392337.html 在<深入Spring IOC源码之Resource>中已经 ...

  6. superset----缓存之redis

    一.概述 Superset使用Flask-Cache进行缓存,Flask-Cache支持redis,memcached,simplecache(内存),或本地文件系统)等缓存后端,如果你打算使用mem ...

  7. [NOI 2015]寿司晚宴

    Description 题库链接 给定 \(2\sim n\) 一共 \(n-1\) 个数字,第一个人选择一些数字,第二个人选择一些数字,要求第一个人选的任意一个数字和第二个人选择的任意一个数字都互质 ...

  8. Git 使用SSH密钥操作

    git使用ssh密钥 git支持https和git两种传输协议,github分享链接时会有两种协议可选: git协议链接图例 : ↓ https协议链接图例:↓ git使用https协议,每次pull ...

  9. 深入出不来nodejs源码-内置模块引入初探

    重新审视了一下上一篇的内容,配合源码发现有些地方说的不太对,或者不太严谨. 主要是关于内置模块引入的问题,当时我是这样描述的: 需要关注的只要那个RegisterBuiltinModules方法,从名 ...

  10. css span宽度和css span高度成功设置经验篇

    我们介绍两种情况下的对span宽度高度样式成功设置. 为了观察和实践CSS SPAN宽度和span高度成功设置,DIVCSS5新建一个css命名为“.divcss5”的盒子,设置css宽度为150px ...