HTML + CSS
常见行内、块级和空元素
常见的块元素：
address- 地址
blockquote - 块引用
center - 举中对齐块
div - 常用块级容易，也是 css layout 的主要标签
dl - 定义列表
fieldset - form 控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3 级标题
h4 - 4 级标题
h5 - 5 级标题
h6 - 6 级标题
hr - 水平分隔线
noscript - 可选脚本内容（对于不支持 script 的浏览器显示此内容）
ol - 排序列表
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
常见的内联元素 不会换行：
a - 锚点
b - 粗体（不推荐）
br - 换行
code - 计算机代码（在引用源码的时候需要）
em - 强调
i - 斜体
img - 图片
input - 输入框
label - 表格标签
q - 短引用
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
textarea - 多行文本输入框
常见的空元素：
<input /> <img /> <isindex /> <area /> <base /> <basefont /> <bgsound />
<col />
<embed /> <frame /> <keygen /> <link /> <meta /> <nextid />
<param />
<plaintext />
<spacer /> <wbr /> <!DOCTYPE >
HTML5 新特性
-
语义标签
header section footer nav -
增强型表单 自带有表单验证 兼容性问题
-
视频和音频
-
Canvas 绘图
-
SVG 绘图 矢量
-
地理定位 内置的api
-
拖放 API
-
WebWorker
-
WebStorage
-
WebSocket 实时双向通信 在线聊天 短轮询 长轮询
iframe 有那些缺点
-
iframes阻塞页面加载，影响网页加载速度，iframe加载完毕后才会触发window.onload事件，动态设置src可解决这个问题。 -
加载了新页面，增加了
css与js文件的请求，即额外增加了HTTP请求，增加了服务器负担。 -
有时
iframe由于页面挤占空间的原因出现滚动条，造成布局混乱。 -
不利于
SEO，搜索引擎的爬虫无法解读iframe的页面。 -
有些小型的移动设备如手机等无法完全显示框架，兼容性较差。
-
iframe与主页面是共享链接池的，若iframe加载时用光了链接池，则会造成主页面加载阻塞。 -
非同源的网页嵌套受到同源策略的显示会难以交互 (js 内外互相控制)
HTML、XML、XHTML 之间有什么区别
它们都属于标记语言。
| 语言 | 中文名 | 说明 |
|---|---|---|
| XML | 可扩展标记语言 | 主要⽤于存储数据和结构。语法严谨，可扩展性强。由于 JSON 也有类似作⽤但更轻量⾼效， XML 的市场变得越来越⼩。 |
| XHTML | 可扩展超文本标记语言 | 属于加强版 HTML，为解决 HTML 的混乱问题而生，在语法方面变得和 XML 一样严格。另外，XHTML 的出现也催生了 HTML 5，让 HTML 向规范化严谨化过渡。 |
| HTML5 | 超文本标记语言 | 在 HTML 的基础上进行拓展，用于页面呈现 (目前标准) |
XML的要求会比较严格:
-
有且只能有一个根元素
-
大小写敏感
-
正确嵌套
-
必须双引号
-
必须闭合标签
...
<?xml version="1.0" encoding="utf-8"?>
<root>
<father id='box'>
<child>小张</child>
<child>小王</child>
</father>
</root>
谈谈你对 HTML 语义化的理解
语义化之前：
在提倡语义化之前，你可能会使用各种各样的标签去实现同样的功能，比如：
- 使用 span、div、p、a 等做文字, 做按钮
- 使用 div 做一切
从功能方面来说，这确实是不存在什么问题的，完全可以达到功能效果。但这不符合直觉，非常不友好：
- 对人不友好：阅读代码的人不能一眼看出代码的功能
- 对机器不友好：解析代码的程序不能很好的对这些元素进行分类处理
语义化之后：
为了解决上面说的问题，HTML5 规范提倡语义化标签，即使⽤恰当语义的 HTML 标签让⻚⾯具有良好的结构与含义，⽐如：
<p>标签就代表段落<article>代表正⽂内容<button>代表按钮<header>代表头部- 等等...
语义化的好处：
| 对开发者的好处 | 对机器/程序的好处 |
|---|---|
| 使⽤了语义化标签的程序，可读性明显增强，开发者可以比容易和清晰地看出⽹⻚的结构；这也更利于整个开发团队的协作开发和后续维护工作 | 带有语义的网页代码在⽂字类应用上的表现⼒丰富，利于搜索引擎爬⾍程序来爬取和提取出有效的信息；语义化标签还⽀持读屏软件，根据⽂章可以⾃动⽣成⽬录等，方便特殊人群无障碍的使用这些网页程序。 |
语义化的适用性：
语义化适合内容型的网站来使用（如简书、知乎），对其⽹站内容的传播有很⼤帮助。
谈谈你对 flex 布局的理解
- 传统布局效率太低
- flex 解释为弹性布局，可以很灵活的实现布局效果
- 分为父容器和子容器
- 当父盒子设置为 flex 后，子元素浮动失效、不再区分行内和行内块
css3 新特性
flex、transition、animation、媒体查询
link 与@import 的区别是什么
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" rev="stylesheet" href="myCss.css" type="text/css" >
<style type="text/css" >
@import url("./myCss.css");
</style>
</head>
</html>
这就是两种引用方式的常见用法，可以很清晰的看出
- 1、从属关系：link 是 html 的标签，不仅可以加载 CSS 文件，还可以定义 媒体查询、rel 连接属性等；而@import 是 css 的语法，只有导入样式表的作用。
- 2、加载顺序：页面被加载时，link 会和 html 同时被加载而；@import 引入的 CSS 将在页面加载完毕后被加载。
- 3、兼容性：@import 是 CSS2.1 才有的语法，所以只能在 IE5 以上 才能识别；而 link 是 HTML 标签，所以不存在兼容性问题。
- 4、DOM：javascript 只能控制 dom 去改变 link 标签引入的样式，而@import 的样式不是 dom 可以控制的。
- 5、link 方式的样式权重高于@import 的权重。（如果对权重不是十分了解，可以看我之前的文章）
display 有哪些值？说明他们的作用
https://segmentfault.com/a/1190000012833458
CSS 选择器的优先级是怎么样的 权重
!important > 行内样式>ID 选择器 > 类选择器 > 标签 > 通配符 > 继承
- 行内
1，0，0，0 - id
0，1，0，0 - 类
0，0，1，0 - 标签
0，0，0，1 - 继承
0，0，0，0
测试
测试一
<style type="text/css">
#father {
color: red;
}
p {
color: blue;
}
</style>
<body>
<div id="father">
<p>试问这行字体是什么颜色的？</p>
</div>
</body>
测试二
<style type="text/css">
div div {
color: blue;
}
div {
color: red;
}
</style>
<body>
<div>
<div>
<div>试问这行字体是什么颜色的？</div>
</div>
</div>
</body>
测试三
<style type="text/css">
div p {
color: red;
}
#father {
color: yellow;
}
p.c2 {
color: blue;
}
</style>
<body>
<div id="father" class="c1">
<p class="c2">试问这行字体是什么颜色的？</p>
</div>
</body>
测试四
<style type="text/css">
#father #son {
color: blue;
}
#father p.c2 {
color: black;
}
div.c1 p.c2 {
color: red;
}
#father {
color: green !important; /* 继承的权重为0 */
}
</style>
<body>
<div id="father" class="c1">
<p id="son" class="c2">试问这行字体是什么颜色的？</p>
</div>
</body>
让元素水平居中的方法有哪些？
方法一：使用 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%);
}
