HTML5学习笔记

随着5G网络逐渐普及，手机已经成为了我们的一部分，从前出门要还要想着带个什么样子的包，现在的出门只要记得带好手机就足矣！以前手机要实现一个功能就需要安装相应的APP，而现在微信小程序等带给我们不一样的体验，我们不再需要安装各种各样的APP，很多都可以在微信小程序上完成。微信小程序的开发门槛虽然低了很多，但我们还是需要掌握一定的基础知识，而作为基础中的基础，HTML5是我们必须学习的。

一、HTML代码基础

1、HTML5的语法要求非常宽松，属性值可以用单引号、双引号包含起来，甚至可以不加引号。如：

id="wl" id='wl' id=wl 这三个是一样的效果。

但需要注意的是如果属性值中含有空格、单引号、大于小于号、反引号等字符时，则必须加引号，而当属性值中含有单引号时，可以加双引号，而值中有双引号时就可以加单引号。为了养成一个好的习惯，建议好始终给属性值加双引号。

2、内容标签是标签中包含一段内容，如p和strong这样的元素；非内容标签（空元素）是指标签不包含内容，比如换行等，它只有起始标签，不需要结束标签，以HTML5以前为了强调结束，经常把非内容标签写成<br />样子，而在HTML5中规定，非内容标签不需要关闭。常见的非内容标签有：<meta>、<img>、<br>、<input>、<link>、<hr>、<embed>等。

3、注释：不论单选还是多行，只需要把注释放在。

4、HTML页面根元素，在整个页面中html是根元素，在这个元素中一般有两个属性，一个是lang，另一个是manifest。

<html lang="zh-cmn-Hans">：声明页面的语言为简体中文。（非标准写法为lang="zh-CN"）；manifest属性用于设定页面缓存，它一旦设置后，浏览器便会将需要缓存的文件保存在本地，主要适用于不依赖网络，且下载后不需要再次更新的HTML5游戏、应用等，如果页面内容需要频繁更新的应该少用该属性，具体用法可以查询HTML5手册，这里不详细说明。

5、Head元素包含五个主要部分，分别是title、link、style、base和meta元素。title元素即网页的标题；link元素定义了文档与外部资源的关系，除了CSS外，还有许多的外部资源也通过这一元素引入页面；style元素用于在页面中定义样式；base元素用于标记文档的基础URL地址，还可被用于设置全局的浏览器打开方式，如：<base target="_blank">设置页面中所有的链接均在新窗口中打开

;meta元素是head中各类最丰富的一个元素，虽然它包含了多种多样的元数据，但它被规定了必须包含name（元数据名称），http-equiv（编译指令）和charset（字符编码）三种属性的其中一种。如不希望页面被抓取并公开时，我们可以在页面中添加名为robots的meta标记，如：<meta name="robots" content="none">，反之则所有都被检索到<meta name="robots" content="all">

。meta元素还能完成诸如刷新、重定向、缓存时间等功能。

6、HTML5新增了header元素，专门用来表述这样的头部区域，section元素对应不用的内容版块，文章可以用article元素来表示，页面的侧边栏可以用aside元素来表示，而且不仅可以放在整个页面的代表侧边栏区域，还能放入section或article中，来容纳一些与版块和文章相关的内容。

7、footer元素和header元素并非区块内容，在这两种元素之内不能再嵌套放入类似section之类的元素。

8、不是所有的文字段落都适用p元素，如一段文字为联系信息时，则应使用address元素。

9、定义列表的除了有ul和ol外，还有一种更加自定义的形式，它由三种元素的组合而成，分别是dl、dt和dd。

10、内容分组元素figure元素，它主要用于展示插图、图表、照片、代码列表等。

11、HTML5加入了一种新的内容分组元素，用来指定页面的主要内容，main元素，每一个页面中最多只能有一个main元素，另外还有像水平分隔线的hr,表示源代码的pre，代表引用的blockquote等都同样属于内容分组元素。

12、在过去HTML版本中，a还可以当成锚点，如<a name="a1"></a>，但在HTML5中把这一特性去掉了，当href属性缺失时，它被视作一个占位符，而不会显示为一个超链接。

13、span元素是一种常见的文本元素，但如果不对span设置样式，则spqn中的文本和其他的文本看上去不会有任何差异。

14、在HTML5中有两种表示强调的文本元素，分别为em和strong，em元素更多代表语义、语气的加强，而strong则更加强调页面文本的重要性、紧急程度等，浏览器中em默认的显示为斜体，而strong则显示为粗体。

