Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
高興鐵鐵們能來看html網(wǎng)頁設(shè)計第二期~~~~撒花~~~~~
哎呀呀~實在是抱歉備注標(biāo)簽我記錯了QAQ
<!--內(nèi)容打這里-->這個才是備注標(biāo)簽不是//
首先我們先來學(xué)習(xí)上節(jié)課留下的劇透,分別是:
有人就說了標(biāo)題標(biāo)簽上次劇透不就只有h1標(biāo)簽嗎?
嘿嘿,其實他還有兄弟姐妹啦~
看圖,代碼是從上往下從左往右執(zhí)行的請記住這個順序哦~
還有,左邊是代碼右邊是網(wǎng)頁上面的效果哦~
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁面標(biāo)題</title>
</head>
<body>
<!--標(biāo)題標(biāo)簽是h1~h6-->
<h1>1</h1><!--最大-->
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6><!--最小-->
</body>
</html>
如圖所示,h1標(biāo)簽是最大的,h6標(biāo)簽是最小的
是不是很簡單呀,現(xiàn)在已經(jīng)學(xué)會了一個知識點了哦~
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--千萬要記住內(nèi)容是寫在標(biāo)簽里面的哦~-->
<!--段落標(biāo)簽是獨占一條的哦-->
<p>第一條p標(biāo)簽</p>
<p>第二條p標(biāo)簽</p>
<p>第三條p標(biāo)簽</p>
</body>
</html>
鏈接標(biāo)簽是什么?顧名思義就是一個鏈接看代碼:
<a href="https://www.baidu.com">百度</a>
href是什么東西啊?是a標(biāo)簽的屬性啦~里面用來輸入你需要跳轉(zhuǎn)到的網(wǎng)頁的鏈接
屬性里面的東西是不會出現(xiàn)在網(wǎng)頁上面的出現(xiàn)的只有在a標(biāo)簽里面的內(nèi)容哦
當(dāng)我點擊百度這兩個字后就給我跳轉(zhuǎn)到了我們href屬性里面的https://www.baidu.com
當(dāng)然我們也可以跳轉(zhuǎn)到我們自己制作的網(wǎng)頁上面但要求是同一個項目下面的網(wǎng)頁
是不是很有趣~
看視頻:
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
視頻中我們點擊鏈接后就跳轉(zhuǎn)到了山這個網(wǎng)頁出現(xiàn)了一張山的圖片,是不是有點小意思~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="new_file3.html">跳轉(zhuǎn)到山的網(wǎng)頁</a><!--只有同一個項目下面的網(wǎng)頁才能相互跳轉(zhuǎn)-->
</body>
</html>
圖像標(biāo)簽標(biāo)簽如其意,就是用來上傳圖像的一個標(biāo)簽~~
我們這里介紹一下img的兩個屬性:
<img src="img/OIP-C.jpg" alt="山"/>
src就是用來放圖片的地址的,他會根據(jù)地址去找圖片然后把圖片放到網(wǎng)頁上面。
alt有什么用啊就是當(dāng)圖片顯示失敗的時候就會顯示alt里面的文字
看視頻:
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
我們把圖片的地址破壞后,就會顯示一個圖片錯誤的圖標(biāo)和alt里面的內(nèi)容
怎么拖圖片到img文件下,老師~~~我不知道
看視頻
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
嘿嘿就直接把文件拖進來就ok了是不是很簡單~
okk,好快啊怎么一下就學(xué)完了今天的知識點~~~
嘻嘻今天可是有作業(yè)的~
請根據(jù)下面的網(wǎng)頁仿寫一下:
完成后作業(yè)發(fā)再評論區(qū)哦,有什么不懂的可以留言包回答的。
加油呀,每天學(xué)一點爭取做出屬于自己的一個網(wǎng)頁~
上一期
TML是制作網(wǎng)頁的基礎(chǔ),我們在網(wǎng)站建設(shè)中談?wù)摰撵o態(tài)網(wǎng)頁就是基于HTML的網(wǎng)頁。
早期的網(wǎng)頁直接用HTML代碼編寫,但現(xiàn)在有許多智能網(wǎng)頁制作軟件(常用的如frontpage,dream weaver等)通常不需要手動編寫代碼,而是由這些軟件自動生成。雖然不需要自己寫,但是理解HTML代碼仍然是非常重要的。
了解HTML是什么?它是學(xué)習(xí)網(wǎng)站建設(shè)的重要技術(shù)基礎(chǔ)知識
下面我們自己可以動手創(chuàng)建一個非常簡單的網(wǎng)頁,首先我們讓計算機顯示擴展,方法是打開我的電腦,然后現(xiàn)在欄目工具》文件夾選項》查看》高級設(shè)置中找到《隱藏已知文件類型的擴展名》將其不勾選,并單擊“應(yīng)用”以確認(rèn)設(shè)置。然后在桌面上創(chuàng)建一個新的TXT文件,將此文件命名為“xxx.html”(擴展名也可以是htm),這樣你就可以用瀏覽器打開它,你就會看到自己制作的最簡單的頁面。
html是一種超文本標(biāo)記語言,即html(hypertext markup language),是一種用來描述網(wǎng)絡(luò)文檔的標(biāo)記語言。在頁面的開頭和結(jié)尾使用<html></html>標(biāo)簽。
總結(jié):
1)HTML是我們常說的靜態(tài)網(wǎng)頁;
2)HTML是以Html或htm為擴展名的文件;
3)HTML某些標(biāo)簽代碼規(guī)則,讓內(nèi)容在瀏覽器中呈現(xiàn)出我們所需要的樣式;
4)HTML可以使用記事本創(chuàng)建,并以.html或.htm為擴展名保存。
html文件中的代碼由具有一定的規(guī)則規(guī)律標(biāo)簽與內(nèi)容組成。以指定的HTML結(jié)構(gòu)和內(nèi)容形成完整的html文件。我們可以直接使用瀏覽器來打開,查看網(wǎng)頁效果。
如果您想在瀏覽器中顯示各式各樣的網(wǎng)頁,我們就需要html文件(HTML基本結(jié)構(gòu)+內(nèi)容+標(biāo)簽)和css文件(css樣式)來實現(xiàn)我們需要的漂亮網(wǎng)頁。
動力節(jié)點老杜講解的html學(xué)習(xí)教程,非常詳細(xì)全面,完全適合小白入門
內(nèi)容:講解了HTML基礎(chǔ)語法、HTML概述、W3C概述、B/S架構(gòu)系統(tǒng)原理、table、背景色與背景圖片、超鏈接、列表、表單、框架等知識點。
通過html教程的學(xué)習(xí)之后,不但可以開發(fā)基本的網(wǎng)頁,還可以看懂別人編寫的HTML頁面。
HTML完整資料下載:
http://www.bjpowernode.com/?toutiaoweb.chai
1.HTML教程:課程內(nèi)容概述
2.HTML教程:BS結(jié)構(gòu)介紹
3.HTML教程:軟件環(huán)境準(zhǔn)備
4.HTML教程:HTML概述
5.HTML教程:我的第一個HTML
6.HTML教程:HTML的基本標(biāo)簽
7.HTML教程:HTML的實體符號
8.HTML教程:HTML的表格
9.HTML教程:HTML的單元格合并1
10.HTML教程:HTML的單元格合并2
11.HTML教程:thead tbody tfoot
12.HTML教程:背景色和背景圖片
13.HTML教程:HTML圖片img標(biāo)簽
14.HTML教程:HTML超鏈接
15.HTML教程:超鏈接的作用-request和response的概念
16.HTML教程:HTML列表
17.HTML教程:form表單初步
18.HTML教程:用戶注冊表單的實現(xiàn)
19.HTML教程:下拉列表支持多選
20.HTML教程:form的file控件
21.HTML教程:隱藏域hidden控件
22.HTML教程:隱藏域hidden控件2
23.HTML教程:readonly和disabled
24.HTML教程:控件的maxlength屬性
25.HTML教程:HTML文檔中節(jié)點的id屬性
26.HTML教程:div和span在網(wǎng)頁中的應(yīng)用
海綿寶寶】html網(wǎng)頁設(shè)計與制作期末大作業(yè)
本文為動漫海綿寶寶網(wǎng)頁設(shè)計實例,應(yīng)用html+css,div+css布局,頁面簡單,代碼精簡,設(shè)置菜單、鏈接、視頻等,適用于初學(xué)者、大學(xué)生網(wǎng)頁課程作業(yè)設(shè)計等,供大家參考。
網(wǎng)頁文件
網(wǎng)頁效果
以下為網(wǎng)頁正文(節(jié)選示例):
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。