从建站到拿站 -- 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页面结束标签 -->

image.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">

image.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>

 

image.png

 

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

禁止非法,后果自负

目录
相关文章
|
8天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
19 0
|
3天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
|
4天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
12天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
12 0
|
28天前
|
前端开发 容器 内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫,通过HTML结构和CSS样式逐步构建叮当猫的各个部位,如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外,还添加了眼珠的动画效果,让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习,以提升动态图形创作技能。
16 0
使用CSS3画出一个叮当猫HTML源码
|
1月前
使用html+css制作一个发光立方体特效
使用html+css制作一个发光立方体特效
20 2
使用html+css制作一个发光立方体特效
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。