看完必会的HTML5（进阶）

HTML学习规划：

1. HTML
2. XHTML
3. CSS
4. CSS3
5. JavaScript
6. JQuery
7. HTML5
   

一 HTML基础

• IDAE常用快捷键：
  （1）注释：Ctrl+/
  （2）移动：Alt+↓或Alt+↑
  （3）代码提示：Alt+/
  （4）快速复制：Ctrl+Alt+↓
  （5）删除一行：Ctrl+D

• head标签：定义语言，编码格式，style等全局变量。

• h1~h6标签：标题

• p标签：定义段落，开启新行。

• a标签：定义超链接。

• img标签：定义图像，注意路径。

• align属性：对齐方式，居左，居中，居右。默认居左。

• a标签中name属性定于文档内部的跳转，在一个a中设置name的名，另外一个a的标签的href设置为【#name名】。

• border属性：定义边框。

• body标签：margin属性使从左顶点开始，去掉小白条。margin: 0px;

• HTML布局;
  （1）使用<div>布局：

  1. float: left;<!–从左到右的排序方式 -->
  2. clear: both;<!–清除上面设置的浮动 -->

  （2）使用<table>布局：类似表格的布局方式。

• 表单与PHP的交互：
  （1）<form>标签中的action属性设置提交的服务器，method属性设置提交方式（POST，GET）

  1. GET：在URL中会显示信息。可以作资源定位
  2. POST：则不会在URL中显示信息。 更安全一点。GET和POST要和PHP文件中的对应一直。

  （2）action属性：设置服务器地址，比如：
  <form action="http://localhost/Myfirst/myphp.php" method="POST">。

• 框架标签（frame）：（HTML5中已经过时）

• 框架集标签（frameset）：（HTML5中已经过时）不能创建在body标签中。
  （1）定义任何将窗口分隔为框架，每个frameset定义了一系列行和列，rows/cols的值规定了每行或列占据屏幕的面积。

• 内联框架：iframe。（HTML5仍在使用）
  （1）例：<iframe src="Demo1.html" frameborder="0px"></iframe>，src指定页面，frameborder是取消边框。也可以设置宽和高属性。
  （2）target属性，在何处打开链接，其中parent和top是在嵌套页面时的父框架中打开和打开到最顶层。

• 颜色：由十六进制符号来定义。最小值为#00，最大值为#FF。
  （1）红色：#FF0000
  （2）绿色：#00FF00
  （3）蓝色：#0000FF

• XHTML：指的是可扩展超文本标记语言，与HTML4.01的语法几乎一样。
  （1）XHTML是更严格更纯净的HTML版本，是以XML应用的方式定义的HTML。
  （2）XHTML语法规范：

  1. 标签必须正确嵌套。
  2. 元素必须始终关闭。
  3. 元素必须小写。
  4. 必须有跟元素。
  5. 属性的值必须在引号中。（HTML5则可以省略引号）

• HTML5中具有Boolean值的属性：
  （1）当具有布尔类型值的属性不指定属性值的时候，默认为true。不写该属性，则为false。
  （2）将属性名设置为属性值，则为true。字符串为空也是true。

概述：
HTML5新增的元素：

1. 结构元素
   section、article、 aside、 header、 hgroup、 footer、 nav、figure
2. 其他元素
   video、audio、 embed、 mark、 progress、 meter、 time、 ruby、 rt、rp、wbr、canvas、command、 details、 datalist、 datagrid、 keygen、 output、source、menu
3. input元素的类型
   email、url、number、 range、 Date Pickers

