HTML属性
- contentEditable属性
- desigenMode属性
- hidden属性
- spellcheck属性
- tabindex属性
contentEditable属性(编辑文本属性)
<body>
<h2>可编辑列表</h2>
<ul contenteditable="true">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
designMode属性
用来指定整个页面是否可被编辑,当页面可编辑时,整个页面中任何支持上下文所属的contentEditable属性都变为可编辑状态,designMode属性
只能在JS脚本被修改编辑。属性值为on和off。
hidden属性
spellcheck属性
功能是对用户输入的文本内容进行拼写和语法检查。
<input type="text" spellcheck="">
tabindex属性
在连续敲击table键时会按设定顺序优先选择
<body>
<a href="#" tabindex="1">我爱你</a>
<a href="$" tabindex="3">你呢</a>
<a href="……" tabindex="2">我也爱你</a>
<!--只能对连接以及表单可以使用tabindex,如果想对其他使用功能,如下-->
<ul tabindex="-4"><!--但如果开发是是不想通过table获取到焦点,但针对开发来说还必须增加一个index属性就可以吧tabindex属性值变为-1-->
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
新增的主体元素
- article元素
- section元素
- nav元素
- aside元素
- time元素与微格式
article元素
<body>
<!--article标签里面可以承载许多内容,比如头部内容、脚部内容以及中间区域-->
<article>
<header>
<h1>大型秀恩爱现场</h1>
<p>Hello ,欢迎来到大型秀恩爱现场</p>
</header>
<article>
<header>
男主人公:雷
</header>
<p>女主人公:莹</p>
<footer>
<p>想陪你:</p>
<p>烹雪煮茶;</p>
<p>白手天涯:</p>
<p>万家灯火:</p>
<p>夜落归家。</p>
</footer>
</article>
<footer>
<p>秀恩爱环节结束</p>
</footer>
</article>
<article>
<h1>这是一个内嵌页面</h1>
<object>
<embed src="#" width="600" height="400">
</object>
</article>
</body>
section元素
作用是对文章进行分块,或者对内容进行分段
总结
- 不要将section元素作为设置页面样式的容器,那是div的工作
- 如果article元素aside元素或nav元素更符合条件,就不要使用section元素
- 不要为没有标题的区域块使用section元素
- article可以看成是特殊的section,即section强调分段或分块,爱人提了更强调独立
nav元素
<body>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#>">开发文档</a></li>
</ul>
</nav>
<article>
<header>
<h1>HTML5和css3的历史</h1>
<nav>
<ul>
<ui>
<li><a href="#">HTML5的历史</a></li>
<li><a href="#">css3的历史></a></li>
</ui>
</ul>
</nav>
</header>
<section>
<h1>HTML5的历史</h1>
<p>.....</p>
</section>
<section>
<h1>CSS3的历史</h1>
<p>.....</p>
</section>
<footer>
<a href="#">删除、修改等</a>
</footer>
</article>
<footer>
<p><small>版权声明:</small></p>
</footer>
</body>
aside元素
aside元素用来表示当前页面或文章的附属信息部分,他可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有区别与主要内容的部分
有两种用法:
第一种是包含在article中,作为主要内容部分的附属信息
<body>
<header>
<h1>我爱你</h1>
</header>
<article >
<h1>就爱你</h1>
<p>没道理</p>
<!--aside就是针对article的名词解释-->
<aside>
<h1>你管我</h1>
<p>我爱你没道理</p>
</aside>
</article>
</body>
第二种用法:在article元素之外使用,作为页面或站点全局的附属信息部分,典型形式还是侧边栏
<aside>
<nav>
<h2>
评论
</h2>
<ul>
<ui>
<li><a href="#">好</a></li>
<li><a href="#">嗯</a></li>
</ui>
</ul>
</nav>
</aside>
time元素与微格式
微格式:利用HTML的class属性赌王也添加附属信息的方法
<body>
<article>
<header>
<h1>苹果</h1>
<p>发布日期</p>
<time datetime="2015-10-10">2015-10-10</time>
<p>舞会事件 <time datetime="2015-10-12">2015-10-12</time> </p>
</header>
</article>
</body>