一.基礎(chǔ)
1.web標(biāo)準(zhǔn)
web前端的內(nèi)容:HTML,CSS,JavaScript
(1)HTML結(jié)構(gòu)標(biāo)準(zhǔn)中規(guī)定了網(wǎng)頁上能夠顯示的內(nèi)容,如文字,圖片,音頻,視頻,Flash,按鈕,輸入框
(2)CSS是表現(xiàn)標(biāo)準(zhǔn)規(guī)定網(wǎng)頁內(nèi)容的布局和樣式,如:內(nèi)容該顯示在什么位置,內(nèi)容是什么顏色,多大,多寬等
(3)JS行為標(biāo)準(zhǔn)規(guī)定網(wǎng)頁的內(nèi)容在某種情況下發(fā)生什么改變,如:動態(tài)變化,廣告頁滾動
2.HTML
HTML是超文本標(biāo)記語言(不是編程語言)
狹義的h5:指html的第五個大版本
廣義的h5:指的是html5+CSS3+javascript
HTML文件結(jié)構(gòu)是由不同的標(biāo)簽組成的
<html>
<head>
內(nèi)容是不可見的
</head>
<body>
內(nèi)容是可見的
</body>
</html>
3.標(biāo)簽
標(biāo)簽的語法
a.常規(guī)標(biāo)簽(雙標(biāo)簽):<標(biāo)簽名 屬性名1=屬性值1 屬性名2=屬性值2...>標(biāo)簽內(nèi)容</標(biāo)簽名>
b.單標(biāo)簽:<標(biāo)簽名 屬性名1=屬性值1 屬性名2=屬性值2...>
標(biāo)簽名:不是隨意命名的,是一些固定的值,標(biāo)簽名前面不能有空隙
屬性:屬性放在開始標(biāo)簽中,屬性名和值直接用等號連接,多個屬性之間用空格隔開.
屬性可以是自定義的屬性,也可以是標(biāo)簽自帶的屬性
標(biāo)簽內(nèi)容:雙標(biāo)簽才存在標(biāo)簽內(nèi)容,標(biāo)簽內(nèi)容可以是任何東西(可以是文字也可以是其他的標(biāo)簽)
大小寫不敏感
文件命名要求:是由字母和數(shù)字組成,但是數(shù)字不開頭,一般都是小寫的.網(wǎng)站首頁的html文件命名為index
二.文本標(biāo)簽
<!--1.標(biāo)題標(biāo)簽:h1-h6-->
<h1>我是標(biāo)題1</h1>
<h2>我是標(biāo)題2</h2>
<h3>我是標(biāo)題3</h3>
<h4>我是標(biāo)題4</h4>
<h5>我是標(biāo)題5</h5>
<h6>我是標(biāo)題6</h6>
<!--2.段落標(biāo)簽:p-->
網(wǎng)頁的內(nèi)容中一個段落文字對應(yīng)一個p標(biāo)簽
p標(biāo)簽的內(nèi)容結(jié)束后會自動換行
注意:html中的文字是不會因為手動的回車和空格以及縮進產(chǎn)生空白效果(換行.空格.縮進無效)
但是可以通過一些特殊的符號來產(chǎn)生特定的效果,
如:空格 強制換行<br />
<!--3.文字效果-->
(1).加粗:
b標(biāo)簽,strong標(biāo)簽
b標(biāo)簽:單純地在樣式上進行加粗
strong標(biāo)簽:除了加粗以外還有強調(diào)的意義
(2).傾斜:
i標(biāo)簽,em標(biāo)簽
em標(biāo)簽有強調(diào)作用
<!--4.水平線:hr-->
<hr /> 單標(biāo)簽
<!--5.列表標(biāo)簽:ul,ol,dl-->
ul:無序列表
ol:有序列表
dl:自定義列表
<ul>
<li>語文</li>
<li>數(shù)學(xué)</li>
<li>英語</li>
</ul>
<ol>
<li>北京</li>
<li>成都</li>
<li>上海</li>
</ol>
<dl>
<!--dt對列表進行分組-->
<dt>A</dt>
<!--dd列舉分組下的內(nèi)容-->
<dd>and</dd>
<dd>are</dd>
</dl>
三.圖片和超鏈接
<!--1.圖片標(biāo)簽:img標(biāo)簽
單標(biāo)簽
src屬性:圖片地址(可以是本地圖片地址,也可以是遠程服務(wù)器上的圖片地址)
title屬性:設(shè)置圖片標(biāo)題(這個標(biāo)題是鼠標(biāo)停留在圖片上等一會兒出現(xiàn)的文字)
alt屬性:用來設(shè)置圖片加載失敗時出現(xiàn)的提示信息
-->
<img id="1" alt="加載失敗" src="./img/a.jpg" title="月餅"/>
<!--2.超鏈接標(biāo)簽:a標(biāo)簽
想要點擊跳轉(zhuǎn)的地方都可以使用超鏈接語法
注意:a標(biāo)簽的內(nèi)容部分是可見的,是可以被點擊的
(1) href屬性:跳轉(zhuǎn)目標(biāo)對應(yīng)的地址
a.其他的網(wǎng)頁地址--------跳轉(zhuǎn)
b.寫本地的一個html路徑------跳轉(zhuǎn)
c.空--------刷新當(dāng)前網(wǎng)頁(重新加載)
d.選擇器--------讓網(wǎng)頁跳轉(zhuǎn)到指定的位置
(2)target屬性:設(shè)置跳轉(zhuǎn)方式
_self(默認值):在當(dāng)前頁面中刷新出新的內(nèi)容
_blank:在新的頁面去刷新
注意:刷新當(dāng)前網(wǎng)頁和在當(dāng)前網(wǎng)頁中跳轉(zhuǎn)到指定位置時,只能使用默認_self
-->
<a target="_blank" >百度一下</a>
<a href="01-文本標(biāo)簽.html">文本標(biāo)簽</a>
<a href="">刷新</a>
<a href="#1">第一張</a>
四.表格
#表格標(biāo)簽:
table標(biāo)簽,tr標(biāo)簽,td標(biāo)簽,th標(biāo)簽
1.標(biāo)簽
table標(biāo)簽:表格整體(一個table標(biāo)簽代表一個表格)
tr標(biāo)簽:行(一個tr標(biāo)簽代表表格中的一行)
td標(biāo)簽:單元格(一個td代表一個單元格)
th標(biāo)簽:表頭
2.屬性
a.border屬性 設(shè)置表格的邊框的寬度(只能作為table屬性)
b.bordercolor:設(shè)置邊框的顏色(只能作用于table)
c.background:設(shè)置背景圖片
d.bgcolor:設(shè)置背景顏色(可以作用于table\tr\td)
e.cellspacing:設(shè)置單元格之間的間隙(默認是1)
f.cellpadding:設(shè)置內(nèi)容和單元格之間的間距
g.width:一般作用于某一個單元格,影響的是這個單元格對應(yīng)的那一列
h.height:一般作用于行,
i.align:設(shè)置對齊方式(可以作用于table\tr\td)
作用于table,讓整個表格在瀏覽器中居中
作用于tr/td,讓內(nèi)容在單元格中居中
<table border="10" align="center" bordercolor="purple" bgcolor="aquamarine" cellspacing="1" cellpadding="22">
<!--<tr><th>成績表</th></tr>-->
<!--第一行-->
<tr height="140">
<!--第一行第一個單元格-->
<td bgcolor="aqua" width="100">姓名</td>
<td>成績</td>
<td>是否留級</td>
</tr>
<!--第二行-->
<tr>
<td>張三</td>
<!--第二行第二個單元格-->
<td>90</td>
<td>否</td>
</tr>
<!--第三行-->
<tr>
<td>王二</td>
<td>80</td>
<!--第三行第三個單元格-->
<td>否</td>
</tr>
</table>
</body>
</html>
<table border="5" cellspacing="" cellpadding="">
<tr><th>xxx信息表</th></tr>
<tr height="80">
<td width="120" align="center">姓名</td>
<td width="250" align="center">畢業(yè)院校</td>
</tr>
<tr height="100">
<td></td>
<td></td>
</tr>
<tr height="100">
<td></td>
<td></td>
</tr>
<tr height="100">
<td></td>
<td></td>
</tr>
<tr height="100">
<td></td>
<td></td>
</tr>
</table>
五.細線表格
<p>xxx信息表</p>
<table cellspacing="1" bgcolor="black">
<tr bgcolor="white" height="80" align="center">
<td width="120">姓名</td>
<td width="250">畢業(yè)院校</td>
</tr>
<tr bgcolor="white" height="100">
<td>于夢嬌</td>
<td>
<img src="img/a.jpg"/>
<a >天津商業(yè)大學(xué)</a></td>
</tr>
<tr bgcolor="white" height="100">
<td></td>
<td></td>
</tr>
<tr bgcolor="white" height="100">
<td></td>
<td></td>
</tr>
<tr bgcolor="white" height="100">
<td></td>
<td></td>
</tr>
</table>
六.不規(guī)則表格
<table bgcolor="black" cellspacing="1" width="600" height="500">
<tr bgcolor="white">
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
homework
