任务一:使用使用富文本编辑器
首先,在开源富文本编辑器中随便输入一段文本。
然后,在源码模式下,查看内容是如何被转变为带标签的文本的,都带了哪些HTML标签
最后,实现编辑器没有的功能,例如让表格隔行换色,加入JavaScript按钮。
我用Hbuilder来实现,效果如下图所示:
javascript代码
<script type="text/javascript">
window.onload= function () {
var Tab = document.getElementById("Tab");
var trs = Tab.getElementsByTagName("tr");//获取Tab下的tr行
for(var i = 0; i < trs.length;i++) { //循环所有的行
if(i % 2 == 0) { //进行偶数判断,从而完成各行变色
trs[i].style.backgroundColor= "#ebebeb";
}
}
};
function tory(){
alert("预约考试成功!");
};
</script>
HTML代码
<body>
<p style="color: red;" >CSDN能力认证中心</p>
<table border="1" cellspacing="0" id="Tab">
<tr>
<td>C1</td>
<td>见习工程师认证</td>
</tr>
<tr>
<td>C4</td>
<td>专项工程师认证</td>
</tr>
<tr>
<td>C5</td>
<td>全栈工程师认证</td>
</tr>
</table>
<br>
<button type="button" onclick=tory()>我要考试</button>
</body>
任务二:[所见即所得]式开发
打开HTML和CSS系列网页开发任务。
拓展:CSS盒子模型
深入理解CSS盒子模型多层次含义
边框边距
盒子模型包括:边框、内边距、外边距和内容。
边框由三部分组成,分别是:边框宽度,边框样式以及边框颜色:
属性 | 定义 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 定义边框的样式:solid(实线)、dashed(虚线)、dotted(点线) |
border-color | 定义边框的颜色 |
内边距
属性 | 定义 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
外边距
属性 | 定义 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
标准文档流(浮动与定位)
标准文档流:指在不使用其他与排列和定位相关的特殊 CSS 规则时,各种元素的排列规则。
1.盒子浮动
float Float 属性: 默认是 none ,
按照标准流来定位;
Left:左悬浮;
Right:右悬浮;
2.使用 clear 清除浮动的影响
Clear 属性: 默认是 none,允许两边都可以有浮动对象;
Left: 不允许左边有浮动对象
Right:不允许右边有浮动对象
Both:不允许有浮动对象
3.盒子定位
position Position 属性: 默认是 static,按照标准流来定位;
Relative:相对定位,相对于原本的标准位置偏移指定的距离;
Absolute:绝对定位,以它的包含框为基准进行偏移;
Fixed:固定定位,以浏览器窗口为基准进行定位。
完成下图的CSS盒子模型布局
对比上图(参考VS实际):
实现代码如下:
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0px;
padding: 0px;
}
div{
color: #ffffff;
}
#block9{
background-color: #f8cc9d;
position: absolute;
width:90px;
padding: 30px;
text-align: center;
left: 180px;
top: 360px;
}
table{
width: 100%;
height: 100%;
}
.table0{
border: solid;
border-width: 5px;
border-color: #aaaaaa;
background-color: #fcdd9c;
max-width:800px;
box-sizing: border-box;
}
.table1{
width: 100%;
border-style: none;
line-height: 100px;
border-spacing: 10px 10px;
}
.table2{
width: 100%;
border-style: none;
border-spacing: 0px 10px;
padding-right: 10px;
}
#block1{
background-color: #c5d08e;
height: 50px;
text-align: center;
}
#block2{
background-color: #c5d08e;
height: 220px;
text-align: center;
}
#block3{
box-sizing: border-box;
background-color: #c5d08e;
height: 180px;
text-align: center;
}
#block4{
background-color: #c2d18c;
height: 100px;
text-align: center;
position: relative;
z-index:10000;
}
#block5{
background-color: #c5d08e;
text-align: center;
height: 80px;
}
#block6{
background-color: #c5d08e;
text-align: center;
height: 80px;
}
.table4{
padding-left: 10px;
border-spacing: 0px 10px;
margin-top: -10px;
margin-bottom: -10px;
}
#block7{
background-color: #f3a464;
position: relative;
margin-left: 10px;
width: 30px;
padding: 40px;
}
#block_3{
position: relative;
text-align: center;
top: -60px;
}
#block8{
margin: -20px;
background-color: #f3a464;
position: absolute;
width:15px;
padding: 50px;
height: 10px;
box-sizing: border-box;
left: 400px;
top: -20px;
text-align: center;
}
</style>
</head>
<body>
<div >
<table class="table0">
<tr>
<td>
<table class="table1">
<tr id="block1"><td>1</td></tr>
<tr id="block2"><td>2</td></tr>
</table>
</td>
<td>
<table class="table2">
<tr id="block3"><td><div id="block7">7</div><div id="block_3" >
3
</div><div id="block8">8</div></td></tr>
<tr>
<td>
<table class="table3">
<tr>
<td id="block4" >4</td>
<td>
<table class="table4">
<tr id="block5" ><td>5</td></tr>
<tr id="block6"><td>6</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div id="block9">
9
</div>
</body>
</html>
自测:
1)HTML5为了使img元素可拖放,需要增加什么属性?
draggable=”true”
2)HTML5哪一个input类型可以选择一个无时区的日期选择器?
type=”date”
3)CSS盒子模型中的Margin、Border、Padding都是什么意思?
外边距、边框、内边距
4)说出至少五种常见的HTML事件
鼠标事件、键盘事件、windows事件、 表单事件、媒介事件
5)HTML的onblur和onfocus是哪种类型的属性?
事件属性,onblur 属性在元素失去焦点时触发,onfocus 属性在元素获得焦点时被触发。
6)怎么设置display属性的值使容器成为弹性容器?
display: flex;
7)JavaScript中有多少种不同类型的循环?
3种,while、dowhile、for循环。
8)用户搜索某个单词后,JavaScript高亮显示搜索到的单词,使用哪个语义化标签最合适?
mark,或者使用<span style="background:yellow">' + Keyword + '</span>