C1认证：Web基础

首发至个人博客：https://jackson-art.gitee.io/dab30ab07ba7.html

任务一

测试网站：https://summernote.org/

---

表格隔行换色

1、实现编辑器没有的功能，例如让表格隔行换色。

针对这个任务，使表格换色的话，我首先想到了两种解决方案：

方法一：

只使用CSS来渲染，给对应的 tr 标签上加入 class 属性。

html 部分：

<table border="1">
	<tr>
		<th>Header1th>
		<th>Header2th>
		<th>Header3th>
		<th>Header4th>
		<th>Header5th>
		<th>Header6th>
	tr>
	<tr>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
	tr>
	<tr class="tr_c">
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
	tr>
	<tr>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
	tr>
	<tr class="tr_c">
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
	tr>
table>

CSS部分：

* {
     
	padding: 0;
	margin: 0;
}

table,
td,
th {
     
	text-align: center;
}

th,
.tr_c {
     
	background-color: darkgray;
}

结果如下：

方法二：

用 js 来选择渲染的行。

html部分：

<table border="1">
	<tr>
		<th>Header1th>
		<th>Header2th>
		<th>Header3th>
		<th>Header4th>
		<th>Header5th>
		<th>Header6th>
	tr>
	<tr>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
	tr>
	<tr>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
	tr>
	<tr>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
	tr>
	<tr>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
		<td>Datatd>
	tr>
table>

JS 部分：

var trs = document.getElementsByTagName('tr');
for(let a=0;a<trs.length;a++){
     
	if(a%2==0){
     
		trs[a].style.backgroundColor='darkgray';
	}
}

结果如下：

---

JavaScript按钮弹出消息

2、加入JavaScript按钮，实现点击弹出消息。

针对这个任务，任务文档并没有说明是以哪种方式进行弹出，所以这里仍然有多种方案：

方法一：

使用 原生JS 的内置方法进行弹出：

• 警告框

<button type="button" onclick="alert('你好，我是一个警告框！');">点我查看效果button>

效果如下：

• 确认框

<button type="button" onclick="window.confirm('你好，我是一个确认框！');">点我查看效果button>

效果如下：

• 提示框

<button type="button" onclick="window.prompt('这是提示框','这是提示内容');">点我查看效果button>

效果如下：

方法二：

自定义提示框：使用 div 创建一个弹窗，添加点击事件：
html部分：

<div id="div_id">
	<p>这是一个自定义的提示框p>
	<button type="button" onclick="document.getElementById('div_id').style.display='none';">确定button>
div>
<button type="button" onclick="document.getElementById('div_id').style.display='block';">点我查看效果button>

css部分：

#div_id{
     
	position: absolute;
	width: 40%;
	height: 20%;
	left: 35%;
	background-color: bisque;
	display: none;
}

#div_id button{
     
	position: absolute;
	left: 45%;
	bottom: 10px;
}

效果如下：

• 点击前：
  

• 点击后
  

• 确认后
  

---

任务二

针对任务二，在我看来只是一个引导网站，可以更好的取理解网页是怎么写出来的，加深对HTML和CSS技术的理解，而因为我已经学过了网页制作，所以就很快的浏览了一遍：https://studio.code.org/s/csd2-2019

---

拓展任务

完成下图的CSS盒⼦模型布局：

前端只是会，但不精通，如果有什么不妥当自处，见谅见谅 ~~

html部分：

<div id="main_div">
	<div class="div1_6" id="div1">
		<p>1p>
	div>
	<div class="div1_6" id="div2">
		<p>2p>
	div>
	<div class="div1_6" id="div3">
		<p>3p>
	div>
	<div class="div1_6" id="div4">
		<p>4p>
	div>
	<div class="div1_6" id="div5">
		<p>5p>
	div>
	<div class="div1_6" id="div6">
		<p>6p>
	div>
	<div class="div7_8" id="div7">
		<p>7p>
	div>
	<div class="div7_8" id="div8">
		<p>8p>
	div>
	<div class="div9" id="div9">
		<p>9p>
	div>
div>

css部分：

* {
     
	border: 0;
	padding: 0;
	margin: 0;
}

div {
     
	text-align: center;
}

#main_div {
     
	width: 100%;
	height: 100%;
	background-color: #FCDD9C;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 77px 77px 77px 77px 77px 76px 76px 76px;
	grid-gap: 20px;

}

.div1_6 {
     
	background-color: #C5D08E;
}

.div7_8 {
     
	background-color: #F3A464;
}

.div9 {
     
	background-color: #F8CC9D;
}

#div1 {
     
	grid-column: 1/4;
	grid-row: 1/3;
	line-height: 174px;
}

#div2 {
     
	grid-column: 1/4;
	grid-row: 3/9;
	line-height: 562px;
}

#div3 {
     
	grid-column: 4/9;
	grid-row: 1/5;
	line-height: 363px;
}

#div4 {
     
	grid-column: 4/7;
	grid-row: 5/9;
	line-height: 368px;
}

#div5 {
     
	grid-column: 7/9;
	grid-row: 5/7;
	line-height: 174px;
}

#div6 {
     
	grid-column: 7/9;
	grid-row: 7/9;
	line-height: 174px;
}

#div7 {
     
	grid-column: 4/6;
	grid-row: 2/4;
	line-height: 174px;
	margin-left: 20px;
}

#div8 {
     
	position: absolute;
	left: 75%;
	width: 22%;
	height: 22%;
	top: -8%;
	line-height: 230px;
}

#div9 {
     
	position: absolute;
	width: 25%;
	height: 25%;
	line-height: 25%;
	left: 44%;
	top: 90%;
	z-index: -1;
}

效果如下：

隐藏的 9 号：

---

自测

HTML5为了使img元素可拖放，需要增加什么属性？

• 对于这个问题，我以为只有一种方法，去了解后才知道有两种设置方式：

• • 1，在 img 标签中添加属性 draggable="false"
• • 2，通过 css 样式设置
    img { -webkit-user-drag: none; }

HTML5哪⼀个input类型可以选择⼀个无时区的日期选择器？

• 在 input 标签的 type 属性设置为：datetime-local；

CSS盒子模型中的Margin、Border、Padding都是什么意思？

• Margin：元素外边距。
• Border：元素边框。
• Padding：元素内边距。

说出至少五种常见HTML事件

• onclick： 点击元素。
• onchange：元素改变。
• onmouseover：鼠标移动。
• onmouseout：鼠标离开。
• onkeydown：键盘按下。
• onkeypress：键盘松开。
  ···

HTML的onblur和onfocus是哪种类型的属性？

• onfocus：在元素获得焦点时触发。
• onblur：在元素失去焦点时触发。

怎么设置display属性的值使容器成为弹性容器？

• 设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

JavaScript中有多少种不同类型的循环？

• for 循环、do…while 循环和 while 循环。

用户搜索某个单词后，JavaScript高亮显示搜索到的单词，使用哪个语义化标签最合适？

• ：用于定义重要的文本。