块级元素、行内元素（内联元素）和内联块元素，常见元素的特点属性（href、src的区别，alt、title的区别）

1、块级元素、行内元素（内联元素）和内联块元素

块级元素：

1. 一个块元素独占一行；
2. 元素的高度、宽度、行高及底边距都可设置（margin和padding的上下左右均有效）；
3. 元素宽度在不设置的情况下，和父元素的宽度一致。不设置高度时高度为0，有内容时高度由内容撑开；
4. 块元素可以容纳内联元素和其他块元素；
5. 不会解析换行符；
6. 常用的块级元素：<div>、<p>、<nav>、<aside>、<header>、<footer>、<section>、<article>、<h1>...<h6>、<ol>、<ul>、<dl>(定义列表)、<table>、<address>、<blockquote>、<form>
7. 设置display：block;可将元素转换为块级元素。

内联元素：

1. 当一行有空间时，和其他非区块元素都在一行，遇到父级元素边界会自动换行；
2. 元素的宽、高及顶部和底部边距不可设置（设置高度无效，可以通过设置line-height来设置，设置margin仅左右有效，padding上下左右有效）；
3. 元素宽度由内容（里面文字或图片）撑开，且不可改变；
4. 行内元素只能容纳文本或其他行内元素；
5. 换行符会被解析；
6. 常用的内联元素：<a>、<span>、<b>、<br>、<i>、<em>、<strong>、<label>、<q>;
7. 设置display:inline;可以将块状元素转换为内联元素

内联块元素：

(同时具备内联元素、块级元素特点)

• 和其他元素都在一行；
• 元素的高度、宽度、行高以及顶和底边距都可设置，不设置宽高时完全由内容撑开；
• 常用的内联块状元素有：<img>、<input>
• 换行符会被解析；
• display:inline-block；float:left / right；position：absolute/fixed;可以将元素设置为内联块级元素

其他
常见空元素：<br>、<hr>、<img>、<input>、<link>、<meta>
鲜为人知的空元素：<area>、<base>、<col>、<command>...

2、常见元素的特点属性（href、src的区别，alt、title的区别）
href和src的区别

• src是<link>,<script>标签的属性，用于规定外部脚本文件的URL；
  绝对 URL - 指向其他站点（比如 src=“http://www.baidu.com”）
  相对 URL - 指向站点内的文件（比如 src="/scripts/example.js"）

• href 是a标签的属性，用于指定超链接目标的 URL
  绝对 URL - 指向另一个站点（比如 href=“http://www.baidu.com”）
  相对 URL - 指向站点内的某个文件（href=“index.html”）
  锚 URL - 指向页面中的锚（href="#top"）

• 区别
  请求资源类型不同：
  （1）href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。
  （2）在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片；
  作用结果不同：
  （1）href 用于在当前文档和引用资源之间确立联系；
  （2）src 用于替换当前内容；
  浏览器解析方式不同：
  1）若在文档中添加 href，浏览器会识别该文档为 CSS 文件，(页面解析不会暂停)就会并行下载资源并且不会停止对当前文档的处理。这与把css文件内容写在<style>标签里不同，因此建议使用 link 方式加载 CSS，而不是使用 @import 方式把样式导入到html文档中。
  （2）当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。
  alt和title的区别

• alt是当图片不存在时的替代文字，只能用在img、area、input元素中，alt还具有搜索引擎优化效果（搜索引擎对图片意思的判断，主要靠alt属性），alt是html标签的属性。

• title是对图片提供额外说明，title既是html标签，又是html属性。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。