大白话html第五章HTML5 新增表单元素和属性
HTML5 给表单带来了很多新的小伙伴，让我们收集用户信息变得更方便、更智能。
新增表单元素
<input type="date">：这个就像一个自带日历的小框框，用户可以直接在里面选择日期，不用手动输入。
<!DOCTYPE html> <html> <body> <form> <!-- 日期输入框，用户可以选择日期 --> <label for="birthday">你的生日：</label> <input type="date" id="birthday" name="birthday"> <input type="submit" value="提交"> </form> </body> </html>
<input type="email">：专门用来收集用户邮箱地址的，浏览器会自动检查用户输入的是不是一个合法的邮箱格式。
<!DOCTYPE html> <html> <body> <form> <!-- 邮箱输入框，浏览器会验证输入的是否为邮箱格式 --> <label for="email">你的邮箱：</label> <input type="email" id="email" name="email"> <input type="submit" value="提交"> </form> </body> </html>
<input type="url">：当你需要用户输入网址的时候，用这个标签。浏览器会检查输入的是不是一个合法的网址。
<!DOCTYPE html> <html> <body> <form> <!-- 网址输入框，浏览器会验证输入的是否为网址格式 --> <label for="website">你的网站：</label> <input type="url" id="website" name="website"> <input type="submit" value="提交"> </form> </body> </html>
新增表单属性
required：这个属性就像一个小监督员，它会要求用户必须填写带有这个属性的表单字段。如果用户没填就提交表单，浏览器会给出提示。
<!DOCTYPE html> <html> <body> <form> <!-- 姓名输入框，为必填项 --> <label for="name">你的姓名：</label> <input type="text" id="name" name="name" required> <input type="submit" value="提交"> </form> </body> </html>
pattern：它就像一个小法官，用正则表达式来判断用户输入的内容是否符合要求。比如要求密码必须包含字母和数字。
<!DOCTYPE html> <html> <body> <form> <!-- 密码输入框，要求密码包含字母和数字，至少 8 位 --> <label for="password">设置密码：</label> <input type="password" id="password" name="password" pattern="(?=.*\d)(?=.*[a-zA-Z]).{8,}" title="密码必须包含字母和数字，且至少 8 位"> <input type="submit" value="提交"> </form> </body> </html>
拖放 API
拖放 API 能让你在网页上实现像在桌面操作文件一样的拖动和放置效果。就好比你在网页上有一些小图标，你可以用鼠标把它们拖到别的地方。
代码示例：
<!DOCTYPE html> <html> <body> <!-- 可拖动的元素 --> <div id="dragMe" draggable="true" ondragstart="drag(event)"> 拖动我 </div> <!-- 放置区域 --> <div id="dropHere" ondrop="drop(event)" ondragover="allowDrop(event)"> 放到这里 </div> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </body> </html>
在这个例子中，draggable="true" 表示这个元素是可以拖动的。当拖动开始时，drag 函数会记录被拖动元素的信息。当元素被放到目标区域时，drop 函数会把元素放到目标区域里。
地理定位 API
地理定位 API 就像一个小导航员，能让网页获取用户的地理位置信息。这在很多应用场景中都很有用，比如地图导航、附近商家推荐等。
代码示例：
<!DOCTYPE html> <html> <body> <button onclick="getLocation()">获取我的位置</button> <p id="locationInfo"></p> <script> function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { document.getElementById("locationInfo").innerHTML = "你的浏览器不支持地理定位。"; } } function showPosition(position) { document.getElementById("locationInfo").innerHTML = "纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude; } </script> </body> </html>
当用户点击“获取我的位置”按钮时，浏览器会询问用户是否允许获取地理位置。如果用户允许，就会调用 showPosition 函数，把用户的经纬度信息显示在网页上。
与 CSS、JavaScript 更深入结合
HTML 是网页的骨架，CSS 能让它变得漂亮，JavaScript 能让它动起来。把它们结合得更好，就能做出更酷炫的网页。
实现动态菜单效果
<!DOCTYPE html> <html> <head> <style> /* 导航菜单样式 */ nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { display: inline-block; position: relative; } nav ul li a { display: block; padding: 10px 20px; text-decoration: none; background-color: #333; color: white; } nav ul li ul { display: none; position: absolute; top: 100%; left: 0; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } nav ul li:hover ul { display: block; } nav ul li ul li { display: block; } nav ul li ul li a { color: black; } </style> </head> <body> <nav> <ul> <li><a href="#">首页</a></li> <li> <a href="#">产品</a> <ul> <li><a href="#">产品 1</a></li> <li><a href="#">产品 2</a></li> </ul> </li> <li><a href="#">关于我们</a></li> </ul> </nav> </body> </html>
在这个例子中，通过 CSS 实现了一个下拉菜单的效果。当鼠标悬停在“产品”菜单上时，会显示出子菜单。
点击按钮改变元素颜色
<!DOCTYPE html> <html> <body> <button onclick="changeColor()">点击改变颜色</button> <p id="myText">这是一段文本。</p> <script> function changeColor() { var text = document.getElementById("myText"); text.style.color = "red"; } </script> </body> </html>
这里用 JavaScript 实现了一个简单的交互效果，当用户点击按钮时，段落文本的颜色会变成红色。
