web前端手册

最新推荐文章于 2024-06-08 12:53:15 发布
最新推荐文章于 2024-06-08 12:53:15 发布
阅读量1.6k 收藏 4
点赞数
文章标签： html javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caiqian97/article/details/119972452
版权

HTML基础

1. HTML 文件中的 DOCTYPE 是什么作用？

HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准

DOCTYPE 即 Document Type，网页文件的文档类型标准。

主要作用是告诉浏览器的解析器要使用哪种 HTML规范 或 XHTML规范 来解析页面。

DOCTYPE 需要放置在 HTML 文件的 <html>标签之前，如：

<!DOCTYPE html>
<html>
  ...
</html> (目前主流)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  ...
</html> (早期)

2. HTML、XML、XHTML 之间有什么区别？

它们都属于标记语言。

语言 中文名 说明
HTML4 超文本标记语言 主要用于做界面呈现。HTML 是先有实现，后面才慢慢制定标准的，导致HTML⾮常混乱和松散，语法非常的不严谨。
XML 可扩展标记语言 主要⽤于存储数据和结构。语法严谨，可扩展性强。由于 JSON 也有类似作⽤但更轻量⾼效， XML 的市场变得越来越⼩。
XHTML 可扩展超文本标记语言 属于加强版 HTML，为解决 HTML 的混乱问题而生，在语法方面变得和 XML 一样严格。另外，XHTML 的出现也催生了 HTML 5，让HTML向规范化严谨化过渡。
HTML5 超文本标记语言 在HTML的基础上进行拓展，用于页面呈现 (目前标准)

XML的要求会比较严格:

  1. 有且只能有一个根元素

  2. 大小写敏感

  3. 正确嵌套

  4. 必须双引号

  5. 必须闭合标签

    …

<?xml version="1.0" encoding="utf-8"?>
<root>
  <father id='box'>
    <child>小张</child>
    <child>小王</child>
  </father>
</root>

番外: 所以 HTML5 是HTML的新一代标准, 所谓的 H5 工程师这一词, 其实是国产词, 泛指新一代的web开发工程师,

具体H5工程师, 做什么工作方向, 还是要看需求 (比如: 移动端开发, PC端网页开发, H5小游戏开发…)

3. 前缀为 data- 开头的元素属性是什么？

这是一种为 HTML 元素添加额外数据信息的方式，被称为 自定义属性。

我们可以直接在元素标签上声明这样的数据属性：

<div id="mydiv" data-message="Hello,world" data-num="123"></div>

也可以使用 JavaScript 来操作元素的数据属性：

let mydiv = document.getElementById('mydiv')

// 读取
console.log(mydiv.dataset.message)

// 写入
mydiv.dataset.foo = "bar!!!"

注意：在各种现代前端框架出现后，这种原生的自定义属性已经变得不太常用了, 以前的使用频率非常高, 所以我们知道即可。

例如: vue实现删除功能时需要 id, 可以直接传值

<tr v-for="item in list" :key="item.id">
  <td>张三</td>
  <td>18</td>
  <td>体育好</td>
  <td>
    <button @click="del(item.id)">删除</button>
    <button>编辑</button>
  </td>
</tr>

4. 谈谈你对 HTML 语义化的理解？

考察核心点: 语义化的好处 (利于SEO, 可阅读性更好)

语义化之前：

在提倡语义化之前，你可能会使用各种各样的标签去实现同样的功能，比如：

  • 使用 span、div、p、a 等做文字, 做按钮
  • 使用 div 做一切

从功能方面来说，这确实是不存在什么问题的，完全可以达到功能效果。但这不符合直觉，非常不友好：

  • 对人不友好：阅读代码的人不能一眼看出代码的功能
  • 对机器不友好：解析代码的程序不能很好的对这些元素进行分类处理

语义化之后：

为了解决上面说的问题，HTML5 规范提倡语义化标签，即使⽤恰当语义的 HTML 标签让⻚⾯具有良好的结构与含义，⽐如：

  • <p> 标签就代表段落
  • <article> 代表正⽂内容
  • <button>代表按钮
  • <header> 代表头部
  • 等等…

语义化的好处：

