HTML決定網(wǎng)頁(yè)的內(nèi)容
CSS決定網(wǎng)頁(yè)的樣式
JS決定網(wǎng)頁(yè)的行為
基礎(chǔ)標(biāo)簽
學(xué)html就是學(xué)標(biāo)簽的使用....
1、文本標(biāo)簽
標(biāo)題標(biāo)簽：h1-h6
段落標(biāo)簽：p
特殊功能標(biāo)簽和符號(hào)：
字體相關(guān)標(biāo)簽：
2、列表標(biāo)簽
（１）有序列表:
ol標(biāo)簽 -- 代表整個(gè)列表
li標(biāo)簽 -- 代表列表中的元素
（２）無(wú)序列表
ul標(biāo)簽 - 代表整個(gè)列表
li標(biāo)簽 - 代表列表中的元素
（3）自定義列表
dl標(biāo)簽 - 代表整個(gè)列表
dt標(biāo)簽 - 分組名
dd標(biāo)簽 - 分組中的內(nèi)容
3、圖片和超鏈接
超鏈接標(biāo)簽: a標(biāo)簽
圖片標(biāo)簽: img
href屬性：
1）網(wǎng)絡(luò)地址 - 跳轉(zhuǎn)到指定的網(wǎng)頁(yè)
2）本地的html文件地址 - 跳轉(zhuǎn)到本地的html對(duì)應(yīng)的網(wǎng)頁(yè)中
3）空 - 刷新網(wǎng)頁(yè)
4）選擇器 - 在當(dāng)前網(wǎng)頁(yè)中，跳轉(zhuǎn)到指定的位置
4、數(shù)據(jù)表格
table標(biāo)簽 - 整個(gè)表格
tr - 行
td - 單元格
5、form標(biāo)簽
作為一個(gè)容器來(lái)收集和提交這個(gè)標(biāo)簽里其他標(biāo)簽的數(shù)據(jù)，不會(huì)單獨(dú)使用
6、input標(biāo)簽
type: text、password、radio、checkbox、submit
name：用來(lái)對(duì)輸入的內(nèi)容進(jìn)行說(shuō)明，提交數(shù)據(jù)的時(shí)候以name:value的形式提交
id：
placeholder:提示信息
maxleng:最大位數(shù)
<body>
<form action="" method="get" target="_blank">
<input type="text" name="usrname" value="xiaoming" placeholder="用戶名"/><br>
<input type="text" name="tel" value="13689765326" placeholder="電話號(hào)碼"/ maxlength="12"><br>
<input type="password" name="password" value="123465" placeholder="密碼"/ maxlength="6s"><br>
<hr >
<div id="" >
<input type="radio" name="sex" value="famale" checked="True">famale<br>
<input type="radio" name="sex" value="male" checked="False">male<br>
<input type="radio" name="sex" value="other" checked="False">famale<br>
</div>
<hr >
<div id="" >
<input type="radio" name="marry" value="yes" checked="True">已婚<br>
<input type="radio" name="marry" value="no" checked="False">未婚<br>
</div>
<hr >
<div id="" >
<input type="checkbox" name="IT" value="python" checked="True" >Python語(yǔ)言<br>
<input type="checkbox" name="IT" value="Java" checked="False">Java語(yǔ)言<br>
<input type="checkbox" name="IT" value="C#" checked="False">C#語(yǔ)言<br>
</div>
<input type="reset" value="重置"/>
<input type="button" value="普通按鈕"/>
<input type="submit" value="submit"/>
</form>
</body>
7、下拉菜單（select -option）和文本域（textarea）
<body>
<form action="" method="post">
<select name="西甲" >
<option value="1" >皇馬</option>
<option value="2" selected="True">巴薩</option>
<option value="3">馬競(jìng)</option>
<option value="4">塞維利亞</option>
</select>
<input type="submit" value="submit"/>
</form>
<textarea rows="3" cols="50" style="text-align:left;">
文本域
</textarea>
</body>
html常用標(biāo)簽示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>html標(biāo)簽示例</title>
<style type="text/css">
.outside
{
background-color:bisque;
margin: 10px 10px;
width: auto;
height: auto;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.div01,.div02,.div03
{
width:500px;
background-color: orange;
display: inline-block;
padding:10px 10px ;
border:2px solid;
font-size: 20px;
font-family: "仿宋";
}
.inside01,.inside02,.inside03
{
margin: 10px 10px;
width: auto;
height:auto;
padding-top: 10px;
background-color: white;
text-align: center;
}
.div04,.div05,.div06
{
width:500px;
height:100px;
background-color: lightgray;
text-align: left;
display: inline-block;
}
.frameset01
{
background-color: lightgray;
height: 100px;
}
.frameset01 frame
{
width: auto;
height: 100px;
}
</style>
</head>
<body>
<div class="outside">
<div class="div01" >
<h1>靜夜思</h1>
<p>床前明月光，疑是地上霜</p>
<p>舉頭望明月，低頭思故鄉(xiāng)</p>
</div>
<div class="div02">
<h1>靜夜思</h1>
<p>床前明月光，疑是地上霜</p>
<p>舉頭望明月，低頭思故鄉(xiāng)</p>
</div>
<div class="div03">
<h1>靜夜思</h1>
<p>床前明月光，疑是地上霜</p>
<p>舉頭望明月，低頭思故鄉(xiāng)</p>
</div>
<hr >
<div class="inside01">
<div class="div04">
<form class="form01" method="post" target="_blank" >
<select class="select01" name="國(guó)家">
<option value="中國(guó)">中國(guó)</option>
<option value="美國(guó)">美國(guó)</option>
<option value="德國(guó)">德國(guó)</option>
<option value="英國(guó)">英國(guó)</option>
</select>
<select class="select02" name="國(guó)家">
<option value="中國(guó)">中國(guó)</option>
<option value="美國(guó)">美國(guó)</option>
<option value="德國(guó)">德國(guó)</option>
<option value="英國(guó)">英國(guó)</option>
</select>
<select class="select03" name="國(guó)家">
<option value="中國(guó)">中國(guó)</option>
<option value="美國(guó)">美國(guó)</option>
<option value="德國(guó)">德國(guó)</option>
<option value="英國(guó)">英國(guó)</option>
</select>
</form>
</div>
<div class="div05">
<form action="" method="post">
<input type="checkbox" name="IT" value="python" checked="True" >Python語(yǔ)言<br>
<input type="checkbox" name="IT" value="Java" checked="False">Java語(yǔ)言<br>
<input type="checkbox" name="IT" value="C#" checked="False">C#語(yǔ)言<br>
</form>
</div>
<div class="div06">
<form action="" method="post">
<input type="radio" name="sex" value="famale" checked="True">famale<br>
<input type="radio" name="sex" value="male" checked="False">male<br>
<input type="radio" name="sex" value="other" checked="False">famale<br>
<input type="submit" value="submit"/>
</form>
</div>
</div>
<hr >
<!--
-->
<div class="inside02">
<frameset class="frameset01" cols="25%,50%,25%">
<frame class="" src="new1.html">
<frame class="" src="new2.html">
<frame class="" src="new3.html">
</frameset>
</div>
<hr >
<div class="inside03">
</div>
</div>
</body>
</html>
