【CSS / HTML】CSS / HTML基础问题总结大全，看这个系列就够了！（一）

---

一、行内元素、块级元素

行内元素：

1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度，不可以改变
4.行内元素只能行内元素，不能包含块级元素
5.行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。

常见的行内元素：a 、b、i 、img 、input 、label 、select 、small 、span、textarea

块级元素：

1.总是从新的一行开始
2.高度、宽度都是可控的
3.宽度没有设置时，默认为100%
4.块级元素中可以包含块级元素和行内元素
5.块级元素可以设置margin 和 padding

常见的块级元素：
div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table

二、替换元素和非替换元素

替换元素：

替换元素是浏览器根据元素的 标签 和 属性 ，来决定元素的具体显示内容。
比如，只写一个 img标签，而不对齐添加属性，页面上是显示不出来任何东西的，只有往 img标签里面添加 src 属性，这时候页面上才能显示出你要的图片，src 不同，页面上显示出来的内容也就不同。又比如 input标签， value 属性不同，页面上所加载的内容也不相同。

不可替换元素：

非替换元素，则不通过标签和属性，决定元素的具体显示内容。而是将标签所包围的具体内容告诉浏览器，并在页面上直接显示出来。
比如我们常用的 p标签，浏览器直接会将p 标签里面的东西显示出来，而不是通过属性。

行内替换元素：

行内元素 设置 width、height 以及垂直方向的 padding 与 margin 是无效的，但 行内替换元素 可以设置 width、height、padding、bottom，效果等于块元素。

三、alt属性和title属性的不同点

四、什么是meta标签？

meta 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

meta 标签的组成： 标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1、name属性

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

标签的name属性语法格式是：

< name="参数"content=“具体的参数值”>。

其中name属性主要有以下几种参数：

A、Keywords(关键字)

说明：keywords用来告诉搜索引擎你网页的关键字是什么。

举例：< name=“keywords” content=“science,education,culture,politics,ecnomics，relationships,entertaiment,human”>

B、de ion(网站内容描述)

说明：de ion用来告诉搜索引擎你的网站主要内容。

举例：< name="de ion"content=“Thispageisaboutthemeaningofscience,education,culture.”>

C、robots(机器人向导)

说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

content的参数有all,none,index,noindex,follow,nofollow。默认是all。

举例：< name="robots"content=“none”>

D、author(作者)

说明：标注网页的作者

举例：< name="author"content=“root,root@xxxx.com”>

2、http-equiv属性

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

标签的http-equiv属性语法格式是：

< http-equiv="参数"content=“参数变量值”>；

其中http-equiv属性主要有以下几种参数：

A、Expires(期限)

说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

用法：< http-equiv="expires"content=“Fri,12Jan200118:18:18GMT”>

注意：必须使用GMT的时间格式。

B、Pragma(cache模式)

说明：禁止浏览器从本地计算机的缓存中访问页面内容。

用法：< http-equiv="Pragma"content=“no-cache”>

注意：这样设定，访问者将无法脱机浏览。

C、Refresh(刷新)

说明：自动刷新并指向新页面。

用法：< http-equiv="Refresh"content=“2;URL=http://www.herohome.net”>(注意后面的引号，分别在秒数的前面和网址的后面)

注意：其中的2是指停留2秒钟后自动刷新到URL网址。

D、Set-Cookie(cookie设定)

说明：如果网页过期，那么存盘的cookie将被删除。

用法：< http-equiv="Set-Cookie"content=“cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/”>

注意：必须使用GMT的时间格式。

E、Window-target(显示窗口的设定)

说明：强制页面在当前窗口以独立页面显示。

用法：< http-equiv=“Window-target"content=”_top">

注意：用来防止别人在框架里调用自己的页面。

F、content-Type(显示字符集的设定)

说明：设定页面使用的字符集。

用法：< http-equiv="content-Type"content=“text/html;charset=gb2312”>

G、content-Language（显示语言的设定）

用法：< http-equiv="Content-Language"content=“zh-cn”/>