Web前端 第五周

最新推荐文章于 2024-01-23 00:26:36 发布
最新推荐文章于 2024-01-23 00:26:36 发布
阅读量198 收藏
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ruuuuvh/article/details/127959156
版权

Web前端 第五周

四、拓展HTML

1.strong与b、em与i

表现形态：都是文本加粗和文本斜体

<body>
    <strong>文本1</strong>
    <b>文本2</b>
    <em>文本3</em>
    <i>文本4</i>
</body>

在这里插入图片描述

区别：strong和em是具备语义化的，而b和i是不具备语义化的

2.引用标签

  • blockquote：引用大段的段落解释
<body>
    <p>
        <abbr title="World Health Organization">WHO</abbr>成立于1948年。
    </p>
</body>

在这里插入图片描述

  • q ：引用小段的短语解释
  • abbr ：缩写或首字母缩略词
  • address ：引用文档地址信息
  • cite :引用著作的标题

3.iframe嵌套页面

iframe元素会创建包含另一个文档的内联框架（即行内框架）
可以引入其他的html到当前html中显示
在这里插入图片描述

  • 主要是利用iframe的属性进行样式的调节
<body>
    <iframe src="https://www.taobao.com" frameborder="0" scrolling="no" width="400" height="400"></iframe>
</body>

在这里插入图片描述

<!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>
    <style>
        iframe{width: 100%;height: 700px;}
    </style>
</head>
<body>
    <iframe src="https://www.taobao.com" frameborder="0" scrolling="no"></iframe>
</body>
</html>

在这里插入图片描述

  • 应用场景：数据传输、共享代码、局部刷新、第三方介入等。

4.br与wbr

  • br：换行
  • wbr：软换行

普通：

<p>
    ghjk kjiu ghjk jkui ghjk jkui ghjk kjiu ghjk jkui ghjk jkui
</p>

在这里插入图片描述
br：

<p>
    ghjk kjiu ghjk jkui ghjk jkui <br> ghjk kjiu ghjk jkui ghjk jkui
</p>

在这里插入图片描述

5.pre与code

针对网页中的代码显示效果。

<!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>
</html>

在这里插入图片描述

6.map与area

给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形。

7.embed与object

给flash和一些插件进行渲染操作的标签。

<body>
    <embed src="./img/flash.swf" type="">
</body>

<body>
    <object>
        <param name="movie" value="./img/flash.swf">
    </object>
</body>

注：object元素需要配合param元素一起完成

8.audio与video

引入音频与视频的标签，属于H5的功能。

9.文字注释与文字方向

  • 文字注释：ruby、rt这样一个组合
<body>
    <ruby>
        寒<rt>hán</rt>冬
    </ruby>
</body>

在这里插入图片描述

  • bdo标签可覆盖默认的文本方向
<body>
    <ruby>
        寒<rt>hán</rt>冬
    </ruby>
    <p>
    <bdo dir="ltr">高数</bdo>不定积分有理函数
    </p>
</body>

在这里插入图片描述

<body>
    <ruby>
        寒<rt>hán</rt>冬
    </ruby>
    <p>
    <bdo dir="rtl">高数</bdo>不定积分有理函数
    </p>
</body>

在这里插入图片描述

10.扩展link标签

添加网址标题栏的小图标：

<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">

<!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>
    <link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
</head>
<body>
    
</body>
</html>

在这里插入图片描述
DNS预解析：

11.扩展meta标签

mata添加一些辅助信息。

12.HTML5新语义化标签

  • header：页眉
  • footer：页脚
  • main：主体
  • hgroup：标题组合
  • nav：导航

注：header、main、footer在一个网页中只能出现一次

  • article：独立的内容
  • aside：辅助信息的内容
  • section：区域
  • figure：描述图像或视频
  • figcaptain：描述图像或视频的标题部分
  • datalist : 选项列表
  • details / summary : 文档细节／文档标题
  • progress / meter : 定义进度条／定义度量范围
  • time ：定义日期或时间
  • mark : 带有记号的文本
