从建站到拿站 -- HTML和CSS基础

简介: 从建站到拿站 -- HTML和CSS基础

一、Form表单简介


表单是允许用户在表单中输入内容,比如用户名和密码,并将信息提交到服务器


二、简单表单


action:将输入框的内容提交到那服务器


method:提交方式,GET方式(有长度限制)和POST方式


<!DOCTYPE html>  <!-- 有助于浏览器中正确显示网页 -->


<html>  <!-- html页面开始标签 -->


<head>


<meta charset="UTF-8">  <!-- UTF-8编码  -->


<title>登录</title> <!-- 标签页显示的内容 -->


</head>


<body style="text-align:center;">


请输入用户名和密码


<form action="bucuo.php" method="get" target="_blank">


用 户 名: <input type="text" name="user">


密    码:<input type="password" name="pass1">


<input type="reset">


<input type="submit" name="submit" value="登录">


</form>


</body>


</html> <!-- html页面结束标签 -->


0a2653c851af460fa595bd959398a8f1.png


三、相关标签介绍


1、input标签


输入框和密码框


用 户 名:<input type="text" name="user">


密    码:<input type="password" name="pass1">


单选按钮


性    别:<input type="radio" name="sex1">男<input type="radio" name="sex2">女


多选按钮


爱    好:<input name="cg" type="checkbox">唱歌<input name="tw" type="checkbox">跳舞<input name="kdy" type="checkbox">看电影


文件上传按钮


头像上传:<input type="file" name="tx">


重置和提交按钮


<input type="reset">


<input type="submit" name="submit" value="提交">


2、textarea标签,文本域,可以输入多行内容


头像上传:<input type="file" name="tx">


0eacb84100b54626af849e6b562bf92a.png


3、iframe标签,内联框架,可以理解为在一个网页内又镶嵌了一个网页


src:设置框架内默认显示的网页


width:设置框架的宽度


frameborde:设置框架是否有边框


name:设置框架的标识名


scrolling:设置滚动条



<a href="http://192.168.1.129/html/zc.html" target="ay"> 注册</a>


<a href="http://192.168.1.129/html/dl.html" target="ay"> 登录</a>


<iframe src="http://www.baidu.com" name="ay" width="100%" frameborder="0"><iframe>


0a2653c851af460fa595bd959398a8f1.png0eacb84100b54626af849e6b562bf92a.png2d65d23f6d4748949b924e4057485923.png


作业要求:新建两个HTML页面,一个注册页面,一个登录页面


禁止非法,后果自负


目录
相关文章
|
19天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
63 0
|
23天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
25天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】Animated Navigation
【HTML+CSS+JavaScript】Animated Navigation
12 0
|
25天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】animated-countdown
【HTML+CSS+JavaScript】animated-countdown
13 0
|
25天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】3d-boxes-background
【HTML+CSS+JavaScript】3d-boxes-background
11 0
|
26天前
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
|
26天前
|
前端开发 数据安全/隐私保护
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
|
26天前
|
前端开发
CSS:一篇教会你用CSS装饰你的HTML文本
CSS:一篇教会你用CSS装饰你的HTML文本
|
29天前
|
前端开发 JavaScript 容器
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
34 0
|
2月前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段