HTML入门小实例

页面布局的三种方式:

a、TABLE布局:已过时

b、DIV+CSS:当前主流

c、HTML5布局标签:未来趋势

1、学生成绩表设计

注意:

<body>
<table height="250px" width="600" border="1" align="center" cellpadding="10" rules="all">
<caption align="top">年级成绩表</caption>
<tr bgcolor="#ccc" align="center" valign="center">
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>

2、简单的网页布局

3、简单网页框架

注意:主框架

<!DOCTYPE>
<html>
<head>
<title>HTML框架</title>
<meta charset="utf-8">
</head>
<frameset rows="90,*,90" frameborder="1" border="1">
<frame name="top" frameborder="1" src="top.html"/>
<frameset cols="20%,80%">
<frame name="left" src="left.html"/>
<frame name="right" src="right.html"/>
</frameset>
<frame name="bottom" src="bottom.html" />
</frameset>
</html>

4、表单设计

程序:

<form>
账号:<input type="text" name="name" value="请输入用户名" size="10" maxlength="5">
<br>
<br>
密码:<input type="password" name="password" size="5">
<br>
<br>
爱好:<input type="checkbox" name="tiyu" checked="checked">体育<input type="checkbox" name="changge" check="checked">唱歌
<br>
<br>
性别:<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex" checked="checked">女
<br>
<br>
自我介绍:<br>
<textarea cols="35" rows="10" name="ziwojieshao">
这里是自我介绍
</textarea>
<br>
地址:
<select name="dizhi">
<option>四川</option>
<option>北京</option>
<option>上海</option>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
</form>

时间: 2024-10-07 06:32:18

HTML入门小实例的相关文章

Socket通信入门小实例

客户端: public class Client { private int port = 8000; private String host = "localhost"; private Socket socket; public Client() throws UnknownHostException, IOException { socket = new Socket(host, port); } public void readFromUser() throws IOExcep

[转]Vue中Vuex的详解与使用(简洁易懂的入门小实例)

怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex 是一个专为 Vue.js 应用程序开发的`状态管理模式`.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 例如:你有几个数据,几个操作,在多个组件上都需要使用,如果每个组件都去调用都是写,就会很麻烦,代码又臭又长.当然 如果没有大量的操作和数据需要在多个

Flex入门(二)——Flex+BlazeDs+J2ee小实例

首先来简单介绍一下BlazeDS. BlaseDS的核心功能包括RPC Services(远程过程调用服务) 和Messaging Service(消息服务).BlazeDS是一个基于服务器的Java远程调用(remoting)和web消息传递(messaging)技术,使得后台的Java应用程序可以和运行在浏览器上的Flex应用程序能够互相通信.简单来说一个BlazeDS应用包括客户端(Flex或AIR应用程序)和一个服务端(J2EE程序).BlazeDS在期间起着承上启下的作用,Flex和B

Spring IoC、DI入门小程序

Alt+/智能提示xml配置文件节点及属性:在接口上使用Ctrl+T可以提示其实现类 一.IoC控制反转(将创建对象的权利交给spring)入门小程序 1.引入jar包 2.工程基本结构 3.新建UserService类 package hjp.spring.demo1; import org.junit.Test; public class UserService { public void addUser() { System.out.println("addUser"); } }

Flask入门小项目 - 搭建极简博客(7)

目录: Flask入门小项目 - 搭建极简博客(1)介绍与项目结构 Flask入门小项目 - 搭建极简博客(2)添加主页 Flask入门小项目 - 搭建极简博客(3)添加登录.登出功能 Flask入门小项目 - 搭建极简博客(4)添加注册功能 Flask入门小项目 - 搭建极简博客(5)添加写文章功能 Flask入门小项目 - 搭建极简博客(6)添加删除文章功能 Flask入门小项目 - 搭建极简博客(7)部署到服务器,实现外网访问 完整程序点这 零.效果 域名的话要等它备案完才能访问... 一

Netty5快速入门及实例视频教程(整合Spring)

Netty5快速入门及实例视频教程+源码(整合Spring) https://pan.baidu.com/s/1pL8qF0J 01.传统的Socket分析02.NIO的代码分析03.对于NIO的一些疑惑04.Netty服务端HelloWorld入门05.Netty服务端入门补充06.Netty客户端入门07.如何构建一个多线程NIO系统08.Netty源码分析一09.Netty源码分析二10.Netty5服务端入门案例11.Netty5客户端入门案例12.单客户端多连接程序13.Netty学习

spring+mybatis之声明式事务管理初识(小实例)

前几篇的文章都只是初步学习spring和mybatis框架,所写的实例也都非常简单,所进行的数据访问控制也都很简单,没有加入事务管理.这篇文章将初步接触事务管理. 1.事务管理 理解事务管理之前,先通过一个例子讲一下什么是事务管理:取钱. 比如你去ATM机取1000块钱,大体有两个步骤:首先输入密码金额,银行卡扣掉1000元钱:然后ATM出1000元钱.这两个步骤必须是要么都执行要么都不执行.如果银行卡扣除了1000块但是ATM出钱失败的话,你将会损失1000元:如果银行卡扣钱失败但是ATM却出

HTML小实例:通过PHP调用C++

一.在本地服务器目录下新建一个 test 文件夹,在此文件夹中新建文件: 1. cpp.html <!DOCTYPE html> <html> <head> <title>C++测试</title> </head> <body> <form method="post" action="cpp.php"> <div> <p>请测试文字,以空格分隔:&

javascript实现(分享到xxx)的小实例

javascript实现(分享到的小实例) 这个算值运动的一个实例应用吧 HTML代码: <div id="tag"> <span id="showInfo">分享到</span> </div> css代码: #tag{ height:200px; width:200px; background:green; position:absolute; top:100px; left:-200px; } #tag span{