【慕课网】前端零基础入门---步骤三：页面升级结构HTML5---02-HTML5属性变化

最新推荐文章于 2022-12-05 23:30:52 发布
最新推荐文章于 2022-12-05 23:30:52 发布
阅读量391 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43405634/article/details/104259411
版权

02-HTML5属性变化

第1章 input新增类型

1-1 input新增类型（email_url_tel_number）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<div>请输入手机号码：</div>
	<input type="tel" name="tel">
	<div>请输入URL地址：</div>
	<input type="url" name="url">
	<div>请输入邮箱：</div>
	<input type="email" name="email">
	<div>请选择数值：</div>
	<input type="number" name="number">
</body>
</html>
1-2 input（date pickers）

在这里插入图片描述

1-3 编程练习

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	姓名：<input type="text" name="xm"><br/>
	性别：男<input type="radio" name="a" value="1" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;女<input type="radio" name="a" value="2" /><br/>
	出身日期：<input type="Date" name="Date"><br/>
	出生月份：<input type="Month" name="Month"><br/>
	出生周数：<input type="Week" name="Week"><br/>
	<input type="submit" name="submit" value="提交">
</body>
</html>
1-4 input新增类型（range_search_color）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<p>请选择您需要的数值，数值的范围是最大100，最小10：</p>
	<input type="range" name="range" max="100" min="10">
	<br><br>
	<span>请选择您喜欢的颜色：</span>
	<input type="color" name="color">
	<br><br>
	<span>请输入要搜索的内容：</span>
	<input type="search" name="search">
</body>
</html>

第2章 表单新增属性

2-1 form（autocomplete属性）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<form>
		用户名：<input type="text" name="user" autocomplete="on"><br><br>
		邮箱：<input type="email" name="email" autocomplete="on"><br><br>
		手机号码：<input type="tel" name="tel" autocomplete="on"><br><br>
		<input type="submit">
	</form>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<form>
		用户名：<input type="text" name="user" autocomplete="off"><br><br>
		邮箱：<input type="email" name="email" autocomplete="off"><br><br>
		手机号码：<input type="tel" name="tel" autocomplete="off"><br><br>
		<input type="submit">
	</form>
</body>
</html>
2-2 form（autofocus属性）

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	用户名：<input type="text" name="user" autofocus="autofocus"><br>
	请输入密码：<input type="text" name="password" autocomplete="off"><br>
	<input type="submit" name="提交" value="注册">
</body>
</html>
2-3 form（multiple属性）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	用户名：<input type="text" name="user" autofocus="autofocus" autocomplete="off"><br>
	请上传文件：<input type="file" multiple="multiple"><br>
	<input type="submit" name="提交">
</body>
</html>
2-4 form（placeholder属性）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	用户名：<input type="text" name="user" placeholder="请输入您的用户名"><br>
	密码：<input type="password" name="password" placeholder="请输入您的密码"><br>
	查询信息：<input type="search" name="search" placeholder="请输入您要搜索的内容"><br>
	<input type="submit" name="提交">
</body>
</html>
2-5 form（required属性）

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<form>
	用户名：<input type="text" name="user" placeholder="请输入您的用户名" required="required"><br>
	密码：<input type="password" name="password" placeholder="请输入您的密码" required="required"><br>
	<input type="submit" value="登录">
    </form>
</body>
</html>

第3章 其他标签属性

3-1 链接标签属性

在这里插入图片描述

3-2 script标签属性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3-3 ol标签属性

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
	<ol start="5" reversed="reversed">
		<li>列表第一项</li>
		<li>列表第二项</li>
		<li>列表第三项</li>
		<li>列表第四项</li>
		<li>列表第五项</li>
	</ol>
</body>
</html>
3-4 html和style属性

在这里插入图片描述

