《html基础知识》——信息调查（账号、密码、生日、性别...）

最新推荐文章于 2024-05-06 18:33:50 发布
最新推荐文章于 2024-05-06 18:33:50 发布
阅读量803 收藏 2
点赞数 1
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AZengz/article/details/108626928
版权

基础的思维导图

运用html的基础知识
①

<html>
	<head>
		<title>第一个HTML页面</title>
		<link rel="stylesheet" type="text/css" href="firstHtml.css"/>
	</head>
	<body>
		<form action="#" method="GET">
			<span>账号：</span>
			<input type="text" id="username" name="username"
			placeholder="请输入账号" autocomplete="off"/>
			<br/>
			<span>密码：</span>
			<input type="password" id="password" name="password"
			placeholder="请输入密码" />
			<br/>
			<span>生日：</span>
			<input type="date" id="birth" name="birth"/>
			<br/>
			<span>性别：</span>
			<input type="radio" id="male" name="gender" value="0" checked/>
			<label for="male">男</label>
			<input type="radio" id="famale" name="gender" value="1"/>
			<label for="famale">女</label>
			<br/>
			<span>来源：</span>
			<input type="checkbox" id="baidu" name="from" value="1"/>
			<label for="baidu">百度</label>
			<input type="checkbox" id="2345" name="from" value="2"/>
			<label for="2345">2345</label>
			<input type="checkbox" id="360" name="from" value="3"/>
			<label for="360">360</label>
			<input type="checkbox" id="sina" name="from" value="4"/>
			<label for="sina">新浪</label>
			<br/>
			<span>邮箱：</span>
			<input type="email" id="email" name="email"
			placeholder="请输入邮箱"/>
			<br/>
			<span>电话：</span>
			<input type="tel" id="tel" name="tel"
			placeholder="请输入联系方式"/>
			<br/>
			<span>年龄：</span>
			<input type="number" id="age" name="age" min=18 max=40 value="18"
			placeholder="请输入年龄"/>
			<br/>
			<span>省份：</span>
			<select id="provice" name="provice">
				<option value="0">-请选择-</option>
				<option value="1">-北京-</option>
				<option value="2">-上海-</option>
				<option value="3">-深圳-</option>
				<option value="4" selected>-江苏-</option>
			</select>
			<br/>
			<span>协议：</span>
			<input type="checkbox" id="agree"/>
			<label for="agree">同意</label>
			<br/>
			<textarea rows="5" cols="50">
			lalallalalla
			</textarea>
			<br/>
			<button type="submit" disabled>注册</button>
			<button type="reset">重置</button>
			<button type="button">取消</button>
		</form>
	</body>
</html>

显示如下图：
在这里插入图片描述
② HTML 标题（Heading）是通过< h1>-< h6>标签来定义的.

<h1>KB10</h1>
<h2>KB10</h2>
<h3>KB10</h3>
<h4>KB10</h4>
<h5>KB10</h5>
<h6>KB10</h6>

显示为：

KB10
KB10
KB10
KB10
KB10
KB10

③ HTML 段落是通过标签 < p> 来定义的.

		<p id="thisp">减肥的<br/>我家的闪闪发亮</p>
		<p class="thatp">减肥的我家的闪闪发亮</p>

显示为：

减肥的
我家的闪闪发亮


减肥的我家的闪闪发亮

④ html的列表标签

<ul type="square" class="thisul">
	<li>aa</li>
	<li>bb</li>
	<li>cc</li>
</ul>
		
<ol type="1">
	<li>aa</li>
	<li>bb</li>
	<li>cc</li>
</ol>
		
<dl>
	<dt>刘德华</dt>
	<dd>影视歌三星</dd>
</dl>

显示为：

  • aa
  • bb
  • cc
  1. aa
  2. bb
  3. cc
