1.全局属性
全局属性：对于任何一个元素都是可以使用的属性
1.hidden属性：是布尔属性，规定元素仍未或不在相关，浏览器不应显示已规定hidden属性的元素，也可用于防止用户查看，直到匹配某些条件（比如选择了某个复选框）。JavaScript可以删除hidden属性，使此元素可见。
语法格式：hidden属性必须定义为<element hidden="hidden">
2.spellcheck属性：规定是否对元素进行拼写和语法检查，错误下出现红线。一般在html可编辑的情况下才有意义。
语法格式：<element spellcheck="true|false">
3.contentEditable属性：规定是否允许用户编辑内容，可使除input、textarea之外的div、table、p、span、body等元素输入内容。
语法格式：<element contentEditable="true|false">
4.contextmenu属性：规定元素上下文菜单
语法格式：<element contextmenu="menu_id">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局属性</title>
</head>
<body>
<!--设置元素是否可编辑-->
<ul contenteditable="true">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<!--设置元素是否可见-->
<ul hidden="hidden">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<!--规定对元素是否进行拼写和语法检查-->
<input type="text" spellcheck="true">
<!--设置控件tab焦点的遍历顺序-->
<a tabindex="1">hello</a>
<a tabindex="3">hello</a>
<a tabindex="2">hello</a>
<!--设置为负数也无法获得焦点-->
<ul tabindex="4">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>2.结构元素
1.article元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>article元素</title>
</head>
<body>
<article>
<header>
<h1>hello</h1>
<p>这是头部</p>
</header>
<!--<p>hhhhhhhhhh</p>-->
<aticle>
<header>
作者
</header>
<p>评论</p>
<footer>
时间
</footer>
</aticle>
<footer>
<p>这是底部</p>
</footer>
</article>
<!--article可以用来表示插件，使插件看起来内嵌在页面中-->
<article>
<h1>这是一个内嵌页面</h1>
<object>
<embed src="index01.html" width="600" height="400"/>
</object>
</article>
</body>
</html>2.section元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>section元素</title>
</head>
<body>
<section>
<h1>标题</h1>
<p>这是一个section</p>
</section>
<article>
<h1>水果</h1>
<p>这是一个水果</p>
<section>
<h2>香蕉</h2>
<p>这是一个香蕉</p>
</section>
<section>
<h2>橘子</h2>
<p>这是一个橘子</p>
</section>
</article>
<!--可互换article为一个特殊类的section，更强调独立性-->
<section>
<article>
<h2>香蕉</h2>
<p>这是一个香蕉</p>
</article>
<article>
<h2>香蕉</h2>
<p>这是一个香蕉</p>
</article>
<article>
<h2>香蕉</h2>
<p>这是一个香蕉</p>
</article>
</section>
</body>
</html>3.nav元素、aside元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nav元素、aside元素</title>
</head>
<body>
<nav>
<ul>
<li>主页</li>
<li>文档</li>
<li>相册</li>
</ul>
</nav>
<article>
<header>
<nav>
<ul>
<li>主页</li>
<li>文档</li>
<li>相册</li>
</ul>
</nav>
</header>
<section>
<h1>dndinaind</h1>
<p>oijdaosdjoad</p>
</section>
<section>
<h1>dndinaind</h1>
<p>oijdaosdjoad</p>
</section>
<footer>
<a>删除</a>
<a>修改</a>
</footer>
</article>
<footer>
<p><small>版权声明</small></p>
</footer>
<aside>
<nav>
<ul>
<li><a href="#">2018-11-26</a></li>
<li><a href="#">这是评论内容</a></li>
</ul>
</nav>
</aside>
</body>
</html>4.header元素、footer元素、hgroup元素、address元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>header元素、footer元素、hgroup元素、address元素</title>
</head>
<body>
<address>
<P>表示网页的作者，一般放在网页头部或尾部，放在articl中表示文章的作者</P>
</address>
<P>一个页面可有任意数量的header或footer可单独出现，也可包含在article或section中</P>
<header>
<hgroup>
<h1>大标题</h1>
<h2>这是一个子标题</h2>
</hgroup>
<H1>header中至少有一个hi标签</H1>
<a href="http://baidu.com">百度</a>
<nav>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
</nav>
</header>
<footer>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</footer>
</body>
</html>5.CSS页面布局案例
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>CSS页面布局案例</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="wrap">
<header align="center"><h1>邱华杰的博客</h1></header>
<nav><h2 color=#D3D3D3>首页 博文 相册 个人档案</h2></nav>
<article>
<h2>班级</h2>
<section>
1620
</section>
<div style="color:silver">编辑于2018.9</div>
</article>
<aside><h2>简介</h2>
<div style="color:blue">班级和学号</div>都已显示
</aside>
<article>
<h2>学号</h2>
<section>
2016006194
</section>
<div style="color:silver">编辑于2018.9</div>
</article>
<footer color=#D3D3D3 align="center">版权所有2018</footer>
</div>
</body>
</html>
#wrap{
width:980px;
height:800px;
border:3px solid gray;
border-radius:10px;
margin:5px auto;
}
header{
width:980px;
height:50px;
text-align:center;
margin:20px auto;
}
nav{
color: #D3D3D3;
width:980px;
height:50px;
text-indent:24px;
border-top:1px solid blue;
border-bottom:1px solid black;
margin:20px auto;
background:#00BBFF;
padding: 2px 2px;
}
article{
width:560px;
height:200px;
text-indent:24px;
border:1px solid blue;
margin:10px 20px;
padding: 10px 5px;
float:left;
}
section{
width:520px;
height:100px;
border-top:1px dashed blue;
border-bottom:2px solid blue;
margin:10px 20px;
text-indent:24px;
float:left;
}
aside{
width:300px;
height:300px;
border:1px solid gray;
margin:auto;
padding: 10px 5px;
float:right;
background:#DDDDDD;
text-indent:24px;
}
footer{
color: #C0C0C0;
width:950px;
height:150px;
border-top:1px solid blue;
clear:both;
margin:20px auto;
text-align:center;
text-indent:24px;
}6.文本层次语义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>time元素</title>
</head>
<body>
<time datetime="2018-11-26">shijian</time>
<time datetime="2018-11-26T18:03">shijian</time>
<article>
<header>
<h1>iphoe</h1>
<p>发布时间
<time datetime="2018-11-26" pubdata="">shijian</time>
</p>
<p>结束时间
<time datetime="2018-11-27">shijian</time></p>
</header>
</article>
</body>
</html>