dqh_zsh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网站升级改版服务器,网站程序升级改版 让网站无损失过渡
weixin_28749363的博客
08-12 1607
当现有的网站遇到数据容量瓶颈，需要更换网站程序，如将自己编写的网站管理系统更换为开源的CMS;旧版ASP数据库不能支持大容量的数据，需要转换为SQL。更换带来的数据丢失和用户体验等麻烦就接连不断，特别是对于搜索引擎来说，网站结构的改变将有可能对排名造成较大波动。如何在转移网站数据后又不对网站造成损伤呢?这里就介绍网站转移后内容页面过渡的技巧，希望大家能以此举一反三触类旁通的处理自己所遇到的网站转移...
ESP32 html升级
XiaoEr_beiwang的博客
11-30 2683
esp32 html升级
系统升级页面html,页面访问界面升级
热门推荐
weixin_39612677的博客
06-05 5万+
页面访问界面升级了，赶紧通知用户吧!下面是应届毕业生小编为大家收集的关于页面访问界面升级，欢迎大家阅读!页面访问界面升级一尊敬的纳税人：因系统维护需要，浙江省国家税务局计划于2016年6月3日20时-6月6日0时对防伪税控系统实施存储迁移，届时可能会中断相关业务，全省纳税人对我局所有增值税发票系统升级版的访问将会受到影响，预计将于6月6日0时恢复所有业务系统的正常使用，感谢您的支持。衢州市国家税务...
Arduino ESP32 HttpUpdate OTA批量更新
u010161190的博客
12-05 3406
带版本判断的 Arduino ESP32 Http OTA 更新。
网站升级 网页升级 提示页面 图片说明
01-06
网站升级,网页升级,提示页面,图片说明,网络升级
电子商务基础(王红蕾-慕课版)-教材习题答案.docx
12-13
电子商务基础(王红蕾-慕课版)-教材习题答案.docx
电子商务基础(慕课版)-教学大纲.docx
12-16
电子商务基础(慕课版)-教学大纲.docx
SSM项目-慕课书评网
最新发布
12-21
综上所述，这个“SSM项目-慕课书评网”利用了现代化的前端技术栈，包括Vue3作为基础框架，结合Element Plus和Vant来构建用户界面，使用axios处理与后端的数据交互，而静态资源则存储在assets目录下。这样的组合为...
电子商务运营与管理(慕课版)-题库-试题及答案.docx
12-14
电子商务运营与管理(慕课版)-题库-试题及答案.docx
Web前端攻城狮培养计划-前端零基础入门
09-21
在“Web前端攻城狮培养计划-前端零基础入门”这个学习资源中，你将踏上成为一名优秀的Web前端开发者的旅程。这个课程专为初学者设计，无论你是否具备编程背景，都能逐步掌握Web前端开发的核心技能。以下是这个课程...
HTML5结构图图解
03-16
HTML5结构图图解，用图片描述跟容易表达清楚详细的内容，意思也更加明白
html5知识结构图
04-09
html5知识结构图html5知识结构图html5知识结构图html5知识结构图
将http网站升级为https网站的方法指南
SSL加密技术
08-25 4554
将http网站升级为https网站的必要条件就是申请SSL证书，成功申请SSL证书就可以将http网站升级为https网站，具体操作教程如下： 一、获取证书 升级到HTTPS协议的第一步，就是要获得一张证书，证书是一个二进制文件，里面包含经过认证的网站公钥和一些元数据，安全可信的SSL证书需要向CA机构(证书授权颁发中心)申请，通过严格的审查后才给予颁发。沃通CA可提供高端品牌的DigiCert/Symantec、GeoTrust、GlobalSign证书，以及便宜的Comodo的SSL数字证书，供大家
网页升级需要关服务器吗,我们单位的网站系统进行升级，这期间网站需要关闭。网站服务器在本地，用的IIS。请问有什么方法呢？...
weixin_35728411的博客
08-11 1738
2011-04-29 回答架设一个服务器是非常简单的事情，并不必要象他们所说的那样那么麻烦。那好，我就我所标的主题“如何架设一个可以调试asp程序的本地服务器”来做一个叙述，我们的目的就是，如何在自己的电脑上调试我们所下载下来的asp源代码，至于其他的，我们另做他说。 　　因为我平时用过最多的是两个系统，一个是win98，另外一个是win2000，98是很久之前用的了，现在还在用。因为在wi...
linux下安全备份升级（网页）
Destihang的博客
11-29 1158
如果在大部分开发完成，并且已经交付完成软件之后，如果产品要可持续的发展，并且与客户有长久合作关系，不可避免的需要进行技术支持，同样的，只要是人写出来的代码，就一定会存在bug，问题严重的还会影响产品的产量。所以，升级的必须的，现在我所知道的升级方式有三种： 一。直接把产生的二进制bin文件通过烧录器烧写到flash里面，在嵌入式linux中一般有三种类型的bin文件，分别是bootloader，
关于html页面在线升级问题
lqijlyy的博客
02-13 1万+
关于HTML在线升级的问题，这里是关于linux嵌入式方面，基于boa服务器的升级，所用到的cgi程序为C语言所编辑，主要想清楚这两个面，第一，升级的目的是什么，第二，如何升级。        首先就第一个问题，升级的目的是什么进行讨论，说白了，升级就是将新文件把原有的文件替换掉。    其次，升级的过程是：    1.需要做一个升级的网页即： form name="decode" id=
给你一份网站升级攻略，让你的网站焕然一新
weixin_33904756的博客
03-27 1111
关键词：网站建设，企业官网 虽然已有官网，但是公司业务繁忙没时间去维护？久而久之网站就出现了很多问题，老板不看还好，一看不得了，糟糕的界面，过时的内容，还怎么好意思拿去给客户看？需要马上改版！鉴于很多客户都有这种类似的情况，微梦科技这就给你分析分析网站改版升级要从哪些方面入手。 总结一下你的旧网站存在哪些问题： 1、设计风格过时，排版结构不合理。2、网...
HTML5的内容模型及页面结构图
北溟南风起
03-02 3439
目录 HTML5内容模型 内容模型列表 页面结构图 HTML5内容模型 内容模型列表 HTML5中引入的标记元素，根据内容类型，划分为7大类： 内联 Embedded 流 Flow 标题 Heading 交互 Interactive 元数据 Metadata 短语 Phrasing 区段 Sectioning 具体的 内容类型 简介 列举 元数据 Me...
08-20作业整理
weixin_30588729的博客
08-20 132
将数组中数字内容求和 var attr = [12,34,2,5,76] var attr = [12,34,2,5,76]; var sum=0; for(var i=0;i<attr.length;i++){ sum=sum+attr[i]; } alert(sum) var attr = [4, 0...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值