<!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. vue实现城市列表选择

    成果展示 最后的成果就是下面所展示的内容,因为gif图没有做,只能截图所展示,接下来,会带着大家一步一步的完成下面功能,脚手架搭建和node安装在本次案例不会讲解,如果了解,可以在我的博客园找到有详细 ...

  2. Charles抓包之HTTPS抓包配置

    访问我的博客 前言 由于工作中经常需要配置客户端开发人员对接接口,有时候对接地不太顺利,因此需要经常性地对公司 APP 进行抓包看请求,找出具体的原因. 在公司中开发使用的 Windows 台式电脑, ...

  3. Spring cloud的Maven插件（二）：run目标

    简介 Spring Boot Maven Plugin插件提供spring boot在maven中的支持.允许你打包可运行的jar包或war包. 插件提供了几个maven目标和Spring Boot ...

  4. 开发一款即时通讯App，从这几步开始

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云视频发表于云+社区专栏 关注公众号"腾讯云视频",一键获取 技术干货 | 优惠活动 | 视频方案 " ...

  5. UVa 1572 Self-Assembly （拓扑排序）

    题目链接: https://cn.vjudge.net/problem/UVA-1572 Automatic Chemical Manufacturing is experimenting with ...

  6. UIKit 框架之UIView一

    - (id)initWithFrame:(CGRect)aRect //通过一个矩形对象初始化 Configuring a View’s Visual Appearance //配置视觉展示 @pro ...

  7. c# winform 获取当前程序运行根目录

    1 // 获取程序的基目录. 2 System.AppDomain.CurrentDomain.BaseDirectory 3 4 5 // 获取模块的完整路径. 6 System.Diagnosti ...

  8. 表格行mouse经过时高亮显示

    昨天有解决网友一个问题<Repeater控件添加onmouseover和onmouseout事件>http://www.cnblogs.com/insus/p/3714013.html 这 ...

  9. JavaScript学习总结(四)——this、原型链、javascript面向对象

    一.this 在JavaScript中this表示:谁调用当前函数this就指向谁,不知道调用者时this指向window. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是 ...

  10. .NET平台开源文档与报表处理组件包括Execel PDF Word等

    在前2篇文章这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧 和这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,大伙热情高涨.再次拿出自己的私货,在.NET平台 ...