刘德华
影视歌三星
AZengz
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html个人信息表制作（适合初学者）
qq_51730402的博客
12-04 4186
html个人信息表制作（适合初学者）
HTML个人信息注册页面
12-18
HTML设计一个个人信息注册页面 使用HTML设计一个个人信息注册页面，如下图所示，其中页面的排版可采用或+CSS。当点击“提交”按钮时，使用JavaScript编程在当前页面显示录入信息，并且实现籍贯和城市的级联。（选做：用JQuery实现页面功能）
HTML+CSS+JS实现简单的登录账号密码判断
用心创作每一篇文章
03-31 1万+
HTML+CSS+JS实现简单的登录账号密码判断
【前端】HTML实现个人简历信息展示页面
最新发布
2303_80341387的博客
05-06 2791
接下来，我们可以看到每一个项目都有一个小标题，那么这些项目与项目之间可以用有序列表来表示，而功能介绍中的内容，我们又可以通过无序列表来表示。我们首先看到的是我们页面中的姓名，紧接着下面是我们的基本信息板块，教育背景板块，专业技能板块，还有我的项目板块，还有一个个人评价板块。接下来，我们还是首先看到教育背景这个标题，我们可以看到教育背景和基本信息是对应的，所以我们和基本信息一样都使用。接下来，我们就结合我们之前学习过的HTML的标签来打造一个简历信息的展示的页面.那么此时我们就写完了我们的基本信息板块。
html制作好看的个人简历(附源码)
xcLeigh
03-29 3万+
html制作好看的个人简历(附源码)，代码简单，通俗易懂，html实现好看的个人简历，界面酷炫，简洁明了，附件源码，下载后直接使用，可以用文本、工具（vscode，Hbuilder，dw）打开编辑自己的相关信息，也可在此框架下，扩展更多其他效果。
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)
热门推荐
xcLeigh
12-16 9万+
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)。一款非常简洁，亮丽的个人简介模板，适用于个人主页，个人简历等相关主题，界面分为个人信息，基本资料，专业技能，教育经历，工作经验等五个版块，支持扩张，具体效果见下面的原文链接，里面有视频和代码讲解。代码容易上手，下载后直接运行。
雅思——状语从句+分词做状语.pdf
07-12
雅思——状语从句+分词做状语.pdf雅思——状语从句+分词做状语.pdf雅思——状语从句+分词做状语.pdf雅思——状语从句+分词做状语.pdf雅思——状语从句+分词做状语.pdf雅思——状语从句+分词做状语.pdf雅思——状语...
机器视觉系列—— Vision 基础知识(下).pdf
12-26
机器视觉-深度学习
机器视觉系列—— Vision 基础知识(上).pdf
12-26
机器视觉-深度学习
网络商务信息采集——服装网店市场调研报告知识.pdf
11-23
网络商务信息采集——服装网店市场调研报告知识.pdf
基础知识——CDMA与OFDM比较.docx
07-01
基础知识——CDMA与OFDM比较.docx基础知识——CDMA与OFDM比较.docx基础知识——CDMA与OFDM比较.docx基础知识——CDMA与OFDM比较.docx基础知识——CDMA与OFDM比较.docx基础知识——CDMA与OFDM比较.docx基础知识——...
HTML个人资料mooc风格
07-20
mooc风格的个人资料界面，有css. -----------------------------------------------
利用HTML实现一个个人信息表的网页（代码实例）
lin123_00的博客
05-26 1万+
本篇文章给大家带来的内容是关于利用HTML实现一个个人信息网页（代码实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） 对HTML标签的总结 1、学习的行内标签和 块级元素分别有哪些? 行内标签:span, strong, a, img, input, textarea 块级元素:p, h1-h6, p, hr, pre, ul, ol, dd, dt, th. tr, td 2、两者
用html写一个个人简历
m0_56218765的博客
05-02 1284
主要还是用到了table，只是有些地方没有加边框而已。 <body> <table border="1"> <caption>职业圈</caption> <tr height="50" bgcolor="87cefa"> <td width="400">手机号：13111156615</td> <td width="400"&gt.
HTML中用户名、身份证号、邮箱、出生日期等的格式验证【亲测】
天地一蜉蝣
09-20 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表单验证&lt;/title&gt; //为了使页面不是那么突兀，特地导入了这俩个bootstrap框架相关的包 &lt;link rel=&
HTML调查问卷
weixin_51695739的博客
06-18 5924
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>大学生社会实践调查问卷</title> </head> <body> <div id="div0" align="center" style="background-color: lightpink;"> <form action="" me
JS案例:一次询问并获取用户的姓名,年龄性别,并打印用户信息
weixin_44079801的博客
06-26 5230
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>作业</title> //案例:一次询问并获取用户的姓名,年龄性别,并打印用户信息 <script> var name = prompt('请输入您的姓名'); var age = prompt('请输入您的年龄'); var sex = prompt('请输入您
HTML个人简介
weixin_30302609的博客
03-13 1万+
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="，"> <me...
—— 预期输出 —— —— 实际输出 —— 5 0.600 5 1.667
06-07
很抱歉，代码有误。我检查了一下，发现是在更新上个月和当前月的兔子对数时出了问题。应该先更新当前月的兔子对数，再更新上个月的兔子对数，即 `pre, cur = cur, pre+cur`。下面是修改后的代码： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值