对开发者的好处 对机器/程序的好处
使⽤了语义化标签的程序，可读性明显增强，开发者可以比容易和清晰地看出⽹⻚的结构；这也更利于整个开发团队的协作开发和后续维护工作 带有语义的网页代码在⽂字类应用上的表现⼒丰富，利于搜索引擎爬⾍程序来爬取和提取出有效的信息；语义化标签还⽀持读屏软件，根据⽂章可以⾃动⽣成⽬录等，方便特殊人群无障碍的使用这些网页程序。

语义化的适用性：

语义化适合内容型的网站来使用（如简书、知乎），对其⽹站内容的传播有很⼤帮助。

5. HTML5 对比 HTML4 有哪些不同之处？

考察点: 是否了解 html5 新增的一些新特性

不同点 备注说明
只有一种 DOCTYPE ⽂件类型声明(统一标准) <!DOCTYPE html>
增加了一些新的标签元素(功能, 语义化) section, video, progress, nav, meter, time, aside,
canvas, command, datalist, details, embed, figcaption,
figure, footer, header, hgroup…
input 支持了几个新的类型值 date, email, url 等等
新增了一些标签属性 charset（⽤于 meta 标签）；async（⽤于 script 标签）
新增的全域属性 contenteditable, draggable…
hidden…
新增API 本地存储, 地理定位, Canvas绘图, 拖拽API, 即时通信WebSocket…

获取地理定位: navigator.geolocation.getCurrentPosition(successCallback, errorCallback) (为了安全, 需要在 https 网站使用)

记忆角度: 更标准, 新增标签, 新增type表单属性, 新增全域属性, 新增API…

6. meta 标签有哪些常用用法？

<meta> 标签的具体功能一般由 name/http-equiv 和 content 两部分属性来定义。

  • 如果设置 name 属性，则它描述的是网页文档的信息（例如：作者、⽇期和时间、⽹⻚描述、 关键词）
  • 如果设置 http-equiv 属性，则它描述的相当于是 HTTP 响应头信息（例如：网页内容信息, 网页缓存等）

一些常用的功能及写法：

  1. 设置网页关键词 (SEO)
<meta name="keywords" content="电商,好货,便宜">
  1. 设置网页视口（viewport）控制视⼝的⼤⼩、缩放和⽐例等 (移动端开发)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  1. 设置 http 响应头：Content-Type 网页内容类型 (字符集)
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<!-- 设置字符集可简写为 -->
<meta charset="utf-8">

7. img 标签的 srcset 的作用是什么？

考察点: 处理响应式图片的方式 (css媒体查询换的是背景图片, 而不是 img 标签的 src)

开发者和设计师们竞相寻求 处理响应式图片 的方法。这的确是一个棘手的问题 ，因为我们对同一个网站在众多设备宽度下，

使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像？

你愿意在你的手机上加载一个巨大的（虽然更漂亮的）图像？这个问题令人左右为难。 博客链接

其实通过使用 img 标签的 srcset 属性，可定义一组额外的图片集合，让浏览器根据不同的屏幕状况选取合适的图片来显示。

也就是图片的响应式处理能力。

如果你的响应式需求比较简单，只需要针对屏幕的不同 dpr （device pixel ratio，设备像素比）来决定图片的显示的话，

dpr 设备像素比, 越高, 能够显示的越清晰 (dpr: 2, dpr: 3)

那么就只要这么写：

<img srcset="320.png 1x, 640.png 2x, 960.png 3x" />

对于可变宽度的图像，我们使用srcset搭配w描述符以及sizes属性 。

  • w描述符告诉浏览器列表中的每个图象的宽度。

  • sizes属性需要至少包含两个值，是由逗号分隔的列表。

根据最新规范，如果srcset中任何图像使用了w描述符，那么必须要设置sizes属性。

sizes属性有两个值：

  1. 第一个是媒体查询条件；

  2. 第二个是图片对应的尺寸值，

    在特定媒体条件下，此值决定了图片的宽度。

    需要注意是，源图尺寸值不能使用百分比，如果要用100%, vw是唯一可用的CSS单位。

<img alt="img元素srcset属性浅析"
  srcset="
    320.png 320w, 
    480.png 480w, 
    640.png 640w"
  sizes="
    (max-width: 320px) 100vw, 
    (max-width: 360px) 320px,
    (max-width: 480px) 360px,
    (max-width: 640px) 480px,
    640px"
  src="640.png"
