day12HTML+css基礎
http://www.cnblogs.com/yuanchenqi/articles/6835654.html html
http://www.cnblogs.com/yuanchenqi/articles/6856399.html css
ul、ol、table
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol>
<li>111</li>
<li>222</li>
<li
</ol>
<dl>
<dt>河北省</dt>
<dd>保定</dd>
<dd>石家莊</dd>
</dl>
<table cellpadding="10px" cellspacing="2px" border="1">
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th
</tr>
<tr>
<th colspan="2">111</th>
<th rowspan="2">111</th>
</tr>
<tr>
<th>222</th>
<th>222</th>
</tr>
</table>
form表單
<form action=’’ method=’’>method默認get
屬性：
1.action：放置請求路徑
2.method:
get請求
請求頭，數據放在地址欄，數據長度有限制
post請求
有請求頭，數據放在請求體
標簽
input （text、passwords、checkbox、radio、button、submit）
type=’text’文本框
type=’password’密文
type=’checkbox’多選框
type=’radio’單選框
<p>姓名：<input
type="text" name="username"></p>
<p>密碼：<input
type="passwords" name="pwd"></p>
<p>愛好：<input
type="checkbox" name="hobby" value="readbook">看書
<input
type="checkbox" name="bobby" value="playgames">玩遊戲
<input
type="checkbox" name="hobby" value="swamming">遊泳
</p>
<p>性別：<input
type="radio" checked=”checked”>男 默認選中
<input
type="radio">女
</p>
ps：通過組成鍵值對發送給服務端
只要向服務端發送數據，就要有name和values屬性
{‘username’：‘text值’，‘pwd’：‘密碼’，‘hobby’：[values的值，]，‘sex’：values值}
submit
<input type="submit" value="提交">點擊提交
values只是一個文本值，提交按鈕的按鈕文字
<input type="button" value="提交button">沒有任何事件
<input type="file" value="上傳文件">
<input type="reset" value="重置"> 清空
select標簽下拉菜單
<select name="province" id="" size=3 multiple="multiple">
<option
value="hebei">河北省</option>
<option
value="shandong">山東省</option>
<option
value="henan">河南省</option>
<option
value="yunnan">雲南省</option>
<option
value="guangxi">廣西省</option>
</select>
屬性
size顯示多少個
multiple可以多選
<select name="province" id="" size=3 multiple="multiple">
<option
value="hebei">河北省</option>
<option
value="shandong" selected="selected">山東省</option>
<option
value="henan">河南省</option>
<option
value="yunnan">雲南省</option>
<option
value="guangxi">廣西省</option>
</select>
textare標簽、label標簽
<p>
<label
for=""> 簡介</label><br>
<textarea
name="textarea" id="jianjie" cols="30" rows="10">
</textarea>
</p>
<p>
<input
type="submit" value="提交">
</p>
id是唯一的
label的for屬性寫其他的id進行綁定，點擊label就直接定位到其他標簽
‘‘‘
fieldset標簽
<fieldset>
<legend>登錄吧</legend>
<input type="text">
</fieldset>
css
對html元素進行渲染布局
- 查找標簽元素
- 操作標簽
方法一、行內式引入方式
<!--css-->
<!--行內式引入方式-->
<!--<p style="color: red;font-size:
24px">hello</p>-->
方法二、寫入head標簽內
<head>
<meta charset="UTF-8">
<title>練習</title>
<style>
p{
color: red;
font-size: 24px;
}
</style>
</head>
對所有p標簽進行格式化，只要是p標簽就會變成上面的格式
對單獨p進行格式化，p需要有id屬性
#id值
<style>
#p2{
color: red;
font-size: 24px;
}
</style>
對一組標簽操作，class屬性
class名字可以重復
<head>
<meta charset="UTF-8">
<title>練習</title>
<style>
/*#p2{*/
/*color: red;*/
/*font-size: 24px;*/
/*}*/
.new{
color: red;
}
</style>
</head>
<p id="p2">hello</p>
<p id="p1" class="new">hello</p>
<p class="new">hello</p>
<div>hello</div>
<h2>hello</h2>
ps：優先級，id》class》標簽
方法三，通過文件引入
<head>
<meta charset="UTF-8">
<title>練習</title>
<!--<style>-->
<!--/*p{*/-->
<!--/*color: red;*/-->
<!--/*}*/-->
<!--/*#p2{*/-->
<!--/*color: red;*/-->
<!--/*font-size: 24px;*/-->
<!--/*}*/-->
<!--/*.new{*/-->
<!--/*color: red;*/-->
<!--/*}*/-->
<!--</style>-->
<link rel="stylesheet" href="css">
</head>
day12HTML+css基礎