HTML(HyperTextMark-upLanguage)即超文本標(biāo)記語言或超文本鏈接標(biāo)示語言,是WWW的描述語言。
HTML文檔的結(jié)構(gòu)
2.頁面背景色或背景圖像
Hello World!
</body>
(網(wǎng)頁背景圖像)
Hello World!
</body>
(網(wǎng)頁背景色彩)
3.文本相關(guān)標(biāo)簽
標(biāo)題標(biāo)簽<h1>-<h6>,<font>標(biāo)簽。
段落標(biāo)簽<p>,換行標(biāo)簽<br>。
<h#> ... </h#>,#=1, 2, 3, 4, 5, 6 (說明:<h1>到<h6>字體大小依次遞減)
<sub>下標(biāo)文字,<sup>上標(biāo)文字,<del>刪除線。
段落標(biāo)簽<p>,換行標(biāo)簽<br>。
<HR> 標(biāo)簽用于在頁面上繪制水平線。
圖像的基本語法:<img src=“images/adv_2.jpg” width=“300” height=“150” alt=“在線報名” >
要鏈接到同一目錄 (C:\HTML) 下的頁面,可編寫 <A HREF = “Doc1.htm”> 或 <A HREF = “C:\html\Doc2.htm”>
鏈接到本頁面:
<a href=“http://www.it.com”>
<img src=“images/adv_2.jpg” border=“0” width="300"height="150">
</a>
<marquee scrolldelay=“100” direction=“up”>
滾動文字或圖像
</marquee>
說明:scrolldelay:表示滾動延遲時間,默認(rèn)值為90;direction:表示滾動的方向,默認(rèn)為從右向左。
目標(biāo):掌握列表的用法
使用表格的基本結(jié)構(gòu)實現(xiàn)簡單表格
使用表格相關(guān)標(biāo)簽實現(xiàn)跨行、跨列的復(fù)雜表格
會使用表單的基本結(jié)構(gòu)制作表單頁面
會使用各種表單元素實現(xiàn)注冊頁面
能理解post和get兩種提交方式的區(qū)別
格式: <ul type=“”>
type屬性設(shè)置標(biāo)號的類型,值可以取:
1 disc :實心圓點
2 circle :空心圓點
3 square :實心方塊
無序列表
格式:<ol type=“” start=“”>
type設(shè)置標(biāo)號的類型,值可以取:
1 1:顯示數(shù)字
2 A:顯示大寫字母
3 a:顯示小寫字母
4 I:顯示大寫羅馬數(shù)字
5 i:顯示小寫羅馬數(shù)字
有序列表
嵌套列表
門戶網(wǎng)站應(yīng)用表格
<table>...</ table >定義表格
創(chuàng)建表格
表格表現(xiàn)
域名數(shù)量報表的創(chuàng)建
域名數(shù)量報表
1.跨多列的表格
2.跨多行的表格
3.如何創(chuàng)建跨行跨列的表格
品牌商城表的創(chuàng)建
width用來設(shè)置表格的寬度;height用來設(shè)置表格的高度;border用來設(shè)置表格邊框尺寸大小;bordercolor用來設(shè)置表格邊框顏色。
品牌商城表
背景:background屬性用來設(shè)置表格的背景圖片;bgcolor屬性用來設(shè)置表格、行、列的背景色。
對其方式:align屬性用來設(shè)置表格、行、列的對齊方式。
<input type=“text” value="張三" size="20">
文本框的建設(shè)
文本框
<input type=“password” value=“123456” size=“22”>
密碼框的建設(shè)
密碼框,22個字符寬度
<input type="radio" value="男" checked="checked">
單選按鈕的建設(shè)
單選按鈕框
<input type=“checkbox” name="cb2" value="talk">
<textarea name=“textarea” cols=“40” rows=“6”>內(nèi)容</textarea>
<input type="reset" name=“reset" value=" 重填 ">
其他表單元素:<input type=“hidden”/>表單隱藏域
<input type=“image”/>表單圖片按鈕
<input type=“file”/>文件瀏覽
<label>標(biāo)簽可以綁定某個表單元素,用于擴展可以相應(yīng)點擊等事件的區(qū)域
如:當(dāng)點擊復(fù)選框右邊的提示文字時,該復(fù)選框也可被選中。
內(nèi)容有限,關(guān)于css,div和網(wǎng)頁布局的部分就下次在和大家分享吧!
TML,即超文本標(biāo)記語言Hyper Text Markup Language
在HTML中最重要的概念就是標(biāo)簽,或者說每一個你寫的語句都是一個標(biāo)簽。
通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一,使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字,圖形、動畫、聲音、表格、鏈接等。
以下是HTML基本(常用)標(biāo)簽:
<html></html> 定義 HTML
<head></head> 頭
<meta> 元信息
<title></title> 標(biāo)題
<link> 鏈接外部資源
<style></style> 樣式(CSS部分內(nèi)容)
<body></body> 頁面主體
<h></h> 標(biāo)題(h1~h6)
<b></b> 加粗
<strong></strong> 加粗(兩者效果相同)
<i></i> 斜體
<em></em> 斜體(效果相同)
<u></u> 下劃線
<del></del> 刪除線
<ul></ul> 無序列表
<ol></ol> 有序列表
<li></li> 列表每一行
<a></a> 超鏈接(href內(nèi)容為跳轉(zhuǎn)地址)
<font> 字體
<sub> 下標(biāo)
<sup> 上標(biāo)
<br> 換行
<p> 段落
<img> 圖像(src內(nèi)容為資源地址,本地或網(wǎng)絡(luò)都可以)
<hr> 分割線
<table></table> 定義表格
<th></th> 表頭
<tr></tr> 一行數(shù)據(jù)
<td></td> 一格數(shù)據(jù)
<form></form> form表單
<frame> 框架
(后兩個初學(xué)用不到,以后會常用)
高興鐵鐵們能來看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)頁~
上一期
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。