web前端基础——第五章

已于 2022-12-05 12:56:10 修改
阅读量604 收藏 1
点赞数
分类专栏： 技术栈笔记 文章标签： 前端
于 2022-11-25 18:05:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZiminLi/article/details/127966978
版权

目录

五十、strong和b、em和i

strong和em都是表示强调的标签，表现形态为文本加粗和斜体。b和i标签同样也表示文本加粗和斜体。
区别 ：strong和em是具备语义化的，而b和i是不具备语义化的。

五十一、引用标签

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

五十二、iframe嵌套页面

iframe元素会创建包含另外一个文档的内联框架（即行内框架）。

可以引入其他的html到当前html中显示
主要是利用iframe的属性进行样式的调节
应用场景 ：数据传输，共享代码，局部刷新，第三方介入等。

常见的属性含义
frameborder规定是否显示框架周围的边框
width定义iframe的宽度
height定义iframe的高度
scrolling规定是否在iframe中显示滚动条
src规定在iframe中引入的URL
srcdoc规定在iframe中显示的页面内容

五十三、br与wbr

br标签表示换行操作，而wbr标签表示软换行操作。
提示 ：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用wbr元素来添加Word Break Opportunity（单词换行时机）

五十四、pre与code

pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是把文本变成等宽字体,但它暗示着这段文本是源程序代码。

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

五十五、map与area

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

定义一个客户端图像映射。图像映射( image-map )指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。
area元素的href属性定义区域的URL , shape属性来定义区域的形状,coords属性定义热区的坐标。

<!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>
    <img src="" alt="" usemap="#star">
     <map name="star">
        <!-- <area shape="rect" coords="205 83 286 173" href="https://www.taobao.com" alt=""> -->
        <!-- <area shape="circ" coords="300 130 50" href="https://www.taobao.com" alt=""> -->
        <area shape="poly" coords="305 9 233 156 256 250 172 197" href="https://www.taobao.com" alt="">
     </map>
</body>
</html>

五十六、embed与object

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

embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有多大区别，主要是为了兼容不同的浏览器而已。
object元素需要配合param元素一起完成。

    <!-- <embed src="./img/flash.swf" type=""> -->
        <object data="" type="">
            <param name="movie" value="./img/flash.swf">
        </object>

五十七、audio和video

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

audio标签表示嵌入音频文件，video标签表示嵌入视频文件。默认控件是不显示的，可通过controls属性来显示控件。
为了能够支持多个备选文件的兼容支持，可以配合source标签。

    <!-- <audio src="" controls loop autoplay></audio> -->
    <!-- <video src="" controls></video> -->
    <video src="">
        <source src="">
        <source src="">
    </video>

五十八、文字注解与文字方向

ruby、rt这样一个组合

ruby标签定义ruby注释（中文注音或字符），rt标签定义字符（中文注音或字符）的解释或发音。
bdo标签可覆盖默认的文本方向。

<!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>
        span{
            direction: rtl;
            unicode-bidi: bidi-override;
        }
    </style>
</head>
<body>
    <ruby>
        寒<rt>hán</rt>冬
    </ruby>
    <p>
        <bdo dir="rtl">爱神的箭</bdo>卡无敌哈市佛
    </p>
    <p>
        <span>爱神的箭</span>卡无敌哈市佛
    </p>
</body>
</html>

五十九、link标签扩展学习

<!-- 添加网址标题栏前的小图标： -->
<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
<!-- DNS预解析 -->
<link rel="dns-prefetch" href="//static.360buyimg.com">

六十、meta标签扩展学习

<meta name="description" content="大连美团网精选大连美食餐厅，酒店预订，电影票，旅游景点，外卖订餐，大连团购信息，您可查询商家评价店铺信息。大连生活，下载美团官方APP，吃喝玩乐1折起。">
<meta name="keywords" content="大连美食，大连酒店，大连团购">
<meta name="renderer" content= "webkit">

<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="refresh" content="3" url="">

<meta http-equiv="expires" content= "Wed,20 Jun 2019 22:33:00 GMT">

六十一、HTML5新语义化标签

header ：页眉
footer ：页脚
main ：主体
hgroup ：标题组合
nav ：导航
    注:header、footer、main在一个网页中只能出现一次。
