html5隐藏框架,06_html5简单入门——框架、可编辑列表、隐藏列表、拼写检测、全局属性...

又到了每天写博客时间，坚持每天写博客，记录生活

以后开始规定写博客时间为晚上12点，除非有事，规定个时间写博客好点

现在是2：30，明天就开始晚上12点写，为什么这么做呢

因为越困越可能咕咕咕　　(￣ε(#￣)　　虽然现在也不困

好了，废话不多说，今天写的是html5的框架，可编辑列表，隐藏列表，拼写检测和全局属性

内容有一点点小多，这应该是最后几次关于html5的随笔吧，后面差不多开始写css

如果后面想起还有什么关于html5的知识会进行补充，比如前面打算写的页面布局，这个需要一点css基础

Part 1 html5框架

先上代码再讲解

第一个html5文件

1

2

3

4

5

html5的框架

6

7

8

13

14

15 视频教学

16

17

第二个html5文件(13_frame_c.html)

1

2

3

4

5

frame_c

6

7

8

9

10

11

第三个html5文件(13_frame_b.html)

1

2

3

4

5

frame_b

6

7

8

9

10

11

第四个html5文件(13_frame_a.html)

1

2

3

4

5

frame_c

6

7

8

9 baidu

10

11

12

先不上效果图，首先肯定有人疑惑为什么有这么多html5文件，因为主要是要整一个嵌套的效果(禁止套娃)

方便第四个html5文件target属性更改后效果的演示，见第9行代码和第10行的说明

打开网页时的效果如下

注意图片左下脚有一个视频教学，打开后进入视频教学的网址，其实也没啥演示作用

我们看的主要是右半部分，一个红色的矩形内嵌一个橙色的矩形，橙色的矩形又内嵌一个黄色的矩形，

　　(第一个文件第16行)(指向第二个文件)

　　(第二个文件第9行)(指向第三个文件)

　　(第三个文件第9行)(指向第四个文件)

baidu　　　　　　　　　　(第四个文件第9行)(指向百度首页)

黄色矩形上面有一个链接，点击出现下面效果

发现黄色的矩形被新窗口完全覆盖出现百度的首页，底端和右端有滚动条，可拖动查看

如果我们把　　baidu　　　　　　　　　　(第四个文件第9行)(指向百度首页)

中的target属性改成"_parent"，然后刷新网页，点击"baidu"链接，会出现下面效果

发现现在不只是黄色矩形，连橙色矩形也被打开网页覆盖，原因是橙色矩形是黄色矩形的"parent"

而target="_parent"就是在黄色矩形的"parent"打开网页，所以橙色矩形被覆盖，

黄色矩形因为被橙色矩形覆盖所以理所应当也会被网页覆盖

如果我们把　　baidu　　　　　　　　　　(第四个文件第9行)(指向百度首页)

中的target属性改成"_top"，然后刷新网页，点击"baidu"链接，会出现下面效果

嘿嘿，你该不会被那个红色矩形迷惑到吧，会以为只是覆盖红色矩形吧　　(●ω●)

其实是这样的，top 顾名思义就是在这个框架系统的最顶部打开

在这个套娃系统中，“万恶之源”是一开始打开的那个网页，这下能理解吧

那么关于html5的框架就简单介绍到这，有挺多细节没讲的，后面开发遇到问题再面向百度解决问题呗

Part 2 可编辑列表和隐藏列表

可编辑列表和隐藏列表理解起来也是很简单

可编程列表就是你在网页上，可对列表进行编辑；而隐藏列表就是将列表隐藏

先上一波代码(这个代码包含Part 3和Part 4会用到的代码，应该会梅开二度、梅开三度)

1

2

3

4

5

html5的一些属性

6

7

8

可编辑列表

9

10

11

列表1

12

列表2

13

列表3

14

15

隐藏列表

16

17

列表4

18

列表5

19

列表6

20

21

错误检测

22

23

24

全局属性

25 这个功能是当你在网页上按下"Tab"键时，他会按顺序依次锁定每个部分

26 11111

27 33333

28 22222

29

30

1

31

2

32

4

33

34

35

???

36

37

38

可编辑列表，就是在 ul 标签里修改元素 contenteditable="True"(默认为 False)，即可实现

隐藏列表，就是在 ul 标签里修改元素 hidden="True"(默认为 False)，即可实现

打开网页时的效果如下

上图中的列表2后面出现一大堆字母是我后面随便码上去的，这个就是可编辑列表

而隐藏列表，看了下源代码本该出现”列表4、列表5、列表6“的，但是却被隐藏了

Part 3 拼写检测

这个功能的源码和效果图见Part 2

拼写检测相信平时在word编辑时遇到过，就是当你拼错词汇时，文本下面有一条波浪线，提示拼写错误

这里我们输入apple pen ahh applepen

会发现 apple和pen 我们拼写正确，所以不会报错，但是因为词库里面没有ahh和applepen这两个单词

所以会出现报错，大家也可以有意的去拼错一些单词，验证实验结果

不过有一点要说明下，这个检测应该是只能检测英文拼写，中文不行　　(╬￣皿￣)凸

Part 4 全局属性

代码和效果见Part 2，这里不多做演示，也不方便演示，为了篇幅不要过长，所以大家自行操作

这里要讲的是a标签里的 tabindex 属性的值

上面代码我们可以看到有五处地方加入tabindex属性，值分别为1，3，2，4，-1

当锁定到”11111“(tabindex = ”1“)我们按下 Tab 键后，会锁定到”22222“(tabindex = ”2“)，

再按下去到”33333“，再到列表，可是就是不会到”？？？“(tabindex = ”-1“)

也就是说tab控制顺序是从1开始的，不会导航到-1处

总结

上面的知识很多只是进行简单讲解，要深究要自己去查阅官方文献

现在是3：49，超时了20分钟，这期篇幅有点长，这应该是超时的理由吧，虽然自己有在全程加速

虽然篇幅有点长嘛，但是这些点操作起来也算是直观，浅显易懂，所以看起来应该也不会那么痛苦

最后希望这篇简单的随笔能对你们有所帮助吧(=￣ω￣=)

没用就当看着玩啦[狗头]

来源：https://www.cnblogs.com/yuange1433223/p/12854351.html