本文详细讲解了HTML中<head>标签的重要性，包括<title>标签的必要性，以及如何通过flex、table-cell和定位实现<img>垂直居中。同时介绍了响应式设计的方法，如viewport设置和媒体查询的应用。
1. 在head标签中必不可少的是什么？
<head>标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器样式表的位置以及提供元信息等等。- 文档的头部描述了文档的各种属性和信息，包括文档的标题，在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<title>定义文档的标题，它是head部分中唯一必须的元素。- 在实际开发中，从运行角度上，实际上是可以没有
<title>元素的，但必须有<meta>元素。
2. hgroup
<hgroup>标签用于对网页或区段（section）的标题进行组合。- 在
<hgroup>中的h1~h6被视为同一标签的不同组成部分。
3. HTML里面span标签里面都能放哪些标签？
- 可以在
<span>标签中放置同为行内元素的<i>``<span>``<em>等。如果套用块级元素，那么很多浏览器会将它解析到span外面。W3C明确标识了，行内元素不可以套用块级元素。 - 块级元素与行内元素的嵌套规则：
- 块级元素可包含行内元素或某些块级元素，但行内元素只能包含行内元素，不能包含块级元素。
- 块级元素不能放在
<p>中。 - 有几个特殊块级元素只能包含行内元素，不能包含块级元素，这几个特殊标签是
h1~h6、p、dt。 li内可包含div标签- 块级元素与块级元素并列，行内元素与行内元素并列。
4. dfn标签
<dfn>标签可标记那些对特殊术语或短语的定义。- 用来包裹被定义的名词。
5. 如何垂直居中<img>
1.使用flex实现<img>垂直居中
IE8和IE9不支持flex，所以这种方法在其中无效。
给图片外部包裹一个<div>，假设这个<div>就是<img>的外部容器。然后将外部容器的display属性设置为flex，并加入justify-content: center; align-items: center;。即可使<img>在该容器中垂直居中。
css代码：
.center_img{
width: 700px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.center_img>img{
width: 500px;
height: 250px;
}
2.使用table-cell实现<img>垂直居中
与1同样，添加外部容器。将外部容器的display属性设置为table-cell，加入text-align使其水平居中，vertical-align使其垂直居中。
css代码：
.center_img{
width: 700px;
height: 500px;
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: #000;
}
.center_img>img{
width: 500px;
height: 250px;
}
3.利用绝对定位实现<img>垂直居中
添加外部容器。将外部容器设为position:relative，在<img>的样式中加入position:absolute; margin:auto; top:0; bottom:0; right:0; left:0;.
css代码：
.center_img{
width: 700px;
height: 500px;
background-color: #000;
position: relative;
}
.center_img>img{
width: 500px;
height: 250px;
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
6. 如何根据设备尺寸做页面自适应
1.在页面中添加一行代码，使页面支持缩放。
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
2.由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。尽量使用百分比宽度（rem,%）。
3.字体也尽量不要使用绝对大小，使用百分比大小。
4.利用CSS3引入的Media Query模块，自动探测屏幕宽度，选择性加载CSS文件。
如果屏幕宽度小于400px，会使用tinyScreen.css文件
<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 400px)”
href=”tinyScreen.css” />
同理，当屏幕在400px到600px之间时，会使用smallScreen.css文件
<link rel=”stylesheet” type=”text/css” media=”screen and (min-width: 400px)
and (max-device-width: 600px)” href=”smallScreen.css” />
5.利用CSS的@media规则，在同一CSS文件中根据屏幕大小，选择应用不同的CSS规则。
下面代码的意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
扫一扫
879
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