<!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>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <nav>
            <ul>
                <li>首页</li>
                <li>论坛</li>
                <li>关于</li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <section>
                <input type="text" list="elems">
                <details name="elems">
                    <option value="a"></option>
                    <option value="ab"></option>
                    <option value="apple"></option>
                    <option value="abandon"></option>
                    <option value="aside"></option>
                    <option value="awww"></option>
                </details>
                <details open>
                    <summary>HTML</summary>
                    <p>超文本标记语言</p>
                </details>
                <progress min="0" max="10" value="5"></progress>
                <meter min="10" max="100" value="80" low="10" high="60"></meter>
                <p>
                    今天是<time title="2-14">情人节</time>，街上人很多
                </p>
                <p>
                    今天是<mark>情人节</mark>，街上人很多
                </p>
                </section>
            <section>
                <ul>
                    <li>
                        <figure>
                            <img src="./img/youku.jpg" alt="">
                            <figcaption>
                                点燃我，温暖你
                                <br>
                                欢喜冤家互怼生情
                            </figcaption>
                        </figure>
                    </li>
                </ul>
            </section>
            <section>
                <ul>
                    <li>
                        <figure>
                            <img src="./img/youku.jpg" alt="">
                            <figcaption>
                                点燃我，温暖你
                                <br>
                                欢喜冤家互怼生情
                            </figcaption>
                        </figure>
                    </li>
                </ul>
            </section>
            <section>
                <ul>
                    <li>
                        <figure>
                            <img src="./img/youku.jpg" alt="">
                            <figcaption>
                                点燃我，温暖你
                                <br>
                                欢喜冤家互怼生情
                            </figcaption>
                        </figure>
                    </li>
                </ul>
            </section>
        </article>
        <aside></aside>
    </main>
    <footer></footer>
</body>
</html>

在这里插入图片描述

五、弹性布局

1.flex弹性布局

在这里插入图片描述

  • flex-direction

默认：

在这里插入图片描述

<!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>
    <style>
    #box{width: 300px;height: 300px;border:1px black solid;margin:20px auto;display: flex;}
    #box div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background: darkcyan;}
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

在这里插入图片描述
row-reverse：

#box{width: 300px;height: 300px;border:1px black solid;margin:20px auto;display: flex;flex-direction: row-reverse;}

在这里插入图片描述
colum：
在这里插入图片描述
colum-revers：
在这里插入图片描述

  • flex-wrap：用来控制子项整体单行显示还是换行显示

在这里插入图片描述
默认：

<!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>
    <style>
    #box2{width: 300px;height: 300px;border:1px black solid;margin:20px auto;display: flex;}
    #box2 div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background: darkcyan;}
    </style>
</head>
<body>
    <div id="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
    </div>
</body>
</html>

在这里插入图片描述
wrap：

#box2{width: 300px;height: 300px;border:1px black solid;margin:20px auto;display: flex;flex-wrap: wrap;}

在这里插入图片描述
wrap-reverse：

#box2{width: 300px;height: 300px;border:1px black solid;margin:20px auto;display: flex;flex-wrap: wrap-reverse;}

在这里插入图片描述

  • flex-flow：flex布局的flow流动特性。第一个值表示换行，第二个值表示空格，中间用隔开。
#box2{width: 300px;height: 300px;border:1px black solid;margin:20px auto;display: flex;flex-flow: column;}

在这里插入图片描述
wrap：

#box2{width: 300px;height: 300px;border:1px black solid;margin:20px auto;display: flex;flex-flow: column wrap;}

在这里插入图片描述

  • justfity-conten：决定了主轴方向上子项的对齐和分布方式。

在这里插入图片描述

默认：

 #box3{width: 300px;height: 300px;border:1px black solid;margin:20px auto;display: flex;}

在这里插入图片描述

flex-end：

#box3{width: 300px;height: 300px;border:1px black solid;margin:20px auto;display: flex;justify-content: flex-end;}

