@[TOC]((HTML新手入门——html初步(二))

表单

<form action="" method="GET"></form>

属性

action

表示提交服务器的地址，跳转页面，若省略action属性，则会默认设置为当前页面

method

提交数据方式
get：请求参数在地址栏可见，长度受限
post：请求参数不可见（安全性高），长度没有限制

元素

input标签

可通过设置type属性来选择不同的表单类型

文本输入框

姓名：<input type="text" name="" id="" >

单选按钮
用name属性来进行单选框的分类
未设置name属性，选中后不能自己清除选择

    （单选）性别： 男<input type="radio" name="sex" value="boy" checked> 女<input type="radio" name="sex" value="gril"><br>（多选）选项： 二氧化碳<input type="radio"  value="CO2" > 氧气<input type="radio"  value="O2">

多个单选按钮的name属性一样时，才能实现‘单选’效果

复选框
属性checked 表示初始状态为选中,value为参数值

（复合查询）类别： <input type="checkbox" name="cost" value="cost">花销  <input type="checkbox" name="sum" value="sum">总收入

密码输入框

密码：<input type="password" >

邮件输入框
可用于邮件格式的检查，格式不规范时提交表单时会提示出错

邮件输入框 <input type="email">

日期选择框

日期选择框 <input type="date" >

月份 type=“month”

月份 <input type="month" >

重置按钮 type=“reset”，可初始化表单数据

重置按钮 <input type="reset" >

提交按钮 type=“submit”

提交 <input type="submit" >

颜色选择器 type=“color”

颜色选择 <input type="color">

数字选择框 type=“number”

数字选择 <input type="number" >

普通按钮 type=“button”,与button标签的区别在于，不可嵌入元素

普通按钮 <input type="button" value="普通按钮" >

select标签

下拉选择框,用option标签定义下拉选项，但提交的数据只与其属性值value有关

选择城市<select><option value="shanghai">上海</option><option value="beijing">北京</option><option value="chengdu">成都</option></select>

textarea标签

多行的文本框,cols 文本列数,rows 文本行数

这是一个多行的文本框<textarea name="" id="" cols="30" rows="10"></textarea>

button标签

可嵌套其他的标签,通过type设置按钮的样式:submit 提交按钮、reset 重置按钮、button 普通的按钮（须配以onclick事件使用才有效果）

 <button type="button">button</button><button type="menu">menu</button><button type="reset">reset</button><button type="submit">submit</button><button><h2>H2_button</h2></button>

表单实例

制作个人简历

点此处进行跳转

表格

 开始标签 <table>表格标题 <caption>表头 <th>行 <tr>定义单元格 <td>单元格合并列合并：colspan行合并：rowspan设置宽高width 设置宽度height 设置高度

有关行列合并，详见表单实例点此处进行跳转

<table border="1px" bordercolor="#000000" cellspacing="0px" ><!-- 标题 --><caption><h2>小说排行榜</h2></caption><!-- 表头 --><tr><th style="width: 50px;">排名</th><th style="width: 60px;">关键词</th><th>趋势</th><th style="width: 80px;">今日搜索</th><th style="width: 100px;">最近七日</th><th style="width: 140px;">相关链接</th></tr><!-- 第一行 --><tr><td>1</1d><td>鬼吹灯</td><td><img src="素材\images\up.jpg" alt="上升"></td><td>356</td><td>3560</td><td><a href="https://tieba.baidu.com/">贴吧</a><a href="https://image.baidu.com/">图片</a><a href="https://baike.baidu.com/">链接</a></td></tr><!-- 第二行 --><tr><td>1</1d><td>鬼吹灯</td><td><img src="素材\images\down.jpg" alt="下降"></td><td>356</td><td>3560</td><td><a href="https://tieba.baidu.com/">贴吧</a><a href="https://image.baidu.com/">图片</a><a href="https://baike.baidu.com/">链接</a></td></tr><!-- 第三行 --><tr><td>1</td><td>鬼吹灯</td><td>1</td><td>356</td><td>3560</td><td><a href="https://tieba.baidu.com/">贴吧</a><a href="https://image.baidu.com/">图片</a><a href="https://baike.baidu.com/">链接</a></td></tr></table>

列表

有序列表

使用有序的数字/字母/罗马数字行进标记

通过属性type选择标记类型：
1 : 数字（默认）
A/a：大写/小写字母
I/i：大小/小写罗马数字

     <h2>搜索引擎排名</h2><ol type="1"><li>Google</li><li>Baidu</li><li>Bing</li><li>Sogou</li></ol>

搜索引擎排名

Google
Baidu
Bing
Sogou

无序列表

使用相同的特殊符号进行标记

通过属性type选择标记类型：
disc: （默认）实体圆心
square：实体方心
circle：空心圆

<h2>软件编程语言</h2><ul type="disc"><li>Java</li><li>C++</li><li>Python</li><li>JavaScript</li></ul>

软件编程语言

Java
C++
Python
JavaScript

自定义列表

    <dl> 开始标签<dt>列表项标签<dd>列表定义标签

        <h2>健康食品</h2><dl><dt>水果</dt><dd>苹果</dd><dd>香蕉</dd><dt>蔬菜</dt><dd>西兰花</dd><dd>菠菜</dd></dl>

健康食品

水果: 苹果; 香蕉
蔬菜: 西兰花; 菠菜

附件:

<div style="display:flex;justify-content: center;align-items: center;"><form action=""><table border="1px" bordercolor="#000000" cellspacing="0px"><caption><h3>个人简历</h3></caption><!-- 第一行 --><tr><td style="text-align: center; width: 80px;">姓名</td><td style="width: 80px;text-align: center;"><input type="text" name="name" id="name" style="width: 90%;text-align: center;" ></td><td style="text-align: center; width: 80px;">性别</td><td style="width: 80px;text-align: center;"><input type="text" name="sex" id="sex" style="width: 90%;text-align: center;" ></td><td style="text-align: center; width: 80px;">出生年月</td><td style=" width: 80px;text-align: center;"><input type="text" name="birthday" id="birthday" style="width: 90%;text-align: center;" ></td><td rowspan="4" style="width: 90px;vertical-align: top;"><input type="file" name="picture" id="picture" style="width: 90%;"></td></tr><!-- 第二行 --><tr><td style="width: 80px; text-align: center;">民族</td><td style="width: 80px;text-align: center;"><input type="text" name="nation" id="nation" style="width: 90%;text-align: center;"></td><td style="text-align: center; width: 80px;">政治面貌</td><td style="width: 80px;text-align: center;"><input type="text" name="face" id="face" style="width: 90%;text-align: center;"></td><td style="text-align: center; width: 80px;">身高</td><td style="width: 80px;text-align: center;"><input type="text" name="height" id="height" style="width: 90%;text-align: center;"></td></tr><!--  --><tr><td style="width: 80px; text-align: center;">学制</td><td style="width: 80px;text-align: center;"><input type="text" name="学制" id="3-1" style="width: 90%;text-align: center;"></td><td style="text-align: center; width: 80px;">学历</td><td style="width: 80px;text-align: center;"><input type="text" name="学历" id="3-2" style="width: 90%;text-align: center;"></td><td style="text-align: center; width: 80px;">户籍</td><td style="width: 80px;text-align: center;"><input type="text" name="户籍" id="3-3" style="width: 90%;text-align: center;"></td></tr><!--  --><tr><td style="width: 80px; text-align: center;">专业</td><td style="width: 80px;text-align: center;"><input type="text" name="专业" id="4-1" style="width: 90%;text-align: center;"></td><td colspan="2" style="text-align: center; width: 160px;">毕业学校</td><td colspan="2"style="width: 160px;text-align: center;"><input type="text" name="毕业学校" id="4-2" style="width: 95%;text-align: center;"></td></tr><!--  --><tr><th colspan="7" style="width: 570px;">技能、特长或爱好</th></tr><!--  --><tr><td style="width: 80px; text-align: center;">外语等级</td><td colspan="2" style="width: 160px;text-align: center;"><input type="text" name="外语等级" id="5-1" style="width: 95%;text-align: center;"></td><td style="text-align: center; width: 80px;">计算机</td><td colspan="3" style="width: 250px;text-align: center;"><input type="text" name="计算机" id="5-2" style="width: 97%;text-align: center;"></td></tr><!--  --><tr><td colspan="7" style="text-align: center;width: 560px;">个人履历</td></tr><!--  --><tr><td style="width: 80px; text-align: center;">时间</td><td colspan="2" style="width: 160px;text-align: center;">单位</td><td colspan="4" style="width: 320px;text-align: center;">经历</td></tr><!--  --><tr><td style="width: 80px;text-align: center;"><input type="text" name="时间1" id="6-1" style="width: 90%;text-align: center;"></td><td colspan="2" style="width: 160px;text-align: center;"><input type="text" name="单位1" id="6-2" style="width: 95%;text-align: center;"></td><td colspan="4" style="width: 330px;text-align: center;"><input type="text" name="经历1" id="6-3" style="width: 97%;text-align: center;"></td></tr><!--  --><tr><td style="width: 80px;text-align: center;"><input type="text" name="时间2" id="7-1" style="width: 90%;text-align: center;"></td><td colspan="2" style="width: 160px;text-align: center;"><input type="text" name="单位2" id="7-2" style="width: 95%;text-align: center;"></td><td colspan="4" style="width: 330px;text-align: center;"><input type="text" name="经历2" id="7-3"style="width: 97%;text-align: center;"></td></tr><!--  --><tr><td style="width: 80px;text-align: center;"><input type="text" name="时间3" id="8-1" style="width: 90%;text-align: center;"></td><td colspan="2" style="width: 160px;text-align: center;"><input type="text" name="单位3" id="8-2" style="width: 95%;text-align: center;"></td><td colspan="4" style="width: 330px;text-align: center;"><input type="text" name="经历3" id="8-3" style="width: 97%;text-align: center;"></td></tr><!--  --><tr><td colspan="7" style="text-align: center;width: 570px;">联系方式</td></tr><!--  --><tr><td style="text-align: center; width: 80px;">通信地址</td><td colspan="2" style="width: 160px;text-align: center;"><input type="text" name="通信地址" id="9-1" style="width: 95%;text-align: center;"></td><td style="text-align: center; width: 80px;">联系电话</td><td colspan="3"style="width: 250px;text-align: center;"><input type="text" name="联系电话" id="9-2" style="width: 97%;text-align: center;"></td></tr><!--  --><tr><td style="text-align: center; width: 80px;">E-mail</td><td colspan="2" style="width: 160px;text-align: center;"><input type="text" name="E-mail" id="10-1" style="width: 95%;text-align: center;"></td><td style="text-align: center; width: 80px;">邮编</td><td colspan="3" style="width: 250px;text-align: center;"><input type="text" name="邮编" id="10-2" style="width: 97%;text-align: center;"></td></tr><!--  --><tr><td colspan="7" style="text-align: center;width: 570px;">自我评价</td></tr><tr><td colspan="7" style="text-align: center; width: 570px;"><textarea name="自我评价" id="11" cols="36" rows="16" style="width:98%;">&emsp;&emsp;</textarea></td></tr></table></form></div>

HTML新手入门（二）相关推荐

Python+Opencv图像处理新手入门教程(三)：阈值与二值化
一步一步来吧上一节: Python+Opencv图像处理新手入门教程(二):颜色空间转换,图像大小调整,灰度直方图 1.Intro 今天这节我们主要研究利用阈值处理图像.例如对于输入图像: 如何做一 ...
Python+Opencv图像处理新手入门教程(二)：颜色空间转换，图像大小调整，灰度直方图
一步一步来吧上一节:Python+Opencv图像处理新手入门教程(一):介绍,安装与起步 1.什么是图像对于计算机而言,图像的本质是一个由像素点构成的矩阵. 例如我们用肉眼很容易分辨一辆汽车的后 ...
3D游戏建模新手入门到就业，高效学习的十二个步骤
3D游戏建模师在游戏制作中,相当于游戏的造型师,游戏的建筑.人物.坐骑.怪物.山水等等,都需要3D游戏建模师来建模,构建整个游戏的世界. 对于热爱游戏的朋友来说,肯定对游戏内的美术有很多自己的想法. ...
新手入门教程，从0开始入手APIcloud（二）
前面一篇主要讲了项目的创建和布局方式.总结一下APP的布局方式最佳为win+frame,多写个文件多弄点优化才能让你的APP流畅度提高. 这篇主要来讲一下模块的引入.服务器数据对接及APP数据存储方式 ...
Charles网络抓包新手入门教程-(二)软件配置与环境安装（ios14-IOS系统安装配置）
目录一.环境配置二.开启电脑代理设置三.给IPhone手机设置代理服务器四.Iphone手机下载并信任证书五.Charles抓取手机数据包六.总结一.环境配置 1.Win10系统 2.C ...
Windchill 二次开发新手入门常用的API
Windchill_二次开发新手入门常用的API 1.根据零件名称/编码得到该零件 wt.clients.prodmgmt.WTPartHelper.findPartByName(name) ; ...
Python爬虫新手入门教学（二十）：爬取A站m3u8视频格式视频
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 前文内容 Python爬虫新手入门教学(一):爬取豆瓣电影排行信息 Python爬虫新手入门 ...
openGl新手入门学习笔记（二）下载glew，配置glew的环境与glew的初始化
这里是一个想要入行游戏行业的平平无奇大学生,希望能够通过写博客来巩固自己学的知识. 一.现代OpenGl 在"openGl新手入门学习笔记(一)"里提到了古典openGl(旧版op ...
SEO新手入门系列2022（二）：SEO 101
这是<SEO新手入门系列教程>的第二篇文章,一看标题就应该清楚这篇文章讲的是SEO基础知识,没有任何高大上的东西,如果对SEO基本概念有了解的朋友可以跳过不需要看,但是如果你是半路出家的S ...

HTML新手入门（二）

表单

属性