Html-Version:
1. In welchen Browsern wurden die von Ihnen erstellten Seiten getestet? Was sind die Kerne dieser Browser?
2. Am Anfang jeder HTML-Datei steht etwas sehr Wichtiges: Doctype. Wissen Sie, wozu das dient?
Antwort: Die -Deklaration befindet sich ganz vorne im Dokument, vor dem Dieses Tag teilt dem Browser mit, welche HTML- oder XHTML-Spezifikation das Dokument verwendet. (Wichtiger Punkt: Teilen Sie dem Browser mit, nach welcher Spezifikation die Seite analysiert werden soll)
3.Was ist der Quirks-Modus? Was ist der Unterschied zwischen ihm und dem Standardmodus?
Antwort:
Ab IE6 wurde der Standardsmodus eingeführt. Im Standardsmodus versucht der Browser, standardkonforme Dokumente genauso korrekt zu verarbeiten wie im angegebenen Browser.
Vor IE6 war CSS nicht ausgereift genug, daher hatten Browser vor IE5 nur eine schlechte Unterstützung für CSS. Allerdings tritt zu diesem Zeitpunkt das Problem auf, da viele Seiten darauf basieren Wenn IE6 CSS unterstützt, werden diese Seiten nicht ordnungsgemäß angezeigt. Wie kann sichergestellt werden, dass die vorhandenen Seiten nicht zerstört werden, und ein neuer Rendering-Mechanismus bereitgestellt werden?
Beim Schreiben von Programmen stoßen wir häufig auf dieses Problem: Wie kann sichergestellt werden, dass die ursprüngliche Schnittstelle unverändert bleibt und leistungsfähigere Funktionen bereitgestellt werden, insbesondere wenn die neuen Funktionen nicht mit den alten Funktionen kompatibel sind? Ein üblicher Ansatz bei solchen Problemen besteht darin, Parameter und Verzweigungen hinzuzufügen. Das heißt, wenn ein bestimmter Parameter wahr ist, verwenden wir die neue Funktion, und wenn der Parameter nicht wahr ist, verwenden wir die alte Funktion, sodass dies der Fall ist nicht zerstören Das Originalprogramm bietet auch neue Funktionen. IE6 macht etwas Ähnliches. Da niemand DTD auf vorherigen Seiten schreiben würde, geht IE6 davon aus, dass diese Seite eine bessere Unterstützung für das CSS-Layout verwendet , das vorherige Layout ist kompatibel. Dies ist der Quirks-Modus (Quirks-Modus, seltsamer Modus, seltsamer Modus).
Unterschied:
Generell gibt es drei Unterschiede im Layout, der Stilanalyse und der Skriptausführung.
Box-Modell: Wenn Sie im W3C-Standard die Breite und Höhe eines Elements festlegen, bezieht sich dies auf die Breite und Höhe des Inhalts des Elements. Im Quirks-Modus umfassen die Breite und Höhe des IE auch Abstand und Rand.
Legen Sie die Höhe und Breite von Inline-Elementen fest: Im Standardmodus wird die Einstellung von Breite und Höhe für Inline-Elemente wie nicht wirksam, im Quirks-Modus jedoch.
Festlegen der Höhe in Prozent: Im Standardmodus wird die Höhe eines Elements durch den darin enthaltenen Inhalt bestimmt. Wenn das übergeordnete Element keine Höhe in Prozent festlegt, ist es für das untergeordnete Element ungültig, eine Höhe von festzulegen Prozentsatz mit margin:0 Auto legt die horizontale Zentrierung fest: Mit margin:0 auto kann das Element im Standardmodus horizontal zentriert werden, im Quirks-Modus schlägt dies jedoch fehl.
(Es gibt noch viel mehr. Es spielt keine Rolle, was er antwortet. Der Schlüssel liegt darin, zu sehen, ob die Antworten, auf die er gestoßen ist, aus seiner eigenen Erfahrung stammen, ob er sie nur aus Artikeln gelesen hat oder es gar nicht weiß sie überhaupt.)
4.Was sind die Vorteile des Div-CSS-Layouts gegenüber dem Tabellenlayout?
5.a: Was sind die Gemeinsamkeiten und Unterschiede zwischen dem Alt und dem Titel von img? b: Was sind die Gemeinsamkeiten und Unterschiede zwischen Strong und Em?
Antwort:
a:
b:
6. Können Sie den Unterschied zwischen progressiver Verbesserung und eleganter Degradation beschreiben?
Unterschied: Graceful Degradation geht vom komplexen Status Quo aus und versucht, das Angebot an Benutzererfahrung zu reduzieren, während die progressive Verbesserung von einer sehr einfachen, funktionalen Version ausgeht und sich weiter ausdehnt, um sich an die Bedürfnisse der zukünftigen Umgebung anzupassen. Degradation (funktionaler Verfall) bedeutet, nach hinten zu blicken; fortschreitende Verbesserung bedeutet, nach vorne zu blicken und gleichzeitig die Wurzeln in einem sicheren Bereich zu halten.
„Graceful Downgrade“-Perspektive
Die „anmutige Verschlechterung“-Ansicht besagt, dass Websites für die fortschrittlichsten und vollständigsten Browser entworfen werden sollten. Ordnen Sie das Testen von Browsern, die als „veraltet“ gelten oder fehlende Funktionen aufweisen, in der letzten Phase des Entwicklungszyklus an und beschränken Sie die Testobjekte auf die Vorgängerversion gängiger Browser (wie IE, Mozilla usw.).
Nach diesem Designparadigma wird davon ausgegangen, dass ältere Browser nur ein „schlechtes, aber passables“ Surferlebnis bieten. Sie können einige kleine Anpassungen vornehmen, um sie an einen bestimmten Browser anzupassen. Da sie jedoch nicht im Mittelpunkt unserer Aufmerksamkeit stehen, werden andere Unterschiede außer der Behebung größerer Fehler ignoriert.
„Progressive Enhancement“-Perspektive
Die Perspektive der „progressiven Verbesserung“ geht davon aus, dass dem Inhalt selbst Aufmerksamkeit geschenkt werden sollte.
Inhalte sind der Grund, warum wir eine Website erstellen. Einige Websites zeigen es an, andere sammeln es, einige suchen danach, einige betreiben es und einige Websites enthalten sogar alle oben genannten Informationen, aber das Gleiche ist, dass es sich bei allen um Inhalte handelt. Dies macht „progressive Verbesserung“ zu einem vernünftigeren Designparadigma. Aus diesem Grund wurde es sofort von Yahoo! übernommen und zum Aufbau seiner Strategie „Graded Browser Support“ (Graded Browser Support) verwendet.
Dann kommt hier das Problem. Jetzt sieht der Produktmanager, dass die Webseiteneffekte von IE6, 7 und 8 viel weniger abgerundete Ecken und Schatten (CSS3) haben als moderne Browser höherer Versionen und dass sie Kompatibilität erfordern (verwenden Sie Bildhintergründe und verzichten Sie auf CSS3). ihn überzeugen?
(Freies Spielen)
7. Warum ist es effektiver, mehrere Domainnamen zum Speichern von Website-Ressourcen zu verwenden?
8. Bitte sprechen Sie über Ihr Verständnis der Bedeutung von Webstandards und Standardsetzungsorganisationen.
(Keine Standardantwort) Webstandards und Standardisierungsorganisationen sind alle darauf ausgelegt, die Entwicklung des Webs „gesünder“ zu machen. Entwickler folgen einheitlichen Standards, reduzieren Entwicklungsschwierigkeiten und Entwicklungskosten und SEO wird besser Der Missbrauch von Code führt nicht zu verschiedenen Fehlern und Sicherheitsproblemen und verbessert letztendlich die Benutzerfreundlichkeit der Website.
9.Bitte beschreiben Sie den Unterschied zwischen Cookies, sessionStorage und localStorage?
sessionStorage wird zum lokalen Speichern von Daten in einer Sitzung verwendet. Auf diese Daten kann nur von Seiten in derselben Sitzung zugegriffen werden, und die Daten werden zerstört, wenn die Sitzung endet. Daher handelt es sich bei sessionStorage nicht um einen dauerhaften lokalen Speicher, sondern nur um einen Speicher auf Sitzungsebene. LocalStorage wird für die dauerhafte lokale Speicherung verwendet, sofern die Daten nicht aktiv gelöscht werden.
Der Unterschied zwischen Webspeicher und Cookies
10. Beschreiben Sie kurz den Unterschied zwischen src und href.
Antwort:
src wird verwendet, um das aktuelle Element zu ersetzen, und href wird verwendet, um eine Verbindung zwischen dem aktuellen Dokument und der referenzierten Ressource herzustellen.
src ist die Abkürzung für „Quelle“, die auf den Speicherort einer externen Ressource verweist. Der verwiesene Inhalt wird an der Stelle des aktuellen Tags in das Dokument eingebettet, und die Ressource, auf die verwiesen wird, wird heruntergeladen und auf das Dokument angewendet werden, beispielsweise ein JS-Skript, Elemente wie IMG-Bilder und Frames.
Wenn der Browser dieses Element analysiert, wird das Herunterladen und Verarbeiten anderer Ressourcen angehalten, bis die Ressource geladen, kompiliert und ausgeführt wird. Das Gleiche gilt für Elemente wie Bilder und Frames, ähnlich wie beim Einbetten der gezeigten Ressource in das aktuelle Tag. Aus diesem Grund wird das js-Skript auch unten und nicht im Kopf platziert.
href ist die Abkürzung für Hypertext Reference, die auf den Speicherort der Netzwerkressource verweist und einen Link zum aktuellen Element (Anker) oder aktuellen Dokument (Link) herstellt, wenn wir
zum Dokument hinzufügen
Dann erkennt der Browser das Dokument als CSS-Datei, lädt die Ressourcen parallel herunter und stoppt die Verarbeitung des aktuellen Dokuments nicht. Aus diesem Grund wird empfohlen, zum Laden von CSS die Link-Methode anstelle der @import-Methode zu verwenden.
11. Welche Bildformate werden Ihrer Meinung nach bei der Webseitenproduktion verwendet?
Antwort:
png-8, png-24, jpeg, gif, svg.
Aber keine der oben genannten Antworten sind die endgültigen Antworten, die der Interviewer haben möchte. Der Interviewer möchte Webp, Apng hören. (Achten Sie auf neue Technologien und neue Dinge)
Populärwissenschaft Webp: WebP-Format, ein von Google entwickeltes Bildformat, um das Laden von Bildern zu beschleunigen. Das Bildkomprimierungsvolumen beträgt nur etwa 2/3 von JPEG und kann eine Menge Serverbandbreitenressourcen und Datenspeicherplatz einsparen. Bekannte Websites wie Facebook Ebay haben damit begonnen, das WebP-Format zu testen und zu verwenden.
Bei gleicher Qualität ist das Volumen von Bildern im WebP-Format 40 % kleiner als das von Bildern im JPEG-Format.
Apng: Der vollständige Name lautet "Animated Portable Network Graphics", eine Bitmap-Animationserweiterung von PNG, mit der dynamische Bildeffekte im PNG-Format erzielt werden können. Es wurde 2004 geboren, wurde jedoch von großen Browserherstellern nicht unterstützt. Bis es kürzlich von iOS Safari 8 unterstützt wurde, wird erwartet, dass es GIF ersetzt und zum dynamischen Grafikstandard der nächsten Generation wird.
12. Wissen Sie, was Mikroformate sind? Sprechen Sie über Verständnis. Sollten Mikroformate in Front-End-Builds berücksichtigt werden?
Antwort:
Mikroformate sind eine Sammlung maschinenlesbaren semantischen XHTML-Vokabulars und ein offener Standard für strukturierte Daten. Es handelt sich um ein spezielles Format, das für spezielle Anwendungen entwickelt wurde.
Vorteile: Fügen Sie intelligente Daten zu Webseiten hinzu, sodass Website-Inhalte zusätzliche Tipps in der Ergebnisoberfläche der Suchmaschine anzeigen können. (Anwendungsbeispiel: Douban, bei Interesse selbst googeln)
13. Nachdem der CSS/JS-Code online ist, optimieren Entwickler häufig die Leistung. Ab dem Zeitpunkt, an dem der Benutzer die Webseite aktualisiert, wird eine JS-Anfrage normalerweise zwischengespeichert.
Antwort: DNS-Cache, CDN-Cache, Browser-Cache, Server-Cache.
14. Es gibt eine große Anzahl von Bildern auf einer Seite (große E-Commerce-Website) und das Laden ist sehr langsam. Welche Methoden müssen Sie verwenden, um das Laden dieser Bilder zu optimieren? Erfahrung.
15. Wie verstehen Sie die Semantik der HTML-Struktur?
HTML selbst hat keine Leistung, und zwar mit einer Schriftgröße von 2em, und fett ist nicht die Leistung von HTML Dies sind eigentlich die Standardwerte von HTML, sodass die Seite eine klare Struktur aufweisen kann, wenn sie entfernt wird. Dies ist jedoch kein Vorteil der semantischen HTML-Struktur Der Zweck des Standardstils besteht auch darin, HTML besser auszudrücken. Man kann sagen, dass der Standardstil des Browsers und die semantische HTML-Struktur untrennbar miteinander verbunden sind.
Wenn Sie beispielsweise semantische Tags verwenden, „buchstabieren“ Screenreader Ihr Wort, anstatt zu versuchen, es vollständig auszusprechen
Durch die Verwendung von semantischem Markup wird sichergestellt, dass diese Geräte Webseiten auf sinnvolle Weise rendern. Im Idealfall hat das Anzeigegerät die Aufgabe, Webseiten im Einklang mit den Bedingungen des Geräts selbst darzustellen
Semantisches Markup stellt die relevanten Informationen bereit, die das Gerät benötigt, sodass Sie nicht alle möglichen Anzeigesituationen berücksichtigen müssen (einschließlich vorhandener oder neuer Geräte in der Zukunft). Ein Mobiltelefon kann beispielsweise einen Markup-Titeltext verwenden Wird auf einem Handheld-Computer möglicherweise in größerer Schrift angezeigt, sobald Sie den Text als Titel markiert haben, können Sie sicher sein, dass das Lesegerät ihn entsprechend seiner eigenen Bedingungen liest.
SEO hängt hauptsächlich vom Inhalt Ihrer Website und externen Links ab.
16. Sprechen Sie darüber, was bei SEO aus der Front-End-Perspektive berücksichtigt werden muss.
Auch Suchmaschinen müssen überleben, da der Internethandel immer ausgereifter wird. Die typischsten sind Overture und Baidu und natürlich Googles Werbeprojekt Google Adwords. Immer mehr Menschen nutzen Suchmaschinen-Klickanzeigen, um kommerzielle Websites zu finden. Es gibt auch viel Wissen über Optimierung und Ranking. Man muss lernen, die meisten Klicks mit den geringsten Werbeinvestitionen zu erzielen.
Nachdem die Website fertig ist, sollten Sie nicht herumliegen und darauf warten, dass Kunden vom Himmel fallen. Der einfachste Weg, dass andere Sie finden, besteht darin, Ihre Website bei einer Suchmaschine einzureichen. Wenn Sie eine kommerzielle Website haben, müssen Sie für die Aufnahme in die großen Suchmaschinen und Verzeichnisse zahlen (z. B. verlangt Yahoo 299 US-Dollar). Die gute Nachricht ist jedoch, dass (zumindest bisher) die größte Suchmaschine, Google, derzeit kostenlos ist , und es dominiert über 60 % des Suchmarktes.
Webinhalte sind in Form von Hypertext miteinander verknüpft, und das Gleiche gilt auch zwischen Websites. Zusätzlich zu Suchmaschinen surfen Menschen täglich über Links zwischen verschiedenen Websites. Je mehr Links andere Websites auf Ihre Website haben, desto mehr Traffic erhalten Sie. Noch wichtiger: Je mehr externe Links Ihre Website hat, desto wichtiger wird sie von Suchmaschinen berücksichtigt und Sie erhalten somit ein höheres Ranking.
CSS:
1. Gibt es eine Möglichkeit, den CSS-Stil eines DOM festzulegen?
2. Welche Selektoren gibt es in CSS?
Zusätzlich zu den ersten drei Basisselektoren gibt es auch einige erweiterte Selektoren, darunter
Dann stellt sich die Frage: Wie wird die Priorität des CSS-Selektors definiert?
Grundprinzipien:
Generell gilt: Je spezieller der Selektor, desto höher ist seine Priorität. Das heißt, je genauer die Auswahlpunkte sind, desto höher ist ihre Priorität.
Komplexe Berechnungsmethode:
Dann stellt sich die Frage: Schauen Sie sich den folgenden Code an: Welche Farbe hat der Text im -Tag? .
1 <style> 2 .classA{ color:blue;} 3 4 .classB{ color:red;} 5 </style> 6 7 8 9 <p class="classB classA"> 123 </p> 10 11
答案:red。与样式定义在文件中的先后顺序有关,即是后面的覆盖前面的,与在
中的先后关系无关。
3.CSS中可以通过哪些属性定义,使得一个DOM元素不显示在浏览器可视范围内?
最基本的:
设置display属性为none,或者设置visibility属性为hidden
技巧性:
设置宽高为0,设置透明度为0,设置z-index位置在-1000
4.超链接访问过后hover样式就不出现的问题是什么?如何解决?
答案:被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A(link,visited,hover,active)
5.什么是Css Hack?ie6,7,8的hack分别是什么?
答案:针对不同的浏览器写不同的CSS code的过程,就是CSS hack。
示例如下:
1 #test { 2 width:300px; 3 height:300px; 4 5 background-color:blue; /*firefox*/ 6 background-color:red\9; /*all ie*/ 7 background-color:yellow\0; /*ie8*/ 8 +background-color:pink; /*ie7*/ 9 _background-color:orange; /*ie6*/ } 10 :root #test { background-color:purple\9; } /*ie9*/ 11 @media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/ 12 @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
6.请用Css写一个简单的幻灯片效果页面
答案:知道是要用css3。使用animation动画实现一个简单的幻灯片效果。
1 /**HTML**/ 2 div.ani 3 4 /**css**/ 5 .ani{ 6 width:480px; 7 height:320px; 8 margin:50px auto; 9 overflow: hidden; 10 box-shadow:0 0 5px rgba(0,0,0,1); 11 background-size: cover; 12 background-position: center; 13 -webkit-animation-name: "loops"; 14 -webkit-animation-duration: 20s; 15 -webkit-animation-iteration-count: infinite; 16 } 17 @-webkit-keyframes "loops" { 18 0% { 19 background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat; 20 } 21 25% { 22 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat; 23 } 24 50% { 25 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat; 26 } 27 75% { 28 background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat; 29 } 30 100% { 31 background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat; 32 } 33 }
7.行内元素和块级元素的具体区别是什么?行内元素的padding和margin可设置吗?
块级元素(block)特性:
那么问题来了,浏览器还有默认的天生inline-block元素(拥有内在尺寸,可设置高宽,但不会自动换行),有哪些?
答案: 、 、
8.什么是外边距重叠?重叠的结果是什么?
答案:
外边距重叠就是margin-collapse。
在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则:
9.rgba()和opacity的透明效果有什么不同?
答案:
rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,
而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)
10.css中可以让文字在垂直和水平方向上重叠的两个属性是什么?
答案:
垂直方向:line-height
水平方向:letter-spacing
那么问题来了,关于letter-spacing的妙用知道有哪些么?
答案:可以用于消除inline-block元素间的换行符空格间隙问题。
11.如何垂直居中一个浮动元素?
1 // 方法一:已知元素的高宽 2 3 #div1{ 4 background-color:#6699FF; 5 width:200px; 6 height:200px; 7 8 position: absolute; //父元素需要相对定位 9 top: 50%; 10 left: 50%; 11 margin-top:-100px ; //二分之一的height,width 12 margin-left: -100px; 13 } 14 15 //方法二: 16 17 #div1{ 18 width: 200px; 19 height: 200px; 20 background-color: #6699FF; 21 22 margin:auto; 23 position: absolute; //父元素需要相对定位 24 left: 0; 25 top: 0; 26 right: 0; 27 bottom: 0; 28 }
那么问题来了,如何垂直居中一个?(用更简便的方法。)
1 #container //<img alt="Front-End-Interviewfragen (HTML/CSS) von großen Internetunternehmen" >的容器设置如下 2 { 3 display:table-cell; 4 text-align:center; 5 vertical-align:middle; 6 }
12.px和em的区别。
px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
13.描述一个"reset"的CSS文件并如何使用它。知道normalize.css
吗?你了解他们的不同之处?
重置样式非常多,凡是一个前端开发人员肯定有一个常用的重置CSS文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢?原因是不同的浏览器对一些元素有不同的默认样式,如果你不处理,在不同的浏览器下会存在必要的风险,或者更有戏剧性的性发生。
你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格,但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理,但又不扰乱其他的东西(如粗体的标题)。
在这一方面,无法做每一个复位重置。它也确实有些超过一个重置,它处理了你永远都不用考虑的怪癖,像HTML的audio
元素不一致或line-height
不一致。
14.Sass、LESS是什么?大家为什么要使用他们?
他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js)。
为什么要使用它们?
15.display:none与visibility:hidden的区别是什么?
即是,使用CSS display:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。
16.知道css有个content属性吗?有什么作用?有什么应用?
答案:
知道。css的content属性专门应用在 before/after 伪元素上,用于来插入生成内容。
最常见的应用是利用伪类清除浮动。
1 //一种常见利用伪类清除浮动的代码 2 .clearfix:after { 3 content:"."; //这里利用到了content属性 4 display:block; 5 height:0; 6 visibility:hidden; 7 clear:both; } 8 9 .clearfix { 10 *zoom:1; 11 }
after伪元素通过 content 在元素的后面生成了内容为一个点的块级元素,再利用clear:both清除浮动。
那么问题继续还有,知道css计数器(序列数字字符自动递增)吗?如何通过css content属性实现css计数器?
答案:css计数器是通过设置counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现。
具体实现方案:请戳张鑫旭大大的博文CSS计数器(序列数字字符自动递增)详解