整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
HTML5 引入了各种新的语义 HTML 元素 <section> 、<main>等来帮助替换令人生畏的<div> 。在开发网站时，我们应该了解布局的每个部分代表什么，并尝试为其使用适当的<article>、<nav> 元素。
WCAG指定文本和背景之间的最小对比度4.5:1（可以在 Chrome 开发人员工具中查看）。因此我们在设计时应始终牢记这一点。此外，请记住，颜色的使用应有意义且稀疏，以避免混淆和信息过载。
尝试使用alt为我们的 <img> 元素提供提示属性，以便屏幕阅读器不会读取该src属性。我们可以为装饰图像使用空alt属性，这将通知屏幕阅读器跳过它们。同样，尝试为我们网站上的任何视频内容提供隐藏式字幕。
我们在在网站开发中使用图标和颜色来指示状态、突出显示或提供上下文非常普遍，并且提供了良好的用户体验。但是，可能不是每个人都可以单独使用图标和颜色，因此请确保使用适当的文本文字来支持它们，从而在此过程中满足所有用户的需求。
具有相似含义或功能的元素在我们的网站上应该看起来相似。对于元素及其各自的状态尤其如此，例如 <a> 和 <button> 元素，因为用户必须能够轻松识别他们可以与之交互的元素并预测他们的行为。
任何类型的<input>元素都应该适当地标记，使用<label>元素的for属性或aria-label属性进行包装。不要依赖placeholder属性来传达有关<input>元素的含义，因为这会给屏幕阅读器上的用户带来问题。
响应性通常被认为是屏幕大小或移动设备与桌面设备，但用户可以在许多不同的设备上浏览我们的网站。尝试通过提供通过鼠标、键盘、拇指或三者的任意组合来导航和使用应用程序的方法来满足所有这些需求。
网站的布局与用户相关的内容应该易于浏览、理解和查找。无论设备或可访问性需求如何，具有清晰和适当分组的良好组织内容可为所有用户提供更好的用户体验。
更多内容请访问我的网站https://www.icoderoad.com
前面学习了HTML5的基础新元素，接下来小编将继续分享HTML5必学的知识点--HTML5新表单
在开始之前，先来了解一下HTML5的声明，<!doctype html>，通过HTML的声明，体现W3C故意弱化HTML的版本，但是小标要说明下版本不更新，不等于内容不更新，而是W3C希望HTML5是融合版本。
关于HTML的发展历史， HTML的规范不严格一直以来就是前端开发人员头疼的地方， 元素定义大小写不敏感。
直到XHTML 1.0的出现 - 前端开发人员拥抱，因为此时的HTML只允许小写
XHTML 2.0版本出现后 - 前端开发人员重新回到HTML， 推翻了之前很多习惯
HTML 4版本出现之后 - 比较好的版本
HTML 5版本出现 - 经历8年后，终于在2014年10月底发布
HTML5的特点：移动端浏览器相比PC端浏览器对H5的支持更好，这要感谢苹果公司 - 乔布斯
小编提醒大家：目前网上所谓的H5，并不是指现在所学HTML5技术，HTML5的新特性内容不多,与JS(难)配合使用
那么实际工作中使用多不多?其实实际上来说，相对并不多
其实就是在为将来学习 - HTML5将来一定是主流。
*******华丽分割线*******
接下来开始学习，HTML5必学知识点—新表单，主要从4个方面入手：新类型、新元素、新属性、新验证
1.email类型 - 判断字符串中是否包含"@"符号，注意的是不能以"@"开始、不能以"@"结束
2.搜索类型 - search
3.URL类型 - 判断字符串中是否包含"http:"，注意的是以"http:"开始,验证通过，以"http:"结束,验证通过
4.电话号码类型 - tel，注意的是只有在手机端浏览器访问时有效果
5.数字类型 - number，需要注意的是允许输入非数字内容,但是不允许提交，在设置min和max时，允许输入范围外的值,不允许提交；这个类型有一些属性： min - 设置数字的最小值；max - 设置数字的最大值；step - 设置步长,每次增加或减小的量值
6.范围类型 - range，效果就是滑动条，属性：min - 最小值、max - 最大值、step - 步长、value - 当前值
7.颜色类型 - color
8.日期类型 - date，日期格式 - yyyy/MM/dd
9周、月份类型 （实际很少使用）
10周 - week（实际很少使用）
11月份 - month（实际很少使用）
1.<datalist>元素，用法：需要配合input元素使用，在input元素中定义list属性(值为datalist元素的id值)，好处就是数据与结构的分离
2.<progress>元素，就是实现一个进度条，属性有：max - 设置进度条的最大值、value - 设置进度条当前的值
3. <meter>元素，用法和<progress>元素类似，作用 - 刻度，属性包括：min和max - 设置最小值和最大值、 value - 表示当前值，high和low - 设置预警值（举个常见的例子，当你手机的电量小于10%时候，一般会显示红色的一小段进度）
4.<output>元素，和<input> 输入框正好相反，<output>是输出框，属性：for指定要输出的元素进行关联（实际开发中,很少使用）
1.placeholder属性：就是实现input输入框的默认提示信息，相比value属性值更好用。这个在实际开发过程中非常常见
2.autofocus属性：就是自动获取焦点、用法有点不同，它不是key=vlaue的形式，而是直接只定义属性名(没有属性值)
3.multiple属性：就是允许输入框输入多个值，用法和autofocus一样只定义属性名(没有属性值)
4.form属性（实际开发中用到不多）：就是表单元素定义在表单之外，用法 - 值是相关表单的id属性值
1.验证属性：
required属性即：验证是否为空？返回false,表示当前元素值为空， 返回true,表示当前元素值不为空
pattern属性即：验证正则表达式，定义正则表达式时,不能添加"//"， 正则表达式不能验证是否为空
min和max属性即：验证最小值和最大值 ，只和number类型的input元素配置使用
minlength和maxlength属性即：验证最小长度和最大长度，minlength - 验证最小长度，maxlength - 限制最大长度（输入内容的长度不能大于maxlength的值）
validity属性即：HTML5提供表单验证的接口，通过该属性得到validityState对象，该对象提供一系列的有效状态， 有效状态可用于表单验证，得到validatyState对象，elem.validaty - 得到该对象
2.有效状态
valid - 返回Boolean,表示验证是否通过，true - 表示验证通过， false - 表示验证失败，
valueMissing - 表示值是否为空，返回值true - 表示元素值为空(错误)、false - 表示元素值不为空(正确) 注意该状态配合required属性使用
typeMismatch - 表示元素类型是否匹配，返回值true - 表示元素类型不匹配、false - 表示元素类型匹配、 该状态配合email、url、number等使用
patternMismatch - 表示正则表达式是否匹配、返回值true - 表示正则表达式不匹配、false - 表示正则表达式匹配，该状态配合pattern属性使用
tooLong - 表示元素内容长度是否过长，返回值true - 表示元素内容长度过长，false - 表示元素内容长度不长，该状态配合maxlength属性使用
maxlength属性 - 限制属性，tooLong可能不会出现(完整性)
rangeUnderflow - 表示元素值是否小于min值，返回值true - 表示元素值小于min的值，false - 表示元素值不小于min的值 该状态配合min属性使用
stepMismatch - 表示元素值与step值是否不符，返回值true - 表示元素值与step值不符，false - 表示元素值与step值相符 该状态配合step属性使用
customError - 自定义错误，配合setCustomValidity()方法使用，作用就是替换之前的判断表达式，自定义错误提示信息setCustomValidity(自定义错误信息)，一旦调用该方法,默认认为就是错的，上述所有的有效状态返回错误值 验证正确时,调用该方法,将错误信息置为空
HTML5是新的HTML标准，是对HTML和XHML的继承和发展。学习HTML5首先需要了解HTML5的语法基础。本章将围绕HTML5文档基本格式、HTML5语法来进行讲解。
下面是HTML5最基本的代码结构：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>1.<!doctype>标记
<!doctype>标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML标准规范。只有在开头使用<!doctype>声明，浏览器才能将该网页作为有效的HTML文档，并按指定的文档类型进行解析。使用HTML5的DOCTYPE声明，会触发浏览器以标准兼容模式来显示页面。
2.<html>标记
<html>标记位于<!doctype>标记之后，也称为根标记，用于告知浏览器其自身是一个HTML文档。<html>标记标志着HTML文档的开始，</html>标记表示HTML文档的结束。他们之间是文档的头部和主体内容。
3.<head>标记
<head>标记用于定义HTML文档的头部信息，也称头部标记，是用来封装其他位于文档头部标记的标记，如：<meta>、<title>、<link>、<style>、<script>标记等。上面的代码中，<meta>标记的属性charset指的是文档的字符编码，“utf-8”表示国际通用字符编码。<title>标记用于告诉用户这个页面是什么，如：百度页面，在浏览器导航栏的最上方百度所属页面，会有一个百度的标题。<link>标记一般用来引入外部的CSS文件。<style>标记用来包裹与html标签对应的CSS样式，通常与选择器结合起来使用。<script>标记用于引入外部的JavaScript（js）文件，如果<script>标记位于<body>标记中，就可以将js代码写在<script>标记中。
注意：一个HTML文档中只能包含一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
部分标记会在下一章节进行详细解释
4.<body>标记
<body>标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内，<body>标记中的内容才是最终展示给用户看的。
一个HTML文档只能包含一对<body>标记，且必须位于<html>标记内部，<head>标记的后面，与<head>标记是并列关系。
1.标签不区分大小写
为了兼容各个浏览器，HTML5采用宽松的语法格式，标签可以不区分大小写就是HTML5语法变化的重要体现
<p>开始标记的p标记小写，结束标记的p标记大写</P>上面的代码标签的开始和结束标签大小写虽然不同，但它是符合HTML5语法的规范的。
2.允许属性值不使用引号
在HTML5中，属性值不放在引号中也是正确的，如：
<input type=text readonly=readonly/>
<input type=checkbox checked=a/>这段代码等价于：
<input type="text" readonly="readonly"/>
<input type="checkbox" checked="a"/>3.允许部分属性值的属性省略
在HTML5中，部分标志性的属性的属性值是可以省略的，如：
<input type="text" readonly="readonly"/>
<input type="checkbox" checked="checked"/>
可以省略为：
<input type="text" readonly/>
<input type="checkbox" checked/>下面是一张关于HTML5可以省略属性值的属性表：
提示：虽然HTML5对于语法的规范不是很严格，但是个人建议，标签采用小写，引号加上，这两点是为了让页面看起来美观，也是为了方便后面页面编写出错时找错。
*请认真填写需求信息，我们会在24小时内与您取得联系。
