H5 Mosh教程笔记
先列出教程中会用到的网站
网站H5规范验证网站
CSS格式规范验证网站
转义字符查询
免费图片下载网站
免费图片视频下载网站
浏览器HTML标签，CSS属性支持情况查询网站
CSS一致化工具安装
渐变色代码生成网站
CSS形状代码生成网站
字体网站fontsquirrel
字体网站fonts
字体网站myfonts
rem字体大小预览网站
css雪碧图工具网站，或者谷歌一下css sprites
DataURI生成网站，或者谷歌一下Data URI Generator
CSS滤镜展示
图片裁切工具网站，或者谷歌一下CSS Clip Generator
不同分辨率图片生成网站
图片格式转换网站
矢量图背景网站
图标字体网站
表单提交测试网站
教程开始
· 表单
· 创建基本表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.5;
}
label {
display: block;
}
/* 选择input标签里type为text和email的 */
input[type="text"],
input[type="email"] {
border: 1px solid #ccc;
border-radius: 5px;
padding: 0.5rem 0.7rem;
}
/* 设置input标签属性为text和email的，在获得焦点时的样式 */
input[type="text"]:focus,
input[type="email"]:focus {
color: #7db0fb;
outline: 0;
box-shadow: 0 0 0 4px rgba(24, 117, 255, 0.25);
/* 设置过渡效果，边框颜色过渡时间0.15s，阴影过度时间0.15s，避免边框出现的太突然 */
transition: border-color 0.15s, box-shadow 0.15s;
}
button {
background: #0d6efd;
color: #fff;
border: 0;
padding: 0.5rem 0.7rem;
border-radius: 5px;
}
.form-group {
margin-bottom: 1rem;
}
</style>
</head>
<body>
<form action="">
<div class="form-group">
<label for="name">Name</label>
<input id='name' type="text">
</div>
<div class="form-group">
<label for="email">Email</label>
<input id='email' type="email">
</div>
<button type="submit">Register</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
· CSS框架
CSS框架是已经写好的CSS样式，我们只需要使用就好，常见的如bootstrap，Milligram等，使用前只需要引入对应的样式文件，学习或者记住相关的CSS类，就可以很快的搭建出一个好看的网站，例子中使用的是Milligram，不需要写或绑定任何CSS类，就已经有一个不错的效果了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- CSS only -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
/>
<style></style>
</head>
<body>
<form class="" action="">
<div class="">
<label class="" for="name">Name</label>
<input class="" id="name" type="text" />
</div>
<div class="mb-3">
<label class="" for="email">Email</label>
<input class="" id="email" type="email" />
</div>
<button class="" type="submit">Register</button>
<button class="" type="reset">Reset</button>
</form>
</body>
</html>
· 文字输入区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
/>
<style>
form {
width: 50%;
}
textarea {
resize: none;
}
</style>
</head>
<body>
<form action="">
<!-- input的类型可以是text，email，password，number等 -->
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- input的类型可以是text，email，password，number等 -->
<!-- input和textarea标签的还有其他参数，如placeholder，占位文字 -->
<!-- readonly values=""，只读，并显示value内容 -->
<!-- disabled values""，禁用标签，并显示value内容，提交表单时，也不会提交该内容" -->
<!-- maxlength，最大长度，超过最大长度便不能在输入 -->
<!-- autofocus，页面加载完成后自动获取焦点 -->
<input type="text" placeholder="Email">
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
</body>
</html>
· 数据列表(输入建议列表)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
/>
</head>
<body>
<form action="">
<!-- 通过ID可以让两个标签关联起来，这里的datalist就是关联了list为countries的input标签 -->
<!-- 所以点击input标签时，展示出数据列表 -->
<!-- options里的value是提交表单时，需要传给服务器的值 -->
<!-- 但options里的value会显示在列表里，需要重新命名一个属性，这里命名为data-value -->
<!-- 再用JS来读取这个属性 -->
<!-- autocomplete，自动补全输入内容，浏览器会记住上次的输入并提示补全，可以关闭或开启 -->
<input list="countries" type="text" autocomplete="off">
<datalist id="countries">
<option data-value="1">China</option>
<option data-value="2">USA</option>
<option data-value="3">England</option>
<option data-value="4">Koera</option>
</datalist>
</form>
</body>
</html>
· Drop-down List，下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
/>
</head>
<body>
<form action="">
<!-- selected为默认选项 -->
<!-- select标签还可以添加multiple，表示可以多选 -->
<select name="" id="">
<option value="">Select a cource</option>
<option value="1" selected>HTML</option>
<option value="2">CSS</option>
<option value="3">JavaScript</option>
</select>
</form>
<form action="">
<!-- selected为默认选项 -->
<!-- select标签还可以添加multiple，表示可以多选 -->
<select name="" id="">
<optgroup label="Courses">
<option value="1" selected>HTML</option>
<option value="2">CSS</option>
<option value="3">JavaScript</option>
</optgroup>
<optgroup label="Languages">
<option value="4">Java</option>
<option value="5">Go</option>
<option value="7">C++</option>
</optgroup>
</select>
</form>
</body>
</html>
· 复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<div>
<!-- checked 是默认选项 -->
<!-- 也有disabled，禁用选项，禁止选择某些checkbox -->
<input type="checkbox" name="" id="front-end" checked>
<!-- label-inline 是CSS框架的类，具体参考CSS框架文档 -->
<label class="label-inline" for="front-end">Front-end</label>
</div>
<div>
<input type="checkbox" name="" id="back-end">
<!-- label-inline 是CSS框架的类，具体参考CSS框架文档 -->
<label class="label-inline" for="back-end">Back-end</label>
</div>
</form>
</body>
</html>
· 单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
/>
</head>
<body>
<form action="">
<div>
<!-- 同样有checked和disabled参数 -->
<input type="radio" name="membership" id="silver">
<lablel for="silver" class="label-inline">Silver</lablel>
</div>
<div>
<input type="radio" name="membership" id="gold">
<lablel for="gold" class="label-inline">Gold</lablel>
</div>
</form>
</body>
</html>
· 滑动条
因为涉及到JavaScript，Mosh交给我们自己去学习-_-#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
/>
</head>
<body>
<form action="">
<input type="range" name="" id="" min="0" max="100" value="90">
</form>
</body>
</html>
· 文件域(就是选择文件上传)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
/>
</head>
<body>
<form action="">
<!-- mutiple 参数为是否可以多选 -->
<!-- accept 限制可选文件类型具体类型可以搜一搜 -->
<input type="file" name="" id="" accept=".jpg, .png">
</form>
</body>
</html>
· 将关联输入域分组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
/>
</head>
<body>
<form action="">
<!-- 一个fieldset就是一个分组 -->
<!-- legend 就是分组标题，也可以用 section和h标签组合来表示分组及分组的标题 -->
<fieldset>
<legend>Billing Address</legend>
<input type="text" />
<input type="text" />
<input type="text" />
</fieldset>
<fieldset>
<legend>Payments</legend>
<input type="text" />
<input type="text" />
<input type="text" />
</fieldset>
</form>
</body>
</html>
· 隐藏域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
/>
</head>
<body>
<form action="">
<!-- 这一个input并不会显示出来，但在提交表单的时候，会把这个input标签的内容一并提交 -->
<!-- 切记别放敏感信息，用户虽然看不到，但查看页面源码的时候，可以看到 -->
<input type="hidden" name="course-id" value="121">
</form>
</body>
</html>
· 数据校验
表单必备选项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
/>
</head>
<body>
<form action="">
<!-- required表示该项必填 数据验证必须要有-->
<input type="text" required minlength="3" maxlength="10">
<input type="email" required minlength="3" maxlength="10">
<input type="date" required minlength="3" maxlength="10">
<input type="number" required min="0" max="20">
<button type="submit">SUBMIT</button>
</form>
</body>
</html>
· 提交表单
可以使用表单提交测试网站创建自己的表单提交地址(action)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
/>
</head>
<body>
<!-- action是提交表单时的URL，method是使用哪种http提交方式 -->
<form action="" method="post">
<!-- input标签中的name就是提交表单内容的key，对应这个input标签的内容 -->
<!-- 查看一下formspree中你创建的表单提交内容就能明白了 -->
<input type="text" placeholder="Name" name="Name">
<input type="email" name="Email" id="" placeholder="email">
<button type="submit">SUBMIT</button>
</form>
</body>
</html>
下一篇
H5 Mosh教程笔记 - 过渡和动画简介
上一篇
H5 Mosh教程笔记 - 图片简介