1. 行内元素/块级元素 非替换元素/替换元素

行内元素(内联元素)：a, abbr(缩写), acronym(只取首字母缩写), b, bdo(文本方向), big, br, cite(引用), code, em(强调), i, img, input, label, q(短引用), select, small, span, strong, sub(下标), sup(上标), textarea...

块级元素：address, caption, dd(定义列表的定义条目), div, dl(定义列表), dt(定义列表中的项目), form, h1~h6, hr, li, ol, ul, p(段落), pre(预格式化), table, tbody, td, tr, blockquote(段落缩进), marquee(滚动文本)...

可变元素(根据上下文来决定是哪一种元素)：button, map, object......

=>行内元素与块级元素的区别：

  1. 两者可以通过display属性相互转换(inline/block)；
  2. 行内元素和其他的行内元素会在同一行排列，块级元素则独占一行，垂直向下排列。若想让块级元素水平排列，可以使用浮动(float: left/right)；
  3. 行内元素不可以设置宽高，宽高随文本内容变化，但可以设置行高(line-height)，对行内非替换元素设置margin/padding上下无效，左右有效。块级元素可以设置宽高，同时可以设置内外边距；
  4. 块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素，只能容纳文本和行内元素。

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容，其内容不受CSS视觉格式化模型控制。如img, input, textarea, select, object.....

=>替换元素与非替换元素的区别：

  1. 替换元素通常有固有的尺寸(高度/宽度/比率)；
  2. CSS渲染模型不考虑替换元素内容的渲染。使用CSS的content属性插入的对象是匿名替换元素；
  3. 替换元素可以增加行框高度，但不影响line-height。如果想要替换元素居中，可以设置line-height = height；
  4. 替换元素本质上是inline-block，即padding和margin都有效；
  5. 行内替换元素设置padding会撑大父元素，而行内非替换元素设置padding只能扩大范围，无法撑大父元素，不影响line-height。

2. img的title和alt属性（全局属性）

  • alt：图片加载失败时显示的替代文字（img的属性），搜索引擎通过alt来判断图片意思
  • title：对图片的描述和进一步说明（HTML5全局属性）

HTML5常用全局属性：

class, accesskey(访问元素的键盘快捷键), id, title, lang, style, tabindex(Tab键控制次序),

contextmenu(上下文菜单), contenteditable(是否允许编辑), hidden, draggable(是否允许拖动), dropzone(被拖动到元素中会发生的事情), spellcheck(是否进行拼写或语法检查) 

*加粗表示为HTML5新增

3. meta标签

meta是head部的一个辅助性标签，提供HTML文档的元数据。供机器解读。

=>作用：

  1. 搜索引擎优化（SEO)；
  2. 定义页面使用语言；
  3. 自动刷新并指向新的页面；
  4. 实现网页转换时的动态效果；
  5. 控制页面缓冲；
  6. 网页定级评价；
  7. 控制网页显示的窗口。

可选属性：

http-equiv 添加服务器发送到浏览器的http头部内容

charset(文字及语言)

expires(设置网页过期时间)

refresh(设置网页特定时间内自动刷新并跳转到新页面url)

pragma(禁止浏览器从本地计算机访问页面内容)

......
name 用于描述网页，其属性值content便于搜索引擎查找/分类信息

keywords(关键词)

description(主要内容)

robots(告诉搜索机器人哪些页面需要索引)

......
scheme 指定用来翻译属性值的方案  
property="og" 同意网页内容可以被其他社会化网站引用

常用的meta标签：

//声明文档使用的字符编码，一定要写在第一行解决乱码问题

<meta charset="utf-8">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

//禁止百度自动转码

<meta http-equiv="Cache-Control" content="no-siteapp" />

//SEO优化

<!-- 页面关键词 keywords -->

<meta name="keywords" content="your keywords">

<!-- 页面描述内容 description -->

<meta name="description" content="your description">

<!-- 定义网页作者 author -->

<meta name="author" content="author,email address">

<!-- 定义网页搜索引擎索引方式，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->

<meta name="robots" content="index,follow">

//移动端页面布局

