html5设计经验浅谈,浅谈关于我的HTML5学习

为了督促一下自己，以后的学习多总结多分享。简书的APP设计的很好，第一次接触它的时候，有一种不离手的感觉。用简书来做学习记录的工具，那应该会是一种很棒的体验吧。今天是第一次写，废话不多说，(ˉ￣～)  ，切回正题。

HTML5带来的新特色

1.用于绘画的 canvas 元素

2.用于媒介回放的 video 和 audio 元素

3.对本地离线存储的更好的支持

4.新的特殊内容元素，比如 article、footer、header、nav、section

5.新的表单控件，比如 calendar、date、time、email、url、search

本次分享：

1.常用的新增语义标签

2.Input控件类型

3.常用的html5标签

这张图片你应该很熟悉：

比较常用的HTML5语义标签总结：

1. : 用于规定文档头部或者内容的展示，在文档中你可以使用多个header标签

2. :  用于定义导航链接部分

3. : 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分

4. :  标签定义独立的内容

5. : 标签定义页面主区域内容之外的内容(比如侧边栏)。标签的内容应与主区域的内容相关

6. : 元素描述了文档的底部区域。例如：作者，著作权信息，链接的使用条款，联系信息等

常用的HTML5新标签及其用法总结：

1. : 定义粗体字

2. : 标签为页面上的所有链接规定默认地址或默认目标。(必须插在head标签内)

实例：

1.href: 默认提交的url

2.target:  值： _blank,_parent,_self,_top (_blank以新的窗口打开)

此时的body体中 加入a标签      会默认的跳转到百度

当然不止是a标签哦，比如我们看下面的实例：

我是从左到右

4.

: 对其所包括的文本进行水平居中

实例：

我是水平居中的

此时文本处于body中，所以看图：

5.

: 元素定义表格标题,必须紧随 table 标签之后

实例：这里顺便提一下tr,th,td很多同学容易混淆

我是有大标题的表格哦

我是第一栏的第一个	我是第一栏的第二个
我是第二栏的第一个	我是第二栏的第二个

从页面输出上，我们很容易看到，caption位于表格最上部并且水平居中，很有标题感嘛~。定义一个表格首先是table标签包裹,其次定义tr,然后是标题th，再然后是各项，td。看代码和图片应该很好理解~

6.

实例:

定义一个列表

关键词1:

关键词1的解释.......

关键词2：

关键词2的解释.......

7.

: 标签定义figure元素的标题

8. : 下拉选框，以前也经常用到。

实例：

下拉选框

1

2

9. : 标签标示任务的进度(进程),也就是进度条

实例：

10. : 文本引用标记，也就是引号

实例:

hellwo 简书

11. ^{和 _{文本上标和下标}}

实例：

这段文本^上标是^下标

小提示：不要连用，(就是标签中间没有内容)这样参照的文本不同，显示的效果就不样了~

12.和 ：来描述文档中的更新和修正

实例：

我是有删除线的我是有下划线的

13. 和 :标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。这两个标签是放在一起使用的。

实例：这里是已经点击的状态了

点我看详细信息

看见我了吗?

哇~居然晚上11.20了,一口气写了这么长时间，平时的我不是这样的~~

新增的Input控件类型总结:

以下均以开头

1.color : 选取颜色，是一个拾色器，个人觉得不错，请看图~

2.date ： 选取日期

3.datetime-local : 也是日期控件，不过可以显示时分

4.email ： 提交表单时，会自动验证输入域

5.number ：只允许输入数字 属性max最大,min最小,step间隔(-2,0,2...这样的)

6.range : 类似于一个滑块，选取不定数值也有max,min,step

7.tel ： 验证输入电话号码

8.week : 日期控件，这里可以选择周哦~~

9.checkbox :这个之前就有，还是提一下,复选框.

提出小小的学习意见：

学习的过程中，不要因为记不住某些标签或者属性而懊恼，(好吧~，我之前有过)。后来，在不断的学习中，我开始认识到理解是要放在第一位的，属性记不住，没关系，在这么方便的条件下，随手一查就可以找到，所以理解和会用是最重要的。还有一点，不能固执己见，要多关注前沿的技术，即使不太用到，多了解了解也是很好的嘛~

谈生活 不谈技术  谈技术 不谈生活  仅此而已