html基础笔记-表单、链接
<!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基础笔记-表单、链接的更多相关文章
- Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...
- 9. Javascript学习笔记——表单处理
9. 表单处理 9.1 表单的基础知识 ///表单用 <form> 元素表示,对应的是 HTMLFormElement 类型,继承自 HTMLElement. //属性:action.me ...
- 玩转Django2.0---Django笔记建站基础七(表单与模型)
第七章 表单与模型 表单是搜集用户数据信息的各种表单元素的集合,作用是实现网页上的数据交互,用户在网站输入信息,然后提交到网站服务器端进行处理(如数据录入和用户登录.注册等). 用户表单是web开发的 ...
- Django笔记 —— 表单(form)
最近在学习Django,打算玩玩网页后台方面的东西,因为一直很好奇但却没怎么接触过.Django对我来说是一个全新的内容,思路想来也是全新的,或许并不能写得很明白,所以大家就凑合着看吧- 本篇笔记(其 ...
- 【ASP.NET 基础】表单和控件
1.HTML表单的提交方式 对于一个普通HTML表单来说,它有两个重要的属性:action 和 method.action属性指明当前表单提交之后由哪个程序来处理,这个处理程序可以是任何动态网页或者 ...
- html基础之 表单提交方法
最普通最常用最一般的方法就是用submit type..看代码: <form name=”form” method=”post” action=”#"> <input ty ...
- php学习笔记——表单
13.表单 1)GET vs. POST GET 和 POST 都创建数组(例如,array( key => value, key2 => value2, key3 => value ...
- <玩转Django2.0>读书笔记:表单
1. 表单字段 参考: 官方文档 Django表单字段汇总 2. 表单代码示例(forms.Form) # form.py代码 # 获取数据库数据 choices_list = [(i+1,v['ty ...
- bootstrap学习笔记(表单)
1.基础表单 :对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制. fieldset { min-width: 0 ...
随机推荐
- Hibernate的Api以及三种查询方式
Hibernate Api |-- Configuration 配置管理类对象 config.configure(); 加载主配置文件的方法(hibernate.cfg.xml) ...
- Yarn和Mesos:资源管理调度平台
目前得分布式系统中,对于资源管理都采用动态资源划分来取代静态资源划分.它有如下好处: 集群资源利用率高 增加数据共享能力,可以多种计算框架公用一份分布式存储数据. 资源管理抽象模型 概念模型 常见得资 ...
- “网红架构师”解决你的Ceph 运维难题
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由Tstack发表于云+社区专栏 本文为长篇连续剧,将分多个篇幅发表,主要介绍了从动手部署环境到后期运营故障处理过程中常见的问题,内容由 ...
- 笨方法学python学习笔记
创建于:2016-02-29 更新于:03-02 python版本:2.7 %r 用来做 debug 比较好,因为它会显示变量的原始数据(raw data),而其它的符号则是用来向用户展示输出的: 每 ...
- Docker 入门 之基本命令
3 Docker 入门 首先确保docker 已成功安装在Linux 或windows 系统中 我们可以使用 docker info 查看docker是否成功安装和正常运行 运行我们第一个docker ...
- 微信开发(一)基于Wx-java的微信分享功能
最近在做微信服务号开发,简单总结一下,便于自己学习积累和分享给大家: 环境介绍: Spring+ Spring MVC +Mybatis 开发语言: JAVA 微信公众平台的开发中,微信只公布了一个基 ...
- [转]Easily Add a Ribbon into a WinForms Application
本文转自:https://www.codeproject.com/articles/364272/easily-add-a-ribbon-into-a-winforms-application-cs ...
- Book Contents Reviews Notes Errata Articles Talks Downloads Resources Code Formatter Cover of C# in Depth Order now (3rd edition) Implementing the Singleton Pattern in C#
原文链接地址: http://csharpindepth.com/Articles/General/Singleton.aspx#unsafe Implementing the Singleton P ...
- SQL Server无法打开物理文件,操作系统错误 5:"5(拒绝访问。)的解决办法
在新装的系统中使用SQL Server附加以前的数据库的时候可能会遇到“无法打开物理文件,拒绝访问”的错误,如下图: 解决方法为使用windows验证登录,或者更改SQL Server内置账户类型为L ...
- springboot 初识
从实用主义来学习springboot的话,那我们期望的就是首先知道 1 他是个什么东西 2 我们为什么要用他,他能带来什么样的好处 3 如何快速上手 简单来讲,springboot你可以理解成spri ...