浅谈关于我的HTML5学习

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

HTML5带来的新特色

1.用于绘画的 canvas 元素

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

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

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

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

参考:http://www.runoob.com/html/html5-semantic-elements.html


本次分享:

    1.常用的新增语义标签

    2.Input控件类型

    3.常用的html5标签


这张图片你应该很熟悉:

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

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

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

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

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

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

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


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

1.<b> : 定义粗体字

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

实例:

  <base href="http://www.baidu.com  target="_blank" />                                                         

1.href: 默认提交的url

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

此时的body体中 加入a标签  <a href=""></a>    会默认的跳转到百度                                         

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

<base href="简书/" />

<img src='base.jpg" />


这里把默认的URL写成 ‘简书/’ ,src写成图片名,就会默认访问当前目录下的文件.

3.<ado> : 改变文本默认方向,属性dir 值有两个:ltr,rtl,意思是从左到右,从右到左

实例:

<ado dir='rtl'> 我是从左到右</ado>


4.<center> : 对其所包括的文本进行水平居中

实例:

<center>我是水平居中的</centr>

此时文本处于body中,所以看图:


5.<caption> : 元素定义表格标题,必须紧随 table 标签之后

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

<table>

<caption style="color="red">我是有大标题的表格哦</caption>

<tr>

<th>我是第一栏的第一个</th>

<th>我是第一栏的第二个</th>

</tr>

<tr>

<td>我是第二栏的第一个</td>

<td>我是第二栏的第二个</td>

</tr>

</table>


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

6.<dl> : 定义列表 ,这个好像之前就有,不过不太常用,顺便提一下

实例:

<h1>定义一个列表</h1>

<dl>

<dt>关键词1:</dt>

<dd>关键词1的解释.......</dd>

<dt>关键词2:</dt>

<dd>关键词2的解释.......</dd>

</dl>


7.<figcaption> : 标签定义figure元素的标题

8.<select> : 下拉选框,以前也经常用到。

实例:

<select>

<option>下拉选框</option>

<option>1</option>

<option>2</option>

<select>


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

实例:

<progress value="20" max="100" />


10. <q> : 文本引用标记,也就是引号

实例:

<q>hellwo 简书</q>


11. <sup>和<sub> 文本上标和下标

实例:

这段文本<sup>上标</sup>是<sup>下标</sub>


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

12.<del>和<ins> :来描述文档中的更新和修正

实例:

<del>我是有删除线的</del><ins>我是有下划线的</ins>


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

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

<details>

<sumary>点我看详细信息</sumary>

看见我了吗?

</details>


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



新增的Input控件类型总结:

以下均以<Input type="" / >开头

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 :这个之前就有,还是提一下,复选框.



提出小小的学习意见:

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容

  • HTML5< !--...--> 标签 comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。...
    野小宝阅读 1,306评论 0 10
  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 3,996评论 1 25
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,049评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,494评论 18 139
  • 今天盘点心藏来和大家聊聊我们每天都要面对的“压力”我们生活在这样一个处处充满竞争的社会当中,有时面对压力总是无所适...
    盘点心藏阅读 508评论 0 0