HTML重要标签及属性详解

      我学习前端的时间不长，短短1个月而已，只学了些HTML5和CSS3还有少许javascript，另外还有网页布局等等辅助性书籍，我在模仿网页以及完成百度前端技术学院的任务过程中发现了我容易忘记的标签以及一些属性，如今列出来，即为分享也为记录给自己查阅。

      首先说说html吧，我看的是html5，当然也接触过html4.01，以前还在想，要不要考虑html5的兼容性，现在发现没必要了。html5只是有的新标签兼容性还不好，其他的和html4.01还是变化不大的，另外就是html5的文档类型和字符说明都得到简化，其标签更人性化、效率更高、更安全。在html（主要是html5）重要的标签详解如下：

      1、header、footer、section、article、aside、nav、hgroup对于这些新增元素，我觉得还是有必要的，以前在网上课堂学的是div+css布局网页，那种方法确实很实用，但是观察html结构，整篇的div和id名，现在觉得确实有点单调，而且div的命名都是人规定的，每个人都有自己的命名方法（后续会发布命名规范），这大篇幅的div会影响网页的解析速度并且不利于后期维护。html5采用这些新标签，就是来解决这个问题的，刚刚学觉得这些标签没什么用，但是后来才知道这些标签并不是当作div容器来用的，整体网页先规划头尾和主题内容，分几个部分等。大方向上规划好了之后，再用div容器布局，这些标签都可以相互嵌套，具体怎么用，要看网页的内容是什么。header和nav一般用作页面的头部分和导航，每一个部分可以有自己的article和section以及footer。article和section的作用，article是文章的主体部分一般比较独立，没有兄弟节点。而section标签可以有兄弟节点，其目的是为了分区，分好区后div再分配空间。至于aside用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容，从一个简单的页面来看就是一个侧边栏。用在两个地方

a、被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名次解释，等等。 

<article>  <h1>…</h1><p>…</p><aside>…</aside></article>

 b、在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。

<aside> <h2>…</h2>

  <ul>

<li>…</li>

   
   <li>…</li>

  </ul>  <h2>…</h2>  <ul>

    <li>…</li>
    <li>…</li>
  </ul>
</aside>
HTML5 增加了很多语义化的标签，hgroup 就是其中一个，它用来表明标题的集合。如果有主标题、副标题，可以使用这个来包裹一下，一般比较常见的就是网站的标题和网站描述：但是这样做并不是太必要，而且还有一些麻烦。一般来说，很难有单纯的 hn 标题标签集合在一起，通常还包含一些其他内容，但是使用 hgroup 包裹的内容，必须是 hn 标题标签，否则不会通过 HTML5 验证。又有谁会为了这么一个增强语义性用处不大的标签专门去生成一堆 hn 标签？然后好消息是，这个标签在最新的 HTML5.1 版中被废除了，以后可以不再用了。总之这些标签都是提高了网页编码的可读性，更人性化，让后期维护不再苦逼！！望大家好好用这些标签，总结不好还请指正交流！！

2、多彩的表单、对于表单来说，确实是很头疼的问题，其中有很多细节要把握。html5新增了许多表单属性，目前各浏览器并没有很好的实现这些属性，所以用时要考虑浏览器不支持的情况。常用的表单输入类型有：text、radio、checkbox、option、password、submit、button（一、定义和用法<button> 标签定义的是一个按钮。在 button 元素内部，可以放置文本或图像。这是<button>与使用 input 元素创建的按钮的不同之处。二者相比较， <button> 控件提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

二、浏览器支持所有主流浏览器都支持 <button> 标签。重要事项：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮

三、注意事项

在使用<button>标签时很容易想当然的当成 <input type="button">使用，这很容易产生错误用法：

  通过$('#customBtn').val()获取<button id="customBtn" value="test">按钮</button> value的值,在IE(IE内核)下这样用到得的是值是“按钮”，而不是“test”，非IE下得到的是“test”。 参加上面标红的第一句话。　这一点要和<input type="button">区分开。）、

image、hidden、reset、file、这些常见的都应该知道的。新增的有email（自动检测输入是否符合email格式，在以前需要用javascript来控制）、url、number、range、datepickers(date、month、week、time、datetime、datetime-local)、search、tel、color。新增的input属性解释：autocomplete在input类型的输入框中实现自动完成输入内容，有三种值分别是on、off、空值，默认为off。autofocus：可以使在页面加载时，某表单控件自动获取焦点，适用于所有input类型.表单的重写属性：formaction、formenctype、formmethod、formnovalidate、formtarget这些都比较简单，忘了可以参考一下。
3、canvas画布包含内容比较多，而且会成为未来web网页的主流，以后会专门拿出来写的，这里面包含大量的数学知识，计算机图形学。

4、alt、title、longdesc、datetime这些属性的功能是：alt和title定义元素的替换文本和提示文本一般用于图片的超链接对于input元素，alt属性用来替换提交按钮的图片

  5、blockquote、cite、q标识引用文本cite一般用来定义引用信息的URL，blockquote表示引用文本，一般可以这么用

    <blockquote cite="http:://......"><p>xxxxxxxx</p></blockquote>,q也是表示引用文本，用的时候会打引号。

转载于:https://www.cnblogs.com/houkeyao-blog/p/5326837.html