从零学习HTML5
关注
分享
扫一扫
着重声明：此专栏绝不以盈利为目的，主要与广大兴趣爱好者交流学习经验！
酷小亚
不到园林，怎知春色如许
展开
-
ASP表单注册界面
表单注册界面少废话，上代码：<head runat="server"> <style type="text/css"> html { background-color:red; } .box{ width:750px; ...原创 2020-03-19 17:21:58 · 521 阅读 · 0 评论 -
datalist 元素
效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>datalist 元素</title></head><body> <form action="#" method="post"> 请输入用户名： <input type="text" list="namelist" /> &.转载 2021-09-30 20:16:17 · 426 阅读 · 0 评论 -
为下拉菜单中的选择分组
下面演示为下拉菜单中的选项分组的方法和效果效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>为下拉菜单中的选择分组</title></head><body> <form action="#" method="post"> 城市：<br/> <select> &转载 2021-09-30 19:58:16 · 797 阅读 · 0 评论 -
select控件
效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>select控件</title></head><body> <form action="#" method="post"> 所在校区：<br/> <select> <!-- 最基本的下拉菜单 --&.转载 2021-09-30 19:31:32 · 719 阅读 · 0 评论 -
textarea控件
效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>textarea控件</title></head><body> <form action="#" method="post"> 评论：<br/> <textarea cols="60" rows="8" >评论的时.转载 2021-09-30 15:57:53 · 287 阅读 · 0 评论 -
required属性
required属性用于规定输入框填写的内容不能为空，否则不允许用户提交表单。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>required属性</title></head><body> <form action="#" method="get"> 请输入姓名： <input t转载 2021-09-30 15:43:39 · 5045 阅读 · 0 评论 -
placeholder属性
使用placeholder属性来提示输入框中需要输入的内容效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>placeholder属性</title></head><body> <form action="#" method="get"> 请输入邮政编码： <input type="转载 2021-09-30 15:36:41 · 3693 阅读 · 0 评论 -
pattern属性
了解pattern属性以及常用的正则表达式效果图：当输入的内容与定义的正则表达式格式不匹配时，单击“提交”按钮，效果如下：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>pattern属性</title></head><body> <form action="#" method="get">转载 2021-09-30 15:22:17 · 1707 阅读 · 0 评论 -
multiple属性的使用
下面通过案例来演示multiple属性的使用。效果图：如果想要向文本框中输入多个E-mail地址，可以将多个地址之间通过逗号分隔。如下图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>multiple属性的使用</title></head><body> <form action="#" method="转载 2021-09-30 09:34:11 · 3480 阅读 · 0 评论 -
list属性的使用
我们已学过通过datalist元素实现数据列表的下列效果。而list属性用于指定输入框所绑定的datalist元素，其值是某个datalist元素的id。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>list属性的使用</title></head><body> <form action="#" me转载 2021-09-29 16:54:38 · 1159 阅读 · 0 评论 -
autofocus属性的使用
在访问页面时，文字输入框会自动获得光标焦点，以便输入关键词。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>autofocus属性的使用</title></head><body> <form action="#" method="get"> 请输入搜索关键词： <input typ转载 2021-09-29 16:26:27 · 2231 阅读 · 0 评论 -
时间日期类型的使用
在HTML5中添加多个input元素，分别指定这些元素的type属性值为时间日期类型。下面来演示.效果图：用户可以直接向输入框输入内容，也可以单击输入框之后的按钮进行选择。如下图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>时间日期类型的使用</title></head><body> <form ac转载 2021-09-29 16:03:49 · 204 阅读 · 0 评论 -
number类型的使用
将input元素的type属性设置为number类型，并且分别设置min、max和step属性的值。效果图：当文本框中输入“21”时，由于max属性值为“20”，所以将出现提示信息，如下图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>number类型的使用</title></head><body> <转载 2021-09-29 15:50:46 · 356 阅读 · 0 评论 -
input类型
下面通过设置input元素的type属性来演示不同类型的文本框的用法。效果图：当输入不正确的邮箱号，点击提交时，如下图：当输入不正确的网址，点击提交时，如下图：当输入不正确的手机号，点击提交时，如下图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>input类型</title></head><body>转载 2021-09-29 15:29:07 · 415 阅读 · 0 评论 -
input控件
下面通过一个案例来演示它们的使用。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>input控件</title></head><body> <form action="#" method="post"> 用户名： <!-- text单行文本输入框 --> <in转载 2021-09-29 12:37:10 · 1327 阅读 · 0 评论 -
input元素及属性
input元素用来设置表单中的内容项，比如输入内容的文本框，按钮等不仅可以布置在表单中，也可以在表单之外的元素使用input元素的属性type属性：指定输入内容的类型，默认为text:单行文本框name属性:输入内容的识别名称，传递参数时候的参数名称value属性:默认值maxlength:输入的最大字数readonly属性：只读属性，设置内容不可变更，提交时会以前发送至服务器disabled属性：设置为不可用（不可操作）required属性：设置该内容为必须转载 2021-09-29 12:10:02 · 3358 阅读 · 0 评论 -
novalidate属性取消表单验证
novalidate属性指定在提交表单时取消对表单进行有效的检查。效果图：此时，单击“提交”按钮，表单将不对输入的表单数据进行任何验证，即可进行提交操作。代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>novalidate属性取消表单验证</title></head><body> <form action转载 2021-09-29 11:44:13 · 882 阅读 · 0 评论 -
autocomplete属性的使用
通过设置表单属性可以实现提交方式、自动完成、表单验证等不同的表单功能。下面将对form标记的相关属性进行详解！效果图：当你在“用户名”的文本输入框中依次输入……，分别单击“提交”按钮。然后再单击“用户名”文本框时，效果如下：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>autocomplete属性的使用</title></head转载 2021-09-29 11:27:25 · 23353 阅读 · 0 评论 -
创建一个表单
在网页中，一个完整的表单通常由表单控件、提示信息和表单域，3个部分构成。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>创建表单</title></head><body> <form action="" method="post"> <!-- 表单域 -->转载 2021-09-29 10:44:53 · 1246 阅读 · 0 评论 -
制作电影影评网
本章前面讲解了HTML5新增的结构元素、分组元素、页面交互元素、文本层次语义元素及常用的标准属性等内容。本节将结合前面所学知识点制作一个“电影影评网”，默认效果图如下：当点击最下面的“动作电影”时，会显示动作电影的下拉菜单，如下图：（再次点击，将下拉菜单收缩）同时，当点击“科幻电影”时，会显示科幻电影的下拉菜单，如下图：（再次点击，将下拉菜单收缩）废话少说，上代码：<!DOCTYPE html><html><head> <meta charset转载 2021-09-26 12:18:13 · 4534 阅读 · 2 评论 -
contenteditable属性的应用
contenteditable属性规定是否可编辑元素的内容，但是前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。效果图：可直接在浏览器中修改列表内容，如下图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>contenteditable属性的应用</title></head><body><h3>转载 2021-09-26 08:42:47 · 489 阅读 · 0 评论 -
draggable属性的应用
draggable属性用来定义元素是否可以拖动。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>draggable属性的应用</title></head><body><h3>元素拖动属性</h3><article draggable="true">这些文字可以被拖动&l转载 2021-09-25 19:52:05 · 1418 阅读 · 0 评论 -
cite元素的使用
cite元素可以创建一个引用标记，用于对文档参考文献的引用说明。一旦在文档中使用了该标记，被标记的文档内容将以斜体的样式展示在页面中，以区别段落中的其他字符。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>cite元素的使用</title></head><body><p>也许愈是美丽就愈是脆弱，转载 2021-09-25 19:02:49 · 1278 阅读 · 0 评论 -
mark元素的使用
mark元素的主要功能是在文本中高亮显示某些字符，以引起用户注意。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>mark元素的使用</title></head><body><h3>小苹果</h3><p>我种下一颗<mark>种子</mark>,转载 2021-09-25 18:52:06 · 745 阅读 · 0 评论 -
time元素的使用
time元素用于定义时间或日期，可以代表24小时中的某一时间。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>time元素的使用</title></head><body><p>我们早上<time>9：00</time>开始上班</p><p>今年的转载 2021-09-25 18:35:19 · 5694 阅读 · 0 评论 -
meter元素的使用
meter元素用于表示指定范围内的数值。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>meter元素的使用</title></head><body><h1>学生成绩列表</h1><p> 小红：<meter value="65" min="0" max="100转载 2021-09-25 18:25:54 · 1480 阅读 · 0 评论 -
progress元素的使用
progress元素用于表示一个任务的完成进度。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>progress元素的使用</title></head><body> <h1>我的工作进展</h1> <p><progress value="50" max="100"转载 2021-09-25 17:47:45 · 1519 阅读 · 0 评论 -
details和summary元素的使用
details元素用于描述文档或文档某个部分的细节。summary元素经常与details元素配合使用，作为details元素的第一个子元素，用于为details定义标题。效果图：当点击显示列表，效果如下图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>details和summary元素的使用</title></head>转载 2021-09-25 17:03:06 · 2026 阅读 · 0 评论 -
hgroup元素与figcaption元素的结合使用
为了更好地说明各群组的功能，hgroup元素常常与figcaption结合使用。下面通过一个案例进行演示。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>hgroup元素与figcaption元素的结合使用</title></head><body><hgroup> <figcaption转载 2021-09-25 10:57:23 · 533 阅读 · 0 评论 -
hgroup元素的使用
hgroup元素用于将多个标题（主标题和副标题或者子标题）组成一个标题组，通常它与h1~h6元素使用。通常，将hgroup元素放在header元素中。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>hgroup元素的使用</title></head><body><header> <hgr转载 2021-09-25 10:42:12 · 2766 阅读 · 0 评论 -
figure元素和figcaption元素
在HTML5中，figure元素用于定义独立的流内容（图像、图表、照片、代码等）；figcaption元素用于为figure元素组添加标题。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>figure元素和figcaption元素</title></head><body><p>被称作 “第四代体转载 2021-09-25 10:29:14 · 996 阅读 · 0 评论 -
section元素的使用
section元素用于网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>section元素的使用</title></head><body><article> <header> <h2>小转载 2021-09-24 18:36:06 · 3439 阅读 · 0 评论 -
aside元素的使用
aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>aside元素的使用</title></head><body><article> <hea转载 2021-09-24 18:20:01 · 997 阅读 · 0 评论 -
article元素的使用
article元素代表文档、页面或应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>article元素的使用</title></head><body><article> <header> &l转载 2021-09-24 18:07:12 · 1350 阅读 · 0 评论 -
header元素的使用
header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>header元素的使用</title></head><body><header> <h1>秋天的味道</h1> <h3&转载 2021-09-24 17:08:10 · 1194 阅读 · 0 评论 -
列表的嵌套应用
在使用列表时，列表项中也有可能包含若干子列表项，想要在列表项中定义子列表项就需要将列表进行嵌套。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>列表的嵌套应用</title></head><body><h2>饮品</h2> <ul> <li>咖啡 &l转载 2021-09-24 15:53:21 · 2908 阅读 · 0 评论 -
dl元素的使用
dl元素——定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>dl元素的使用</title></head><body> <dl> <dt>计算机</dt> &l转载 2021-09-24 11:41:53 · 524 阅读 · 0 评论 -
ol元素的使用
为了使网页更易读、排序有序、条理清晰，所以我们要学会ol元素——有序列表效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>元素的使用</title></head><body> <ol> <li>春</li> <li>夏</li> <转载 2021-09-24 11:05:56 · 736 阅读 · 0 评论 -
ul元素的使用
为了使网页更易读、排序有序、条理清晰，所以我们要学会ul元素——无序列表效果图：代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>元素的使用</title></head><body> <ul> <li>春</li> <li>夏</li> <转载 2021-09-24 10:57:01 · 2480 阅读 · 0 评论 -
制作HTML5百科页面
先建一个index.html(首页)，代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>HTML5 百科</title></head><body> <p align="center"> <a href="page01.html" target="_self"><img src="image转载 2021-09-22 23:56:27 · 10222 阅读 · 0 评论