C1任务——Web基础_用户搜索某个单词后,javascript高亮显示搜索到的单词,使用哪个语义化标签最合适

最新推荐文章于 2024-07-06 11:13:36 发布

2401_84976678

最新推荐文章于 2024-07-06 11:13:36 发布

阅读量225

点赞数 5

分类专栏：程序员文章标签： c语言 c++ 学习

本文链接：https://blog.csdn.net/2401_84976678/article/details/138894230

版权

程序员专栏收录该内容

43 篇文章 0 订阅

订阅专栏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

说明

大厂每年都要招聘大量的前端软件工程师,有些开发基于浏览器应用,有些开发基于H5的应用,而有些可能会开发小程序和桌面应用。不管是做哪种开发工作的前端工程师,都离不开HTML,CSS,JavaScript这三类Web浏览器核心技术。HTML定义了浏览器中各种元素的分类和用途,CSS定义了浏览器页面的整体布局和外观,而 JavaScript可以动态创建页面,使网页能够响应用户的点击、拖拽等各种事件,给用户更好的体验。

任务一

首先,在开源富文本编辑器(https://summernote.org/)中随便输入一段文本
在这里插入图片描述

然后,在源码模式下,査看内容是如何被转变为带标签的文本的,都带了哪些HTML标签
在这里插入图片描述
最后,实现编辑器没有的功能,例如让表格隔行换色,加入 JavaScript按钮,试着完成它吧

我们可以使用以下代码实现

<!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>Document</title>
</head>
<body>
    <style>
 table,tr,td{border:1px solid; padding:5px 30px 5px 0;}
 .tr1{background-color:#E6E6E6}
 </style>
      
      <script>
 function fun(){
 alert("ssdd");
 }
 </script>
      
    <p><span style="color: red;">CSDN认证中心</span></p>
      <table style="border-collapse:collapse;">
        <tbody>
          <tr class="tr1">
            <td>C1</td>
            <td>见习工程师</td>
          </tr>
          <tr>
            <td>C4</td>
            <td>专项工程师</td>
          </tr>
          <tr class="tr1">
            <td>C5</td>
            <td>全栈工程师</td>
          </tr>
        </tbody>
      </table>
      <br>
      <button onclick="alert('考试开始')">我要考试</button>
</body>
</html>

效果为点击我要考试弹出考试开始
在这里插入图片描述

所见即所得式开发

在这里插入图片描述

CSS盒子模型

在这里插入图片描述

<!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>Document</title>
</head>
<body>
    <style type="text/css">
 \* {
 margin: 0;
 padding: 0;
 }
 body {
 background-color: rgb(255, 214, 128);
 border: solid 2px rgb(154, 154, 154);
 height: 500px;
 display: flex;
 flex-flow: column wrap;
 color:white;
 }
 #B1 {
 width: 30%;
 height: 100%;
 display: flex;
 flex-direction: column;
 }
 #B2 {
 width: 70%;
 height: 40%;
 position: relative;
 }

 #B3 {
 width: 70%;
 height: 60%;
 display: flex;
 flex-direction: row ;
 }
 #B4 {
 width: 50%;
 display: flex;
 position: relative;
 }
 #B5 {
 width: 50%;
 display: flex;
 flex-direction: column;
 }
 .b1, .b2, .b3, .b4, .b5, .b6,.b7,.b8,.b9 {
 display: flex;
 justify-content: center;
 align-items: center;
 }
 .b1, .b2, .b3, .b4, .b5, .b6 {
 border: solid rgb(160, 180, 116) 1px;
 background-color: rgb(180, 220, 115);
 margin: 20px;
 }
 .b1 {
 height: 30%;
 }
 .b2 {
 flex-grow: 1;
 }
 .b3 {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 }
 .b4 {
 flex-grow: 1;
 z-index: 1;
 }
 .b5 ,.b6{
 flex-grow: 1;
 }
 .b7 {
 width: 25%;
 height: 60%;
 position: absolute;
 top: 0;
 bottom: 0;
 margin: 40px;
 background-color: rgb(255, 168, 113);
 }
 .b8 {
 width: 25%;
 height: 60%;
 position: absolute;
 background-color: rgb(255, 168, 113);
 top: -25%;
 left: 70%;
 }
 .b9 {
 width: 60%;
 height: 30%;
 background-color: rgb(255, 190, 130);
 position: absolute;
 top: 90%;
 left: 20px;
 margin: auto 20px;
 }
 </style>
</head>
<body>
    <div id="B1">
        <div class="b1">1</div>
        <div class="b2">2</div>
    </div>
    <div id="B2">
        <div class="b3">3</div>
        <div class="b7">7</div>
        <div class="b8">8</div>
    </div>
    <div id="B3">
        <div id="B4">
            <div class="b4">4</div>


![img](https://img-blog.csdnimg.cn/img_convert/906c431b27046a663392ee1e8f40dc5e.png)
![img](https://img-blog.csdnimg.cn/img_convert/d9c686a01c281005db547eb7af7c472c.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618668825)**

15737682625)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618668825)**

2401_84976678

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
C1任务——Web基础_用户搜索某个单词后,javascript高亮显示搜索到的单词,使用哪个语义化标签最合适

大厂每年都要招聘大量的前端软件工程师,有些开发基于浏览器应用,有些开发基于H5的应用,而有些可能会开发小程序和桌面应用。HTML定义了浏览器中各种元素的分类和用途,CSS定义了浏览器页面的整体布局和外观,而 JavaScript可以动态创建页面,使网页能够响应用户的点击、拖拽等各种事件,给用户更好的体验。最后,实现编辑器没有的功能,例如让表格隔行换色,加入 JavaScript按钮,试着完成它吧。然后,在源码模式下,査看内容是如何被转变为带标签的文本的,都带了哪些HTML标签。我们可以使用以下代码实现。
复制链接

扫一扫