<meta name="viewport" content="width=device-width, initial-scale=1.0">

//Microsoft Internet Explorer浏览器

<!-- 优先使用最新的ie版本 -->

<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- 是否开启cleartype显示效果 -->

<meta http-equiv="cleartype" content="on">

//Google Chrome

<!-- 优先使用最新的chrome版本 -->

<meta http-equiv="X-UA-Compatible" content="chrome=1" />

<!-- 禁止自动翻译 -->

<meta name="google" value="notranslate">

//移动端

<!-- 避免IE使用兼容模式 -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- QQ强制竖屏 -->

<meta name="x5-orientation" content="portrait">

<!-- QQ强制全屏 -->

<meta name="x5-fullscreen" content="true">

4. DOCTYPE声明(标准模式/兼容模式)

<!doctype>声明必须处于HTML文档的头部，在<html>标签之前，告知浏览器使用什么文档标准解析这个文档。如果DOCTYPE不存在或者格式不正确会导致文档以兼容模式出现。

<!doctype>不是一个HTML标签，而是一个高告诉浏览器当前HTML版本的指令。

HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。（这是为什么HTML5只需要写<!DOCTYPE HTML>就够了）

*SGML：Standard Generalized Markup language（简称“通用标言”），是一种定义电子文档结构和描述其内容的国际标准语言。

*DTD：Document Type Definition（文档类型定义），是一种特殊文档，它规定、约束符合SGML或SGML子集可扩展标示语言（XML）规则的定义和陈述。

标准模式与兼容模式的区别：

标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。
兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

具体体现：

  • width

在严格模式中 ：width是内容宽度 ，元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width +  margin-right;

在兼容模式中 ：width = width + padding + border(即除了外边距margin)。

  • 兼容模式下可设置百分比的高度和行内元素的高宽

在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。

在Standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

  • 用margin:0 auto设置水平居中在IE下会失效

使用margin:0 auto在Standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）。

  • 兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效

5. script标签的defer和async

作用：如果在文档中间出现<script>标签，浏览器会立刻加载并执行相应的脚本，这样会阻塞后续文档的加载（白屏）。

  • defer：作用是表明脚本在执行时不会影响页面构造，即脚本会被延迟到整个页面都解析完毕（DOMContentLoaded事件触发执行之前）再运行（立即下载，延迟执行）;
  • async：只适用于外部脚本，不保证按照顺序执行。目的是异步加载其他内容。

=>defer和async的区别：

  1. async相当于单独开了一个进程去独立加载和执行脚本，而defer和将<script>标签放到<body>底部是一样的效果；
  2. 建议的方法仍是写到底部，如果需要调用独立库时可以使用async，若脚本必须写在头部内可以使用defer;
  3. 由于兼容性问题，async在IE<=9时不支持，故有时候两个属性都指定，意味着在async不支持时启用defer。