在这里插入图片描述
center：
在这里插入图片描述
space-around：
在这里插入图片描述
space-between：
在这里插入图片描述
space-evenly：
在这里插入图片描述

  • align-items：

在这里插入图片描述

<style>
    #box4{width: 300px;height: 300px;border:1px black solid;margin:20px auto;display: flex;}
    #box4 div{width: 50px;height: 50px;background: darkcyan;}
    </style>

在这里插入图片描述
flex-star：

<style>
    #box4{width: 300px;height: 300px;border:1px black solid;margin:20px auto;display: flex;justify-content: space-evenly;align-items: flex-start;}
    #box4 div{width: 50px;background: darkcyan;}
    </style>

在这里插入图片描述
center：
在这里插入图片描述
flex-end：
在这里插入图片描述

  • align-content

在这里插入图片描述

2.作用在flex子项上的CSS属性

在这里插入图片描述
flex-grow：

<style>
    #box{width: 300px;height: 300px;border:1px black solid;margin:20px auto;display: flex;}
    #box div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background: darkcyan;}
    #box div:nth-child(2){background: yellow;color: black;flex-grow: 1;}
    </style>

在这里插入图片描述
flex-shrink：

#box2 div:nth-child(2){background: yellow;color: black;flex-shrink: 0;}

在这里插入图片描述
flex-basis：

#box2 div:nth-child(2){background: yellow;color: black;flex-basis: 100px;}

在这里插入图片描述
flex：

#box2 div:nth-child(2){background: yellow;color: black;flex:0 1 auto;}

在这里插入图片描述

align-self：
在这里插入图片描述

3.Flex案例

  • 骰子的点数
<!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>
    <style>
    #box1{width: 100px;height: 100px;border:1px black solid;border-radius: 5px;display: flex;justify-content: center;align-items:center;}
    #box1 div{width: 30%;height: 30%;background: black;border-radius: 50%;}

    #box2{width: 100px;height: 100px;border:1px black solid;border-radius: 5px;display: flex;justify-content:space-between;}
    #box2 div{width: 30%;height: 30%;background: black;border-radius: 50%;}
    #box2 div:last-child{align-self: flex-end;}

    #box3{width: 100px;height: 100px;border:1px black solid;border-radius: 5px;display: flex;justify-content:space-between;align-items: center;}
    #box3 div{width: 30%;height: 30%;background: black;border-radius: 50%;}
    #box3 div:first-child{align-self: flex-start;}
    #box3 div:last-child{align-self: flex-end;}

    #box4{width: 100px;height: 100px;border:1px black solid;border-radius: 5px;display: flex;flex-wrap: wrap;}
    #box4 div{width: 100%;display: flex;justify-content: space-between;}
    #box4 div:last-child{align-items: flex-end;}
    #box4 i{display: block;width: 30%;height: 60%;background: black;border-radius: 50%;}

    #box5{width: 100px;height: 100px;border:1px black solid;border-radius: 5px;display: flex;flex-wrap: wrap;}
    #box5 div{width: 100%;display: flex;justify-content: center;align-items: center;}
    #box5 div:first-child{align-items: flex-start;justify-content: space-between;}
    #box5 div:last-child{align-items: flex-end;justify-content: space-between;}
    #box5 i{display: block;width: 30%;height: 90%;background: black;border-radius: 50%;}

    #box6{width: 100px;height: 100px;border:1px black solid;border-radius: 5px;display: flex;flex-wrap: wrap;}
    #box6 div{width: 100%;display: flex;justify-content: space-between;}
    #box6 div:first-child{align-items: flex-start;}
    #box6 div:last-child{align-items: flex-end;}
    #box6 i{display: block;width: 30%;height: 90%;background: black;border-radius: 50%;}
    </style>
</head>
<body>
    <div id="box1">
        <div></div>
    </div>
    <div id="box2">
        <div></div>
        <div></div>
    </div>
    <div id="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="box4">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
    <div id="box5">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
    <div id="box6">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
    </div>
