HTML学习第六天

一、全局属性

contentEditable属性,控制标签元素的可修改性,默认与“”(空字符串)都代表真,即可编辑

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h5 contenteditable="">fdkfhisdfefhwo</h5>
<ul contenteditable="">
<li>djfklasdjfdklhfjfhjfen</li>
<li>ewhfdjkshf</li>
<li>fhjsdkjghjsdf</li>
</ul>
</body>
</html>

designMode属性,控制页面的可编辑性,其值只能有JS编辑,而且只有on和off两种

hidden属性:类似于input的hidden属性,浏览器默认不对该元素进行渲染(也就是显示啦)可以由js脚本来处理其值,实现特殊触发显示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h5 hidden="false" contenteditable="">fdkfhisdfefhwo</h5>
<ul contenteditable="">
<li>djfklasdjfdklhfjfhjfen</li>
<li>ewhfdjkshf</li>
<li>fhjsdkjghjsdf</li>
</ul>
</body>
</html>

spellcheck属性,对用户的输入进行拼写和语法检查

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" spellcheck="true">
</body>
</html>
但是我并没有出现拼写检查的红色下标……

tabindex属性,可以让窗口中的所有控件进行遍历获取焦点,将值设为-1则无法访问该控件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="index.html" tabindex="1">www</a>
<a href="index.html" tabindex="3">aaa</a>
<a href="index.html" tabindex="2">ccc</a>
<ul tabindex="4">
<li tabindex="-1"></li>
<li tabindex="5"></li>
<li tabindex="6"></li>
<li tabindex="0"></li>
</ul>
</body>
</html>

article元素代表文档、页面中或应用中程序中独立的、完整的、可以独自被引外部引用的内容。常常会是论坛贴子,用户评论或独立的插件

article元素可嵌套,也可当错差件使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<article>
<header><h1>祖张依世界第一可爱!</h1></header>
<article>
<header><h1>祖张依世界第一可爱!</h1></header>
<span>我不管,再建一个也一样</span>
<footer>没救了</footer>
</article>
<footer>小可爱就是最可爱的!</footer>
</article> <article>
<h1>祖张依世界第一可爱!</h1>
<object>
<embed src="#" width="600" height="400"></embed>
</object>
</article>
</body>
</html>

section元素用于对网站或应用程序中页面上的内容进行分块

一个section元素常常由内容及其插件组成,当一个容器需要被直接定义样式或通过脚本定义样式的时候,推荐使用div

一般section会包含标题

article元素比section元素更加强调独立性,而section元素更强调分段分块

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<section>
<h1>祖张依</h1>
<p>这是一个小可爱,可以卖萌,而且很萌</p>
</section> <article>
<h1>祖张依世界第一可爱!</h1>
<p>非要我再说一遍</p>
<section>
<h2>可爱</h2>
<p>这是一种很bug的个人属性</p>
</section>
<section>
<h2>可爱</h2>
<p>这是一个更加特别的属性</p>
</section>
</article>
</body>
</html>

nav元素是一个可以用作页面导航的连接组,其中的导航元素链接到其他的页面或当前页面的其他部分,只需要将主要的、基本的元素放入nav元素即可,一般应用的场景

  • 传统导航条
  • 侧边导航条
  • 页内导航
  • 翻页操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">www</a></li>
<li><a href="#">aaa</a></li>
</ul>
</nav>
<article>
<header>
<h1>祖张依世界第一可爱!</h1>
<nav>
<ul>
<li><a href="#">为什么可爱</a></li>
<li><a href="#">为什么世界第一</a></li>
</ul>
</nav>
</header>
<section>
<h1>为什么可爱</h1>
<p>问那么多干什么,巴拉巴拉巴拉</p>
<section>
<h1>为什么世界第一</h1>
<p>……</p>
</section> </section>
<footer>
<a href="">删除</a>
<a href="">修改</a>
</footer>
</article>
<footer>
<p><small>版权声明</small></p>
</footer>
</body>
</html>

