搭建網(wǎng)頁結(jié)構(gòu)
時間:2023-09-03 23:42:02 | 來源:網(wǎng)站運營
時間:2023-09-03 23:42:02 來源:網(wǎng)站運營
搭建網(wǎng)頁結(jié)構(gòu):<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--div標(biāo)簽-->
<div><img src="img/html.jpg" alt=""/>html課程</div>
<div><img src="img/js1.jpg" alt=""/>JS入門課程</div>
<div><img src="img/js2.jpg" alt=""/>JS進階課程</div>
<!--span標(biāo)簽-->
<span><img src="img/html.jpg" alt=""/>html課程</span>
<span><img src="img/js1.jpg" alt=""/>JS入門課程</span>
<span><img src="img/js2.jpg" alt=""/>JS進階課程</span>
<!--標(biāo)簽嵌套規(guī)則-->
<!--塊級標(biāo)簽可包含行內(nèi)元素和某些塊級元素-->
<div><h1><a href=""></a></h1></div>
<!--行內(nèi)元素不能包含塊元素,只能包含其他行內(nèi)元素-->
<a href=""><h1></h1><div></div></a><!--錯誤-->
<span><em></em></span><!--正確-->
<!--塊級元素不能放在<p>標(biāo)簽內(nèi)-->
<p><div>1111</div><h1>2222</h1></p><!--錯誤-->
<!--特殊塊級元素只能包含行內(nèi)元素,不能再包含塊級元素 如:h1、h2、h3、h4、h5、h6、p、dt-->
<!--塊級元素與塊元素并列,行內(nèi)元素和行內(nèi)元素并列-->
<div><h1></h1><p></p></div><!--正確-->
<div><span></span><a href=""></a></div><!--正確-->
<div><h1>666</h1><span>888</span></div><!--錯誤-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html案例</title>
</head>
<body>
<h1>CSS樣式</h1>
<ul>
<li><b>CSS層疊樣式</b></li>
<li>CSS使用方法
<ol>
<li><em>行內(nèi)樣式</em></li>
<li><em>內(nèi)部樣式</em></li>
<li><em>外部樣式</em></li>
</ol>
</li>
<li>CSS優(yōu)先級</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html案例</title>
</head>
<body>
<!--頭部內(nèi)容-->
<div>
<!--logo-->
<div><img src="img/1.jpg" alt=""/></div>
<!--導(dǎo)航-->
<div>
<ul>
<li><a href="慕課網(wǎng)-程序員的夢工廠">HTML5</a></li>
<li><a href="慕課網(wǎng)-程序員的夢工廠">JavaScript</a></li>
<li><a href="慕課網(wǎng)-程序員的夢工廠">CSS</a></li>
<li><a href="慕課網(wǎng)-程序員的夢工廠">PHP</a></li>
<li><a href="慕課網(wǎng)-程序員的夢工廠">IOS</a></li>
<li><a href="慕課網(wǎng)-程序員的夢工廠">Android</a></li>
<li><a href="慕課網(wǎng)-程序員的夢工廠">Photoshop</a></li>
</ul>
</div>
<!--banner圖-->
<div><img src="img/4.jpg" alt=""></div>
</div>
<!--主體內(nèi)容-->
<div>
<!--文章內(nèi)容-->
<div>
<h1>如何成為一名優(yōu)秀“web前端開發(fā)工程師”</h1>
<h6>2天前 308瀏覽 1評論</h6>
<p>學(xué)會運用各種工具進行的輔助工具</p>
<p>必須掌握基本的web前端開發(fā)技術(shù)</p>
<p>如何才能做的更好</p>
<p>可見,看似簡單的網(wǎng)頁制作</p>
<h6>作者:Jush 2016-8-29</h6>
</div>
<!--鏈接區(qū)-->
<div>
<!--html-->
<dl>
<dt>HTML標(biāo)記語言</dt>
<dd><img src="img/3.jpg" alt=""></dd>
<dd>超文本標(biāo)記語言或超文本鏈接標(biāo)記語言HTML是一種制作萬維網(wǎng)頁頁面的標(biāo)準(zhǔn)語言</dd>
</dl>
<!--css-->
<dl>
<dt>CSS層疊樣式</dt>
<dd><img src="img/2.jpg" alt=""></dd>
<dd>CSS目前最新版本為CSS3,是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式語言</dd>
</dl>
<!--javascript-->
<dl>
<dt>什么是javascript</dt>
<dd><img src="img/4.jpg" alt=""></dd>
<dd>Javascript一種腳本語言,是一種動態(tài)類型、弱類型、基于原型的語言</dd>
</dl>
</div>
</div>
<!--頁腳內(nèi)容-->
<div><p>慕課網(wǎng)只學(xué)有用的</p></div>
</body>
</html>