當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Web前端20~45

發布時間：2024/1/18 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 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>：下拉菜單

<label>：輔助表單

21、表格表單組合

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屬性來實現的

2、內部樣式

在style標簽內添加的樣式
區別：內部樣式的代碼可以復用，符合W3C的規范標準，盡量讓結構和樣式分開處理。

<body><div style="width: 100px; height:100px;background-color: red;">這是一個塊</div><div style="width: 100px; height:100px;background-color: red;">另外一個塊</div><div>這是一個塊</div><div>另外一個塊</div> </body> </html>

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

<!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"><link rel="stylesheet" href="./common.css"> <title>Document</title><style>/* @import url('./common.css') */</style> </head> <body><div>這是一個塊</div> </body> </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> </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：背景位置是按照瀏覽器進行偏移的

<!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{ height: 2000px;}div{ width: 300px; height: 300px; background-color : red;background-image: url(./img/dog.jpg);background-repeat: repeat-y;background-position: right bottom;background-attachment: scroll }</style> </head> <body><div></div> </body> </html>

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> </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 class="box content">這是一個塊</div> </body> </html>

總結

以上是生活随笔為你收集整理的Web前端20~45的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： MapReduce功能实现十---倒排索
下一篇：关于HTML5的audio标签和vide