HTML学习第六天的更多相关文章

  1. 七、Android学习第六天——SQLite与文件下载(转)

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 七.Android学习第六天——SQLite与文件下载 SQLite SQ ...

  2. python学习 第六天课后总结:

    <br class="Apple-interchange-newline"><div></div>       python学习 第六天课后总结 ...

  3. python学习第六天运算符总结大全

    python学习第六天运算符总结大全,玖乐网络(www.96net.com.cn)列出下面详细 1,算术运算符 + 加 - 减 *乘 / 除 % 求模 ** 乘方 // 取整除 - 返回商的整数部分 ...

  4. iOS阶段学习第六天笔记(数组)

                                                                                                  iOS学习( ...

  5. java web 学习 --第六天(Java三级考试)

    第五天学习在这:http://www.cnblogs.com/tobecrazy/p/3458592.html session对象 当某个用户首次访问web应用系统时,jsp会自动创建出一个sessi ...

  6. Ext JS学习第六天 Ext自定义类(一)

    此文来记录学习笔记 •我们在之前的学习,已经对ExtJS有了一个初步的认识,那么如果要学好ExtJS,对于javascript是必须的,也就是说,对于理解ExtJS底层基础架构的理解也是必须的.那么我 ...

  7. Ext JS学习第六天 Ext_window组件(三)

    此文用来记录学习笔记: 今天再来一个例子巩固一下学习的window: –例2: 在window中添加子组件,并讲解常用查找组件的方式: •重点分析:该实例主要针对于组件的查找进行详细的讲解,在以后的应 ...

  8. 【类与对象】--------java基础学习第六天

    类与对象 1. 对于面向对象的开发来讲也分为三个过程: OOA(面向对象分析) OOD(面向对象设计) OOP(面向对象编程) 2. 面向对象的基本特征 2.1. 封装:保护内部操作(属性,方法)不被 ...

  9. angularjs学习第六天笔记(指令简介学习)

    您好,由于周末有事情,没哟学习angularjs,几天晚上开始继续学习angularjs,坚持加油每一天.谢谢 接着上周五学习了表单验证以后,今天开始学习angularjs中一个非常重要的模块:指令 ...

随机推荐

  1. stm32CubeMx lwip + freeRTOS

    MCU: STM32F429IGT6 工具:STM32CubeMx  版本号 5.0.0 Keil uVersion5 目的:使用LWIP 实现简单的网络连通 一  简介 LWIP(Light Wei ...

  2. Python基础语法笔记2

    ------------------------------------------------------------------------------- 常量和Pylint的规范 1.常量:常量 ...

  3. 「AT4741 [ABC132D] Blue and Red Balls」

    题目大意 给出一个长度为 \(N\) 的01串,其中有 \(K\) 个 \(1\),其他都是 \(0\),需要求出当着 \(K\) 个 \(1\) 分成 \(1\) 到 \(K\) 段每一个的方案数. ...

  4. 《JavaScript高级程序设计》读书笔记(目录)

    ajax创造性的技术让JavaScript变得更加强大起来.ECMAScript 和DOM标准JavaScript面向对象程序设计和继承----性能,优化 1.简介----JavaScript和ECM ...

  5. 【C++初学者自学笔记二】函数重载(模块一)

    1.概念:同意作用域的一组参数列表不同,函数名相同的函数,这组函数叫函数重载(C语言是不能定义相同名称的函数,但是C++可以允许定义). 2作用:重载函数通常来命名一组功能相似的函数,这样做减少了函数 ...

  6. ThinkPHP6源码分析之应用初始化

    ThinkPHP6 源码分析之应用初始化 官方群点击此处. App Construct 先来看看在 __construct 中做了什么,基本任何框架都会在这里做一些基本的操作,也就是从这里开始延伸出去 ...

  7. Linux进程内消息总线设计

    文章目录 Windows平台进程内消息总线 如果没有消息总线,会产生什么问题 死循环包含关系 高耦合.低内聚 消息总线 结构图 原理 生产者与总线的关系 总线与消费者的关系 Linux进程内消息总线设 ...

  8. spriteKit简单学习

    https://shimo.im/docs/YejitfPrGkcNO3Ls/ <SpriteKit学习相关> 关于SpriteKit   https://www.jianshu.com/ ...

  9. ATT&CK实战系列——红队实战(一)

    一.环境搭建 1.环境搭建测试 最近想要开始学习内网渗透,搜集了一些教程,准备先实验一个vulnstack靶机,熟悉一下内网渗透操作再学习基础知识. 靶场下载地址:http://vulnstack.q ...

  10. redhat 7.6 网络配置

    网卡配置目录 /etc/sysconfig/network-scripts/ 关闭网卡 $$ 打开网卡 ifdown ensp8 && ifup ensp8 重启网卡服务 servic ...