</body>
</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>Document</title>
    <style>
    *main{margin: 0;padding: 0;}
    #main{display: flex;}
    #left{width: 200px;height: 200px;background: khaki;}
    #center{flex: 1;height: 300px;background: cornflowerblue;}
    #right{width: 150px;height: 200px;background: darkolivegreen;}
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>
</html>

在这里插入图片描述

  • 百度弹性导航

4.Grid网格布局

二维布局方法，纵横两个方向总是同时存在
在这里插入图片描述

<!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>
    <style>
    .box{width: 500px;height: 500px;border: 1px gray dotted;display: grid;
        grid-template-rows: 100px auto 25%;
        grid-template-columns: 100px 100px 200px 100px;
    }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
    </div>
</body>
</html>

在这里插入图片描述

  • grid-template-colum和grid-template-rows

对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）

注：如果需要添加多个横纵网格时，可以利用repeat（）语法进行简化操作。

<style>
    .box{width: 300px;height: 300px;border: 1px gray dotted;display: grid;
        grid-template-rows:repeat(3,1fr);
        grid-template-columns:repeat(3,1fr);
    }
    </style>
  • grid-template-areas和grid-template

grid-template是grid-template-rows、grid-template-columns和grid-template-areas属性的缩写。

<!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>
    <style>
    .box{width: 300px;height: 300px;border: 1px gray dotted;display: grid;
        grid-template-rows:repeat(3,1fr);
        grid-template-columns:repeat(3,1fr);
    }
    .box div{background: palevioletred;border: 1px black solid;}
    
    .box2{width: 300px;height: 300px;border: 1px gray dotted;display: grid;
        grid-template-rows:repeat(3,1fr);
        grid-template-columns:repeat(3,1fr);
        grid-template-areas: 
        "a1 a1 a1"
        "a2 a2 a3"
        "a2 a2 a3";
    }
    .box2 div{background: palevioletred;border: 1px black solid;}
    .box2 div:nth-child(1){grid-area: a1;}
    .box2 div:nth-child(2){grid-area: a2;}
    .box2 div:nth-child(3){grid-area: a3;}
    </style>
</head>
<body>
     <div class="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    
</body>
</html>

在这里插入图片描述

  • grid-column-gap和grid-row-gap

定义网格中网格间隙的尺寸

.box2{width: 300px;height: 300px;border: 1px gray dotted;display: grid;
        grid-template: 
        "a1 a1 a1" 1fr
        "a2 a2 a3" 1fr
        "a2 a2 a3" 1fr
        /1fr 1fr 1fr;
        grid-column-gap: 10px;
        grid-row-gap:20px;
    }

在这里插入图片描述
CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写

  • justity-items和align-items

注：place-items可以让justity-items和align-items属性写在单个声明中
在这里插入图片描述

.box3{width: 300px;height: 300px;border: 1px gray dotted;display: grid;
        grid-template-rows:repeat(3,1fr);
        grid-template-columns:repeat(3,1fr);
        justify-items: end;
        align-items: end;
    }
    .box3 div{background: palevioletred;border: 1px black solid;}

在这里插入图片描述

  • justity-content和align-content

在这里插入图片描述

5.作用在grid子项上的CSS属性

在这里插入图片描述

