HTML頁面元素和屬性
阿新 • • 發佈：2018-12-22
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>