/>

为 img 定义以上属性后，浏览器的工作流程如下：

  1. 检查设备的实际宽度
  2. 检查 img 标签的 sizes 属性中定义的媒体查询条件列表，并计算哪个条件最先匹配到
  3. 得到图片此时的响应式宽度
  4. 加载 srcset 中最接近, 最适合媒体查询匹配到的宽度的图片

注意: 测试时, 清除缓存测试, 因为一旦加载了高清图, 就不会也没有必要, 回过去再用小图替换了

且我们无法确定究竟显示哪张图像，因为每个浏览器根据我们提供的信息挑选适当图像的算法是有差异的。

(译者注：srcset和size列表是对浏览器的一个建议(hint)，而非指令。由浏览器根据其能力、网络等因素来决定。)

8. 响应式图片处理优化: Picture 标签

考察点: 响应式图片处理

picture元素就像是图像和其源的容器。浏览器仍然需要img元素，用来表明需要加载的图片

在 <picture> 下可放置零个或多个<source>标签、以及一个<img>标签，为不同的屏幕设备和场景显示不同的图片。

如果source匹配到了, 就会优先用匹配到的, 如果没有匹配到会往下继续找

使用picture元素选择图像，不会有歧义。

浏览器的工作流程如下：

  • 浏览器会先根据当前的情况，去匹配和使用<source>提供的图片

  • 如果未匹配到合适的<source>，就使用<img>标签提供的图片

<picture>
  <source srcset="640.png" media="(min-width: 640px)">
  <source srcset="480.png" media="(min-width: 480px)">
  <img src="320.png" alt="">
</picture>

9. 在 script 标签上使用 defer 和 async 的区别是什么？

明确: defer 和 async 的使用, 可以用于提升网页性能

script标签存在两个属性，defer和async，因此 script标签 的使用分为三种情况：

  1. <script src="example.js"></script>

    没有defer或async属性，浏览器会立即加载并执行相应的脚本。

    不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载

  2. <script async src="example.js"></script>

    有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；

  3. <script defer src="example.js"></script>

    有了defer属性，加载后续文档的过程和js脚本的加载是并行进行的(异步)，此时的js脚本仅加载不执行, js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLo请添加图片描述
    aded事件触发执行之前。

下图是使用了 defer、async、和未使用时的运行情况对比：

请添加图片描述

【上图的图例说明】

绿线：HTML 的解析时间

蓝线：JS 脚本的加载时间

红色：JS 脚本的执行时间

从图中我们可以明确一下几点：

1.defer和async在网络加载过程是一致的，都是异步执行的；(放在页面顶部, 也不会阻塞页面的加载, 与页面加载同时进行)

2.两者的区别, 脚本加载完成之后, async是立刻执行, defer会等一等 (等前面的defer脚本执行, 等dom的加载)

所以, js脚本加上 async 或 defer, 放在头部可以减少网页的下载加载时间, 如果不考虑兼容性, 可以用于优化页面加载的性能

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.js"></script>

10. 前端做本地数据存储的方式有哪些？

请添加图片描述

  1. Cookies
  2. localStorage
  3. sessionStorage
  4. Web SQL
  5. IndexedDB

11. 以上几种前端存储的区别是什么？

方式名称 标准说明 功能说明
Cookies HTML5 前加入 1.会为每个请求自动携带所有的Cookies数据，比较方便，但是也是缺点，浪费流量；
2.每个domain(站点)限制存储20个cookie；
3.容量只有4K
4.浏览器API比较原始，需要自行封装操作。 (js-cookie)
localStorage HTML5 加入 1.兼容IE8+，操作方便；
2.永久存储，除非手动删除；
3.容量为5M
sessionStorage HTML5 加入 1.功能基本与 localStorage 相似，但当前页面关闭后即被自动清理；
2.与Cookies、localStorage 不同点是不能在所有同源窗口间共享，属于会话级别的存储
Web SQL 非标准功能 1.2010年已被废弃，但一些主流浏览器中都有相关的实现；
2.类似于 SQLite 数据库，是一种真正意义上的关系型数据库，⽤SQL进⾏操作；
IndexedDB HTML5 加入 1.是一种 NoSQL 数据库，⽤键值对进⾏储存，可进⾏快速读取操作；
2.适合复杂 Web存储场景，⽤JS操作⽅便 (前端大量存数据的场景较少, 如果有, 可以用)
3.存储空间容量, 大于等于 250MB，甚至没有上限

