HTML
<caption></caption> 表頭
<table></table> 表格
<tr></tr> 行
<td></td> 行內(nèi)格
<tfoot></tfoot>
table中：aligh="center leht right" 對(duì)其方式[左，中，右]
rowspan="" 合并行
colspan="" 合并列
空格
  兩個(gè)空格
  三個(gè)空格
【表單標(biāo)簽】
<form></form> 表單‘
action="/java2212/login"指定后臺(tái)服務(wù)器路徑
<input /> 輸入框
<input type="輸入類型"/>
text 文本輸入
password 密碼框，密文
radio 單選框，多框同name值
checkbox 復(fù)選框，多框同name值
date 日期
range 范圍滑動(dòng)框
file 文件
email 郵箱
button 可點(diǎn)擊按鈕
submit 可點(diǎn)擊提交
reset 可點(diǎn)擊重置
name值，用
value="默認(rèn)值"
name="" 暫時(shí)不用，java用name獲取輸入框的值
placeholder="輸入提示" 輸入框提示
<select> 選項(xiàng)框
<option></option> 選項(xiàng)
</select>
<textarea></textarea> 可變大小文本域
【框架集標(biāo)簽】
cols將頁(yè)面按照列分為幾比幾
rows將頁(yè)面按照行分為幾比幾
<frameset cols="1,9">
<frame src="frame-a.html">
<frame stc="frame-b.heml">
</frameset>
【框架標(biāo)簽】
將a頁(yè)面設(shè)置為target="namesss"
當(dāng)a標(biāo)簽的頁(yè)面內(nèi)容指定在iframe內(nèi)，就可以實(shí)現(xiàn)一個(gè)頁(yè)面中的iframe實(shí)現(xiàn)可以打開多個(gè)頁(yè)面
<iframe name="namesss" src="frame-a.hetm" width="900px" height="700px">
</iframe>
CSS
CSS叫層疊樣式表,用來(lái)美化HTML,
也可以配合腳本動(dòng)態(tài)的改變樣式
提供代碼復(fù)用,
與HTML代碼分離,方便后期維護(hù)
使用方式
1、CSS樣式與HTML標(biāo)簽在一起
在標(biāo)簽內(nèi)，引入style
<!-- css與html在一起；在標(biāo)簽內(nèi)使用style屬性引入css -->
<div style="width: 400px;height: 400px;background-color: red;"></div>
2、css樣式與html標(biāo)簽分離，但不出，使用
給標(biāo)簽id，css中用（#id名字）做連接
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d2{
width: 600px;
height: 600px;
background-color: green;
}
</style>
</head>
<body>
<div id="d2"></div>
</body>
</html>
3、css文件和html文件分離
1.得有html和css文件
2.在html中的head內(nèi)中使用link引用css文件
語(yǔ)法格式
<link rel="stylesheet" href="css/Demo1.css">
<!-- rel中的stylesheet意思是樣式表，固定寫法 -->
<!-- href寫入css文件的地址 -->
選擇器
語(yǔ)法格式:
<style>
選擇器{
屬性:值;
屬性:值;
}
<style>
標(biāo)簽選擇器【重點(diǎn)】
指定標(biāo)簽類型，只要是這個(gè)標(biāo)簽就受影響
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div>d1</div>
<div>d2</div>
<div>d3</div>
<input />
</body>
id選擇器【重點(diǎn)】
用標(biāo)簽中定義的id來(lái)與css進(jìn)行聯(lián)系，一個(gè)id對(duì)應(yīng)一個(gè)標(biāo)簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1{
width: 200px;
height: 200px;
background-color: red;
}
#d2{
width: 300px;
height: 300px;
background-color: green;
}
#d3{
width: 400px;
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<!-- id屬性,是全局屬性,所有標(biāo)簽都可以定義,id值要唯一 -->
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
<input />
</body>
</html>
class選擇器【重點(diǎn)】
和id格式基本一樣，但class可以被多個(gè)標(biāo)簽同時(shí)調(diào)用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* style注釋
.類名{}
*/
.yuju1{
background-color: antiquewhite;
}
.yuju2{
font-size: 3 0px;
}
</style>
</head>
<body>
<h1>岳陽(yáng)樓</h1>
<!-- 標(biāo)簽加class屬性,可以同時(shí)設(shè)置多個(gè)clss值,中間空格隔開 -->
<p class="yuju1 yuju2">岳陽(yáng)樓上日銜窗，</p>
<p>影到深潭赤玉幢。</p>
<p class="yuju1">悵望殘春萬(wàn)般意，</p>
<p>滿欞湖水入西江。</p>
</body>
</html>
屬性選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 標(biāo)簽[屬性=值]{
} */
input[type=text]{
width: 350px;
height: 35px;
background-color: red;
}
</style>
</head>
<body>
<form action="/java2212/login">
用戶名: <input type="text" value="" name="username" placeholder="首字母大寫"/><br>
密碼: <input type="password" name="password"/><br>
性別:<input type="radio" name="sex"/>男
<input type="radio" name="sex" />女<br>
愛好:<input type="checkbox" name="hobby"/>學(xué)習(xí)
<input type="checkbox" name="hobby"/>敲代碼
<input type="checkbox" name="hobby"/>睡覺<br>
出生年月:<input type="date" name="birthday"/><br>
年齡:<input type="range" name="age"/>18<br />
頭像:<input type="file" name="touxiang"/><br>
郵箱:<input type="email"/><br>
</form>
</body>
</html>
層級(jí)選擇器
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 層級(jí)選擇器
選擇器1 選擇器2 ...{}
選擇器之間是空格,遞進(jìn)關(guān)系,在選擇器1的基礎(chǔ)上,
再進(jìn)行選擇器2的選擇
*/
.d1 span{
background-color: red;
}
</style>
</head>
<body>
<div class="d1">
<p>d1-p</p>
<span>d1-s2</span>
</div>
<div>
<span>d2-s1</span>
<span>d2-s2</span>
</div>
</body>
組合選擇器
選擇器1,選擇器2{
}
兩個(gè)選擇器會(huì)同時(shí)生效,兩個(gè)選擇器是平級(jí)關(guān)系
css屬性
文字屬性
font-family: 宋體; /*更改字體*/
font-size: 35px; /*更改字體大小*/
文本屬性
color: red; /*字體顏色*/
text-align: center; /*文本居中*/
text-indent: 20px; /*縮進(jìn)*/
背景屬性
backgrouond-color： 顏色; /*更給背景顏色*/
background-image：url("圖片地址")/*背景圖片*/默認(rèn)平鋪background-repeat：no-repeat; /*不平鋪*/
repeat-x; // repeat-y; /*x或y軸平鋪*/
background-size:250px; /*背景圖片大小*/
background-position: bottom; /*背景圖片的地方*/
列表屬性
.l1{
list-style-image: url("img/數(shù)字-1.png");
/*在列表中添加圖片，比如[1]這樣的序號(hào)小圖片*/
尺寸屬性【重點(diǎn)】
width:100px; 或者 100%;
height:100px; 或者 100%;
顯示屬性【重點(diǎn)】
display: none; /*不展示*/
display: block; /*顯示: 按塊顯示*/
display: inline; /*顯示,按行內(nèi)顯示*/
浮動(dòng)屬性float
float: right; /*浮動(dòng),會(huì)脫離當(dāng)前的文檔流*/
定位屬性【重點(diǎn)】
相對(duì)定位文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-472988.html
/*相對(duì)定位不會(huì)脫離原來(lái)的文檔流
加了定位就可以使用位置屬性: left,right,top,bottom
相對(duì)與父級(jí)進(jìn)行位置移動(dòng)*/
position: relative; /*相對(duì)定位*/
left: 30px;
top: 30px;
絕對(duì)定位文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-472988.html
/*絕對(duì)定位會(huì)脫離原來(lái)的文檔流
絕對(duì)定位是根據(jù)頁(yè)面左上角進(jìn)行位置移動(dòng)*/
position: absolute; /*絕對(duì)定位*/
left: 30px;
top: 30px;
到了這里，關(guān)于html表和連接css的方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
