第一次接触HTML5 CSS3
这是我第一次接触网页制作，没想到一个简简单单的网页，要想实现起来要用到很多的标签。第一次是做学生信息注册页面，用到了
- <div>分块：
<div id="学生信息注册">...</div>
- 文本、密码输入框：
<form method="post" action="学生信息注册页面">
<input type="text" name="myName">
<input type="password" name="myPass"> 注：当type="password"时，为密码输入框
- 下拉列表框(可单选也可多选）：
<label>专业：</label>
<select>
<option value="计算机科学与技术">计算机科学与技术</option>
<option value="空间信息与数学技术">空间信息与数学技术</option>
<option value="物联网工程">物联网工程</option>
<option value="电子信息科学与技术">电子信息科学与技术</option>
<option value="通信工程">通信工程</option>
<option value="遥感科学与技术">遥感科学与技术</option>
<option value="信息与计算科学">信息与计算科学</option>
</select>
当<select>开始标签改为<select multiple="multiple">时，可进行多选项 注：ctrl+选择项即可实现多项选择。
- 单选框和复选框：
单选：<input type="radio" value="男" name="性别">男 <input type="radio" value="女" name="性别">女 多选： <input type="checkbox" value="篮球" name="篮球">篮球
<input type="checkbox" value="排球" name="排球">排球
- 多行的文本域：
<textarea rows="80px" cols="30px"></textarea> 注：rows设置行数，cols设置列数。
- 上传浏览照片：
<div id="tbody">
<div >
<p>
<label>上传照片：</label>
<input type="file" id="file" class=" btn btn-default" style="height: 25px; width: 220px;text-align-last: 0;" />
<br>
</p>
</div>
一些零散的还有<br>相当于回车换行  表示空格 等等......
最后的居中对齐我采用了，加一个文本框<table>
在<style>中用table{ margin:0 auto; }实现文本框的居中对齐。
下面是实现的最后界面：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>学生信息注册页面</title><style>table,table tr th, table tr td { border:1px solid #0094ff; }table {border: 1px solid #151515} table{margin:0 auto; }</style></head><body><div id="学生信息注册"><form method="post" action="学生信息注册页面"><h1 style="font-family:'微软雅黑';font-size:25px;text-align:center;">学生信息注册</h1><br><br> <table><tr><td>姓名： <input type="text" name="myName"><br><br>性别： <input type="radio" value="男" name="性别">男 <input type="radio" value="女" name="性别">女<br><br>出生日期： <input type="text" name="myBirthday"><br><br>学校： <input type="text" name="myBirthday"><br><br><label>专业：</label> <select><option value="计算机科学与技术">计算机科学与技术</option><option value="空间信息与数学技术">空间信息与数学技术</option><option value="物联网工程">物联网工程</option><option value="电子信息科学与技术">电子信息科学与技术</option><option value="通信工程">通信工程</option><option value="遥感科学与技术">遥感科学与技术</option><option value="信息与计算科学">信息与计算科学</option></select><br><br>体育特长：<input type="checkbox" value="篮球" name="篮球">篮球 <input type="checkbox" value="排球" name="排球">排球 <input type="checkbox" value="足球" name="足球">足球 <input type="checkbox" value="游泳" name="游泳">游泳 <div id="tbody"><div ><p><label>上传照片：</label><input type="file" id="file" class=" btn btn-default" style="height: 25px; width: 220px;text-align-last: 0;" /><br></p></div>密码： <input type="password" name="myPass"><br><br>个人介绍：<textarea rows="80px" cols="30px"></textarea><br><br><input type="submit" value="提交" name="submit" /><input type="reset" value="取消" name="reset" /></td></tr></table></form></div></body>
</html>第一次接触HTML5 CSS3相关推荐
- 使用Modernizr探测HTML5/CSS3新特性
HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level.这些新技术允许我们只用HTML,CSS和JavaScr ...
- 《HTML5+CSS3网页设计入门必读》——第1章 标记简史1.1 从IETF到W3C：HTML 4的诞生过程...
本节书摘来自异步社区<HTML5+CSS3网页设计入门必读>一书中的第1章,第1.1节,作者: [英]Jeremy Keith , [美]Dan Cederholm 更多章节内容可以访问云 ...
- html5 css3在线工具,HTML5/CSS3开发辅助工具(TopStyle)
TopStyle 是一款 CSS 开发辅助工具,即 HTML5 / CSS3 编辑器,它专注于 HTML CSS 设计辅助,提供比较多的功能,如 CSS 代码检查等,据称 TopStyle 的帮助文件 ...
- 1. HTML5+CSS3
HTML5+CSS3 文章目录 HTML5+CSS3 一.HTML 1. HTML标准结构 2. 文档的使用 3. IDE 4. 实体 5. meta标签 6. 语义化标签 6.1 标题标签: 6.2 ...
- HTML5+CSS3小实例：简单又好看的加载动画效果
HTML5+CSS3做一个简单又好看的加载动画效果,一个三色圆环转动,再加圆环内部文字转动,效果虽然简单,但第一次看到还是很惊艳的,最主要一点,代码真的超简单的. 效果: 源码: <!DOCTY ...
- 前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
- html5 css 响应式_在HTML5 / CSS3中编写响应式简历
本文是我们的" Web响应式设计系列"的一部分,该系列由工具,资源和教程组成,可帮助您为所有平台的用户创建网站. 单击此处查看同一系列的更多文章. 业务部分的几乎每个人都在某个时间 ...
- HTML5+CSS3的学习(四)
HTML5+CSS3的学习(中) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
- 【翻译】使用Modernizr探测HTML5/CSS3新特性
HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level.这些新技术允许我们只用HTML,CSS和JavaScr ...
最新文章
- Linux学习进阶路线图
- ubuntu中安装hadoop集群
- 安科 OJ 1190 连接电脑 （并查集）
- 我同事吃的辅酶Q10到底有没有效果？
- 技术实践第四期｜解读移动开发者日常-性能监控平台应用
- php 添加样式,PHP实现可自定义样式的分页类
- 推荐系统中稀疏特征 Embedding 的优化表示方法
- 绝对定位的图 说明初始包含块是viewport 而不是body/html
- 关于NFSv4服务共享目录里的文件UID和GID显示为nobody的解决方法
- PHP开发Paypal支付，支付流程和接口实现方案
- Pycharm异常：selenium.common.exceptions.WebDriverException: Message: ‘geckodriver‘ execut运行项目无法打开火狐浏览器
- 遥感数据存储格式 ----BSQ、 BIL、BIP及相互转换
- 游戏模型制作的注意事项——模型规范
- 动画专业考一级计算机选什么语种,想成为一名出色的动画设计师吗?去美国纽约视觉艺术学院读计算机动画与视觉效果本科专业准没错!...
- Bootstrap3里的布局占据100%页面
- Android开发-视图view讲解
- 编译Busybox产生的两个错误
- 使用Google语音识别引擎（Google Speech API）
- SQL注入攻击的实现和防止
- JD按关键词搜索商品接口调用展示