• HTML5结构元素简介：
  （1）section元素：表示页面中的内容块，比如：章节，页眉，页脚。与h1~h6等元素结合使用，表示文档的结构。

  1. section元素用于对网站页面进行分块。对一段内容分段。
  2. 通常由内容及其标题组成。
  3. 但section元素并非普通容器，当一个容器需要被直接定义样式或通过脚本定义行为时，应该使用div。
  4. section元素可以嵌套在article元素中。

  （2）article元素：表示页面中的一块与上下文不相关的独立内容，比如：博客中的一片文章。

  5. 包裹一段代码，其中可以有头部（header）尾部（footer），就相当于将页面进行分割。代替div元素。
  6. article元素可以嵌套。 可以表示一个插件，类似内嵌页面。
  7. article可以看做是一个特殊的section，只不过它更强调独立性。

  （3）aside元素：表示article元素之外的，与article元素相关的辅助信息。

  1. aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分。

  （4）header元素：表示页面中的一个内容区域块。表示标题。

  （5）hgroup元素：用于对整个页面或页面中的一个内容块的标题进行结合。通常会将h1~h6元素进行分组。

  （6）footer元素：表示页面中的一个部分，通常是底部。承载作者，日期，版权信息等。

  （7）nav元素：页面内的导航链接。

  1. nav元素是一个可以用作页面导航的连接组，其中的导航元素链接到其他页面或当前页面的其他部分

  2. 并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的连接组放进nav元素即可。

  3. nav元素应用场景:

     ●传统导航条
     ●侧边栏导航
     ●页内导航
     ●翻页操作

  （8）figure元素：表示一段独立的内容，一般表示文档主题内容中的一个独立的单元。
  （9）address元素：用来在文档中呈现联系信息，比如：名字，邮箱，地址，电话等
  （10）<hr>元素：画一条线段。

• HTML5其他元素简介：
  （1）video、audio元素：视频、音频。
  （2）canvas元素：定义画布。（重点）仅提供一块画布。

• HTML5input元素的类型：
  （1）email属性：输入必须是email地址。
  （2）url属性：表示文本框输入的一个地址。
  （3）number属性：只能输入数字。将typ设置为number，就只能输入数字。
  （4）range属性：输入的数字的范围值。
  （5）Date Pickers属性：日期，时间。

• 表单新增元素和属性：

  （1）form属性：包含整个表单。

  （2）formaction属性：可以提交到不同的页面。而HTML4只在form中设置一个action，只能提交到一个页面。

  （3）formenctype属性：一个如何对表单数据进行编码。该属性有三个值：

  1. text/plain：表单数据中的空格被转换为加号，但不对特殊字符进行编码
  2. multipart/form-data：不对字符进行编码，上传文件是必须使用该值。
  3. application/x-www-form-urlencoded：在发送前编码所有字符，

  （4）formtarget属性：为每个提交设置在何处打开加载页面。

  （5）autofocus属性：为文本框，选择框或按钮自动获得焦点。

  （6）required属性：规定在提交时，如果输入内容为空则不允许提交，同时在浏览器中显示提示文字。

  （7）labels属性：~~待更

  （8）formmethod属性：设置每个元素的提交方式，比如：POST，GET。

  （9）标签的control属性：可以在标签内部放一个表单元素，并且通过该标签的control属性来访问该表单元素。

  （10）文本框的placeholder属性：指文本框处于未输入状态时显示的提示。

  （11）文本框的list属性：带类似下拉框的输入框，可以选，也可以自己输入。<datalist>标签搭配使用。

  （12）文本框的AutoComplete属性：~~待更

  （13）文本框的pattern属性：对输入的内容进行检查，不符合给定格式，则不允许提交。正则表达式。

  （14）文本框SelectionDirection属性：获取用户的操作

  （15）复选框的indeterminate属性：复选框的三种状态，即：未操作、未选中、选中

  （16）image提按钮的height和width属性：照片按钮的宽和高。

• 全局属性：
  （1）contentEditable属性：

  1. 功能：允许用户编辑元素中的内容，所以该元素必须是可以获得到焦点的元素。布尔值类型。遵循上面说明的。
  2. 如果未指定是否可编辑，则由该元素的父元素决定。

  （2）designMode属性：

  （3）hidden属性：所以的元素都可以使用hidden属性。

  3. 功能：使该元素处于不可见状态。布尔值，true为不可见状态。

  （4）spellcheck属性：针对input元素和textarea元素的输入框提供的新属性。

  1. 功能：对用户输入的文本内容进行拼写和语法检查。

  （5）tabindex属性：

  1. 功能：用户按下Tab键，页面键的访问顺序。默认情况下，只有连接元素和表单元素，用户按Tab键才可获得焦点。

【传送门】

HTML基础