001html5新增常用标签

最新推荐文章于 2024-03-16 20:08:44 发布

陀陀吖

最新推荐文章于 2024-03-16 20:08:44 发布

阅读量166

点赞数

分类专栏： h5c3

本文链接：https://blog.csdn.net/weixin_40422393/article/details/88917713

版权

h5c3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<body>

<!-- 新增标签 -->
<header></header>   <!-- 文档头部 -->
<nav></nav>       <!-- 链接导航栏 -->
<footer></footer>   <!-- 页尾 -->
<article></article>     <!-- 定义文章 -->
<section></section>   <!-- 定义节， 块 div-->
<aside></aside>    <!-- 侧边栏 -->


<!-- 新增属性 -->
<datalist></datalist>    <!-- 与input标签一起使用 -->
<input type="search" value="请出入你喜欢的明星" list="star" />    <!-- 通过star进行连接 -->
<datalist id="star">
	<option value="11">刘涛</option>
	<option value="11">刘涛</option>
	<option value="11">刘涛</option>
	<option value="11">刘涛</option>
	<option value="11">刘涛</option>
</datalist>

<fieldset>
	<legend>用户登录</legend>
	用户名：<input type="text"> <br>
	密码：<input type="password">
</fieldset>


<!-- 新增表单 -->
<form action="">
	<dl>
		<dt>邮箱</dt>
		<dd> <input type="email"> </dd>     <!-- email为新增表单标签 -->   <!-- 规定输入的字符标准 -->
		<dd>注册后不能更改</dd>
	</dl>

	<dl>
		<dt>手机号码</dt>
		<dd> <input type="tel"> </dd>      <!-- tel为新增属性 -->    <!-- 弹出数字键盘 -->
		<dd>注册后不能更改</dd>
	</dl>

	<dl>
		<dt>网址</dt>
		<dd> <input type="url"> </dd>      <!-- url网址 -->    <!-- 不用验证了 -->
		<dd>注册后不能更改</dd>
	</dl>

	<dl>
		<dt>邮政编码</dt>
		<dd> <input type="number"> </dd>      <!-- number -->    <!-- 不用验证了 -->
		<dd>注册后不能更改</dd>
	</dl>

	<dl>
		<dt>拖动滑块</dt>
		<dd> <input type="range"> </dd>      <!-- range -->    <!-- 不用验证了 -->
		<dd>注册后不能更改</dd>
	</dl>

	<dl>
		<dt>时间</dt>
		<dd> <input type="time"> </dd>      <!-- time -->    <!-- 不用验证了 -->
		<dd>注册后不能更改</dd>
	</dl>

	<dl>
		<dt>出生年月日日期</dt>
		<dd> <input type="date"> </dd>      <!-- date -->    <!-- 不用验证了 -->
		<dd>注册后不能更改</dd>
	</dl>

	<dl>
		<dt>时间</dt>
		<dd> <input type="datetime"> </dd>      <!-- datetime -->    <!-- 不用验证了 -->
		<dd>注册后不能更改</dd>
	</dl>

	<dl>
		<dt>月份</dt>
		<dd> <input type="month"> </dd>      <!-- nmonth -->    <!-- 不用验证了 -->
		<dd>注册后不能更改</dd>
	</dl>
	
	<dl>
		<dt>星期</dt>
		<dd> <input type="week"> </dd>      <!-- week -->    <!-- 不用验证了 -->
		<dd>注册后不能更改</dd>
	</dl>

	<dl>
		<dd> <input type="submit" value="提交"></dd>
		<dd> <input type="reset" value="重置"></dd>
	</dl>
</form>


<!-- placeholder属性 -->
<form action="demo_form.asp" method="get">
  <input type="search" name="user_search" placeholder="Search W3School" />
  <input type="submit" />
</form>
</body>

css样式

<style>
	header{
		width: 100px;
		height: 100px;
		background-color: pink;
	}
	fieldset{
		width: 300px;
	}

	form{
		width: 600px;
		height: 600px;
		border:1px solid #f10215;
		float: left;
	}
	form dl dt{
		float: left;
	}
		form dl dd{
		/*float: left;*/
	}
</style>

陀陀吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
001html5新增常用标签

<body><header></header> <nav></nav> <footer></footer> <article&g...
复制链接

扫一扫