Day2:html和css
生活随笔
收集整理的這篇文章主要介紹了
Day2:html和css
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Day2:html和css
表格是一種常用的標簽,表格結構,做到能夠合并單元格.
表格的屬性:
| border | 設置表格的邊框 |
| cellspacing | 設置單元格與單元格邊框之間的空白間距 |
| cellpadding | 設置單元格內容與單元格邊框之間的空白間距 |
| align | 設置表格在網頁中的水平對齊方式 |
| width | 設置表格的寬度 |
| height | 設置表格的高度 |
如何創建表格:
<table><tr><td></td></tr> </table>表格用table,tr代表表格中的一行,必須在table標簽中,td用于表示表格中的單元格,<tr></tr>表格中的一行.
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style></style> </head> <body><table width="500" border="1" align="center" cellspacing="0" cellpadding="0"><caption>個人信息表</caption> 表格標題 <tr> <th>姓名</th> <th>性別</th><th>電話</th></tr><tr><td>dashu</td><td>男</td><td>123</td></tr><tr><td>dashucoding</td><td>男</td><td>123456</td></tr> </table> </body> </html> <thead></thead>用于定義表格的頭部 <tbody></tbody>用于定義表格的主體表格:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表格</title><style>/*選擇器 { 屬性: 值; } */th {color: blue;}td {font-size: 14px;}tr {height: 30px;}</style> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="550" align="center"><caption> <h3></h3> </caption><thead><tr><th></th></tr></thead><tbody><tr><td>1</td></tr><tr><td>1</td></tr><tr><td>1</td></tr><tr><td>1</td></tr><tr><td>1</td></tr><tr><td>1</td></tr><tr><td>1</td></tr></tbody></table> </body> </html>合并單元格:
跨行合并:rowspan
跨列合并:colspan
在表格中由行中的單元格組成,沒有列元素.表達式由表單控件,提示信息,表單域組成.
input輸入控件:</input/>但標簽
// 表單 性別,生日,年月日,所在地區,婚姻狀況,學歷,月薪,手機號,昵稱,喜歡類型,掌握介紹等.| type | text | 單行文本輸入框 |
| type | password | 密碼輸入框 |
| type | radio | 單選按鈕 |
| type | checkbox | 復選框 |
| type | button | 普通按鈕 |
| type | submit | 提交按鈕 |
| type | reset | 重載按鈕 |
| type | image | 圖形形式的提交按鈕 |
| type | file | 文件域 |
| name | 用戶自定義 | 控件名稱 |
| size | 正整數 | input控件在頁面中顯示的寬度 |
| value | 用戶自定義 | 控件的默認文本值 |
| checked | checked | 定義選擇控制價默認被選擇的項 |
| 'maxlength` | 正整數 | 控件允許輸入的最多字符數 |
label標簽為input標簽元素定義的標注.
<label for="id"> id </label> <input type="radio" name="sex" id="me" value="id">textarea控件-文本域
<textarea cols="每行中的字符數" rows="顯示的行數">文本內容 </textarea> <textarea name="textarea" id="" cols="30" rows="10"> </textarea>下拉菜單
<select><option>選項1</option><option>選項2</option><option>選項3</option> </select> <select></select>至少應包含一對<option></option> 在option中定義selected="selected"時,代表已經為選中項創建表格
<table><tr><td>單元格內的文字</td>...</tr>... </table>表格的標題： caption
表單域 - 實現用戶信息的收集和傳遞
form標簽被用于定義表單域 <form action="url地址" method="提交方式" name="表單名稱">各種表單控件 </form> action為在表單收集到信息后,將信息傳遞給服務器進行處理,action屬性是指定接收并處理表單數據的服務器的url地址. method用于設置提交的方式,為get或post兩種 name為指定的名稱input控件:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Dome</title> </head> <body><table width="600" border="0" cellspacing="0" cellpadding="0" align="center"><caption><h4 style="color: pink; font-size:25px;"></h4></caption><tr height="60"><td>地區</td><td><input type="text" value="北京" style="color: #ccc;" /></td></tr><tr height="60"><td>用戶名</td><td><input type="text" value="dashu" /></td></tr><tr height="60"><td><label for="da">密碼</label></td><td><input type="password" value="123" maxlength="6" id="da" /></td></tr><tr height="60"><td>年齡</td><td><select name="" id=""><option value="">選擇年份</option> <option value="">1990</option> <option value="">1991</option> <option value="">1992</option> <option value="">1993</option> </select><select name="" id=""><option value="">選擇月份</option> <option value="">1月份</option> <option value="">2月份</option> <option value="">3月份</option> <option value="">4月份</option> <option value="">5月份</option> </select></td></tr><tr height="60"><td>年齡</td><td><select name="" id=""><option value="">籍貫</option> <option value="" selected="selected">北京</option><option value="">哈爾濱</option><option value="">青島</option> <option value="">大連</option> </select></td></tr><tr height="60"><td>性別</td><td style="color: blue;">男 <input type="radio" name="sex"/> 女 <input type="radio" name="sex" checked="checked" /> 妖 <input type="radio" name="sex"/> </td></tr><tr><td></td><td><input type="button" value="注冊"><input type="submit" value="提交"><input type="reset" value="重置"><input type="image" src="btn.png" /></td></tr><tr><td>上傳頭像</td><td><input type="file" ></td></tr><tr><td>給我留言</td><td><textarea name="" id="" cols="50" rows="10" style="color: #ccc;">不支持富文本</textarea></td></tr></table> </body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Demo</title> </head> <body><label> 用戶名：<input type="text"> </label><hr><label for="pwd">123</label>用戶名：<input type="text">密碼：<input type="password" id="pwd"> </body> </html>表單域
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Demo</title> </head> <body><form action="" method="post">用戶名: <input type="text" name="User" value="用戶名"> <br /> <br />密 碼: <input type="password" name="psd"><br /> <br />密 碼: <input type="password" name="psd2"><br /> <br />性別： <input type="radio" name="sex"><input type="submit" value="提交所填"><input type="reset" value="重新填寫"></form> </body> </html>樣式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Demo</title> </head> <body><hr><p color="blue">文字</p> </body> </html>html樣式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/style.css" /> </head> <body><div></div><div></div><div></div> </body> </html>css
內部樣式表
<head><style type="text/css">選擇器{屬性:屬性值;}</style> </head> 行內式 <標簽名 style="屬性:屬性值;"> 內容 </標簽名>外部樣式表
<head><link href="" type="text/css" rel="stylesheet"/> </head>css基礎選擇器
6.通配符選擇器
標簽選擇器:
標簽名{屬性:屬性值;} 元素名{屬性:屬性值;}類選擇器:
.類名{屬性:屬性值;} <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Demo</title><style>.ide {color: blue;}</style> </head> <body><div class="ide">我是類選擇器</div><div>我是類選擇器</div><div>我是類選擇器</div><div>我是類選擇器</div><div>我是類選擇器</div><div class="ide">我是類選擇器</div> </body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Dome</title><style> span { font-size: 150px;}.g { color: blue;}.o {color: red;}.oo {color: orange;}.l {color: green;}</style> </head> <body><span class="g">G</span><span class="o">o</span><span class="oo">o</span><span class="g">g</span><span class="l">l</span><span class="o">e</span><div class="nav"></div><div class="ban"></div> </body> </html>總結
達叔小生：往后余生，唯獨有你
You and me, we are family !
90后帥氣小伙，良好的開發習慣；獨立思考的能力；主動并且善于溝通
簡書博客： 達叔小生
https://www.jianshu.com/u/c785ece603d1
結語
- 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
- 小禮物走一走 or 點贊
轉載于:https://www.cnblogs.com/dashucoding/p/11140377.html
總結
以上是生活随笔為你收集整理的Day2:html和css的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 阿里巴巴26个前端开源项目
- 下一篇： 【Git】常用命令