15、big标记的文本显示大于普通的段落文本，而small标记的文本则小于普通的段落文本；当需要插入某句被引用的话，或者某段文字摘录时，可以使用q元素，而当需要插入文献的标题、作者、链接时使用cite元素，q元素默认在头和尾加上双引号，而cite元素默认显示为斜体。

16、表单在制作时需要设置method和action属性，分别用来指定表单提交数据的方式和目的页面；数据提交的方式有两种，get和post，get是把数据放在URL中，以明文的方式发送给后台，它不能传输过大的数据，也不能传输文件类数据，而post是把数据放在数据体内再发给后台，数据不能直接被看到，可传输的数据量较大，所以一般都选择使用post方式。

17、在文本输入框可以加入placeholder（占位符）属性，值为框内显示的文本，也可以为input元素添加required属性使该表单项必填，也可以添加autofocus属性使其自动获得焦点，一般设置第一个字段。

18、HTML5为input元素增加了很多新的类型，如电话的tel，电子邮件的email，日期的date等。

19、radio表示单选按钮，同一组的单选按钮具有相同的name属性，它的值由value属性决定，checked属性表示该按钮默认选中。如：

<p>
<label for="sex">性别：</label>
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
</p>

还可以使用分区度更高的fieldset元素，它可以对表单内容的一部分进行打包，生成一组相关的表单字段，它使用legend元素指定标题。

checkbox的input元素为复选框，checked属性为选中状态；select元素生成下拉菜单，元素使用option元素标记。

TML5 为前端开发者带来了许多表单增强功能，这些功能使得创建交互式和用户友好的表单变得更加容易。在本文中，我们将介绍几种 HTML5 新增的表单功能，并提供完整的 HTML 示例，以帮助你了解如何在实际项目中应用这些功能。

1. 新的输入类型

HTML5 引入了一系列新的 input 类型，以支持更多种类的数据输入，比如电子邮件、日期等。

例子：电子邮件和网址输入

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>电子邮件和网址输入示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 设置字体 */
            padding: 20px; /* 页面内边距 */
        }

        form {
            max-width: 400px; /* 表单最大宽度 */
            margin: 0 auto; /* 居中显示 */
            padding: 20px; /* 表单内边距 */
            border: 1px solid #ccc; /* 边框样式 */
            border-radius: 5px; /* 边框圆角 */
            background-color: #f9f9f9; /* 背景颜色 */
        }

        label {
            display: block; /* 使标签独占一行 */
            margin-bottom: 5px; /* 标签下方间距 */
            font-weight: bold; /* 字体加粗 */
        }

        input[type="email"],
        input[type="url"] {
            width: 100%; /* 输入框宽度 */
            padding: 8px; /* 内边距 */
            margin-bottom: 20px; /* 与下一个元素的间距 */
            border: 1px solid #ccc; /* 边框样式 */
            border-radius: 4px; /* 边框圆角 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景颜色 */
            color: white; /* 字体颜色 */
            padding: 10px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 4px; /* 边框圆角 */
            cursor: pointer; /* 鼠标样式 */
            font-size: 16px; /* 字体大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
        }
    </style>
</head>
<body>

<form>
    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email" required>

    <label for="url">个人网站:</label>
    <input type="url" id="url" name="url">

    <input type="submit" value="提交">
</form>

</body>
</html>

在这个示例中，我们使用了 type="email" 和 type="url" 来要求用户输入有效的电子邮件地址和网址。如果用户输入的不符合格式，浏览器会在提交表单前显示一个警告。

2. 占位符属性

placeholder 属性允许我们在输入字段中设置一个提示文本，当输入字段为空时显示，一旦开始输入，提示文本就会消失。

例子：带占位符的输入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>带占位符的输入框示例</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 设置字体 */
            padding: 20px; /* 页面内边距 */
        }

        form {
            max-width: 300px; /* 表单最大宽度 */
            margin: 0 auto; /* 居中显示 */
            padding: 20px; /* 表单内边距 */
            border: 1px solid #ccc; /* 边框样式 */
            border-radius: 5px; /* 边框圆角 */
            background-color: #f9f9f9; /* 背景颜色 */
        }

        label {
            display: block; /* 使标签独占一行 */
            margin-bottom: 10px; /* 标签下方间距 */
            font-weight: bold; /* 字体加粗 */
        }

        input[type="search"] {
            width: calc(100% - 22px); /* 输入框宽度，减去内边距和边框的宽度 */
            padding: 10px; /* 内边距 */
            margin-bottom: 20px; /* 与下一个元素的间距 */
            border: 1px solid #ccc; /* 边框样式 */
            border-radius: 4px; /* 边框圆角 */
            box-sizing: border-box; /* 盒子模型，使宽度包含边框和内边距 */
        }

        input[type="submit"] {
            background-color: #007bff; /* 背景颜色 */
            color: white; /* 字体颜色 */
            padding: 10px 20px; /* 内边距 */
            border: none; /* 无边框 */
            border-radius: 4px; /* 边框圆角 */
            cursor: pointer; /* 鼠标样式 */
            font-size: 16px; /* 字体大小 */
        }

        input[type="submit"]:hover {
            background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
        }
    </style>
