HTML/CSS面试题

001行内元素有哪些？块级元素有哪些？空（void）元素有哪些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、hr、link、input、img、meta

002jpg和png格式的图片有什么区别？

jpg是有损压缩格式，png是无损压缩格式。所以，相同的图片，jpg体积会小。比如我们一些官网的banner图，一般都很大，所以适合用jpg类型的图片。但png分8位的和24位的，8位的体积会小很多，但在某些浏览器下8位的png图片会有锯齿。

003a标签在新窗口打开链接怎么加属性？

<a target="_blank">链接</a>
target用法：_blank表示在新窗口打开被链接的文档；_self表示在相同的框架中打开被链接文档，这也是默认值；_parent表示在父框架打开被链接文档；_top表示在整个窗口中打开被链接文档。

004strong与em的异同？

strong:粗体强调标签，强调，表示内容的重要性；
em:斜体强调标签，更强烈强调，表示内容的强调点；

005说一下src和href的区别？

● src是引入外部资源下载到文档，会暂停其他资源的下载
● href是链接外部资源，不会暂停其他资源的下载

006请写出完整的注册表单。

<form action="http://localhost8080/xxx/register" method="post">
        用户名<input type="text" name="username" />
	密码<input type="password" name="userpwd" />
	确认密码<input type="password" />
	性别<input type="radio" name="sex" value="male" checked="checked" />男
	    <input type="radio" name="sex" value="female" />女<br />
	兴趣爱好<input type="checkbox" name="hobby" value="singing" />唱歌
		   <input type="checkbox" name="hobby" value="dancing" />跳舞
		   <input type="checkbox" name="hobby" value="running" checked="checked" />跑步
		   <input type="checkbox" name="hobby" value="swimming" />游泳
		   <input type="checkbox" name="hobby" value="climbing" />攀爬<br />
	学历<select name="education">
		   <option value="gz">高中</option>
		   <option value="dz">大专</option>
		   <option value="bk" selected="selected">本科</option>
		   <option value="ss">硕士</option>
		   <option value="bs">博士</option>
		</select><br />
	简介<textarea rows="5" cols="30" name="briefIntroduction"></textarea><br />
	<input type="submit" value="注册" />
	<input type="reset" value="重置" /><br />
</form>		

007请写出具有表格标题为"bjpowernode"的2行3列表格结构。

<tableborder="1"width="100%">
    <!-- 补全代码 -->
    <caption>bjpowernode</caption>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
</table>

008请写出具有标题属性和代替文本属性的图片标签。

<img alt="img" src="xxx" title="title" />

009CSS选择器有哪些？

CSS2选择器：元素选择器，id选择器，群组选择器，类选择器，*通配符选择器，后代选择器
CSS2伪类选择器：a:link/visited/hover/active
CSS3选择器：空格 > +相邻兄弟选择器 ~通用选择器（查找后面所有）

010什么是CSS盒子模型？

一个css盒子从外到内可以分成四个部分：margin(外边距),border(边框),padding(内边距),content（内容）
默认情况下，盒子的width和height属性只是设置content（内容）的宽和高
盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框
盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框;

011position的属性值有何区别？

position 的常见四个属性值： relative，absolute，fixed，static。一般都要配合"left"、“top”、“right"以及"bottom” 属性使用。　　
1]static：默认位置，（static 元素会忽略任何top、bottom、left 或right 声明）一般不常用。
2]relative：位置被设置为relative 的元素，偏移的top，right，bottom，left 的值都以它原来的位置为基准偏移。注意relative 移动后的元素在原来的位置仍占据空间。
3]absolute：位置设置为absolute 的元素，可定位于相对于包含它的元素的指定坐标。意思就是如果它的父容器设置了position 属性，并且position 的属性值为absolute 或者relative，那么就会依据父容器进行偏移。如果其父容器没有设置position 属性，那么偏移是以body为依据。注意设置absolute 属性的元素在标准流中不占位置。
4]fixed：位置被设置为fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以body 为依据的。注意设置fixed 属性的元素在标准流中不占位置。
总结：position设置为absolute和fixed的元素都脱离了文档标准流;

012px，rem，em的区别？

px实际上就是像素，用PX设置字体大小时，比较稳定和精确。
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em的值并不是固定的；
em会继承父级元素的字体大小。
rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，相对的是HTML根元素。