任务一：
使用富文本编辑器
- 了解 HTML 标签
- 制作表格，实现表格隔行换色
- 添加按钮，点击按钮后弹出消息
任务一，实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格隔行换色</title>
<script>
window.onload = function(){
//1.获取表格
var tblEle = document.getElementById("tbl");
//2.获取表格中tbody里面的行数(长度)
var len = tblEle.tBodies[0].rows.length;
//alert(len);
//3.对tbody里面的行进行遍历
for(var i=0;i<len;i++){
if(i%2==0){
//4.对偶数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor="LightGray";
}
}
}
</script>
</head>
<body>
<p><font color="red"> CSDN能力认证中心</font></p> <!-- <font color="颜色">内容</font> -->
<table border="1" width="200" id="tbl">
<tbody>
<tr>
<td>C1</td>
<td>见习工程师认证</td>
</tr>
<tr>
<td>C4</td>
<td>专项工程师认证</td>
</tr>
<tr>
<td>C5</td>
<td>全栈工程师认证</td>
</tr>
</tbody>
</table>
<br>
<br>
<button type="button" onclick="alert('666');">我要考试</button>
</body>
</html>
实现效果如下：
任务二：
【所见即所得】式开发
- 前往 code.org 完成 HTML、CSS 系列网页开发任务
注：此任务过于繁琐，此处只截取部分。
下图为网站任务截图，韭菜炒鸡蛋 哈哈~
主要应用：
- 标题
- 导入图片
- 颜色：背景色、字体色
- 字体：字号
- 超链接
- 排序：有序、无需
- 浮动
每个文件的代码放在后面了，有兴趣的可以看看。
- index.html
<!DOCTYPE html>
<html>
<head>
<title>我的网站</title>
</head>
<body>
<a href="shipu.html">食谱</a>
<a href="列表">列表查询</a>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>
- shipu.html
<!DOCTYPE html>
<html>
<head>
<title>网站测试</title>
<link href="test.css" rel="stylesheet">
</head>
<body>
<h2>韭菜炒鸡蛋</h2>
<img src="jiudan.jpg"
alt="韭菜炒鸡蛋">
<h4>配料</h4>
<ul>
<li>韭菜</li>
<li>鸡蛋</li>
</ul>
<h4>步骤</h4>
<ol>
<li>鸡蛋两个打散</li>
<li>韭菜洗净切段</li>
<li>锅里倒油</li>
<li>。。。 。。。</li>
</ol>
</body>
</html>
- test.css
body {
background-color: #9bdb51;
}
li {
color: rgb(23, 43, 193);
font-size: 14px;
font-family: cursive;
text-decoration: inherit;
text-align: left;
margin: 50px;
}
img{
float: left;
width: 200px;
}
h2 {
font-weight: bold;
color: #2a9873;
}
拓展：
CSS盒子模型
- 深入理解 CSS 盒子模型的多层含义
- 边框、边距
- 标准文档流(浮动与定位)
- 布局模式
- 完成 CSS 盒子模型
CSS 盒子模型 实现代码如下：
- 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>CSS盒子模型</title>
<link rel="stylesheet" href="box_style.css">
<script src="box_style.css" defer></script>
</head>
<body>
<header></header>
<section>
<div class="div1-2">
<div id="div1">1</div>
<div id="div2">2</div>
</div>
<div class="div3--9">
<div class="div3-7-8">
<div id="div3">3
<div id="div7">7</div>
<div id="div8">8</div>
</div>
<div class="4--9">
<div class="div4-9">
<div id="div9">9</div>
<div id="div4">4</div>
</div>
<div class="div5-6">
<div id="div5">5</div>
<div id="div6">6</div>
</div>
</div>
</div>
</section>
<footer></footer>
</body>
</html>
- CSS 代码
section {
width: 1460px;
height: 680px;
background-color: rgb(124, 133, 146);
padding: 20px;
margin-top: 300px;
text-align:center;
font-size: 20px;
color: rgb(209, 214, 194);
}
.div1-2 {
float: left;
}
.div3--9 {
float: left;
}
.div4--9 {
float: left;
}
.div4-9 {
float: left;
}
.div5-6 {
float: right;
}
#div1 {
width: 500px;
height: 200px;
background-color: rgb(110, 161, 33);
margin-right: 20px;
margin-bottom: 20px;
line-height: 200px;
}
#div2 {
width: 500px;
height: 460px;
background-color: rgb(110, 161, 33);
margin-right: 20px;
line-height: 460px;
}
#div3 {
width: 940px;
height: 280px;
background-color: rgb(110, 161, 33);
margin-bottom: 20px;
line-height: 280px;
}
#div4 {
width: 470px;
height: 380px;
background-color: rgb(110, 161, 33);
margin-right: 20px;
position: relative;
top: -200px;
line-height: 380px;
}
#div5 {
width: 445px;
height: 180px;
background-color: rgb(110, 161, 33);
line-height: 180px;
}
#div6 {
width: 445px;
height: 180px;
background-color: rgb(110, 161, 33);
margin-top: 20px;
line-height: 180px;
}
#div7 {
width: 300px;
height: 200px;
background-color: rgb(233, 139, 32);
margin-left: 20px;
margin-top: 40px;
float: left;
line-height: 200px;
}
#div8 {
width: 300px;
height: 200px;
background-color: rgb(233, 139, 32);
margin-right: 20px;
float: right;
position: relative;
top: -160px;
line-height: 200px;
}
#div9 {
width: 300px;
height: 200px;
background-color: rgb(233, 139, 32);
margin-left: 20px;
position: relative;
top:325px;
line-height: 200px;
}
CSS 盒子模型 实现效果截图：
自测:
- HTML5 为了使 img 元素可拖放，需增加 draggable = “true” 属性。
- true，表示元素可以被拖动
- false，表示元素不可以被拖动
- HTML5 哪一个 input 类型可以选择一个无时区的日期选择器?
- input 元素的 datetime-local 类型创建让用户便捷输入日期和时间的输入控件，包括“年”、“月”、“日”，以及“时”和“分”。
<input type="datetime-local">
- CSS盒子模型中的Margin、Border、Padding都是什么意思？
- margin 为指定元素的四个方向设置 外边距
- border 为指定元素的边设置宽度、风格和颜色
- padding 为指定元素的四个方向设置 内边距
- 五种常见的HTML事件
- 表单事件
- 键盘事件
- 鼠标事件
- 窗口事件
- 多媒体时间
- HTML的onblur和onfocus是哪种类型的属性？
- onblur 事件会在对象失去焦点时发生。
- Onblur 经常用于Javascript验证代码，一般用于表单输入框。
- onblur 相反事件为 onfocus 事件 。
- 怎么设置display属性的值使容器成为弹性容器？
- display: flex;
- JavaScript中有多少种不同类型的循环？
- for循环
- while循环
- do…while循环
- JavaScript高亮显示搜索到单词，使用哪个语义标签最合适？
- mark 元素用于 高亮 文本