Web前端20~45
生活随笔
收集整理的這篇文章主要介紹了
Web前端20~45
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 19、表格標簽
- 示例
- 表格屬性
- 示例
- 練習
- 20、表單標簽
- 示例
- 21、表格表單組合
- 22、div和span
- 23、CSS語法格式
- 24、CSS樣式的引入方式
- 1、內聯（行內、行間）樣式
- 2、內部樣式
- 3、外部樣式
- 25、CSS顏色表示法
- 1. 單詞表示法
- 2. 十六進制表示法
- 3. rgb三原色表示法
- 練習
- 26、CSS背景樣式
- 27、CSS邊框樣式
- 練習
- 28、CSS文字樣式
- 1. font-family：字體類型
- 2. font-size：字體大小
- 3. font-weight：字體粗細
- 4. font-style：字體樣式
- 5. color：字體顏色
- 示例
- 29、CSS段落樣式
- 1. text-decoration：文本修飾
- 2. text-transform：文本大小寫（針對英文段落）
- 3. text-indent：文本縮進
- 4. text-align：文本對齊方式
- 5. line-height：定義行高
- 6. letter-spacing：字之間的間距
- word-spacing：詞之間的間距（針對英文段落）
- 練習
- 30、CSS復合樣式
- 31、CSS選擇器
- 1. ID選擇器
- 2. CLASS選擇器
- 練習
19、表格標簽
<table>：表格的最外層容器
<caption>：定義表格標題
<tr>：定義表格行
<th>：定義表頭
<td>：定義表格單元
注：之間是有嵌套關系的，要符合嵌套規范。
語義化標簽：<tHead>、<tBody>、<tFoot>
**注：在一個table中，tBody是可以出行多次的，但是tHead、tFoot只能出現一次。
示例
<table><caption>天氣預報</caption><tHead><tr><th>日期</th><th>天氣情況</th><th>出行情況</th></tr></tHead><tBody><tr><td>2022年10月21日</td><td><img src="./img/陰.png" alt=""></td><td>氣溫較低,出行注意保暖</td></tr><tr><td>2022年10月22日</td><td><img src="./img/多云.png" alt=""></td><td>溫度適宜又有微風相伴,適合出行</td></tr></tBody><tFoot></tFoot></table>表格屬性
border：表格邊框
cellpadding：單元格內的空間
cellspacing：單元格之間的空間
rowspan：合并行
colspan：合并列
align：左右對齊方式（left、center、right）
valign:上下對齊方式 （top、middle、bottom）
示例
<tr align="right" valign="top"><td rowspan="2">2022年10月21日</td><td>白天</td><td><img src="./img/陰.png" alt=""></td><td>氣溫較低,出行注意保暖</td></tr><tr><td>夜晚</td><td><img src="./img/多云.png" alt=""></td><td>氣溫較低,出行注意保暖</td></tr>練習
<table border="1" cellpadding="17" cellspacing="0"><tHead><tr><th>班次名稱</th><th>科目</th><th>授課內容</th><th>增值服務</th><th>課時</th><th>價格</th><th>試聽</th><th>購買</th></tr></tHead><tBody><tr align="center"><td rowspan="3" >真題精解班</td><td>行測+申論</td><td>全科歷年真題精解</td><td rowspan="3">課后贈2套模擬卷24小時以內答疑</td><td>48</td><td>1280元</td><td><img src="./img/1.png" alt="" width="50" height="50"></td><td><img src="./img/2.png" alt="" width="50" height="50"></td></tr><tr align="center"><td>行測</td><td>行測歷年真題精解</td><td>32</td><td>980元</td><td><img src="./img/1.png" alt="" width="50" height="50"></td><td><img src="./img/2.png" alt="" width="50" height="50"></td></tr><tr align="center"><td>申論</td><td>申論歷年真題精解</td><td>16</td><td>580元</td><td><img src="./img/1.png" alt="" width="50" height="50"></td><td><img src="./img/2.png" alt="" width="50" height="50"></td></tr><tr align="center"><td rowspan="3">高分技巧班></td><td>行測+申論</td><td>全科技巧強化</td><td rowspan="3">入學試卷測評24小時內答疑</td><td>32</td><td>980元</td><td><img src="./img/1.png" alt="" width="50" height="50"></td><td><img src="./img/2.png" alt="" width="50" height="50"></td></tr> <tr align="center"><td>行測</td><td>行測速解技巧強化</td><td>18</td><td>680元</td><td><img src="./img/1.png" alt="" width="50" height="50"></td><td><img src="./img/2.png" alt="" width="50" height="50"></td></tr><tr align="center"><td>申論</td><td>申論速解技巧強化</td><td>14</td><td>580元</td><td><img src="./img/1.png" alt="" width="50" height="50"></td><td><img src="./img/2.png" alt="" width="50" height="50"></td></tr></tBody> </table>20、表單標簽
常見的屬性：checked、disabled、name、for…
<form>：表單的最外層容器
<input>：單標簽，用于搜集用戶信息，根據不同的type屬性值，展示不同的控件，如輸入框、密碼框、復選框等。
示例
<form action="http://www.baidu.com"><h2>輸入框：</h2><input type="text" placeholder="請輸入用戶名"><h2>密碼框：</h2><input type="password" placeholder="請輸入密碼"><h2>復選框</h2><input type="checkbox"checked>蘋果<input type="checkbox"checked>香蕉<input type="checkbox"disabled>葡萄<h2>單選框</h2><input type="radio" name="gender">男<input type="radio" name="gender">女<h2>上傳文件</h2><input type="file"><h2>提交按鈕和重置按鈕</h2><input type="submit"><input type="reset"></form><textarea>：多行文本框
<h2>多行文本框</h2><textarea name="" id="" cols="30" rows="10"></textarea><select>、<option>：下拉菜單
<h2>下拉菜單</h2><select><option selected disabled>請選擇</option><option>揚州</option><option selected>南京</option><option>蘇州</option></select><select size="2"><option>揚州</option><option>南京</option><option>蘇州</option></select><select multiple><option>揚州</option><option>南京</option><option>蘇州</option></select><input type="file"multiple><label>：輔助表單
<input type="radio" name="gender" id="man"><label for="man">男</label><input type="radio" name="gender" id="woman"><label for="woman">女</label>21、表格表單組合
<form action=""><table border="1" cellpadding="30"><tBody><tr align="center"><td rowspan="4">總體信息</td><td colspan="2">用戶注冊</td></tr><tr align="right"><td>用戶名：</td><td><input type="text" placeholder="請輸入用戶名"></td></tr><tr align="right"><td>密碼：</td><td><input type="password" placeholder="請輸入密碼"></td></tr><tr align="center"><td colspan="2"><input type="submit"> <input type="reset"></td></tr></tBody> </table></form>22、div和span
<div>：做一個區域劃分的塊
<span>：對文字進行修飾的內聯
23、CSS語法格式
格式：
選擇器 { 屬性1 ：值1；屬性2：值2 }
基本樣式：
width：寬
height：高
background：背景色
長度單位：
1、px——>像素
2、%——>百分比
外容器——>600px , 當前容器50%——>300px
CSS注釋：
/* CSS注釋的內容 */
24、CSS樣式的引入方式
1、內聯（行內、行間）樣式
在html標簽上添加style屬性來實現的
<style>div{width: 100px; height:100px;background-color: royalblue} </style>2、內部樣式
在style標簽內添加的樣式
區別：內部樣式的代碼可以復用，符合W3C的規范標準，盡量讓結構和樣式分開處理。
3、外部樣式
引入一個單獨的CSS文件，name.css
通過link標簽引入外部資源，rel屬性指定資源跟頁面的關系，href屬性表示資源的地址。
通過@import方式引入外部樣式（這種方式有很多問題，不建議使用）
link的rel屬性：http://www.w3school.com.cn/tags/att_link_rel.asp
link與@import的區別：http://www.cnblogs.com/my–sunshine/p/6872224.html
25、CSS顏色表示法
1. 單詞表示法
red blue green…
2. 十六進制表示法
#000000 #ffffff
0 1 2 3 4 5 6 7 8 9 a b c d e f
3. rgb三原色表示法
rgb(0,0,0) , rgb(255,255,255)
取值范圍0~255
獲取顏色的工具:photoshop工具
練習
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <style>/* div{background-color: #000000;}div{background-color: rgb(0, 0, 0);} */div{width: 100px;height: 100;background-color: red;}</style><style>div{width: 200px;height: 150;background-color: blue;} </style> --> </head> <body><div style="width: 100px; height:100px;background-color: red;">這是一個塊</div> <div style="width: 100px; height:100px;background-color: blue;">另外一個塊</div> </body> </html>26、CSS背景樣式
- background-color：背景色
- background-image：背景圖
url：背景地址
默認：會水平垂直都鋪滿背景圖 - background-repeat：平鋪方式
repeat-x（x軸平鋪）
repeat-y（y軸平鋪）
repeat（x，y都進行平鋪，默認值）
no-repeat（都不平鋪） - background-position：背景位置
x、y：number（px、%） / 單詞
x：left、center、right
y：top、center、bottom - background-attachment：背景圖隨滾動條移動的方式
scrol：（默認值）背景位置是按照當前元素進行偏移的
fixed：背景位置是按照瀏覽器進行偏移的
27、CSS邊框樣式
1、border-style：邊框樣式
- solid：實線
- dashed：虛線
- dotted：點線
2、border-width：邊框大小
- px…
3、border-color：邊框顏色
- red #f00…
邊框也可以針對某一條邊進行單獨設置,比如border-left-style：中間是方向（ left 、right、top、bottom ）
練習
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-color:mediumpurple;}div{width: 0px;height: 0px;border-top-color:azure ;border-top-style:solid ;border-top-width:20px ;border-right-color:transparent ;border-right-style:solid ;border-right-width:20px ;border-bottom-color:transparent ;border-bottom-style:solid ;border-bottom-width:20px ;border-left-color:transparent;border-left-style:solid ;border-left-width:20px ;}</style> </head> <body><div></div> </body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* div{width: 300px;height: 300px;border-style: solid;border-color: blue;border-width: 1px;} *//* div{width: 300px;height: 300px;border-style: dashed;border-color: blue;border-width: 1px;} *//* div{width: 300px;height: 300px;border-style: dotted;border-color: blue;border-width:30px;} */div{width: 300px;height: 300px;border-right-style:dotted ;border-right-width:30px;border-right-color: rgb(20, 184, 196) ;border-top-style:solid ;border-top-width:20px;border-top-color:rgb(159, 92, 115)}</style> </head> <body><div></div> </body> </html>28、CSS文字樣式
1. font-family：字體類型
- 英文字體：Arial，‘Times New Roman’
中文字體：微軟雅黑，宋體 - 中文字體的英文名稱
微軟雅黑：'‘Microsoft YaHei’
宋體：SimSun4 - 襯線體與非襯線體
注意事項：
1、設置多字體方式
2、引號的問題（空格要加引號）
2. font-size：字體大小
默認：16px
寫法：number（px）、單詞（不推薦使用）
注：字體大小一般為偶數
3. font-weight：字體粗細
模式：正常（normal）、加粗（bold）
寫法：單詞（normal、bold）、number（100 200 … 900，100到500都是正常的，600到900都是加粗的）
4. font-style：字體樣式
模式：正常（normal）、斜體（italic）
寫法：單詞（normal、italic）
注：oblique也是表示斜體，用的比較少，了解即可
*區別：
1、italic 帶有傾斜屬性的字體才可以設置傾斜操作
2、oblique 沒有傾斜屬性的字體也可以設置傾斜操作
5. color：字體顏色
示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* div{font-family: Arial;} *//* div{font-family: 'Times New Roman';} *//* div{font-family: 宋體,'Times New Roman',微軟雅黑;} *//* div{font-size: 30px;} *//* div{font-weight: bold;} *//* div{font-style: italic;color: aquamarine;} */</style> </head> <body><!-- <div>這是一段文字</div><p>這是一段文字</p><div>this is a text</div><p>this is a text </p> --> </body> </html>29、CSS段落樣式
1. text-decoration：文本修飾
- 下劃線：underline
- 刪除線：line-through
- 上劃線：overline
- 不添加任何裝飾：none
注：添加多個文本修飾：line-through underline overlinne
2. text-transform：文本大小寫（針對英文段落）
- 小寫：lowercase
- 大寫：uppercase
- 只針對首字母大寫：capitalize
3. text-indent：文本縮進
- 首行縮進
- em單位：相對單位，1em永遠都是跟字體大小相同
4. text-align：文本對齊方式
對齊方式：left、right、center、justify（兩端點對齊）
5. line-height：定義行高
- 什么是行高：一行文字的高度，上邊距和下邊距是等價關系。
- 默認行高：不是固定值，而是變化的，根據當前字體的大小在不斷地變化。
- 取值：1、number（px） 、 scale（比例值，跟文字大小成比例）
6. letter-spacing：字之間的間距
word-spacing：詞之間的間距（針對英文段落）
英文和數字不自動折行問題：
1、word-break：break-all；（非常強烈的折行）
2、word-wrap：break-word；（不是那么強烈的折行，會產生一些 空白區域）
練習
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 800px;}h1{text-align: center;color: #FF6604;}h2{color: #0098EF;text-indent: 2em;}#p1{font-style: italic;font-weight: bold;text-indent: 2em;}#p2{color: #94F18E;line-height: 30px;text-indent: 2em;}#p3{color: #71F4F9;line-height: 30px;text-indent: 2em;text-decoration: underline;font-style: italic;}#p4{font-weight: bold;letter-spacing: 10px;line-height: 30px;text-indent: 2em;}#p5{color:#E58CDD;line-height: 30px;text-indent: 2em;}</style> </head> <body><div><h1>Angelababy簡介</h1><h2>基本信息</h2><p id="p1">楊穎(Angelababy),1989年2月28日出生于上海,13歲時移居香港,中國影視女演員。</p><p id="p2">2009年主演電影《全城熱戀》。2012年,憑借愛情片《第一次》獲得第十三屆華語電影傳媒大獎“最受矚目女演員獎”。2013年1月,《南都娛樂周刊》舉辦新生代四小花旦的評選活動,楊穎以總分70分的綜合得分與劉詩詩、楊冪、倪妮共同當選為新一代“四小花旦”;同年在徐克導演的影片《狄仁杰之神都龍王》中擔任女主角,并且獲得第21屆北京大學生電影節最受歡迎女演員獎;4月,Angelababy主演電視劇《大漢情緣之云中歌》。2014年加盟綜藝節目《奔跑吧兄弟》并主演電影版;同年主演顧長衛導演的電影《微愛之漸入佳境》,票房突破2.8億。2015年5月參演好萊塢電影《獨立日2》;7月,主演電影《擺渡人》。</p><h2>早年經歷</h2><p id="p3">1989年2月28日,Angelababy出生在上海,中文名楊穎,楊穎自小隨家人到上海定居,在上海的演藝學校學演戲及跳舞。13歲時,楊穎回香港加入了Talent Bang,還擔任Viva Club Disney主持。</p><h2>個人生活</h2><p id="p4">2015年5月27日,黃曉明和Angelababy(楊穎)在青島民政局領證完婚。</p><p id="p5"> 2015年10月8日,黃曉明和Angelababy在上海展覽中心正式舉辦婚禮。上午8點,Angelababy工作室曝光了兩人的婚紗照,照片中,兩人以巴黎地標建筑為背景,浪漫親吻。</p></div> </body> </html>30、CSS復合樣式
復合的寫法，是通過空格的方式實現的。復合寫法有的是不需要關心順序的，例如background、border；有的是需要關心順序的，例如font。
- background：red url () repeat 0 0；
- border：1px red solid；
- font：
注：最少要有兩個值 size family
weight style size family √
style weight size family √
weight style size/line-height family √
注：如果非要混合去寫的話，那么要先寫復合樣式，再寫單一樣式，這樣樣式才不會被覆蓋掉。
31、CSS選擇器
1. ID選擇器
css：#elem{ }
html：id=“elem”
**注：
- ID是唯一值，在一個頁面中只能出現一次，出現多次是不符合規范的。
- 命名的規范，由字母、下劃線、中劃線、字母（并且第一個不能是數字）
- 駝峰寫法：
searchButton（小駝峰）<div id="searchbuttom"></div>
SearchButton（大駝峰）SearchSmallButton
短線寫法：search-small-button
下劃線寫法：search_small_button
2. CLASS選擇器
css：.elem{ }
html：class=“elem”
**注：
- class選擇器是可以復用的。
- 可以添加多個class樣式。
- 多個樣式的時候，樣式的優先級根據CSS決定，而不是class屬性中的順序。
- 標簽+類的寫法
練習
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* div{background: red;} *//* #div1{background: green;}#div2{background: blue;} *//* .box{background: red;} */.box{background: red;}.content{font-size: 30px;background: blue;}</style> </head> <body><!-- <div id="div1">這是一個塊</div><div id="div2">這又是一個塊</div><div id="searchbuttom"></div> --><!-- <div class="box">這是一個塊</div><div class="box">這又是一個塊</div><p class="box">這是一個段落</p> --><div class="box content">這是一個塊</div> </body> </html>總結
以上是生活随笔為你收集整理的Web前端20~45的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MapReduce功能实现十---倒排索
- 下一篇： 关于HTML5的audio标签和vide