HTML&CSS面试高频考点(一)的更多相关文章

  1. HTML&CSS面试高频考点(二)

    HTML&CSS面试高频考点(一)    ♥ 6. W3C盒模型与怪异盒模型 标准盒模型(W3C标准) 怪异盒模型(IE标准) 怪异盒模型下盒子的大小=width(content + bord ...

  2. HTML&CSS面试高频考点(三)

    11. CSS隐藏元素的方式 /*占据空间,无法点击*/ visibility: hidden; position: relative; top: -999em; /* 不占据空间,无法点击 */ p ...

  3. 数仓面试高频考点--解决hive小文件过多问题

    本文首发于公众号:五分钟学大数据 小文件产生原因 hive 中的小文件肯定是向 hive 表中导入数据时产生,所以先看下向 hive 中导入数据的几种方式 直接向表中插入数据 insert into ...

  4. 总结CSS面试题目的考察点及常见布局问题整理

    整理网上流传的若干份面试题目,突发奇想,总结关于CSS面试题目的考察点,发现问题大多围绕几个属性和几种题目,水平有限,仅供参考. 写这个博文内心有种莫名奇妙的自我谴责感,实在不应该把面试层叠样式“应试 ...

  5. 「面试高频」二叉搜索树&双指针&贪心 算法题指北

    本文将覆盖 「字符串处理」 + 「动态规划」 方面的面试算法题,文中我将给出: 面试中的题目 解题的思路 特定问题的技巧和注意事项 考察的知识点及其概念 详细的代码和解析 开始之前,我们先看下会有哪些 ...

  6. Python面试常考点之深入浅出链表操作

    Python面试常考点之深入浅出链表操作 在Python开发的面试中,我们经常会遇到关于链表操作的问题.链表作为一个非常经典的无序列表结构,也是一个开发工程师必须掌握的数据结构之一.在本文中,我将针对 ...

  7. C++面试高频题

    作者:守望者1028链接:https://www.nowcoder.com/discuss/55353来源:牛客网 面试高频题: 校招过程中参考过牛客诸位大佬的面经,但是具体哪一块是参考谁的我也忘记了 ...

  8. 面试高频题：说一说对Spring和SpringMvc父子容器的理解？

    引言 以前写了几篇关于SpringBoot的文章<面试高频题:springBoot自动装配的原理你能说出来吗>.<保姆级教程,手把手教你实现一个SpringBoot的starter& ...

  9. html与css面试结合工作的总结难点

    面试的时候一般会常常问起的,同时也是工作的时候会常常问道的几个问题,一下之列表内容,详细的后会附有文章,希望能帮到大家,同时有不足希望大家多多补充交流. 1.主要是的是浮动的问题(常见的问题有,三列布 ...

随机推荐

  1. no-strings-attached

    0x01 拿到程序,直接IDA放进去看一下,结果如图: 我们发现main中有四个函数,我们一个一个进去,经过分析之后,发现authenticate();是关键函数,所以,接下来我们进去看看. void ...

  2. Chisel3 - util - Pipe

    https://mp.weixin.qq.com/s/WeFesE8k0ORxlaNfLvDzgg   流水线,用于添加延迟.   参考链接: https://github.com/freechips ...

  3. 获取<input type="radio">被选中的内容

    背景: <input type="radio">,该标签表示的是单选按钮,这个类型相对于其他类型的获取,比较特殊,特此记录一下. 获取方式: 1. 使用选择器直接获取( ...

  4. Maven本地仓库/中央仓库（阿里镜像）/JDK配置

    第一步打开你已经下载好的Maven,进入:根磁盘:\......\apache-maven-3.6.2\conf文件夹找到settings.xml文件(没有的可以自行创建一个同名的文件即可) 使用文本 ...

  5. 机器学习——十大数据挖掘之一的决策树CART算法

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是机器学习专题的第23篇文章,我们今天分享的内容是十大数据挖掘算法之一的CART算法. CART算法全称是Classification ...

  6. 权限系统设计(0):权限系统设计基本概念改需-MAC/RBAC引子

    此篇主要对权限系统设计所涉的一些专业术语重点梳理.从我们windows的文件系统 自主访问控制 到基于角色访问控制. 权限设计基本术语 对后面会用到的词汇做一个简要说明 什么是权限(许可) 权限(Pr ...

  7. tensorflow2.0学习笔记第二章第四节

    2.4损失函数损失函数(loss):预测值(y)与已知答案(y_)的差距 nn优化目标:loss最小->-mse -自定义 -ce(cross entropy)均方误差mse:MSE(y_,y) ...

  8. 容器技术之Docker私有镜像仓库harbor

    前文我们聊到了docker的私有镜像仓库docker-distribution的搭建和简单的使用,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13058338 ...

  9. activeMQ从入门到简单集群指南

    1.什么是amq MQ是消息中间件,基于JAVA的JMS消息服务机制来传递信息. 2.mq的作用 MQ给程序之间提供了一个缓冲,避免了在程序交互频繁的情况下,提高程序性能瓶颈和数据的可靠性 3.mq怎 ...

  10. [CQOI2007]矩形

    题目   点这里看题目. 分析   插头 DP ,考虑枚举一下两块之间的分割线,本质上就是两个端点都在边界上的路径.    DP 过程中,我们将没有端点在边界上面的路径称为 1 路径,反之叫 2 路径 ...