零基础能学HTML5好吗 HTML5好学吗&
随着HTML5技术日渐成熟，未来web可能就是HTML5的天下！从国外相关行业对HTML5的青睐可以看出HTML5巨大的商业价值！而国内的主流浏览器也都对HTML5进行支持!
愈来愈多的行业巨子正不断向HTML5示好。会给HTML5带来怎样的影响？
据统计2013年全球有10亿手机浏览器支持 HTML5，同时HTML Web开发者数量将达到200万。HTML5将成为未来5-10年内，移动互联网发域的主宰者。也是为何那么多人学HTML5的理由之一！因为HTML5的行业发展非常可观！
蓝鸥HTML5开发者
HTML5在移动端上也有广泛的应用，会让更多的人才涌入HTML5就业市场！那么，HTML5好学吗？零基础是否能学好？
面对HTML5技术火爆，很多人都担心HTML5不好学，技术的火爆和技术本身的难易程度并没有太大的关系。对于一个拥有一定学习能力的人，学习HTML5并不难！从完成的技术编程角度来说，HTML5相对于后台和开发而言还是简单的。毕竟HTML5是对HTML标准的第五次修订。
蓝鸥的HTML5课程体系里面不仅要学习HTML5+CSS3技术，课程里面还会学习很多企业常用技术以及最新的全栈及跨平台混合开发技术，更重要的是还有很多企业级项目实战开发，这些都可以提升学员的分析问题、解决问题、技术学习的能力，保证学员工作后能够迅速融入团队。这也不得不承认蓝鸥的学员能拿高工资，的确是有实力的。
随着移动互联网的快速发展以及HTML5开发人才在各大企业中所占有的重要地位来看，HTML5开发这么技术是值得我们去学习的。
目前针对于HTML5开发，对于的职位有很多，比方：HTML5开发工程师、web APP开发工程师、JavaScript开发工程师、web前端开发工程师，HTML5游戏开发等工作。
HTML5的就业选择较多，就业压力低，行业限制少，可以选择所有的热门行业，如互联网、电子商务、教育等等。更能进入大型网络公司。如果您对 HTML5感爱好，不妨给自己一个时机去试一试喽!
你尚未登录或可能已退出账号:(请先或者前端的发展如此之迅猛，一不留神，大侠你可能就会被远远地甩在后面了。如果你不想被HTML5的改变/更新搅得不知所措的话，可以把本文的内容作为必须了解的热身课程。
一、新的Doctype
//zxx:”doctype”中文意思指“文档类型”
仍在使用麻烦的，不可能记得住的XHTML文档类型？
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN&
&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
如果是，为什么还在用呢？使用新的HTML5文档类型代替吧。你会活得更久的——正如Douglas Quaid说的
&!DOCTYPE html&
我就琢磨着，为了HTML5搞个这厮代码，您可能会对这段代码究竟靠不靠谱表示怀疑。不用担心，如今这是可行的，只有老的浏览器需要一个特定的doctype（文档类型）。浏览器如果不知道doctype，就会很简单的以标准模式对包含的标签进行渲染。所以，妹妹你大胆的向前冲，把小心谨慎都抛到九霄云外，去拥抱新的HTML5文档类型吧。
二、图形元素(The Figure Element )
看看下面给图片添加的标示：
&img src=&path/to/image& alt=&About image& /&
Image&of&Mars.&&&
文字裹在p标签里，与img标签各行其道，很难让人联想到这就是标题。HTML5通过采用&figure&元素对此进行了改正。当合&figcaption&元素组合使用时，我们就可以语义化地联想到这就是图片相对应的标题
&img src=&path/to/image& alt=&About image& /&
&figcaption&
&p&This is an image of something interesting. &/p&
&/figcaption&
三、&small&重新定义
还在不久前，&small&元素被用来创建靠近logo且相关的副标题。这是个很有用的表现元素，但是，现在，这种用法可能就不正确了。&small&元素已经被重新定义了，指小字，因而更具可用性。试想下你网站底部的版权状态，根据对此元素新的HTML5定义，&small&可以正确地包裹这些信息。
small元素专指“小字”。
四、脚本(scripts)和链接(links)无需type
您可能现在仍在给link和script标签增加type属性。
&link rel=&stylesheet& href=&path/to/stylesheet.css& type=&text/css& /&
&script type=&text/javascript& src=&path/to/script.js&&&/script&
这已经是老黄花菜，非必需品了。这意味着，这些标签都各自指向样式表和脚本。因此，我们可以把type属性一起干掉。
&link rel=&stylesheet& href=&path/to/stylesheet.css& /&
&script src=&path/to/script.js&&&/script&
五、引号还是不要引号
…这确实是个问题。记住，HTML5不是XHTML，要是你不愿意，你没有必要非得用引号标记包裹你的属性，没有必要非得闭合元素。换句话说，只要你自己觉得舒服，就没有什么对错之分。对于我自己来说就是如此。
&p class=myClass id=someId& Start the reactor.
对此取舍你还得自己拿主意。如果你更倾向于结构化的文档，就算天塌下来，也要把引号牢牢拽在怀里。
六、内容可编辑
最新的浏览器有个很赞的新属性可以应用到元素上，叫做contenteditable。顾名思意，就是允许用户编辑元素内容包含的任意文本，包括子元素。类似的用途还有很多，像是简单的待办事项清单应用程序，可大大利用其本地存储的优势。
&ul contenteditable=&true&&
&li&悼念遇难香港同胞 &/li&
&li&深圳特区30周年&/li&
&li&伊春空难&/li&
或者，根据前面所学到的一些技巧，我们可以把它写成：
&ul contenteditable=true&
您可以狠狠地点击这里：
七、Email输入(Inputs)
如果我们给表单输入框应用名为”email”的type属性，我们可以命令浏览器只允许符合有效的电子邮件地址结构的字符串。没错，内置表单验证即将到来，由于一些显而易见的原因，我们还不能100%依赖内置验证，较旧的浏览器不认识这个”email”型，它们会简单地退回到普通文本框。
&form action=&& method=&get&&
&label for=&email&&邮箱:&/label&&input id=&email& name=&email& type=&email& /&
&button type=&submit&&确定&/button&
您可以狠狠地点击这里：
//zxx:经我小测了下，貌似仅在Chrome浏览器下有效果(xp系统)，当输入内容不是合法邮箱格式，点击“确定”按钮是没有反应的；当输入为合法邮箱，点击“确定”按钮才会提交刷新页面。
目前而言，我们不能依赖浏览器验证，客户端/服务器验证还是必须的。
还应当指出，当谈到哪些元素和属性支持和不支持时，当前所有的浏览器都有点靠不住的。例如，Opera似乎支持电子邮件验证，但仅在name属性被指定的时候。而且，它不支持占位符属性，这个我们将会在后面学到。底线是不依赖于这种形式的验证…但你仍然可以使用它！
八、占位符(Placeholders)
//zxx:此处内容非直译，有删改
Placeholders什么意思呢，就是文本框/文本域空间默认会有个文字提示，获得焦点时，此提示文字消失；失去焦点时如果内容为空，提示文字又出现。如下图所示：
这些表单控件里面显示的些提示性的文字就是占位符。按照以往的做法，我们需要使用一点JavaScript代码实现占位符效果，例如我之前的“”一文所展示的。当然，你需要设定一个初始的默认的value值，然后根据输入内容进行判断，从而决定文本框值的改变与否。如果您使用占位符(placeholders)属性，一切就轻松了。
&label for=&email&&邮箱:&/label&
&input id=&email& type=&email& placeholder=&& size=&26& /&
根据我的测试，目前仅webkit核心的浏览器支持placeholders属性，像是Chrome5，Safari4，结果如下所示：
您可以狠狠地点击这里：
九、本地存储(Local Storage)
多亏了本地存储(非正式的HTML5，本着方便归纳的目的)，我们可以让高级浏览器记住我们的编辑后的内容，即使浏览器被关掉或是页面刷新。
//zxx:原视频默认展示的是YouTube视频，不翻墙看不了，所以，这里展示来自另外一个网站的video。建议全屏观看，以看清其中的HTML与JavaScript代码
//zxx:根据视频内容，我自己做了个demo，关于本地存储的。
您可以狠狠地点击这里：
IE8浏览器已经支持了本地存储，如下截图所示：
尽管显然不支持所有的浏览器，我们可以在Internet Explorer8时，Safari 4和Firefox 3.5下期待此工作方式。请注意，为了弥补旧的浏览器将无法识别本地存储，你应该先测试，以确定window.localStorage是否存在。
十、语义的Header和Footer
那些过往的日子：
&div id=&header&&
&div id=&footer&&
div嘛，很自然的，没有语义化的结构——即使在应用了id后。现在，通过HTML5，我们可以使用&header&和&footer&元素。以上的代码可以替换成：
它完全适合您有多个页眉和页脚的项目。
尽量不要混淆”header”和”footer”这些元素。他们只是指他们的容器。因此，将博客底部的，例如，元信息放在footer元素内部是说得通的。这同样也适用于header。
十一、更多HTML5表单特征(More HTML5 Form Features )
通过下面视频学习更多有用的HTML5表单特征：//zxx:TouTuBe视频，需要翻墙
十二、IE和HTML5(Internet Explorer and HTML5)
不幸的是，讨厌的IE浏览器需要动点小手术才能理解新的HTML5元素。
所有元素，默认的，都有个inline的display
为了确保所有新的HTML5元素能以block水平的元素正确地渲染，有必要对其做如下定义：
header, footer, article, section, nav, menu, hgroup {
不幸的是，IE仍旧忽略这些样式，因为它不知道这些标签从哪里来的，好比是header元素。幸运的是，有一个简单的解决办法：
document.createElement(&article&);
document.createElement(&footer&);
document.createElement(&header&);
document.createElement(&hgroup&);
document.createElement(&nav&);
document.createElement(&menu&);
奇怪的是，这段代码似乎触发IE浏览器。为了更简单将此应用到每个新的应用过程中，雷米夏普(Remy Sharp)创建了一个脚本，通常称为HTML5 shiv。该脚本同样修复了些显示问题。
&!--[if IE]&
&script src=&/svn/trunk/html5.js&&&/script&
&![endif]--&
十三、文档某一部分的信息(hgroup)
想象一下，在我的网站的标题，我有我的站点的名称，随后立即由一个副标题。虽然我们可以使用一个&h1&和&h2&标签，为其分别创造标记，但是依旧没有（因为HTML4）一个简单的方法来语义上说明了两者之间的关系。此外，一个h2标记的使用提出了更多的问题，在层次结构上，当涉及到其他网页上显示的标题时。通过使用不影响文档的大纲流hgroup元素，我们可以将这些标题组合在一起。
&h1& Recall Fan Page &/h1&
&h2& Only for people who want the memory of a lifetime. &/h2&
十四、必要的属性(Required Attribute )
表单允许新的必要属性，用来指定是否需要特殊的input。这取决于你的代码偏好，你可以以下面两种方式之一申明此属性。
&input type=&text& name=&someInput& required&
或者，使用更结构化的方法：
&input type=&text& name=&someInput& required=&required&&
两种方法都行。有了这个代码，并且浏览器支持此属性，如果“someInput”文本框是空白，则表单不会被提交。下面是一个简单的例子，我们还将添加占位符属性，因为没有理由不这样做。
&form action=&& method=&get&&
&label for=&name&&姓名:&/label&
&input id=&name& name=&name& type=&text& placeholder=&zhangxinxu& required=&required& /&
&button type=&submit&&提交&/button&
您可以狠狠地点击这里：
如果input里面内容是空白，则表单提交的时候，文本框会高亮显示。//zxx:貌似仅在Chrome浏览器下有点小效果
十五、Autofocus属性
同样，HTML5的解决方案消除了对JavaScript的需要。如果一个特定的输入应该是“选择”，或有重点的，默认情况下，我们现在可以利用自动获取焦点属性。
&input type=&text& name=&someInput& placeholder=&zhangxinxu& required autofocus&
有趣的是，虽然我个人更倾向于喜欢XHTML的方法（用引号，等等），写作“autofocus=autofocus”让人感到有点怪。因此，我们将坚持使用单一关键字的方法。
十六、Audio支持
我们无需再依赖第三方插件区渲染音频。HTML5提供了&audio&元素，嗯，至少，最终，我们将不必担心这些插件。就目前，只有最近期的的浏览器提供HTML5音频支持。在这个时候，它仍然是一个很好的做法提供一些向后兼容的形式。
&audio autoplay=&autoplay& controls=&controls&&
&source src=&file.ogg& /&
&source src=&file.mp3& /&
&a href=&file.mp3&&Download this file.&/a&
Mozilla和WebKit的还没有完全相处，当涉及到音频格式， Firefox会希望看到一个.ogg文件，而WebKit的浏览器支持.mp3扩展。这意味着，至少在现在，你应该创建两个版本的音频。
当Safari加载页面时，它不会承认.ogg格式，会跳过它并移动到的MP3版本，因此。请注意IE，每往常一样，不支持这些格式，Opera 10和以及以下版本只能使用.wav文件。
十七、Video支持
与&audio&元素很类似，在新的浏览器中也存在Video！事实上，就在最近，，当然，是为支持此功能浏览器。因为HTML5的规范没有指定特定的视频编解码器，它留给了浏览器来决定。虽然Safari和Internet
Explorer9可以预期支持H.264格式的视频（其中Flash播放器可以播放），Firefox和Opera是坚持开源Theora 和Vorbis格式。因此，当显示HTML5的视频，您必须提供这两种格式。
&video controls preload&
&source src=&cohagenPhoneCall.ogv& type=&video/ codecs='vorbis, theora'& /&
&source src=&cohagenPhoneCall.mp4& type=&video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'& /&
&p& Your browser is old. &a href=&cohagenPhoneCall.mp4&&Download this video instead.&/a& &/p&
无论是”ogg”格式还是”mp4″格式的视频Chrome浏览器都能正确编码
还有一个值得注意的一些事情：
我们技术上不需要来设置type属性，但是，如果我们不这样做，浏览器不得不自己去寻找类型。节省一些带宽，还是你自己声明下吧。不是所有的浏览器理解HTML5视频。在资源元素的下面，我们可以提供一个下载链接，或嵌入视频的Flash版本代替。这取决于你。controls和preload属性就会在下面提及。有方法可以让所有的浏览器支持video标签，具体参见我前面的“”一文。
十八、视频预载(Preload Videos)
预载属性不完全是你想的那个样子，虽然，你应该先决定是否要在浏览器预装的视频。是否有必要？或许吧。如果访问者访问一个专门展示了一个视频的页面，你一定要预载的视频，节约参观者等待的一部分时间。影片可以通过设置 preload=”preload”或是简单地添加preload进行预载。我更喜欢后者的解决方案，它少了一点多余的东西。
&video preload&
十九、显示控制条
如果你使用过上面的每一个提到的技术点，你可能已经注意到，使用上面的代码，视频仅仅显示的是张图片，没有控制条。为了渲染出播放控制条，我们必须在video元素内指定controls属性。
&video preload controls&
请注意，不同浏览器渲染出来的进度条的模样都是不一样的。
二十、正则表达式
你发现自己多久匆匆编写一些正则表达式验证一个特定的文本。多亏了新的pattern属性，我们可以在标签处直接插入一个正则表达式。
&form action=&& method=&get&&
&label for=&username&&姓名:&/label&
&input id=&username& name=&username& type=&text& placeholder=&4-10个英文字母& pattern=&[A-Za-z]{4,10}& required=&required& autofocus /&
&button type=&submit&&提交&/button&
如果你熟悉正则表达式，那么应该清楚[A-Za-z]{4,10}表示接受4-10位不区分大小写的英文字母。如果浏览器支持pattern属性，则提交表单时，如果文本框中的内容不符合其正则表达式，文本框会高亮显示。如下图所示。
您可以狠狠地点击这里：
//zxx:我自己小测了下，貌似目前只在Chrome下有效(win系统)
注意到，我们已经开始组合使用这些很棒的属性。
如果您对正则表达式概念模糊了，可以。
二十一、属性支持检测
如果我们没有方法检测浏览器是否支持这些属性，这些就不能称之为好的属性。恩，不错的观点，事实上我们是有几种方法的，这里我们讨论2个。第一个是利用优秀的库，或者，我们可以创建和分析这些元素，以确定浏览器的能力。例如，在我们前面的例子，如果我们要确定浏览器是否能使用pattern的属性，我们可以添加一小段JavaScript到我们的页面上：
alert( 'pattern' in document.createElement('input') ); // boolean
事实上，这是一种确定浏览器兼容的常用方法。jQuery库了利用这种伎俩。在上面，我们创建了一个新的input元素，并确定了里面的pattern属性浏览器是否认得。如果是，浏览器则支持此功能。否则，当然就不支持了。
if (!'pattern' in document.createElement('input') ) {
// do client/server side validation
谨记此方法依赖于JavaScript。
二十二、mark元素(Mark Element )
试想&mark&元素作为高亮。此标签包裹的字符串应该与用户当前的行动相关联。例如，我在一些博客上搜索“北川景子”，我就可以使用一些JavaScript将当前的每个结果字符串用mark标签包裹。
&h3& 搜索结果 &/h3&
&p& 我很喜欢《零秒出手》里面那个拉小提琴的女孩，原来她叫做 &mark&北川景子&/mark&。 &/p&
二十三、什么时候使用div
我们有些人开始质问到底何时该使用div。现在我们可以使用header, article, section, 和footer，还有机会使用div…吗？当然可以。
div应该用在没有更好的元素的时候。
例如，如果你发现你需要包裹一段代码块在对内容定位处理的包装单元内。不过如果你是包裹一个博客文章，或者，可能是，底部的链接列表，则需考虑分别使用&article&和&nav&元素，因为其更具语义。
二十四、什么可以开始立即使用
一直谈论到现在的HTML5要到2022年才能全部完成，许多人完全忽视它，这是个巨大的错误。事实上，有少量的HTML5的功能，我们可以在我们所有的项目中使用！更简单，更干净的代码总是一件好事。在今天的视频快速展示的技巧中，我将告诉你一些可用的选项。
//zxx:YouTuBe视频，需要翻墙。
二十五、哪些不是HTML5(What is Not HTML5)
那些仅凭自己的假设形象将JavaScript变少的过渡被全部归为HTML5的人是可以理解的，嘿，甚至苹果无意中推动这一想法。对于非开发人员，谁管这个呢，它是一个简单的方法适用于现代网页标准。不过，对于我们来说，尽管它可能只是语义，重要的是要准确理解什么不是HTML5。
SVG:不是HTML5，至少5岁了。CSS3:不是HTML5，它是…CSS。Geolocation:不是HTML5.//zxx:Geolocation（地理位置）：通过HTML 5，您应该能够使Web应用程序可确定您的位置，并为您提供更多的相关信息。Client Storage(客户端存储):非HTML5，虽说有一点切合，但被排除在规范之外，原因在于，担忧其作为一个整体，会变得过于复杂。它现在有自己的规范。Web Sockets:不是HTML5，同样的，有着自己的一套准则。
不管你需求有多大的区别，所有这些技术可以归为现代网络堆栈。事实上，不少这些分支规范的管理着还是同一人。
二十六、data属性(The Data Attribute)
我们现在可以很正式地让所有的HTML元素支持自定义属性。然而，以前，我们可能会这样：
&h1 id=someId customAttribute=value& 小样，胆儿挺肥的呢 &/h1&
…校验器会小题大做！但是现在，只要我们以”data”为前缀定义我们的自定义属性，盗版属性立马变成正牌的了。如果你发现你曾经把一个重要的数据附加在诸如class的属性上，可能为了JavaScript之用，那么，本属性将大有帮助啊。
&div id=&myDiv& data-custom-attr=&My Value&& 巴拉巴拉，lady 嘎嘎 &/div&
检索自定义属性的价值
var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // My Value
此属性还可以用在CSS中，例如下面这个有些傻里傻气的CSS文字改变的例子：
.data_custom { display:inline- position: }
.data_custom:hover { color: }
.data_custom:hover:after {
content: attr(data-hover-response);
HTML代码：
&a class=&data_custom& data-hover-response=&我说过不要碰我！& href=&#&&不要碰我，雅蠛蝶~~&/a&
如果你的浏览器支持after伪类，以及content的attr属性，则可以看到类似下面的效果(IE8不一样)：
要查看上图所示的效果，您可以狠狠地点击这里：
还有，content属性其实是一个非常强大的属性，由于低版本的IE不支持，所以此属性尚未流行，关于content内容生成技术，可以参见我之前的“”这篇文章。
二十七、Output元素
正如你可能预料到的，output元素被用来显示部分计算，例如，如果你想显示一个鼠标的位置，或者是一系列数字的总和坐标，这个数据应被插入到output元素中。
举个简单的例子，当提交按钮被按下，我们用JavaScript将两个数字相加值插入到空的output中。
&form action=&& method=&get&&
10 + 5 = &output name=&sum&&&/output&
&button type=&submit&&计算&/button&
(function() {
var f = document.forms[0];
if ( typeof f['sum'] !== 'undefined' ) {
f.addEventListener('submit', function(e) {
f['sum'].value = 15;
e.preventDefault();
}, false);
alert('你的浏览器尚未准备好！');
自己测试了下，貌似现在只有在Opera浏览器下有上佳的效果：
如果您现在使用的是较新版本的Opera浏览器，您可以狠狠地点击这里：
此元素也可以接受一个属性，它反映了输出相关元素的名称，类似label工作原理。
二十八、使用区域input创建滑块(Create Sliders with the Range Input)
HTML5引进了range类型的input。
&input type=&range&&
最值得注意的是，它可以接收 min, max, step, 和value 属性，等等。虽然现在似乎只有Opera浏览器充分支持这种输入类型，但是当我们可以实际使用时，这将是美妙无比的！
参见下面的快速演示：
第一步：标签
首先，创建标签
&form method=&post&&
&h4&音量控制&/h4&
&input type=&range& name=&range& min=&0& max=&10& step=&1& value=&& /&
&output name=&result&&
第二步：CSS
下面，我们要使用一点点的样式。我们将使用:before和:after去告知用户我们制定的最大值和最小值。
input { font-size: 14 font-weight:
input[type=range]:before { content: attr(min); padding-right: 5 }
input[type=range]:after { content: attr(max); padding-left: 5}
font-size: 5.5
font-weight:
第三步：JavaScript
最后，我们
检测我们的浏览器是否认识range input，如果不，显示提示。当用户移动滑块的时候，动态改变output的值。监听，当用户离开滑块，插入值，同时本地存储。然后，下次用户刷新页面的时候，选择的区域和值会自动地设置成他们最后一次选择。
(function() {
var f = document.forms[0],
range = f['range'],
result = f['result'],
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;
// 检测浏览器是否是足够酷
// 识别range input.
var o = document.createElement('input');
o.type = 'range';
if ( o.type === 'text' ) alert('不好意思，你的浏览器还不够酷，试试最新的Opera浏览器吧。');
// 设置初始值
// 无论是否本地存储了，都设置值为5
range.value = cachedRangeV
result.value = cachedRangeV
// 当用户选择了个值，更新本地存储
range.addEventListener(&mouseup&, function() {
alert(&你选择的值是：& + range.value + &. 我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。&);
localStorage ? (localStorage.rangeValue = range.value) : alert(&数据保存到了数据库或是其他什么地方。&);
}, false);
// 滑动时显示选择的值
range.addEventListener(&change&, function() {
result.value = range.
}, false);
您可以狠狠地点击这里：
我的电脑是xp系统，默认主题，在滑块松开后Opera下的效果如下图所示，酷吧：
感谢您的阅读！我们已经讨论了很多，但可能只是触及到HTML5的皮毛，全当抛砖引玉，希望能对您的学习有所帮助！
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：2995次
排名：千里之外
转载：17篇
(1)(2)(1)(1)(1)(9)(9)零基础学习HTML5
来源：博客园
HTML5在近几年异常火热，因其功能强大、灵活多变等特点而被追捧。这篇博客是我跟随老师学习所的到的知识，从入门到精通需要的是坚持和系统地学习。让我们开始吧！ HTML5的基本结构&!DOCTYPE html&&html&
&meta charset="UTF-8"&
&title&&/title&
&/body&&/html&第一行为文件声明，每个文件都必须要有而且必须要在第一行。文件由html标签组成，大部分标签成对出现且闭合，也有单独出现的标签。不同标签之间可以嵌套，但是不可交叉。这里出现的标签有：head标签，body标签这些是基本标签。head 用于表示网页的元数据，即描述网页的基本信息。head标签中又有meta标签和title标签，他们又有各自的属性。meta标签常用属性：
1、charset：设置文档的字符集编码格式HTML5中设置字符集编码：&meta charset="UTF-8"&HTML4.01之前的格式为: &meta http-equiv="Content-Type" content="text/ charset=UTF-8" /&可以看到之前的代码十分繁琐，这也是H5中改进的内容。&&&常见的字符集编码格式：a.GB-2312：国标码，简体中文b.GBK:扩展的国标码c.UTF-8：万国码 其中，UTF-8为最常用的编码格式，为各国通用。
2、http-equiv:将我们的信息写给浏览器看，让浏览器按照这里面的要求执行，可选属性值：content-type(文档类型)refresh（网页定时刷新） set-cookie（设置浏览器cookie缓存）。这个标签需要配合content属性使用（http-equiv属性只是表明需要设置哪一部分，具体的设置内容，放到content属性中）。
例如：&meta http-equiv="content-type" content="text/html: charset=utf-8"/&
3、name：使用方法同“http-equiv”。name标签是将我们的信息写给搜索引擎看的。 常用且需要掌握的属性值：author（作者） &meta name="author" content=""
/&keywords（网页关键字）多个关键字用半角逗号分隔. &meta name="keywords"
content="HTML5,网页,web前端开发"/&
description（网页描述）搜索网站时，title下面的解释文字，至关重要。&meta name="description" content="这是我在杰瑞教育开发的第一个网页"/& 后两个个属性设置，网页必不可少。title标签：网页的标题，即网页选项卡上的文字。一般网页选项卡中我们会看到标题前有小图标，这里就用到了link标签link标签常用的属性：rel：声明链接文件的类型
type：图片的类型可以省略
href：表示图片的路径地址事例：&link rel="icon" type="image/x-icon" href="../img/icon.png"& 怎样选择文件路径之后会进行详述。 基本结构之后就是一些常用的标签，这些标签便是用户访问网址时显示在页面上的东西，其中有些标签会让你的页面看起来比较丰富，还有一些标签的合理运用会使你的布局更加清晰。常见的块级标签和行级标签块级标签和行级标签的区分，部分书上会有不同。比较通用的区分方法是：该标签之后有无换行。有换行则为块级标签。 常见的块级标签：1、h标签： 标题标签,自动加粗，h1最大h6最小&h1&h1标题标签&/h1&2、hr标签：水平标签，一条水平线&hr /&3、p标签：段落标签。 &p&第一段文字&/p& &p&第二段文字&/p&4、br标签：回车标签。&br /&5、blockquote标签：引用标签,cite属性，表明引用的来源，一般表明引用的网址。浏览器默认显示为首行缩进。&blockquote cite=""&6、pre标签：预格式标签。浏览器默认显示样式:1、显示为等宽字体；2、代码中的换行、空格等元素可在浏览器直接显示。一般要在网页中输入代码就会使用这种标签。&pre&&/pre&基于布局的块级标签1、ol标签：有序列表&ol&
&li&第一项&/li&
&li&第二项&/li&&/ol&列表中li可以有N多项，下同。2、ul标签：无序列表&ul&
&li&第一项&/li&
&li&第二项&/li&&/ul&有序列表前有序号，无序列表前为圆点。3、dl标签：定义描述列表&dl&
&dt&这是定义列表的标题&/dt&
&dd&描述1&/dd&
&dd&描述2&/dd&&/dl&标题在页面中顶格显示，描述项相对标题首行缩进。4、组合标签：用于显示图片及图片标题&figure&
&img src="../img/icon.png" /&
&figcaption&这是图片标题&/figcaption&&/figure&显示效果：图片下面一个标题，同时图片和标题前带缩进。/5、div标签：极常用的标签，灵活多变，页面大多都大量使用此标签。其便于设置属性，而且还可以借助其他工具进行定义修改，之后会有相关内容。&div style="width: 100height: 80background-color:"&这是一个div&/div&实际开发中常用的4中块级结构：div-ul-li：常用于分类导航或菜单等div-dl-dt-dd(figure)：常用与图文混编table-tr-td：常用于图文布局或显示数据form-table-tr-td：常用于布局表单常见的行级标签 行级标签从左往右逐一显示。1、span标签：无实际意义，用于包裹某部分文字，修改特定样式。&span&这是span中的标签&/span&2、em（强调）3、i（倾斜）4、strong（强调）5、b（加粗）strong、em、b、i标签的区别①strong和em都表示强调，strong显示为粗体，em显示为斜体。而且，strong比em的强调程度更高。②、strong和b都能加粗，em和i都能倾斜。但，strong和em多了一层强调的语义。HTML5语言要求标签尽可能的实现语义化。6、q（短引用）：显示为“”中的文字7、small（缩小字体）big（增大字体） 可以多层嵌套，直到字号极限。但是不常用。8、img（图片）有以下属性1、src表示引用图片的地址。路径地址的写法：
①相对路径:以当前文件为准，去寻找图片地址。 a、与当前文件处于同意层的图片，直接写图片名。 b、图片在当前文件下一层：文件名/图片名 c、图片在当前文件上一层：../图片名
②绝对路径：file:///盘符:/文件夹/图片.后缀名。但是严禁使用
③网络地址：网络上的图片链接。但是一般不用，网络上图片因由无法使用时链接会失效。2、height=“”、width=“”图片的宽度和高度。可以使用css样式（style="width=; height=;"代替）3、title：图片标题。当鼠标指上后显示的文字。4、alt：当图片无法显示时显示的文字。5、align：设置图片周围文字相对于图片的位置。 top
bottom9、a（超链接）
1、href：超链接的路径，可以是网络连接，也可以是本地文件（路径确定同img）
2、target:超链接打开的位置，_self 当前页面打开（默认） _blank新页面打开
3、title：鼠标指上后显示的文字。
4、(了解) rel ： 用于表明被链接文档与当前文档的关系：rel="prev"（被链接文档时前一篇文档） 前一篇文档
rel="next"
rel=“icon”被链接图片时当前文档的图标
rel=“stylesheet”被链接文档时当前文档的样式表
rel=“prefetch”预加载：在当前文档加载完成后利用空余时间，预加载即将连接的文档。
5、锚链接：
①本页面锚链接：a.设置锚点：&a name="top"&&/a&
b.在超链接上，使用#name跳转到对应锚点。
&a href="#top" target="_self" &超链接&/a&
②页面间锚链接：a.在积极跳转页面的指定位置，设置锚点
b.在超链接的href属性中，使用“页面地址.html”&a href="t.html#weixin"&跳转到新页面指定部分&/a&
6、功能性链接：
mailto：用于给指定邮箱发送邮件
tencent://message/?uin= 给指定QQ发送消息
file:///e:/aaa.png打开本地文件
&a href="mailto:"&发邮件&/a&10、s：有误文本 。文本内容上会有一条删除线。11、cite：浏览器显示为倾斜，常用于书、画作、作品的引用。12、code：只表示计算机代码，不改变格式，需配合pre标签使用。13、bdo:表示文本方向&bdo dir="rtl"&从右向左显示&/bdo&14、kbd：表示用户需要用键盘输入的内容。浏览器显示为等宽字体15、sup：上标文本
sub：下标文本16、&copy；版权符号。&空格17、u：下划线18、mark：高亮或标记文本，浏览器显示为黄色背景。19、time：表示时间。 表格表格十分的常用，用来布局或者做表单都很好用。但是要注意单元格的合并，否则可能会结构错乱。表格 table表格的行：tr
每行中的列：td表头：&th&&/th&默认加粗，单元格居中 　　【常用属性】1、border：给表格添加边框。当border属性增大时，只有外围框线增加，单元格的边框始终为1px2、cellspacing:单元格与单元格时间的间隙距离。当我们使用cellspacing=0时，只会使单元格间隙为0但不会合并边框线
表格边框合并：style="border-collapse: collapse"，无需再写cellspacing=03、cellpadding:单元格中的内容与边框线的距离。4、width、height：表格的宽高5、align：在 屏幕 left
位置显示 　　　　&&& 注意：给表格加上align属性，相当于让表格浮动，会直接打破表格后面元素的原有排列方式。6、bgcolor：背景色 等同于 style="backgroungd-color:"7、background：背景图片等同于style="background-image",且背景图会覆盖背景色。8、bordercolor:边框颜色　　　　　　【tr和td的相关属性】1、width/height：单元格宽高2、bgcolor：单元格的背景颜色3、align：left center right 单元格中的文字，水平对齐的方式4、valign：top center bottom 单元格中的文字，垂直对齐的方式5、nowrap：单元格中文字不换行
&&&注意：1、当表格属性与行列属性冲突时，以行列属性为准。（近者优先，离内容越近的优先级越高）
2、表格的align属性时控制表格自身在浏览器的显示位置。行和列的align属性是控制单元格中文字在单元格中的对齐方式
3、表格的align属性，并不影响表格内，问你的水平对齐方式
tr的align属性，可以控制一行中所有单元格的水平对齐方式 实例：&table width="500" border="1" cellspacing="0" style="border-collapse:"
cellpadding="10" align="center" bgcolor="red" background="../img/icon1.png"
bordercolor="blue"&
&caption&表格的标题&/caption&
&th&表头1&/th&
&th&表头2&/th&
&th&表头3&/th&
&td align="right" width="10"&1-&/td&
&td height="10" valign="center" nowrap="nowrap"&1-&/td&
&td&1-3&/td&
&td&2-1&/td&
&td&2-2&/td&
&td&2-3&/td&
&/tr&&/table&表格的跨行与跨列colspan 跨列，当某个格跨N列时，其右边N-1个单元格需删除rowspan 跨行，当某个格跨N行时，其下方N-1个单元格需删除&td colspan="3" align="center" valign="center"&杰瑞教育&/td&这行代码的实现的是当前单元格跨3列，文字水平居中且垂直居中。表格的结构化完整表格结构 thead tbody tfoot无论本部分在表格什么位置，显示时，caption在表格外上方，thead在表格上方tfoot在最下方表格的直列化&col align="center" style="background-color:" /& &colgroup style="background-color:" &后两列为一组
&col /&&/colgroup&表单我们在网页中进行的注册、登录等都是通过表单来实现的。【form表单】&form action="" method="post"&
&table border="" cellspacing="" cellpadding=""&
&input type="text" name="" id="" value="" /&
&tr&&td&&/td&&/tr&
&input type="submit" value=""/&&/form&这是一个表单的基本格式。
1、两个重要属性：action-表单提交的服务器地址
method-表单提交数据的方法（get/post）
2、get和post的区别：
①get：使用URL传参：http://服务器地址？name1=value1&name2=value2
(?表示传递参数，？后面采用name=value的形式传递，多个参数之间用&连接)
所以，URL传参不安全，所有信息可在地址栏看到,并且可以通过地址栏随意传递其他数据
URL传递数据量有限，只能传递少量数据。但是传参速度快。
②POST：使用http请求传递数据。URL地址栏不可见，比较安全。且传递数据量没有限制。
综上所述：常用post传递数据
3、【input标签及属性】
①type：表示input输入框的类型。可选值有：
②name：input输入框的别名。一般情况下，必填。因为，传递数据时，使用name=value的形式传递
③value：input输入框的默认值
④placeholder：input的提示内容，当输入框用value时，提示内容消失
⑤tabindex="1"控制点击tab键的跳转顺序，从最小的开始，逐个往大的数值跳转获得焦点
4、【input-type属性详解】
①text：文本输入框
②password：密码输入框
③radio：单选按钮。
checkbox：复选选项
name和value属性需同时存在，提交时，提交的value的属性值
例如：&input type="radio" name="sex" value="男" /&男 提交时 sex=男
radio凭借name属性区分是否为同一组。name相同，为同组，只能选择一个
checked="checked"默认选中（radio可以选一个，checkbox可以选多个）
④file：文件上传按钮。
⑤submit：提交按钮。提交表单数据
⑥reset：重置按钮。将表单重置为初始状态
⑦image：图形提交按钮。功能同submit 可以提交数据
⑧button：普通按钮。没有任何功能。
【input特殊属性值】
①checked="checked"默认选中
②disabled="disabled"设置控制不能使用。用在按钮上不能点击，用在输入框上不能修改。‘
而且，输入框disabled，则输入框信息不能往后台传递。
③hidden="hidden" 隐藏。等同于type="hidden".常配合disabled，或根据其他需要使用隐藏域传递数据
5、【下拉选择控件 select】
①写法：&select&
&option&&/option&//可以有N多个
②name属性，应该写在select上，所有选项只有一个name
③multiple="multiple"：设置select控件为多选，可在界面使用Ctrl+鼠标单击进行单项
④option常用属性：
value=""：当option没有value属性时，往后台传送的时&option&&/option&标签中的文字；
当option有value属性时，往后台传递的时value的值
title=""：鼠标指上后显示的文字
selected="selected"：默认选中
⑤&optroup label="山东省"&&/optroup& :用于将option标签进行分组，label属性表示分组名
6、【文本域 textarea】
①写法：&textarea&&/textarea&
②设置宽高style="width= ;height=;"自身有cols=""rows=""两个属性，但不常用
③readonly="readonly"设置为只读模式，不允许编辑
④style="resize:none"设置为宽高不允许修改
⑤style="overflow:;"设置当文字超出区域时，如何处理。
也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式
常用属性值：hidden超出区域的文字，隐藏无法显示
scroll 无论文字多少，均会显示滚动
auto 自动，根据文字多少自动决定是否显示滚动条(默认样式)
7、【表单的边框与标题】
&fieldset&//表单边框
&legend&联系方式&/legend&表单标题
&/fieldset&
如果想要让标题嵌入到边框中，需将标题标签写到边框标签里面
一个表单，可以有多组边框+标题的组合
8、【html5 智能表单】
①、H5新增input的form属性，用于指向特定form表单的id，
实现input无需放在form标签之中，即可通过表单进行提交。
&form id="foo"&
&input ... form="foo"&
②type新增属性
email week month time URL range color
③ input元素的新增属性：
Autocomplete：自动完成功能：记录用户之前输入的内容并在下次输入时自动提示
属性值：on/off
可以在form表单上使用，对整张表单的所有控件进行自动完成的开关
也可以在input上使用，对特定输入框进行修改
绝大部分浏览器默认开启
Autofocus：自动获得焦点.autofocus="autofocus",只能设置input元素自动获得焦点
Form：所属表单：通过form表单的id，确定此input输入哪张表单
Required：必填，required="required"设置input必填，否则阻止提交
Pattern：使用正则表达式验证input的模式
Placeholder：提示内容，当有value时，取消提示&html&
&meta charset="UTF-8"&
&title&用户注册表单练习&/title&
&div style="background-color: #EEEEEE;width: 1013"&
&img src="img/icon1.png" /&&b&用户注册&/b&
&form action="" method="post"&
&td&用户名：&/td&
&td colspan="3"&
&input type="text" name="username" id="username" value="" style="width: 200"/&
&span style="color:"&*&/span&
&a href="t.html"&检查是否有相同的用户名&/a&
&td&密码：&/td&
&input type="password" name="password" id="password" value="" style="width: 200"/&
&span style="color:"&*&/span&
&span style="color:"&（至少六位）&/span&
&td&真实姓名：&/td&
&input type="text" name="name" id="name" value="" style="width: 200"/&
&span style="color:"&*&/span&
&td&确认密码：&/td&
&input type="text" name="pass" id="pass" value="" style="width: 200"/&
&span style="color:"&*&/span&
&td&性别：&/td&
&option&男&/option&
&option&女&/option&
&span style="color:"&*&/span&
&td&证件类型：&/td&
&select style="width: 204.8"&
&option&各种证&/option&
&option selected="selected"&身份证&/option&
&option&学生证&/option&
&span style="color:"&*&/span&
&td&出生日期：&/td&
&input type="text" name="birthday" id="birthday" value="" style="width: 200"/&
&span style="color:"&*&/span&
&span style="color:"&（格式为）&/span&
&td&证件号码：&/td&
&input type="text" name="idnumber" id="idnumber" value="" style="width: 200"/&
&td&国家：&/td&
&input type="text" name="country" id="country" value="" style="width: 200"/&
&td&联系号码：&/td&
&input type="text" name="phone2" id="phone2" value="" style="width: 200"/&
&td&城市：&/td&
&input type="text" name="city" value="" style="width: 200"/&
&td&手机号码：&/td&
&input type="text" name="phone" value="" style="width: 200"/&
&span style="color:"&（建议填写，以便进行短信通知）&/span&
&td&E-mail：&/td&
&input type="text" name="email" value="" style="width: 200"/&
&span style="color:"&*&/span&
&td&邮编：&/td&
&input type="text" name="post" value="" style="width: 200"/&
&td&联系地址：&/td&
&td colspan="3"&
&input type="text" name="address" value=""
style="width:738"/&
&span style="color:"&*&/span&
&td align="center"&
&img src="img/reset.png" type="reset" value=""
style="width: 49height: 24"/&
&input type="submit" value="注册"/&
src="img/sl.png" style="width: 22height: 22"/&广告|
&a href=""&伙伴与sjaijiejfaijjafssfsaf&/a&
&/body&&/html&View Code这是一个填写注册信息的表单，几乎涵括了上述标签及属性，供参考。
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动