當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Day2:html和css

發布時間：2024/4/17 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 Day2:html和css 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Day2:html和css

表格是一種常用的標簽,表格結構,做到能夠合并單元格.

表格的屬性:

屬性名說明

border	設置表格的邊框
cellspacing	設置單元格與單元格邊框之間的空白間距
cellpadding	設置單元格內容與單元格邊框之間的空白間距
align	設置表格在網頁中的水平對齊方式
width	設置表格的寬度
height	設置表格的高度

如何創建表格:

表格用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

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body><table width="400" height="100" border="1"><tr><td>123</td><td>abc</td><td>abc</td></tr><tr><td colspan="2">123</td><td></td></tr><tr><td>123</td><td>abc</td><td>abc</td></tr></table><table width="400" height="100" border="1"><tr><td>123</td><td>abc</td><td rowspan="3">abc</td></tr><tr><td>123</td><td>123</td></tr><tr><td>123</td><td>abc</td></tr></table> </body> </html>

在表格中由行中的單元格組成,沒有列元素.表達式由表單控件,提示信息,表單域組成.

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標簽元素定義的標注.

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

內部樣式表

外部樣式表

內聯樣式

內部樣式表

外部樣式表

css基礎選擇器

標簽選擇器

類選擇器

多類名選擇器

id選擇器

id選擇器和類選擇器的區別
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>

總結

id用#

class用.

達叔小生：往后余生，唯獨有你
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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html
css

上一篇：阿里巴巴26个前端开源项目
下一篇：【vue-number-scroll】数