.box div{background: palevioletred;border: 1px black solid;
    grid-area: 3/2/4/4; /*第一个值是水平的起始位置，第二个值是垂直的起始位置，第三个值是水平的结束位置，第四个值是垂直的结束位置/
    }

在这里插入图片描述

<!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>
    <style>
    .box{width: 280px;height: 352px;margin: 20px auto;display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(4,1fr);
    grid-template-areas:
    "a1 a2 a2"
    "a3 a2 a2"
    "a4 a4 a5"
    "a6 a7 a7";
    grid-gap:6px 6px;
    }
    .box div{background: red;}
    .box div:nth-child(1){grid-area: a1;}
    .box div:nth-child(2){grid-area: a2;}
    .box div:nth-child(3){grid-area: a3;}
    .box div:nth-child(4){grid-area: a4;}
    .box div:nth-child(5){grid-area: a5;}
    .box div:nth-child(6){grid-area: a6;}
    .box div:nth-child(7){grid-area: a7;}
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

在这里插入图片描述

Ruuuuvh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
『前端实习笔记』12月 第5周
猪窝
01-08 753
文章目录日记12.2812.2912.3012.31元旦小加班周报 日记 12.28 事情：回学校拍照 这个事情属实有点坑，毕业了要回去拍毕业照采集照片。 后来了解到可以自己用小程序拍的，校方也不说清楚，不过自己拍也有可能不合格吧。 午休时间回了趟学校，取了身份证，排队排了1小时，中途还被误会成插队，我懒得计较，那你就去我前面好了。 浪费时间太多，回来都已经14点了。 还坑了多年好友，我以为身份证必带（当然校方并没有说清楚），害的他在大上海来了一圈几公里的折返跑。 任务：改残留bug 之前改了个bug，
实习日志（2021.10.08）
aghvvbn的博客
10-08 1199
2021.10.08 星期五 在国庆节休息之后，开始继续实习学习。
前端实习第五周总结
qq_43957263的博客
12-21 4873
经过一个多月的打磨，我现在基本上算是已经稳定下来并且习惯了现在的生活。每天朝九晚六，算是体会到了什么叫做社畜。 由于这几天我负责的小程序前端项目要上线，所以就一直在提交测试、修改，再提交、再修改；一直过了几天这样的日子。然后终于在昨天第一次被迫加班到九点的情况下，这个项目终于是部署上线了。所以才有时间更新这篇博客，原本是上周就应该分享更新的。 这两天还有上周，由于项目上线，要改的还有要交流的比较多；我算是深深的感受到了交流的重要性。真的是太难了。。。和大家...
2019/01/21 一位前端实习生 艰辛过程 励志 实习周记（四）——第四 五周
徐磊
05-27 7049
第四周的周一，刚到公司没多久，公司就开始给我们布置了真实的项目，需要我们动手了，一个比较简单的工作，就是根据UI设计稿，来修改模板上的页面，简单地来说，就是使用模板上的现成的组件，来拼装一个新的项目，对于我们实习生来讲，修改模板是一种很好的学习方式和工作经验。 这个模板项目没有使用框架，是一个使用原生js编写的项目，和刚进公司，练习的第一个项目尤为相似，麻雀虽小，五脏俱全，里面的核心概念也很重要的...
前端开发实习生面试总结
changyana的博客
08-23 2584
应聘前端开发实习生，很多问题之前都没有接触过，现在总结一下我投的几家公司被问到的前端技术。
web前端开发技术储久良第三版答案
12-09
《Web前端开发技术储久良第三版答案》涵盖了前端开发领域的关键知识点，主要针对储久良教授编著的教材第三版中的习题和实验提供了详尽的解答。这本书旨在帮助学习者深入理解Web前端开发的核心概念和技术，通过解决...
web前端第三版习题参考答案_.docx.docx
04-04
网页由两部分构成：头部（）和主体（）。...这些都是Web前端开发中不可或缺的部分，对于理解和创建基本的网页内容至关重要。通过练习和实际操作，可以进一步巩固这些知识点，并为更深入的前端学习打下坚实的基础。
web前端第一阶段视频教程
07-22
web前端第一阶段视频教程目录HTML 部分webstrom 的常用配置及快捷键什么是 HTML. DTD 文档声明基本标签行内元素与块元素请求响应模型Frameset 框架集表格布局页面中常见的图像格式HTML 实体字符表单HTML5 中的 ...
web前端初级.pdf
05-23
Web 前端开发职业技能标准串讲教案初级，内共有四篇：第一篇web页面制作基础，第二篇html5和css3开发基础与应用，第三篇JavaScript程序设计，第四篇轻量级框架开发应用。
web前端实验一,第一次htmi5页面
12-22
在这个"web前端实验一,第一次htmi5页面"中，我们将学习以下几个关键知识点： 1. **HTML5基本结构**：HTML5文档的开头是`<!DOCTYPE html>`，它声明了文档类型为HTML5。接下来是`<html>`元素，它是整个文档的根元素。...
web前端实现189电信网站
01-22
在构建“web前端实现189电信网站”的过程中，我们需要运用到的核心技术包括HTML5、CSS、JavaScript（JS）以及Ajax。这些技术是现代网页开发的基石，它们各自承担着不同的职责，共同创造出用户友好的交互体验。 首先...
Web前端开发第一季：HTML
06-14
本系列课程是专门为零基础学习Web前端开发的朋友准备的，老师将多年的教学经验与案例相结合，深入浅出，循序渐进，让大家轻松的进入Web开发行业。 本系列课程主要讲述Web开发的前端技术：html、css、JavaScript，...
WEB前端开发框架.zip
最新发布
06-20
【标题】"WEB前端开发框架.zip" 涵盖了前端开发中常用的各种技术和工具，主要关注于构建高效、响应式且易于维护的Web应用程序。这个压缩包可能包含了一个完整的前端框架或者库的源代码，方便开发者进行快速开发。 ...
Web前端开发职业技能等级证书考试-中级模拟试卷.docx
06-25
《Web前端开发职业技能等级证书考试-中级模拟试题解析》 Web前端开发是现代互联网应用的重要组成部分，涉及到HTML、CSS、JavaScript等技术的综合运用。中级Web前端开发职业技能等级证书考试旨在检验开发者对于这些...
求一枚 25年毕业的前端实习生 【momenta】
每天多一点干货
09-08 392
package main/** * 代码中的类名、方法名、参数名已经指定，请勿修改，直接返回方法规定的值即可 * * * @param n int整型 *鼠鼠真的玉玉了捏七月投递简历，七月末24小时走完提前批的三轮面试，个人感觉跟每一位面试官聊的都很好，最后三面面试官也说应该没什么问题然后泡了一个月的池子，收到测。没有学历歧视，本科即可，部分岗位硕士开发，算法，数分，测试等等都有很多hc欢迎大家投递通过我的内推码可以找我查询流程，回复快！又是一年校招开始了，去年的我也是摸爬滚打，现在也已经正式入职！
实习第四周，第五周
weixin_46262530的博客
07-23 47
用echarts，先构建一个组件专门来构建图表DetailCharts.vue，在别的组件引用DetailCharts.vue,所有传值很关键。这周主要遇到的问题是 echarts图 在vue中的使用 后端发过来的是Excel文件改怎么处理。这里的record是table里每一行的数据，searchParams为请求参数。后端以Excel格式发给我 将数据转换为blob（文件流）/** 下载后端返回的文件流 */
前端实习周记01
热门推荐
weixin_42841738的博客
06-03 2万+
前端实习周记01 上周是进入公司实习的第一周。 本来计划是上周末写周记。无奈有论文要写，把第一周的周记拖到了现在。 我是星期三进入公司的，第一天学习Vue cli 3项目搭建，配置webpack4，试着运行、编译等。公司是在做一个很大的网站重构项目，前端这边工期也很紧，所以并没有给我安排demo来测试我的业务能力2333。 聊一聊公司的重构项目 之前是用jsp写的电商平台，重构是用的vue.js...
前端实习周记 第五周（5/10）
xkzwz的博客
01-23 1473
二本学生的前端周记，内容详细，有专有名词，共十周
Web前端开发：新时代的崛起
当前，Web前端正面临第二次浏览器大战，HTML5和CSS3的引入为前端开发带来了革命性的变化，提供了更强大的功能和更好的用户体验。与此同时，操作系统之间的竞争也为跨平台兼容性提出了更高要求，预示着前端的繁荣即将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值