這里列舉了幾點我認為比較重要的HTML&CSS的基本用法, 直接見示例如下:
1. 表單的控件
文本框:<input type="text"/>
密碼框:<input type="password" />
單選框:<input type="radio" name="sex" value=""/>女
a) 一定要有value值
b) 多個單選框的name屬性值一定要一致
c) checked 默認選擇
復選框:<input type="checkbox" name="hobby" value="">榮耀
下拉框:
多行文本域:
按鈕:
<form action="提交的路徑" method="提交的方式"></form>
表單 表示將數(shù)據(jù)提交給后臺
<!DOCTYPE html>
<html>
<head>
<title>09.html</title>
<meta charset="UTF-8">
<style type="text/css">
#div_id {
width:800px;
height:600px;
border-style:solid;
background-color: red;
}
</style>
</head>
<body>
<div id="div_id">
<form action="路徑" method="post">
用戶名:<input type="text" name="username" value="請輸入用戶名！" onfocus="abc()"/>
<br/>
密碼:<input type="password" name="password"/>
<br/>
性別:<input type="radio" name="sex" value="female" />女
<input type="radio" name="sex" value="male" checked="checked"/>男
<br/>
愛好:
<input type="checkbox" name="hobby" value="rongyao">榮耀
<input type="checkbox" name="hobby" value="chiji">吃雞
<input type="checkbox" name="hobby" value="lol">lol
<input type="checkbox" name="hobby" value="daota2">刀塔2
<input type="checkbox" name="hobby" value="taobao">淘寶
<input type="checkbox" name="hobby" value="qiaodaima" checked>敲代碼
<br/>
地址:
<select name="province">
<option value="">湖北</option>
<option value="">湖南</option>
<option value="">廣東</option>
</select>
<select name="city">
<option value="">武漢</option>
<option value="">長沙</option>
<option value="">廣州</option>
</select>
<br/>
自我介紹:
<textarea rows="5" cols="50">
</textarea>
<br/>
<input type="submit" value="注冊"/>
<input type="button" value="注冊"/>
<button onclick="submit()">注冊</button>
</form>
</div>
<script type="text/javascript">
function submit(){
// 暫時不寫
}
function abc(){
document.getElementsByTagName("input")[0].value="";
}
</script>
</body>
</html>
2. CSS盒子模型
<!DOCTYPE html>
<html>
<head>
<title>CSS盒子模型.html</title>
<meta charset="UTF-8">
<style type="text/css">
/* CSS盒子模型 */
div{
width:500px;/* 設置盒子的寬度 */
height:500px;/* 設置盒子的高度 */
border-style: groove;/* 設置邊框的類型 */
border-width: 20px;/* 設置邊框的寬度 */
/*margin-top: 50px; 設置上邊距*/
/*margin-left:50px; 設置左邊距*/
/*margin:auto; 自動居中 */
/* margin:100px 200px 300px 500px; 設置上右下左 */
/*margin: 100px 200px 300px; 設置 上 左 下*/
margin:100px 200px; /*設置 上 左(下 左) */
padding: 3em; /* 設置填充的距離 */
border-color: red;
background-image: url("../image/topfocusb_bg1.gif");
}
</style>
</head>
<div>
這是一個div，你能看到什么
</div>
<body>
</body>
</html>
3. CSS類選擇器
當標簽選擇器，類選擇器，id選擇器同時存在的時候, 若同時存在相同的屬性名, 屬性值的
優(yōu)先級的順序是
id選擇器 > 類選擇器 > 標簽選擇器
<!DOCTYPE html>
<html>
<head>
<title>11.html</title>
<meta charset="UTF-8">
<!-- CSS的語法:
選擇器 {
屬性名:屬性值
}
-->
<style type="text/css">
/* 在這個中間編寫CSS樣式 */
/*標簽選擇器*/
p{
font-family: "宋體";
text-align: center;
font-size: 4em;
}
/*id選擇器
id屬性值在頁面是唯一的
*/
#id1{
font-size:2em;/*字體大小*/
color:red;/*字體顏色*/
background-color:yellow;/*背景顏色*/
font-style: italic;/*字體傾斜*/
text-decoration: line-through;/*文本上的線條*/
}
/*類選擇器
.類名{
}
*/
.pstyle{
background-image: url("../image/topfocusb_bg1.gif");/* 設置背景圖片 */
height:40px;/* 設置高度 */
background-repeat: repeat-x;/* 水平方向重復 */
}
</style>
</head>
<body>
<p id="id1" class="pstyle">窗前明月光</p>
<p class="pstyle">疑是地上霜</p>
<p class="pstyle">舉頭望明月</p>
<p class="pstyle">低頭思故鄉(xiāng)</p>
</body>
</html>
完整代碼見:
https://github.com/menglanyingfei/Java/tree/master/JavaWebTrain
