HTML5基础完结

时间:2016年5月15日
在前面两天的基础学习中,尽管大多数东西给了我们一些新奇和体验,但是任何事物任何人都是不完美的出现,没有谁说能够把一件事情做的滴水不漏找不出一点瑕疵和破绽。也许说来,我们只是站在普通的人潮的一个微小存在,除了顺着人潮走我们别无他法,因为我们还没有能够逆着人潮而去的本事,也没有那个勇气,底气不足,再怎么伪装终究还是心虚。
我是一个适应快节奏的人。而且我也是一个自认为学习能力很好的人,但是我的缺点明显的让我有些反感那就是自制力太差。但是怎么办呢?我可以解决,那就是学完了本该学习的其实还可以往后走,我完全可以在没有老师的情况下吸收我自己想要掌握的东西,这些并不是难事。
经过前两天的基础讲解,今天是完结的一天对于HTML5来说。前面我们学过了HTML5最基本的写法,包括所有标签,列表,链接,图像等等,今天我们学习的就是剩下的关键内容知识点。
一、结构标记

QQ截图20160515181134.png

A、结构标记的概述
1、<div>标签。经常用来设计页面的大致布局,比如说页头,导航栏,主要内容部分和页脚等。在布局复杂的时候会出现大量的<div>标签。如果元素相互形成嵌套的话,页面会难以处理和维护的。在HTML5中提供了专门用于标识常见结构的结构标记,这样就可以很方便的实现页面各个部分的划分,使得文档结构更清晰明确,代码更容易阅读。其结构如下:

12.png

如上述结构那样,便可以很好的区分页面布局。
B、结构标记的种类
1、<header>元素
通常是一些介绍信息,导航信息,站点标题或者logo图片等。它可以在页面上出现很多次,而且可以作为任何部分的头部定义。
2、<nav>元素
定义页面导航链接部分,用于包含标识表示链接的其他元素。
其结构如下:

2.png

3、<section>元素
用于定义文档中的节
表示文档中的一个具体的组成部分,常用于为页面上的内容分块,比如定义章节,页眉,页脚或文档中的其他部分。
4.<footer>元素
用于定义文档中的尾部,常用于文档总结。
5、<aside>元素
一般用于文档的侧边栏。
以上五种元素并不是说写出来就可以排版出文档的样式,它还需要浮动元素。
前面我们学习了表格,今天学习了和它有些类似但是完全是两个概念的知识点。
二、表单
形如网页上出现的选择栏或者说登陆栏又或者是记录信息到服务器上,那么我们就需要通过表单来完成。
表单中也有很多标签来制作不同的效果。它用于显示,收集信息到服务器,它有两个基本部分。a.是实现数据交互的可见的界面元素,比如文本框或按钮,b.提交后的表单处理。
1、界面元素
使用<form>元素创建表单。在这个元素中添加其他表单可以包含控件元素。
此元素有action,method,enctype,name四个属性。
2、表单控件
包含很多不同的类型。表单控件元素是包含在表单元素中具有可视化外观的HTML元素,用于访问者输入信息
其中,表单控件元素有:a,input元素:文本输入控件text,按钮button,单选radio和复选按钮checkbox,选项框option,文件选择框和隐藏控件hidden等
b、textarea元素,select和option元素,还有其他元素。
3、input元素有type(文本框),value(控件数据),name(控件名称),(disabled)禁用控件四个属性。
4、文本框,密码框,单选框,复选框,提交按钮,重置按钮,普通按钮,隐藏域各自的写法如下:
<input type="text"/>
<input type="password"/>
<input type="radio"/>
<input type="checkbox"/>
<input type="submit"/>
<input type="reset"/>
<input type="button"/>
<input type="hidden"/>
5、其他控件
a、<label>主要属性for:表示与该元素相联系的控件的ID值。
作用:将文本域空间练习在一起后,单机文本,效果同单击控件一样。
b、选项框

xuanze.png

c、控件分组

kongjian.png

d、浮动框架元素
主要属性有src,height,width
写法如下:


fudong.png

e、摘要与细节

![123.png](http://upload-images.jianshu.io/upload_images/2064995-e34d4dc535a8f908.png?
imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
f、度量元素meter和时间元素time
datetime规定日期和时间之间用T文字分割。

总结:在学习完了HTML5的基础之后,由于太多的标签和属性冲刺人的大脑,基本上想要记住这些标签和属性都是不可能的,于是,想要记住这些代码标签和属性的话就只能是熟能生巧,多谢多练,这就跟卖油翁的故事一样,时间久了的话就算油壶的壶嘴再小他也能把有一滴不洒得装进桶里,这不是技巧,而是熟练的结果。所以,在学习知识的同时不但要选回总结还是要学会反思和找到可以让自己熟练掌握知识点的技巧和方法。

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

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,251评论 1 41
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,756评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,229评论 25 707
  • 这是李婷365写作计划第206天的写作内容 8.22号工作日清: 1.继续核对上海泰域的仓储费 经过上周的核对积累...
    婷婷玉立水墨画阅读 244评论 0 0
  • 醉后,你们都走了!
    lcy笑阅读 283评论 0 0