C1认证：Web基础

亦凉 2022-11-18 13:39 159阅读 0赞

![在这里插入图片描述][20210413124638534.jpg_pic_center]

> 首发至个人博客：[https://jackson-art.gitee.io/dab30ab07ba7.html][https_jackson-art.gitee.io_dab30ab07ba7.html]

### 导航： ###

*   *  任务一
     *   *  表格隔行换色
         *   *  方法一：
             *  方法二：
         *  JavaScript按钮弹出消息
         *   *  方法一：
             *  方法二：
     *  任务二
     *  拓展任务
     *  自测

## 任务一 ##

> 测试网站：[https://summernote.org/][https_summernote.org]

--------------------

### 表格隔行换色 ###

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

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

#### 方法一： ####

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

html 部分：

<table border="1">
    	<tr>
    		<th>Header1</th>
    		<th>Header2</th>
    		<th>Header3</th>
    		<th>Header4</th>
    		<th>Header5</th>
    		<th>Header6</th>
    	</tr>
    	<tr>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    	</tr>
    	<tr class="tr_c">
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    	</tr>
    	<tr>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    	</tr>
    	<tr class="tr_c">
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    	</tr>
    </table>

CSS部分：

* { 
    	padding: 0;
    	margin: 0;
    }
    
    table, td, th { 
    	text-align: center;
    }
    
    th, .tr_c { 
    	background-color: darkgray;
    }

结果如下：  
![在这里插入图片描述][20210413125830760.png_pic_center]

#### 方法二： ####

> 用 **js** 来选择渲染的行。

html部分：

<table border="1">
    	<tr>
    		<th>Header1</th>
    		<th>Header2</th>
    		<th>Header3</th>
    		<th>Header4</th>
    		<th>Header5</th>
    		<th>Header6</th>
    	</tr>
    	<tr>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    	</tr>
    	<tr>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    	</tr>
    	<tr>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    	</tr>
    	<tr>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    		<td>Data</td>
    	</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';
    	}
    }

结果如下：  
![在这里插入图片描述][20210413131734240.png_pic_center]

--------------------

### JavaScript按钮弹出消息 ###

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

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

#### 方法一： ####

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

*  **警告框**

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

效果如下：  
![在这里插入图片描述][20210413152757799.png_pic_center]

*  **确认框**

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

效果如下：  
![在这里插入图片描述][20210413160129343.png_pic_center]

*  **提示框**

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

效果如下：  
![在这里插入图片描述][20210413160537379.png_pic_center]

#### 方法二： ####

自定义提示框：使用 **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;
    }

效果如下：

*  点击前：  
    ![在这里插入图片描述][2021041322384716.png_pic_center]
 *  点击后  
    ![在这里插入图片描述][20210413223955126.png_pic_center]
 *  确认后  
    ![在这里插入图片描述][20210413224035258.png_pic_center]

--------------------

## 任务二 ##

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

--------------------

## 拓展任务 ##

> **完成下图的CSS盒⼦模型布局**：  
> ![在这里插入图片描述][20210413224233424.png_pic_center]

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

html部分：

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;
    }

效果如下：  
![在这里插入图片描述][20210413225616772.png_pic_center]  
隐藏的 **9** 号：  
![在这里插入图片描述][20210413225703579.png_pic_center]

--------------------

## 自测 ##

> **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高亮显示搜索到的单词，使用哪个语义化标签最合适？**

*  **<strong>**：用于定义重要的文本。

[20210413124638534.jpg_pic_center]: /images/20221022/07748d0b825a4780a6a2dcdb38af29a3.png
[https_jackson-art.gitee.io_dab30ab07ba7.html]: https://jackson-art.gitee.io/dab30ab07ba7.html
[https_summernote.org]: https://summernote.org/
[20210413125830760.png_pic_center]: /images/20221022/44779d670b0f43f8b98f42715a947216.png
[20210413131734240.png_pic_center]: /images/20221022/1e91c58f7d284efe9e2fc23595fa1db9.png
[20210413152757799.png_pic_center]: /images/20221022/75a78b3c95bc4f25ad4cbeeec9c3cc7f.png
[20210413160129343.png_pic_center]: /images/20221022/ae741b2f2a3f470894c7a24078954d67.png
[20210413160537379.png_pic_center]: /images/20221022/218135d88e2047e398bd5df7f80b9fea.png
[2021041322384716.png_pic_center]: /images/20221022/c3a4a937a0c048b699378508b7be1b72.png
[20210413223955126.png_pic_center]: /images/20221022/bf6b1141a44a42b18e090cd18267a1cd.png
[20210413224035258.png_pic_center]: /images/20221022/8158ccf0821d4069b76fe6e93bab7329.png
[https_studio.code.org_s_csd2-2019]: https://studio.code.org/s/csd2-2019
[20210413224233424.png_pic_center]: /images/20221022/518c76e7d14546b0b60657e9fd082a20.png
[20210413225616772.png_pic_center]: /images/20221022/505fa3ba25a342969ceb5421ab3edf55.png
[20210413225703579.png_pic_center]: /images/20221022/ef22e601ddc44a7c9193a21968f5d9c9.png