学习web前端历程（六）

最新推荐文章于 2024-09-01 00:22:26 发布

l123zmj

最新推荐文章于 2024-09-01 00:22:26 发布

阅读量97

点赞数 1

文章标签：三个域 HTML5的新增类型和属性 HTML的新增结构标签

本文链接：https://blog.csdn.net/l123zmj/article/details/97634203

版权

表单域、HTML5的新增类型、属性、和结构标签

一、现在学习了三个域：
1.文本域 textarea 个人介绍/简介
2.文件域上传文件
3.表单域 form 收集控件信息并提交
补充：get提交速度快但是不安全，post提交速度慢但是安全

<form action="20多行文本框.html" method="get" name="formname"/>
<p><label>用户名：<input type="text"name="username"></label></p>
<p><label>密码:<input type="password" name="pwd"/></label></p>
<input type="submit" value="提交"/><input type="reset" value="重置"/>
</form>
<form action="20多行文本框.html" method="get"/>
<p><label>用户名：<input type="text"name="username"></label></p>
<p><label>密码:<input type="password" name="pwd"/></label></p>
<input type="submit" value="提交"/><input type="reset" value="重置"/>
</form>

注意：当有两个表单及以上时，表单form内要加上name属性，来加以区分，
但只有一个表单时，可加可不加name属性。

当form属性method的属性值为get：
在这里插入图片描述
当form属性method的属性值为post：

二、HTML新增的类型

电子邮件类型
功能描述：输入email地址的文本框

<input type="email"/>

注意：输入的内容中必须有“@”，且@的后面必须有内容
2.搜索类型
功能描述：输入搜索关键字的文本框

<input type="search"/>

3.URL类型
功能描述：输入web站点的文本框

<input type="url"/>

注意：输入的内容中必须包括“http://”，后面须有内容
4.颜色类型
功能描述：预定义的颜色拾取控件

<input type="color"/>

5.数字类型
功能描述：只能接受数字

<input type="number"/>

属性：
min     当前域接受的最小值
max     当前域接受的最大值
step    决定了域所接受值递增递减的步长，默认为1

6、范围类型：
功能描述：允许用户选择一个范围内的值

<input type="ranger" min=" " max=" " value=" "/>

属性：
min                  范围下限值
max                  范围上限值
step                 声明该值递增递减的步长
value                设置初始值

7.日期类型
功能描述：创建一个日期域

<input type="data"/>

8.周类型
功能描述：与data类型相似，但只能选择周

<input type="week"/>

9.月类型
功能描述：与data类型相似，但只能选择月份

<input type="month"/>

<form action="" method="get">
    <p>邮件：<input type="email" name="email" /></p>
    <p>搜索类型：<input type="search"/></p>
    <p>URL类型：<input type="url"/></p>
    <p>颜色：<input type="color"/></p>
    <p>成绩：<input type="number" min="0" max="300" step="5" name="chengji"/></p>
    <p>范围：<input type="range" min="0" max="100" step="5" value="5"/></p>
    <p>日期类型:<input type="data"/></p>
    <p>周类型：<input type="week"/></p>
    <p>月类型:<input type="month"/></p>
    <input type="submit"/>
    <input type="reset">
</form>

在这里插入图片描述
三、HTML5新增的属性

placeholder
作用：默认提示

 <input type="text" placeholder="请输入用户名"/>

multiple（通常用于邮箱和URL）
作用：支持在一个域中输入输入多个值，逗号隔开，一般配合邮箱和URL使用

 <input type="email" multiple />

autofocus
作用：只动获取焦点（光标锁定到框内）

 <input type="text"  autofocus/>

required
作用：不允许域为空时提交

 <input type="text"  required/>

minlength和maxlength（通常用于密码）
作用：定制元素允许的最小字符数和最大字符数

 <input type="text"  minlength="   "maxlength="   "  />

min和max （一般用于成绩）
作用：定制元素允许的最小数和最大数

<input type="number"  min="   "max="   "  />

<form action="" >
    用户名：<input type="text" placeholder="请输入用户名" name="name" autofocus/><br/>
    密码：<input type="password" placeholder="请输入密码" minlength="6" maxlength="12"/><br/>
    邮箱：<input type="email" multiple name="email"/><br/>
    成绩:<input type="number" min="0" max="300"/><br/>
    <input type="submit"/>
</form>

在这里插入图片描述
表单练习题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的练习</title>
</head>
<body>
<form>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    姓名：<input type="text"/><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    密码：<input type="password" min="6" max="12"/><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    确认密码：<input type="password" min="6" max="12"/><br/>
    密码提示问题：
    <select>
        <option>请选择一个问题</option>
        <option>爸爸叫什么名字</option>
        <option>妈妈叫什么名字</option>
    </select><br/>
    密码提示答案：<input type="text "/><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    性别：<input type="radio" name="sex" value="男"/>男<input type="radio" name="sex" />女<br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    年龄：<input type="text"/><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    籍贯：
    <select>
        <option>请选择</option> 省/直辖市
        <option>海南</option>
        <option>陕西</option>
        <option>山东</option>
    </select>
    省/直辖市
    <select>
        <option>请选择</option> 省/直辖市
        <option>海口</option>
        <option>三亚</option>
        <option>西安</option>
        <option>济南</option>
    </select>
    市<br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    爱好：<input type="checkbox"/>上网<input type="checkbox"/>体育<input type="checkbox"/>学习<br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;个人介绍：<br/>
    <textarea rows="12px" cols="10px"> </textarea><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    上传头像：<input type="text"/><input type="file"/><br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="submit"/><input type="reset"/>
</form>
</body>
</html>

在这里插入图片描述
三、div标签和span标签（其两者可以嵌套）
（1）无语义标签（节标签）
（2）div（块级容器）
（3）span（行内容器）
div和span的区别：
（1）块级元素可以包含行内元素和行内元素
（2）行内元素一定不包含块级元素
（3）div占行宽度的100%，而span所占宽度为内容的宽度

四、HTML5新增的结构标签

header></header>          头部
<nav></nav>               导航
<section></section>       定义文章中的节、章节、页眉、页脚或文档中的其他部分（标题）
<article></article>       代表一个独立的完整的内容块，可独立使用（一篇完整的文章、
                                    一个用户评论、论坛帖子）其包含section
<aside></aside>            测边栏
<footer></footer>          页脚