CSS基础

1. CSS选择器的优先级是怎么样的？

CSS选择器的优先级顺序：

内联样式 > ID选择器 > 类选择器 > 标签选择器

优先级的计算：

优先级是由 A、B、C、D 四个值来决定的，具体计算规则如下

  • A={如果存在内联样式则为1，否则为0}
  • B={ID选择器出现的次数}
  • C={类选择器、属性选择器、伪类选择器出现的总次数}
  • D={标签选择器、伪元素选择器出现的总次数}

计算示例：

样式一：

/*
  A=0   不存在内联样式
  B=0   不存在ID选择器
  C=1   有一个类选择器
  D=3   有三个标签选择器

  最终计算结果：{0,0,1,3}
*/
div ul li .red {
    ... }

样式二：

/*
  A=0   不存在内联样式
  B=1   有一个ID选择器
  C=0   不存在类选择器
  D=0   不存在标签选择器

  最终计算结果：{0,1,0,0}
*/
#mydiv {
    ... }

计算完成后，我们通过从A到D的顺序进行值的大小比较，权重由A到D从高到低，只要比较出最大值即可。例如上面的两个样式：

1. 样式一的A=0，样式二的A=0  【相等，继续往下比较】
2. 样式一的B=0 < 样式二的B=1 【样式二的大，不继续往下比了，即认为样式二的优先级更高】

2. 通过 CSS 的哪些方式可以实现隐藏页面上的元素？

方式 说明
opacity: 0 通过将元素的透明度设置为0，实现看起来隐藏的效果；但是依然会占用空间并可以进行交互
visibility: hidden 与透明度为0的方案非常类似，会占据空间，但不可以进行交互
overflow: hidden 只会隐藏元素溢出的部分；占据空间且不可交互
display: none 可以彻底隐藏元素并从文档流中消失，不占据空间也不能交互，且不影响布局
z-index: -9999 通过将元素的层级置于最底层，让其他元素覆盖住它，达到看起来隐藏的效果
transform: scale(0,0) 通过将元素进行缩放，缩小为0；依然会占据空间，但不可交互
left: -9999px 通过将元素定位到屏幕外面，达到看起来看不到的效果

3. px、em、rem之间有什么区别？

考察点: 相对单位, 绝对单位, 以及适配问题

单位名称 说明
px 绝对单位。代表像素数量，页面会按照给出的精确像素进行展示
em 相对单位。默认的基准点为父元素的字体大小，而如果自身定义了字体大小则按自身的来算。所以即使在同一个页面内，1em可能不是一个固定的值。
rem 相对单位。可以理解为 root em，即基准点为根元素<html>的字体大小。rem是CSS3中新增单位，Chrome/FireFox/IE9+都支持, 一般用于做移动端适配

正常开发 px 使用率较高, 如果要做 rem 适配, 会用到 rem 单位!

rem布局的原理:

  1. 使用 rem 为单位
  2. 动态的设置 html font-size (媒体查询, js设置, 插件设置都可以)

webpack有工具, 可以写 px, 自动转 rem https://youzan.github.io/vant/#/zh-CN/advanced-usage

4. 让元素水平居中的方法有哪些？

方法一：使用 margin

通过为元素设置左右的 margin 为 auto，实现让元素居中。

<div class="center">本内容会居中</div>

.center {
   height: 500px;
   width: 500px;
   background-color: pink;
   margin: 0 auto;
}

方式二: 转成行内块, 给父盒子设置 text-align: center

<div class="father">
	<div class="center">我是内容盒子</div>
</div>

.father {
   
  text-align: center;
}
.center {
   
  width: 400px;
  height: 400px;
  background-color: pink;
  display: inline-block;
}

方法三：使用 flex 布局

使用 flex 提供的子元素居中排列功能，对元素进行居中。

<div class="father">
	<div class="center">我是内容盒子</div>
</div>

.father {
   
  display: flex;
  background-color: skyblue;
  justify-content: center;
  align-items: center;
}
.center {
   
  width: 400px;
  height: 400px;
  background-color: pink;
}

