目錄
- 任務一：使用富文本編輯器
-
- 1.在開源富文本編輯器中随便輸入一段文本
- 2.在源碼模式下，檢視内容是如何被轉變為帶标簽的文本的，都帶了哪些HTML标簽
- 3.實作表格換色和js按鈕
- 任務二：『所見即所得』式開發
- 任務三：拓展：CSS盒子模型
- 任務四：自測
任務一：使用富文本編輯器
1.在開源富文本編輯器中随便輸入一段文本
富文本編輯器
2.在源碼模式下，檢視内容是如何被轉變為帶标簽的文本的，都帶了哪些HTML标簽
3.實作表格換色和js按鈕
HTML代碼
<h2>
<font color="#ff0000">CSDN 我來了</font>
</h2>
<table class="table table-bordered" style="width:160px;height:40px">
<tbody>
<tr style="background-color: rgb(181, 165, 214);">
<td>C1</td>
<td>見習工程師認證</td>
</tr>
<tr style="background-color: rgb(107, 173, 222);">
<td>C4</td>
<td>專項工程師認證</td>
</tr>
<tr style="background-color: rgb(181, 165, 214);">
<td>C5</td>
<td>全棧工程師認證</td>
</tr>
</tbody>
</table>
<h3>
<button type="button" onclick="alert('好好學習，天天向上')">自主學習</button>
</h3>
呈現效果
點選自主學習按鈕
任務二：『所見即所得』式開發
任務位址：code
任務三：拓展：CSS盒子模型
HTML檔案
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="text.css">
<head>CSS盒子模型</head>
<body>
<div class="d1">
<div class="left">
<div class="a">1</div>
<div class="b">2</div>
</div>
<div class="right">
<div class="c">3</div>
<div class="lefts">
<div class="d">4</div>
<div class="rights">
<div class="e">5</div>
<div class="f">6</div>
</div>
</div>
<div class="j">7</div>
</div>
<div class="h">8</div>
<div class="i">9</div>
</div>
</body>
</html>
CSS檔案
.d1{
width:800px;
height:500px;
background-color:#FADB9A;
margin: 20px;
position:absolute;
}
.a{
width:190px;
height:120px;
text-align:center;
line-height: 120px;
color:#FFF;
background-color:#C5D08E;
margin-bottom: 20px;
}
.b{
width:190px;
height:340px;
text-align:center;
line-height: 350px;
color:#FFF;
background-color:#C5D08E;
}
.left{
float:left;
margin: 10px;
}
.right{
float:right;
margin:10px;
}
.c{
width:570px;
height:150px;
text-align:center;
line-height:150px;
color:#FFF;
background-color:#C5D08E;
float:left;
}
.d{
width:260px;
height:310px;
text-align:center;
line-height:310px;
color:#FFF;
background-color:#C5D08E;
float: left;
margin-top: 20px;
}
.e{
width:290px;
height:145px;
text-align:center;
line-height:160px;
color:#FFF;
background-color:#C5D08E;
margin-bottom: 20px;
}
.f{
width:290px;
height:145px;
text-align:center;
line-height:160px;
color:#FFF;
background-color:#C5D08E;
}
.j{
width:150px;
height:100px;
text-align:center;
line-height:100px;
color:#FFF;
position:absolute;
margin-left: 20px;
background-color:#F3A464;
}
.h{
width:150px;
height:100px;
text-align:center;
line-height:100px;
color:#FFF;
position:absolute;
top:-40px;
margin-left: 610px;
background-color:#F3A464;
}
.i{
width:150px;
height:100px;
text-align:center;
line-height:100px;
color:#FFF;
margin-top: 430px;
background-color:#F8CC9D;
margin-left: 250px;
}
.rights{
float: right;
margin-top: 20px;
}
.lefts{
width: 570px;
margin-top: 20px;
}
任務四：自測
1.HTML5為了使img元素可拖放，需要增加什麼屬性？
draggable="true"
2.HTML5哪⼀個input類型可以選擇⼀個⽆時區的⽇期選擇器？
datetime-local
3.CSS盒⼦模型中的Margin、Border、Padding都是什麼意思？
margin:外邊距
boder:邊框
padding:内邊距。
4.說出⾄少五種常⻅HTML事件
視窗事件：onblur , onfocus , onload , onresize ;
表單事件：onblur , onfocus , onsubmit , onchange , onreset , oninput , onselect
鍵盤事件：onkeydown , onkeypresss , onkeyup;
滑鼠事件：onclick , ondrag , onmousedown , onmousemove , onmouseout
其他事件：onshow , ontoggle
5.HTML的onblur和onfocus是哪種類型的屬性？
屬于事件類型的屬性
onblur失去焦點時事件
onfocus獲得焦點時事件。
6.怎麼設定display屬性的值使容器成為彈性容器？
display:flex
7.JavaScript中有多少種不同類型的循環？
共三種分别為：
for 循環
do…while 循環
while 循環。
8.⽤戶搜尋某個單詞後，JavaScript⾼亮顯示搜尋到的單詞，使⽤哪個語義化标簽最合适？
mark