题目概览
- 使用
HTML5需要遵守哪些设计原则 - 如何清除浮动
- 用
js写出死循环的方法有哪些 - 前端如何处理
emoji表情
题目解答
使用HTML5需要遵守哪些设计原则
-
避免不必要的复杂性
<!-- html4 --> <!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- html5 --> <!DOCTYPE html> <meta charset="utf-8"> -
支持已有内容
<!-- 以下四段代码，在xhtml中只有第一段是正确的；而在html5中，所有的都是正确的 --> <img src="foo" alt="bar" /> <p class="foo">Hello world</p> <img src="foo" alt="bar"> <p class="foo">Hello world <IMG SRC="foo" ALT="bar"> <P CLASS="foo">Hello world</P> <img src=foo alt=bar> <p class=foo>Hello world</p> -
解决现实的问题
<!-- 在html4中，即使两个块级元素元素有相同的链接地址，也必须分开写，因为内联元素不能包含块级元素 --> <h2><a href="/path/to/resource">Headline text</a></h2> <p><a href="/path/to/resource">Paragraph text.</a></p> <!-- 而在html5中，由于使用了内容模型，<a>元素也可以包含块级元素 --> <a href="/path/to/resource"> <h2>Headline text</h2> <p>Paragraph text.</p> </a> -
内容模型
- html5新增了多个元素，其中包括：section、article、aside和nav，它们代表了一种新的内容模型——给内容分区。
- 以前人们一直都在用div来组织页面中的内容，但与其他类似的元素一样，div本身并没有语义。
- 但section、article、aside和nav实际上是在明确地告诉你——这一块就像文档中的另一个文档一样。位于这些元素中的任何内容，都可以拥有自己的概要、标题，自己的脚部
-
平稳退化
<!-- 浏览器在遇到不识别的type值时，会将type的值解释为text --> <input type="number" name="" id=""> <input type="search" name="" id=""> <input type="range" name="" id=""> <input type="email" name="" id=""> <input type="date" name="" id=""> <input type="url" name="" id="">
如何清除浮动
- 参考文章：清除浮动的方法
用js写出死循环的方法有哪些
//while
while (true) {}
//for
for (;;) {}
//递归不设置结束条件
function fn(a) {
console.log(a);
fn(a);
}
//ES6
const infiniteIterable = {
[Symbol.iterator]() {
const thisRef = this
return {
value: true, // or any other value
next() {
return thisRef[Symbol.iterator]()
}
}
}
}
for (let _ of infiniteIterable) {
// ...
}
前端如何处理emoji表情
emoji表情实际上就是Unicode字符，通过各个系统的底层将其转化为对应的表情图像；因此，每个系统的emoji表情实现都可以各不相同。- 要展示
emoji，前端应该使用UTF-8编码；同时后端也应该使用它存储数据