整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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对于语法的规范不是很严格，但是个人建议，标签采用小写，引号加上，这两点是为了让页面看起来美观，也是为了方便后面页面编写出错时找错。
在前端开发编写html文件的时候，我们可能会很熟练的写出常见的html元素，但是如果问到某些元素的差别时，大家不一定能说的出来，今天就给大家总结一下那些很常见但容易混淆的属性。
html与css
css样式文件引入的方式有两种，分别是link标签和@import。
link语法结构
link语法结构如下，注意rel='stylesheet'属性要加上。
link语法结构
@import语法结构
当@import用在html中时，需要配合style标签
@import在html中
当@import用在css文件中，直接使用@import url()即可
@import在css中
既然link与@import都可以用来引入css，那么它们的区别是什么呢？我们又该如何选择呢？
link是XHTML标签的一种，除了可以加载css外，还可以定义其他rel属性，而@import只能用来加载css。
link标签在加载css时，与页面一同加载，而@import需要等到网页完全加载以后才进行加载。
link是XHTML标签，不存在兼容问题，而@import是在CSS2.1中提出的，对于低版本的浏览器不支持。
link标签可以通过Javascript代码去控制其属性，而@import不可以。
javascript控制link
@import支持在css文件中再次引入其他css文件，方便对多个css文件的管理。
因为@import引入的文件需要在网页完全加载后再加载，如果在网络速度较慢的情况下，会出现页面闪现，因此建议使用link标签代替@import。
html元素的readonly与disabled属性一般都是用于无法改变表单的内容，但是两者也是有区别的。
readonly属性只针对input(text,password)和textarea元素，而disabled适用于所有表单元素，包括select,radio,checkbox,button等。
在表单元素使用了disabled后，该元素的的值不会随着form的action请求传递到服务器端，而使用readonly的元素值可以传递到服务器端。
以下是一些关于两者的使用建议。
在表单中为用户预填的唯一标识码，不允许用户改动，而且需要传递到后台的使用readonly属性。
用户提交完表单元素后，等待服务器端的验证，这个过程应该将元素设为disabled，button和submit也应该设为disabled，以防止重复提交。
title属性
img标签的title属性是用来提供一些建议性的信息，在鼠标停留在上方时会显示，它对于图片来说只是一种注释性的信息，重要性偏低。
alt属性
alt属性是为不能显示图像时，用来指定替换文字，需要注意的是替换文字是用来代替文字的，而不是用来注释文字的。
属性的使用
在做图片为主的网页时，考虑到网页的SEO，应当设置图片的alt属性为图片的真实内容，而给title设置一些建议性的内容。
今天这篇文章主要将了几个html中容易混淆的属性，你有收获吗？
绍input[type="hidden"],input[type="file"]两种特殊的表单元素，readonly disabled只读属性与禁用属性的区别于使用场景。
*请认真填写需求信息，我们会在24小时内与您取得联系。
