为了督促一下自己,以后的学习多总结多分享。简书的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的解释.......
关键词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 :这个之前就有,还是提一下,复选框.
提出小小的学习意见:
学习的过程中,不要因为记不住某些标签或者属性而懊恼,(好吧~,我之前有过)。后来,在不断的学习中,我开始认识到理解是要放在第一位的,属性记不住,没关系,在这么方便的条件下,随手一查就可以找到,所以理解和会用是最重要的。还有一点,不能固执己见,要多关注前沿的技术,即使不太用到,多了解了解也是很好的嘛~
谈生活 不谈技术 谈技术 不谈生活 仅此而已