</head>
<body>

<form>
    <label for="search">搜索:</label>
    <input type="search" id="search" name="search" placeholder="请输入搜索关键字">

    <input type="submit" value="搜索">
</form>

</body>
</html>

这里的 placeholder="请输入搜索关键字" 就是一个占位符，它会在用户输入之前显示在搜索框中。

3. 自动聚焦属性

autofocus 属性可以让页面加载时自动将焦点放到某个表单元素上。

例子：自动聚焦的输入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自动聚焦的输入框示例</title>
</head>
<body>

<form>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" autofocus>

    <input type="submit" value="提交">
</form>

</body>
</html>

在这个示例中，当页面加载完成后，姓名输入框将自动获得焦点。

4. 表单验证

HTML5 为表单验证提供了内置支持，通过简单的属性如 required、min、max 和 pattern 等，可以在不使用 JavaScript 的情况下进行基本的验证。

例子：表单验证

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单验证示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            padding: 20px;
            background-color: #f4f4f4;
        }

        form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
            color: #333;
        }

        input[type="number"],
        input[type="text"] {
            width: 100%;
            padding: 8px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box; /* 包括边框和内边距在内的宽度 */
        }

        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        input:invalid {
            border-color: red;
        }

        input:valid {
            border-color: green;
        }
    </style>
</head>
<body>

<form>
    <label for="age">年龄:</label>
    <input type="number" id="age" name="age" min="18" max="99" required>

    <label for="zipcode">邮编:</label>
    <input type="text" id="zipcode" name="zipcode" pattern="\d{5}" title="请输入5位数字的邮编" required>

    <input type="submit" value="提交">
</form>

</body>
</html>

在这个示例中，年龄字段要求用户输入一个介于 18 到 99 之间的数字，而邮编字段要求用户输入一个符合特定模式（5位数字）的文本。

结语

HTML5 的表单增强功能大大简化了表单处理和验证的工作，使得开发更加高效，同时也提高了用户体验。通过上述示例，我们可以看到，利用 HTML5 的新特性，可以创建功能强大且易于使用的表单。随着技术的不断进步，我们作为开发者应该不断学习和实践，以便更好地利用这些新工具来构建更好的网页。

们经常在设置生日的时候需要设置最大不能今天，年龄不能超过60岁等等；其实可以很简单就判断了；

<script>
	$(function () {		
	
		var date_now = new Date();
		//得到当前年份
		var year = date_now.getFullYear();
		//得到当前月份
		//注：
		// 1：js中获取Date中的month时，会比当前月份少一个月，所以这里需要先加一
		// 2: 判断当前月份是否小于10，如果小于，那么就在月份的前面加一个 '0' ， 如果大于，就显示当前月份
		var month = date_now.getMonth()+1 < 10 ? "0"+(date_now.getMonth()+1) : (date_now.getMonth()+1);
		//得到当前日子（多少号）
		var date = date_now.getDate() < 10 ? "0"+date_now.getDate() : date_now.getDate();
		//设置input标签的max属性
		$("#birthday").attr("max",year+"-"+month+"-"+date);
		//$("#birthday").attr("min",(year-59)+"-"+month+"-"+date);
		$("#birthday").attr("min",(year-59)+"-01-01");
	});
</script>

下面是HTML 标签

<div class="col-xs-12 col-sm-3">出生年月日<em>*</em> <input type="date" name="birthday" id="birthday" class="form-control" required /></div>

日期输入类型还有一些其它属性需要注意。

属性描述值这是HTML里input元素的通用属性。就是输入框里的数据。
min日期或时间的最小值
max日期或时间的最大值
step步长。
不同的类型有不同的缺省步长。Date – 缺省是1天
Week – 缺省是1周
Month – 缺省是1月
Time – 缺省是1分钟
DateTime – 缺省是1分钟
Local DateTime – 缺省是1分钟

本地日期时间(<input type="datetime-local"/>)

日期+时间(<input type="datetime"/>) 支持不是很好，建议使用datetime-local

时间(<input type="time"/>)

月份(<input type="month"/>)

周(<input type="week"/>)

日期(<input type="date"/>)

在线咨询

上一篇：HTML常用基础标签：图片与超链接标签全解！
下一篇：Js实现百度搜索框提示功能

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商