article ：独立的内容
aside ：辅助信息的内容
section ：区域
figure ：描述图像或视频
figcaption ：描述图像或视频的标题部分
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">
                <datalist id="elems">
                    <option value="a"></option>
                    <option value="ab"></option>
                    <option value="abc"></option>
                    <option value="apple"></option>
                    <option value="abbr"></option>
                    <option value="around"></option>
                </datalist>
                <details open>
                    <summary>HTML</summary>
                    <p>超文本标记语言</p>
                </details>
                <progress min="0" max="10" value="8"></progress>
                <meter min="0" 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="" alt="">
                            <figcaption>
                                新水果篮子 高甜
                                <br>
                                十二生肖恋上美少女！
                            </figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="" alt="">
                            <figcaption>
                                新水果篮子 高甜
                                <br>
                                十二生肖恋上美少女！
                            </figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="" alt="">
                            <figcaption>
                                新水果篮子 高甜
                                <br>
                                十二生肖恋上美少女！
                            </figcaption>
                        </figure>
                    </li>
                </ul>
            </section>
            <section></section>
        </article>
        <aside>

        </aside>
    </main>
    <footer></footer>
</body>
</html>

六十二、Flex弹性盒模型

  随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。
  2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

作用在flex容器上作用在flex子项上
flex-directionorder
flex-wrapflex-grow
flex-flowflex-shrink
justify-contentflex-basis
align-itemsflex
align-contentalign-self

1.作用在flex容器上的CSS属性

（1）flex-direction

flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。

取值含义
row默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。
row-reverse显示为行。但方向和row属性值是反的
column显示为列
column-reverse显示为列。但方向和column属性值是反的

（2）flex-wrap

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

取值含义
nowrap默认值，表示单行显示，不换行。
wrap宽度不足换行显示
wrap-reverse宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面。

（3）flex-flow

flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。

（4）justify-content

justify-content属性决定了主轴方向上子项的对齐和分布方式。

取值含义
flex-start默认值，表现为起始位置对齐。
flex-end表现为结束位置对齐。
center表现为居中对齐。
space-between表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-aroundaround是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenlyevenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。

（5）align-items

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。

取值含义
stretch默认值，flex子项拉伸。
flex-start表现为容器顶部对齐。
flex-end表现为容器底部对齐。
center表现为垂直居中对齐。

（6）align-content

align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。

取值含义
stretch默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%。
flex-start表现为起始位置对齐。
flex-end表现为结束位置对齐。
center表现为居中对齐。
space-between表现为两端对齐。
space-around每一行元素上下都享有独立不重叠的空白空间。
space-evenly每一行元素都完全上下等分。

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

取值含义
order可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0.
flex-grow属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。默认值为0.
flex-shrink属性中的shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值是1。
flex-basisflex-basis定义了在分配剩余空间之前元素的默认大小。
flexflex属性是flex-grow，flex-shrink和flex-basis的缩写。
align-selfalign-self指控制单独某一个flex子项的垂直对齐方式。

3.练习

（1）骰子的点数

<!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;
            align-items: center;
        }
        #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>

（2）两列固定，一列自适应

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        #main{
            display: flex;
        }
        #left{
            width: 200px;
            height: 200px;
            background: red;
        }
        #center{
            flex: 1;
            height: 300px;
            background: yellow;
        }
        #right{
            width: 150px;
            height: 200px;
            background: blue;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>
</html>

六十三、Grid网格布局

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。

作用在grid容器上作用在grid子项上
grid-template-columnsgrid-column-start
grid-template-rowsgrid-column-end
grid-template-areasgrid-row-start
grid-templategrid-row-end
grid-column-gapgrid-column
grid-row-gapgrid-row
grid-gapgrid-area
justify-itemsjustify-self
align-itemsalign-self
place-itemsplace-self
justify-content/
align-content/
place-content/

1.作用在grid容器上的CSS属性

（1）grid-template-columns和grid-template-rows

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

有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。

（2）grid-template-areas和grid-template

area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid- area属性指定其隶属于那个区。

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

（3）grid-column-gap和grid-row-gap

grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。
CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。

（4）justify-items和align-items

justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。

place-items可以让align-items和justify-items属性写在单个声明中。

取值含义
stretch默认值，拉伸。表现为水平或垂直填充。
start表现为容器左侧或顶部对齐。
end表现为容器右侧或底部对齐。
center表现为水平或垂直居中对齐。

（5）justify-content和align-content

justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的水平分布方式。place -content可以让align-content和justify-content属性写在一个CSS声明中。

取值含义
stretch默认值，拉伸。表现为水平或垂直填充。
start表现为容器左侧或顶部对齐。
end表现为容器右侧或底部对齐。
center表现为水平或垂直居中对齐。
space-between表现为两端对齐。
space-around享有独立不重叠的空白空间。
space-evenly平均分配空白空间。

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