方式四: 使用定位布局

<div class="father">
  <div class="center">我是内容盒子</div>
</div>

.father {
   
  background-color: skyblue;
  position: relative;
  height: 500px;
}
.center {
   
  width: 400px;
  height: 400px;
  background-color: pink;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

【更多方式参考】实现水平居中垂直居中

5. 在 CSS 中有哪些定位方式？

也就是 position 样式的几个属性。

static 正常文档流定位

  • 此时设置 top、right、bottom、left 以及 z-index 都无效

  • 块级元素遵循从上往下纵向排列，行级元素遵循从左到右排列

relative 相对定位

这个 “相对” 是指相对于正常文档流的位置。

absolute 绝对定位

当前元素相对于 **最近的非 static 定位的祖先元素 **来确定自己的偏移位置。

例如，当前为 absolute 的元素的父元素、祖父元素都为 relative，则当前元素会相对于父元素进行偏移定位。

fixed 固定定位

当前元素相对于屏幕视口 viewport 来确定自己的位置。并且当屏幕滚动时，当前元素的位置也不会发生改变。

sticky 粘性定位

这个定位方式有点像 relative 和 fixed 的结合。当它的父元素在视口区域、并进入 top 值给定的范围内时，当前元素就以 fixed 的方式进行定位，否则就以 relative 的方式进行定位。

<style>
  * {
     
    margin: 0;
    padding: 0;
  }
  .header {
     
    width: 100%;
    height: 100px;
    background-color: orange;
  }
  .nav {
     
    width: 100%;
    height: 200px;
    background-color: pink;
    position: sticky;
    top: 0px;
  }
  .main {
     
    width: 100%;
    height: 100px;
    background-color: skyblue;
  }

</style>

<div class="header">我是头部</div>
<div class="nav">我是导航</div>
<div class="container">
    <div class="main">我是主体部分1</div>
    <div class="main">我是主体部分2</div>
    <div class="main">我是主体部分3</div>
    <div class="main">我是主体部分4</div>
    <div class="main">我是主体部分5</div>
    <div class="main">我是主体部分6</div>
    <div class="main">我是主体部分7</div>
    <div class="main">我是主体部分8</div>
</div>

6. 如何理解 z-index？

可以将它看做三维坐标系中的z轴方向上的图层层叠顺序。

元素默认的 z-index 为 0，可通过修改 z-index 来控制设置了postion 值的元素的图层位置。

请添加图片描述

可以将这种关系想象成一摞书本，通过 z-index 可以改变一本书在这摞书中的上下位置。

z-index的小坑, 如果父辈元素有定位, 且配置了z-index, 优先按照父辈元素的定位的z-index进行比较层级

<style>
  .father {
     
    width: 100%;
    height: 200px;
    position: relative;
    background-color: skyblue;
    z-index: 1;
  }
  .son {
     
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    left: 0;
    top: 0;
    z-index: 999;
  }
  .box2 {
     
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: blue;
    left: 0;
    top: 0;
    z-index: 100;
  }
</style>

<div class="father">
  <div class="son"></div>
</div>

<div class="box2"></div>

7. 如何清除浮动 ？

考察: css基本功

可以有以下几种方式：

  1. 定高法

  2. 使用一个空的div，并设置样式

<div style="clear:both"></div>

  1. 为父元素添加 overflow: hidden

  2. 定义一个 clearfix 样式类

.clearfix:after {
   
  content: "";  			/*设置内容为空*/
  height: 0;    			/*高度为0*/
  line-height: 0;			/*行高为0*/
  display: block;			/*将文本转为块级元素*/
  visibility: hidden;	/*将元素隐藏*/
  clear: both; 				/*清除浮动*/
}

.clearfix {
   
  zoom: 1; 				/*为了兼容IE*/
}

说明：当前 flex 已成为主流布局方式，适应性强, 且稳定, 所以浮动使用率目前已逐步降低。

8. 谈谈你对 BFC 的理解？

什么是 BFC：

BFC 的全称是 Block Formatting Context，块级格式化上下文。这是一个用于在盒模型下布局块级盒子的独立渲染区域，

将处于BFC区域内和区域外的元素进行互相隔离。

何时会形成 BFC：

满足下列条件之一就可触发BFC：

  • HTML根元素
  • position 值为 absolute 或 fixed
  • float 值不为 none
  • overflow 值不为 visible
  • display 值为 inline-block、table-cell 或 table-caption

BFC 的应用场景：

  1. 场景一：防止两个相邻块级元素的上下 margin 发生重叠 (上下margin合并问题)

属于同一 BFC 的, 两个相邻块级子元素的上下 margin 会重叠，如果想让它们不重叠，可通过让这两个相邻块级子元素分属于不同的BFC。

以下示例代码中的两个盒子的上下外边距会重合（即它们都设置了10px的外边距，我们期望它们之间的间距是 20px，但实际效果却只有 10px）：

<style>
  .box1 {
     
    width: 200px;
    height: 100px;
    background-color: red;
    margin-bottom: 10px; /* 下外边距为 10px */
  }

  .box2 {
     
    width: 200px;
    height: 100px;
    background-color: green;
    margin-top: 10px;  /* 上外边距为 10px */
  }
</style>

<div class="box1"></div>
<div class
最低0.47元/天 解锁文章
caiqian97
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web操作手册V1.0.pdf
07-14
web操作手册V1.0.pdfweb操作手册V1.0.pdfweb操作手册V1.0.pdfweb操作手册V1.0.pdfweb操作手册V1.0.pdfweb操作手册V1.0.pdfweb操作手册V1.0.pdfweb操作手册V1.0.pdfweb操作手册V1.0.pdf
前端开发手册大全
Java
07-11 1936
web前端开发手册大全(学习参考) html中文中文参考手册：https://www.html.cn/shouce/html/1 .html JavaScript中文参考手册：https://www.html.cn/shouce/js/11.html CSS 3.0参考手册：https://www.html.cn/doc/css3/ CSS 教程手册（新）：https://www.html.cn/book/css/properties/border/index.htm Bootstrap参考手册：http:
前端开发手册
最新发布
qq_52869537的博客
06-08 891
必须使用 camelCase 驼峰命名必须指定类型必须加上注释，表明其含义必须加上 required 或者 default，两者二选其一如果有业务需要，必须加上 validator 验证props: {// 组件状态，用于控制组件的颜色status: {return ['succ','info','error'== -1},// 用户级别，用于显示皇冠个数必须使用 camelCase 驼峰命名必须指定类型必须加上注释，表明其含义。
【前端基础】前端速学手册（part1）HTML
Qiqy 的博客
08-12 346
前端手册（part1）HTML 1.1 什么是HTML(·-·？？) HTML是来描述网页的一种语言，不是编程语言，是一种超文本标记语言. 标记语言是一套标记标签，来描述网页. HTML文档包含了HTML标签及文本内容，也叫web页面. 1.1.1HTML标记标签： 由尖括号包围且成对出现，例：<p></p> <p> </p> <p></p> 标签对是开始与结束标签也称开放与闭合标签. 1.1.2HTML元素： 严格来讲, 一个
Web移动端实现自适应缩放界面的方法汇总
油墨香^-^的博客
09-14 3861
实现没办法，我后面尝试，通过userAgent对ipad机型(ipad、macintosh)特殊处理，直接获取所有包含了文字的div、p、span等元素，放大font-size。position：fixed，宽高显示有问题 -- 设置固定宽度，比如375px，固定高度；发现可以处理，没毛病！但是也有些缺陷，没办法在一开始处理字体，因为元素还没有初始化，而等界面加载后再刷字体大小，界面会闪现一次。但是坑来了：真机有问题，发现在ipad的safari上，页面是放大了，但是字段根本就没变化！
Web前端开发规范手册
03-24
Web 前端开发规范手册 摘要：本手册旨在提高团队协作效率、便于后台人员添加功能及前端后期优化维护，输出高质量的文档。本手册涵盖了文件规范、CSS 书写规范、html 书写规范、JavaScript 书写规范、图片规范、注释...
WEB前端开发手册合集.zip
06-26
CSS，Ajax，Bootstrap，DOM文档对象，easyUI，EXT，HTML ，ionic，JavaScript，jQuery ，Node.js，Sass ，Underscore，Vue.js ，Webpack ，XML 等等全套开发手册
Web前端手册
01-05
《Web前端手册》是一部全面覆盖Web前端核心技术的综合指南，主要包含了VBScript、JavaScript、CSS以及DHTML四个重要领域的知识。这份手册集成了这四个关键元素，为前端开发者提供了详尽的学习资料，帮助他们深入理解...
[最完整的前端学习手册]——面向对象
weixin_48683052的博客
08-12 916
注：json字符串和普通对象的区别：json字符串会直接忽略function(本质函数，有new关键字介入改变this指向)console.log("猫")}}​js的对象都是由原型对象拷贝而来，原型对象也由自己的原型拷贝而来，这样就形成一条拷贝链，将这条拷贝链称为原型链当一个对象，去调用某个方法，或者属性，该对象先在自己的属性和方法中找，如果没找到就在原型上找，如果原型也没有，就在原型的原型上继续寻找，找到后直接调用。......
在前端开发中,什么叫移动设备上的视口?如何通过header标签中的meta属性设置页面的视口。
昊虹AI笔记
08-26 729
在前端开发中，什么叫移动设备上的视口？
WEB前端开发规范
kylvia的专栏
03-07 665
1. 基本原则1.1 结构、样式、行为分离尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。1.2 缩进统一两个空格缩进（总之缩进统一即可），不要使用 Tab 或者 Tab、空格混搭。1.3 文件编码使用不带 BOM 的 UTF-8 编码。 在 HTML中指定编码 <meta charset="utf-8"> ； 无需使用 @charset 指定样式表的编码，它默认为
前端服务器部署入手教程
热门推荐
weixin_47472689的博客
01-07 1万+
前端入手教程：如何将前端项目部署到服务器 分享我的做法，可供参考操作系统win10 总计分为以下几步： 购买服务器：阿里云、腾讯云都可以(这里我以腾讯云为演示操作) 使用 FinalShell SSH工具链接服务器 下载宝塔 步骤演示： 1.打开腾讯云官网腾讯云服务器链接 以下都是可以0元试用，这里我选择的时轻量应用服务器它的配置是1核1G仅用来测试完全足够使用后续不够自行选择高配服务器 镜像选择系统镜像_centos,当然你也可以选择其他的 购买完成之后的页面 点开之后重置密码，确
Viewport学习笔记(一)
兰丝龙 专栏
12-26 2524
//--------------------------------------- var myData1 = [ ['操作菜单1', '操作菜单1'], ['操作菜单操作菜单操作菜单操作菜单操作菜单2', '操作菜单2'], ['操作菜单3', '操作菜单3'], ['操作菜单4', '操作菜单4'],
Html开发之viewport的使用
LCore的专栏
10-31 2735
近年来随着移动端的快速发展,越来越多传统的web应用需要适配移动终端,下面记录一下如何通过viewport实现简单的不同型号的手机端的适配问题。不过在此之前,介绍一下如何通过Chrome浏览器,调试在移动终端上的效果。 调试工具      首先我们打开chrome谷歌浏览器,输入天猫地址(实现了手机端适配),按F12进入开发者模式。进入如下的界面:       接下来点击右下方圈红的
2023web前端面试手册
01-31
2023年的web前端面试手册是一本权威的指导手册，涵盖了当前最新的前端技术和面试题目。手册从基础知识到高级技术都有详细的介绍和讲解，能够帮助面试者全面准备面试。 首先，手册会对前端基础知识进行详细讲解，包括HTML、CSS和JavaScript等内容，帮助面试者复习和巩固基础知识。同时，手册也会介绍一些新的前端技术，比如Vue.js和React等，让面试者了解最新的前端趋势和技术。 其次，手册会列举一些常见的前端面试题目，包括HTML、CSS、JavaScript等各个方面的题目，帮助面试者了解面试的考察重点和难点。同时，手册还会提供一些解题思路和技巧，帮助面试者更好地准备面试。 此外，手册还会介绍一些常见的面试技巧和注意事项，比如如何回答面试问题、如何展示自己的技术能力等，帮助面试者在面试中更加游刃有余。 总的来说，2023年的web前端面试手册是一本全面且权威的指导书，能够帮助面试者系统地准备前端面试，提升应聘成功率。无论是新手还是有经验的前端开发者，都能从这本手册中受益匪浅。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值