每日思考(2019/12/18)
题目概览
- 你对标签语义化的理解是什么?
- css常用的布局方式有哪些?
- 简要描述下JS有哪些内置的对象
题目解答
你对标签语义化的理解是什么?
-
概念:语义是我们说话表达的意思,多数的语义实际上都是由文字来承载的。语义类标签则是纯文字的补充,比如标题、自然段、章节、列表,这些内容都是纯文字无法表达的,我们需要依靠语义标签代为表达
-
好处:代码结构清晰,方便阅读,有利于团队合作开发。方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页,如根据文章可以自动生成目录等等。有利于搜索引擎优化(SEO),可以让搜索引擎爬虫更好地获取到更多有效信息,有效提升网页的搜索量
-
常见的语义化标签
<title>:页面主体内容。 <hn>:h1~h6,分级标题,<h1> 与 <title> 协调有利于搜索引擎优化。 <ul>:无序列表。 <li>:有序列表。 <header>:页眉通常包括网站标志、主导航、全站链接以及搜索框。 <nav>:标记导航,仅对文档中重要的链接群使用。 <main>:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。 <article>:定义外部的内容,其中的内容独立于文档的其余部分。 <section>:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。 <aside>:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。 <footer>:页脚,只有当父级是body时,才是整个页面的页脚。 <small>:呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。 <strong>:和 em 标签一样,用于强调文本,但它强调的程度更强一些。 <em>:将其中的文本表示为强调的内容,表现为斜体。 <mark>:使用黄色突出显示部分文本。 <figure>:规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin)。 <figcaption>:定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置。 <cite>:表示所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。 <blockquoto>:定义块引用,块引用拥有它们自己的空间。 <q>:短的引述(跨浏览器问题,尽量避免使用)。 <time>:datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。 <abbr>:简称或缩写。 <dfn>:定义术语元素,与定义必须紧挨着,可以在描述列表dl元素中使用。 <address>:作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)。 <del>:移除的内容。 <ins>:添加的内容。 <code>:标记代码。 <meter>:定义已知范围或分数值内的标量测量。(Internet Explorer 不支持 meter 标签) <progress>:定义运行中的进度(进程)
-
应用场景:
-
作为自然语言的延伸(补充说明、消除歧义等),ruby现象(使用ruby、rt、rp标签),em标签表示句子中的重音(强调)
-
作为标题摘要:在 hgroup 中的 h1-h6 被视为同一标题的不同组成部分,形成副标题。section 的嵌套会使得其中的 h1-h6 下降一级,因此,在 HTML5 以后, section 和 h1 就足以形成文档的树形结构
-
作为整体结构:让浏览器很好地支持“阅读视图功能”,一个典型的body结构
<body> <header>……</header> <article> <header>……</header> <section>……</section> <section>……</section> <section>……</section> <footer>……</footer> </article> <article> …… </article> <article> …… </article> <footer> <address></address> </footer> </body>
-
css常用的布局方式有哪些(参考:CSS布局指南)
- 流式布局: 最基本的布局,就是顺着 html 像流水一样流下来
- 绝对定位: 利用
position: absolute
进行绝对定位的布局 - float 布局: 最初用来解决多栏布局的问题。比如圣杯、双飞燕的布局都可以用
float
来实现 - 珊格布局: bootstrap 用的布局,把页面分为 24 分,通过 row 和 col 进行布局
- flex 布局: css3 的布局可以非常灵活地进行布局和排版
- grid 布局: 网格布局
简要描述下JS有哪些内置的对象
- 值属性:这些全局属性返回一个简单值,这些值没有自己的属性和方法
- 函数属性:全局函数可以直接调用,不需要在调用时指定所属对象,执行结束后会将结果直接返回给调用者
- 基本对象:是定义或使用其他对象的基础。基本对象包括一般对象、函数对象和错误对象
- 数字和日期对象:用来表示数字、日期和执行数学计算的对象
- 字符串:用来表示和操作字符串的对象
- 可索引的集合对象:表示按照索引值来排序的数据集合,包括数组和类型数组,以及类数组结构的对象
- 使用键的集合对象:这些集合对象在存储数据时会使用到键,支持按照插入顺序来迭代元素
- 结构化数据:这些对象用来表示和操作结构化的缓冲区数据,或使用 JSON (JavaScript Object Notation)编码的数据
- 控制抽象对象
- 反射
- 国际化:为了支持多语言处理而加入ECMAScript的对象
- WebAssembly
WebAssembly
WebAssembly.Module
WebAssembly.Instance
WebAssembly.Memory
WebAssembly.Table
WebAssembly.CompileError
WebAssembly.LinkError
WebAssembly.RuntimeError
- 其他
【转载文章务必保留出处和署名,谢谢!】