取值含义
grid-column-start水平方向占据的起始位置。
grid-column-end水平方向上占据的结束位置。(span属性)
grid-row-start垂直方向上占据的起始位置。
grid-row-end垂直方向上占据的结束位置。(span属性 )
grid-columngrid-column-start+grid-column-end的缩写。
grid-rowgrid-row-start+grid-row-end的缩写。
grid-area表示当前网格所占用的区域，名字和位置两种表示方法。
justify-self单个网格元素的水平对齐方式。
align-self单个网格元素的垂直对齐方式。
place-selfalign-self和justify-self的缩写。

3.练习

骰子的点数

<!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: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            place-items: center center;
        }
        .box div{
            width: 20px;
            height: 20px;
            background: black;
            border-radius: 50%;
        }
        .box div:nth-child(1){
            grid-area: 2/2/3/3;
        }

        .box2{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            place-items: center center;
        }
        .box2 div{
            width: 20px;
            height: 20px;
            background: black;
            border-radius: 50%;
        }
        .box2 div:nth-child(2){
            grid-area: 3/3/4/4;
        }

        .box3{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            place-items: center center;
            grid-template-areas: 
            "a1 a2 a3"
            "a4 a5 a6"
            "a7 a8 a9";
        }
        .box3 div{
            width: 20px;
            height: 20px;
            background: black;
            border-radius: 50%;
        }
        .box3 div:nth-child(2){
            grid-area: a5;
        }
        .box3 div:nth-child(3){
            grid-area: a9;
        }

        .box4{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            place-items: center center;
            grid-template-areas: 
            "a1 a2 a3"
            "a4 a5 a6"
            "a7 a8 a9";
        }
        .box4 div{
            width: 20px;
            height: 20px;
            background: black;
            border-radius: 50%;
        }
        .box4 div:nth-child(2){
            grid-area: a3;
        }
        .box4 div:nth-child(3){
            grid-area: a7;
        }
        .box4 div:nth-child(4){
            grid-area: a9;
        }

        .box5{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            place-items: center center;
            grid-template-areas: 
            "a1 a2 a3"
            "a4 a5 a6"
            "a7 a8 a9";
        }
        .box5 div{
            width: 20px;
            height: 20px;
            background: black;
            border-radius: 50%;
        }
        .box5 div:nth-child(2){
            grid-area: a3;
        }
        .box5 div:nth-child(3){
            grid-area: a7;
        }
        .box5 div:nth-child(4){
            grid-area: a9;
        }
        .box5 div:nth-child(5){
            grid-area: a5;
        }

        .box6{
            width: 100px;
            height: 100px;
            border: 1px black solid;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            place-items: center center;
            grid-template-areas: 
            "a1 a2 a3"
            "a4 a5 a6"
            "a7 a8 a9";
        }
        .box6 div{
            width: 20px;
            height: 20px;
            background: black;
            border-radius: 50%;
        }
        .box6 div:nth-child(2){
            grid-area: a3;
        }
        .box6 div:nth-child(3){
            grid-area: a7;
        }
        .box6 div:nth-child(4){
            grid-area: a9;
        }
        .box6 div:nth-child(5){
            grid-area: a4;
        }
        .box6 div:nth-child(6){
            grid-area: a6;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
    </div>
    <div class="box2">
        <div></div>
        <div></div>
    </div>
    <div class="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box4">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="box6">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

如何学好web前端

感兴趣,够努力。

ZiminLi
关注
专栏目录
前端学习（2615）：数据映射map
歌谣的博客
11-19 320
第一步 引入 第二步 计算属性
Web前端基础——列表list
weixin_56182955的博客
04-11 1578
列表 适用场景 列表：某一类相关的内容，整合到一起展示 导航：如下代码 <header> <nav> <ul> <li> <a href="#"><i></i>首页</a> </li> <li>
web 前端
m0_73205069的博客
09-19 211
知识点
前端数据映射
smz8023的博客
09-18 3206
前端数据映射—>平铺 1.树形结构的映射 const data = [{ id:1, name:'1', children:[ { id:2, name:'1-1', children:[ { id:3, name:"1-1-1" }, { id:4, name:"1-1-2", children:[ { i
前端映射 pc h5
weixin_42777161的博客
09-06 57
const cxyOrigin = process.env.cxyMobile const mDomain = process.env.mDomain const map = { 'cxy-home': cxyOrigin + '/cxy', about: mDomain + '/about', 'qzd-news': mDomain + '/qzd...
前端根据网络请求返回的数据映射新的数据
weixin_67722778的博客
03-16 530
前端根据网络请求返回的数据映射新的数据
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
根据提供的文件内容，我们可以整理出以下Web前端设计基础的知识点： 1. HTML5、CSS3、JavaScript概述 - HTML5是最新版本的超文本标记语言，用于创建网页的标准标记语言。它具有更快的访问速度、更好的搜索引擎优化...
web前端第三版习题参考答案_.docx.docx
04-04
【HTML基础】 ...网页由两部分构成：头部（）和...这些都是Web前端开发中不可或缺的部分，对于理解和创建基本的网页内容至关重要。通过练习和实际操作，可以进一步巩固这些知识点，并为更深入的前端学习打下坚实的基础。
HTML5及CSS3web前端开发技术习题答案解析.pdf
01-07
### HTML5及CSS3 Web前端开发技术习题答案解析 #### 1. HTML5与HTML4的主要区别及其解决的问题 HTML5与HTML4相比，在Web前端开发领域解决了多个关键问题，主要包括： - **浏览器间的兼容性问题**：早期不同浏览器...
《Web前端开发最佳实践》——第1章 Web前端开发概述1.1　Web前端开发的范畴
bobo79888的博客
08-06 549
本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第1章，第1.1节,作者:党　建 第1章 Web前端开发概述 本章首先会简单介绍Web前端开发的历史由来，以及前端开发的概念及其范畴，让读者对前端开发有个整体的认识，同时还会对前端开发的一些错误认识进行更正。其次会介绍一下Web前端的现状，包括互联网整体环境、浏览器的发展、网站的设计和开发现状等，让读者认识到前端开发的现状和趋势，以便...
前端开源库-map2tree
08-30
前端开源库-map2treemap2tree，用于将地图映射到树的实用程序
前端简单常用映射方法，拿到对应的值
最新发布
weixin_71854821的博客
05-08 173
【代码】前端简单常用映射方法，拿到对应的值。
前端组件数据映射解析（自定义表格生成）
yj18037616526的博客
08-13 1259
前端生成自定义表格，后端解析并合并数据
前端项目ip做域名映射
FLGB
03-19 1361
每个 server 块都配置了独立的 SSL 证书，并将请求代理到不同的服务端口。例如，假设你有两个服务，一个服务运行在 6087 端口，另一个服务运行在 6088 端口，并且你希望分别使用 service1.example.com 和 service2.example.com 来访问它们，你可以这样配置。需要注意的是，所有的 server 块都监听了相同的端口（443），但每个 server 块的 server_name 不同，因此 Nginx 可以根据请求的域名来选择匹配的 server 块进行处理。
【前端获取后端文件映射】
weixin_43091752的博客
10-08 143
前端获取后端文件映射
前端中字典 集合 映射 set() map()是什么？
gw20192019的博客
02-09 290
在字典中，存储的是[键，值]对，其中键名是用来查询特定元素的。字典和集合很相似，集合以[值，值]的形式存储元素，字典则是以[键，值]的形式来存储元素。和对象数组的去重，他们的不同点是存储形式上的不同，集合是以[值，值]的形式存储元素，字典是以[键，值]的形式存储。是没有被过滤出来的，因为本身是一个对象，就算对象中的属性和值都一样，都存储了不同的指针，所以两个对象都是不相等的。是一种叫做字典的数据结构，他们的共同点是set和map都是存储的不会重复的值，利用好这一点可以很好的做一些。
关于前端控制器中映射路径/与/*的理解
黑虎阿福的博客
01-20 1711
在web项目中，除了我们自己配置的web.xml，tomcat中同样存在web.xml，这二者之间的关系为继承关系，若我们自己配置的web.xml解决不了，那么接下来就只能去tomcat中的web.xml中查找了。无论是路径请求还是页面请求都会被拦截，假设当前请求没有对应的handle方法，那么该请求就会交由tomcat里的DefaultServlet进行处理，DefaultServlet根据请求响应对于页面后，这个页面又会被我们设置的/*拦截，这样就会。
前端传递时间映射到后端的Date类型问题
cgj19960119的博客
11-12 2250
spring boot 写法 @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8") private Date time; spring mvc 写法 @DateTimeFormat(pattern="yyyy-MM-dd HH:mm:ss") private Date orderRetur...
html浅谈之图像映射
Focus-Fe
09-25 298
或许做前端到现在你没有接触过图像映射这个东东，但是如果你是一个用过百度大搜索的同学，它就在你的面前，但是你没有注意哦。   ---------------真相就是百度首页的中图其实就用了图像映射的原理。   1.图像映射     ------------带有可点区域的图像。   2.html标签之map和area        map标签          ------...
JavaScript权威指南(第6版)：Web前端开发必备
"JavaScript权威指南(第6版)" 是由David Flanagan编写的经典JavaScript教程，专注于Web前端开发。本书自1996年首次发行以来，历经多次更新，最新的第六版于2011年出版，反映了JavaScript语言的最新发展。 在第六版...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值