html

认识标签

1
2
3
4
<html>
    <head>...</head>
    <body>...</body>
</html>
  1. <html>,</html>称为根标签，所有的网页标签都在<html></html>中。
  2. 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有``、`<script>、<style>、<link>、<meta>`等标签，头部标签在下一小节中会有详细介绍。</li> <li>在<code><body></code>和<code></body></code>标签之间的内容是网页的主要内容，如<code><h1></code>、<code><p></code>、<code><a></code>、<code><img></code>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。</li> </ol> <h3 id="head"><a href="#head" class="headerlink" title="head"></a>head</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><head></span><br><span class="line"> <title>...</title></span><br><span class="line"> <meta></span><br><span class="line"> <link></span><br><span class="line"> <style>...</style></span><br><span class="line"> <script>...</script></span><br><span class="line"></head></span><br></pre></td></tr></table></figure> <ul> <li>title: 网页的标题信息，它会出现在浏览器的标题栏中</li> <li>meta:</li> <li>link</li> <li>style</li> <li>script</li> </ul> <h3 id="body"><a href="#body" class="headerlink" title="body"></a>body</h3><h3 id="常用标签"><a href="#常用标签" class="headerlink" title="常用标签"></a>常用标签</h3><table> <thead> <tr> <th>代码</th> <th>作用</th> </tr> </thead> <tbody><tr> <td><code><!--注释文字 --></code></td> <td><!--注释文字 --></td> </tr> <tr> <td><code><p>段落文本</p></code></td> <td><p>段落文本</p></td> </tr> <tr> <td><code><hx>标题文本</hx></code></td> <td><h1>标题文本</h1></td> </tr> <tr> <td><code><em>需要强调的文本</em></code></td> <td><em>需要强调的文本</em></td> </tr> <tr> <td><code><strong>需要强调的文本</strong></code></td> <td><strong>需要强调的文本</strong></td> </tr> <tr> <td><code><span>文本</span></code></td> <td>没有语义，用于设定单独样式，在head-title中设置</td> </tr> <tr> <td><code><q>引用文本</q></code></td> <td>短文本引用，解析为双引号</td> </tr> <tr> <td><code><blockquote>引用文本</blockquote></code></td> <td>长文本引用，解析为缩进</td> </tr> <tr> <td><code><br /></code></td> <td>回车</td> </tr> <tr> <td><code>&nbsp;</code></td> <td>空格</td> </tr> <tr> <td><code><hr /></code></td> <td>分割线</td> </tr> <tr> <td><code><address>联系地址信息</address></code></td> <td>可通过CSS设置样式</td> </tr> <tr> <td><code><code>代码</code></code></td> <td>代码行</td> </tr> <tr> <td><code><pre>代码</pre></code></td> <td>代码段</td> </tr> <tr> <td><code><ul><li></code></td> <td>无序列表</td> </tr> <tr> <td><code><ol><li></code></td> <td>有序列表</td> </tr> <tr> <td><code><div>…</div></code></td> <td>逻辑块</td> </tr> </tbody></table> <h3 id="div"><a href="#div" class="headerlink" title="div"></a>div</h3><div id="版块名称">…</div> <h3 id="table"><a href="#table" class="headerlink" title="table"></a>table</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><table></span><br><span class="line"> <table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量"></span><br><span class="line"> <caption>2012年到2013年库存记录</caption></span><br><span class="line"> <tr></span><br><span class="line"> <th>产品名称 </th></span><br><span class="line"> <th>品牌 </th></span><br><span class="line"> <th>库存量（个） </th></span><br><span class="line"> <th>入库时间 </th></span><br><span class="line"> </tr></span><br><span class="line"> <tr></span><br><span class="line"> <td>耳机 </td></span><br><span class="line"> <td>联想 </td></span><br><span class="line"> <td>500</td></span><br><span class="line"> <td>2013-1-2</td></span><br><span class="line"> </tr></span><br><span class="line"> <tr></span><br><span class="line"> <td>U盘 </td></span><br><span class="line"> <td>金士顿 </td></span><br><span class="line"> <td>120</td></span><br><span class="line"> <td>2013-8-10</td></span><br><span class="line"> </tr></span><br><span class="line"> <tr></span><br><span class="line"> <td>U盘 </td></span><br><span class="line"> <td>爱国者 </td></span><br><span class="line"> <td>133</td></span><br><span class="line"> <td>2013-3-25</td></span><br><span class="line"> </tr></span><br><span class="line"></table></span><br></pre></td></tr></table></figure> <pre><code> 1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。 2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。 3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。 4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。 5、<th>…</th>：表格的头部的一个单元格，表格表头。 6、表格中列的个数，取决于一行中数据单元格的个数。 7、<caption>标题文本</caption> </code></pre> <p>​ </p> <h3 id="a标签"><a href="#a标签" class="headerlink" title="a标签"></a>a标签</h3><pre><code><a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> <img src = "myimage.gif" alt = "My Image" title = "My Image" /> </code></pre> <h2 id="与浏览者交互，表单标签"><a href="#与浏览者交互，表单标签" class="headerlink" title="与浏览者交互，表单标签"></a>与浏览者交互，表单标签</h2><h3 id="form"><a href="#form" class="headerlink" title="form"></a>form</h3><pre><code><form method="传送方式" action="服务器文件"> </code></pre> <h3 id="input"><a href="#input" class="headerlink" title="input"></a>input</h3><p><input></input></p> <pre><code><form> <input type="text/password" name="名称" value="文本" /> </form> </code></pre> <ol> <li><p>type：</p> <ul> <li>当type=”text”时，输入框为文本输入框;</li> <li>当type=”password”时, 输入框为密码输入框。</li> </ul> </li> <li><p>name：为文本框命名，以备后台程序ASP 、PHP使用。</p> </li> <li><p>value：为文本输入框设置默认值。(一般起到提示作用)</p> </li> </ol> <h3 id="textarea"><a href="#textarea" class="headerlink" title="textarea"></a>textarea</h3><textarea></textarea> <pre><code> <textarea rows="行数" cols="列数">文本</textarea> </code></pre> <ol> <li><p><code><textarea></code>标签是成对出现的，以<code><textarea></code>开始，以<code></textarea></code>结束。</p> </li> <li><p>cols ：多行输入域的列数。</p> </li> <li><p>rows ：多行输入域的行数。</p> </li> <li><p>在<code><textarea></textarea></code>标签之间可以输入默认值。</p> </li> </ol> <h3 id="单选-多选框"><a href="#单选-多选框" class="headerlink" title="单选/多选框"></a>单选/多选框</h3><ul> <li></li> </ul> <pre><code><input type="radio/checkbox" value="值" name="名称" checked="checked"/> </code></pre> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><form action="save.php" method="post" ></span><br><span class="line"> <label>性别:</label></span><br><span class="line"> <label>男</label></span><br><span class="line"> <input type="radio" value="1" name="gender" /></span><br><span class="line"> <label>女</label></span><br><span class="line"> <input type="radio" value="2" name="gender" /></span><br><span class="line"></form></span><br></pre></td></tr></table></figure> <ol> <li><p>type:</p> <ul> <li><p>当 type=”radio” 时，控件为单选框</p> </li> <li><p>当 type=”checkbox” 时，控件为复选框</p> </li> </ul> </li> <li><p>value：提交数据到服务器的值（后台程序PHP使用）</p> </li> <li><p>name：为控件命名，以备后台程序 ASP、PHP 使用</p> </li> <li><p>checked：当设置 checked=”checked” 时，该选项被默认选中</p> </li> </ol> <h3 id="下拉框"><a href="#下拉框" class="headerlink" title="下拉框"></a>下拉框</h3><p>爱好： <select><br> <option value="看书">看书</option><br> <option value="旅游">旅游</option><br> <option value="运动">运动</option><br> <option value="购物">购物</option><br></select></p> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><select></span><br><span class="line"> <option value="看书">看书</option></span><br><span class="line"> <option value="旅游">旅游</option></span><br><span class="line"> <option value="运动">运动</option></span><br><span class="line"> <option value="购物">购物</option></span><br><span class="line"></select></span><br></pre></td></tr></table></figure> <h3 id="提交与重置"><a href="#提交与重置" class="headerlink" title="提交与重置"></a>提交与重置</h3><pre><code><input type="reset" value="重置" /> <input type="submit" value="提交" /> </code></pre> <h3 id="label标签"><a href="#label标签" class="headerlink" title="label标签"></a>label标签</h3><pre><code><label for="控件id名称"> </code></pre> <p>注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。</p> <pre><code><label for="male">男</label> <input type="radio" name="gender" id="male" /> </code></pre> <h1 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h1><h2 id="注释"><a href="#注释" class="headerlink" title="注释"></a>注释</h2><p><code>/*注释语句*/</code></p> <h2 id="CSS样式"><a href="#CSS样式" class="headerlink" title="CSS样式"></a>CSS样式</h2><ul> <li><p>内联式CSS<br> <code><p style="color:red;font-size:12px">这里文字是红色。</p></code></p> </li> <li><p>嵌入式CSS</p> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><style type="text/css"></span><br><span class="line">span{</span><br><span class="line">color:red;</span><br><span class="line">}</span><br><span class="line"></style></span><br></pre></td></tr></table></figure> </li> <li><p>外部式CSS<br><code><link href="base.css" rel="stylesheet" type="text/css" /></code></p> </li> </ul> <p>优先级：内联式 > 嵌入式 > 外部式</p> <h2 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h2><p>选择器{<br> 样式;<br>}</p> <ul> <li>类选择器</li> </ul> <p>.类选择器名称{}</p> <pre><code><span class="stress">胆小如鼠</span> .stress{color:red;} </code></pre> <ul> <li>ID选择器</li> </ul> <p>＃ID选择器名称{}</p> <pre><code><span id="setGreen">公开课</span> #setGreen{ color:green; } </code></pre> <p>区别：ID选择器只能在文档中使用一次，类选择器能使用多次</p> <ul> <li><p>子选择器：大于符号(>),用于选择指定标签元素的第一代子元素</p> <p> .food>li{border:1px solid red;}</p> </li> <li><p>包含（后代）选择器：加入空格,用于选择指定标签元素下的后辈元素</p> <p> .first span{color:red;}</p> </li> </ul> <p>区别：子选择器仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。</p> <ul> <li>通用选择器</li> </ul> <p> *{color:red;}</p> <ul> <li>伪类选择符：允许给html不存在的标签（标签的某种状态）设置样式</li> </ul> <p> a:hover{color:red;}</p> <ul> <li><p>分类选择符</p> <p> h1,span{color:red;}</p> </li> </ul> <h2 id="继承、层叠和特殊性"><a href="#继承、层叠和特殊性" class="headerlink" title="继承、层叠和特殊性"></a>继承、层叠和特殊性</h2><ul> <li><p>继承性<br>继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。</p> </li> <li><p>特殊性<br>浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。<br>标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。<br><strong>注意：</strong>还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。</p> </li> </ul> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">p{color:red;} /*权值为1*/</span><br><span class="line">p span{color:green;} /*权值为1+1=2*/</span><br><span class="line">.warning{color:white;} /*权值为10*/</span><br><span class="line">p span.warning{color:purple;} /*权值为1+1+10=12*/</span><br><span class="line">#footer .note p{color:yellow;} /*权值为100+10+1=111*/</span><br></pre></td></tr></table></figure> <ul> <li><p>层叠<br>层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。</p> </li> <li><p>重要<br>某些特殊的情况需要为某些样式设置具有最高权值，可使用!important来解决。<br><strong>注意：</strong>!important要在分号前输入</p> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">p{color:red!important;}</span><br><span class="line">p{color:green;}</span><br><span class="line"><p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p></span><br></pre></td></tr></table></figure> <p>将显示为红色。</p> </li> </ul> <h2 id="CSS格式化排版"><a href="#CSS格式化排版" class="headerlink" title="CSS格式化排版"></a>CSS格式化排版</h2><table> <thead> <tr> <th>名称</th> <th>用途</th> </tr> </thead> <tbody><tr> <td>font-family</td> <td>字体</td> </tr> <tr> <td>font-size</td> <td>大小</td> </tr> <tr> <td>color</td> <td>颜色</td> </tr> <tr> <td>font-weight</td> <td></td> </tr> <tr> <td>font-style</td> <td></td> </tr> <tr> <td>text-decoration</td> <td></td> </tr> <tr> <td>text-indent</td> <td>缩进</td> </tr> <tr> <td>line-height</td> <td>行间距</td> </tr> <tr> <td>word-spacing</td> <td>单词间隔</td> </tr> <tr> <td>letter-spacing</td> <td>字母间隔</td> </tr> </tbody></table> <h2 id="CSS盒模型"><a href="#CSS盒模型" class="headerlink" title="CSS盒模型"></a>CSS盒模型</h2><p>在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。</p> <p>常用的块状元素有：</p> <pre><code><div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> </code></pre> <p>常用的内联元素有：</p> <pre><code><a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> </code></pre> <p>常用的内联块状元素有：</p> <pre><code><img>、<input> </code></pre> <hr> <ul> <li><p>块级元素</p> <ul> <li>每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）</li> <li>元素的高度、宽度、行高以及顶和底边距都可设置。</li> <li>元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。<br /></li> </ul> </li> <li><p>内联元素/行内元素</p> <ul> <li>和其他元素都在一行上；</li> <li>元素的高度、宽度及顶部和底部边距<code>不可</code>设置；</li> <li>元素的宽度就是它包含的文字或图片的宽度，不可改变；</li> <li>块状元素也可以通过代码display:inline将元素设置为内联元素。<br /></li> </ul> </li> <li><p>内联块状元素</p> <ul> <li>和其他元素都在一行上；</li> <li>元素的高度、宽度、行高以及顶和底边距都可设置。</li> </ul> </li> <li><p>盒模型</p> <ul> <li>块状元素都具有盒子模型的特征</li> <li>边框<ul> <li>border-style（边框样式）常见样式有：<br> dashed（虚线）| dotted（点线）| solid（实线）。</li> <li>border-color（边框颜色）中的颜色可设置为十六进制颜色，如:<br> border-color:#888;//前面的井号不要忘掉。</li> <li>border-width（边框宽度）中的宽度也可以设置为：<br> thin | medium | thick（但不是很常用），最常还是用象素（px）。</li> <li>四个方向表示为botton、top、right、left，可分别进行设置</li> </ul> </li> <li>宽度和高度<br> width和height指的是填充以里的内容范围，因此一个元素实际宽度（盒子的宽度）=左边界margin+左边框border+左填充padding+内容宽度+右填充+右边框+右边界。</li> <li>填充padding<br> 元素内容与边框之间是可以设置距离的，称之为“填充”</li> <li>边界margin<br> <strong>注意：</strong> padding在边框里，margin在边框外。</li> </ul> </li> </ul> <h2 id="CSS布局模型"><a href="#CSS布局模型" class="headerlink" title="CSS布局模型"></a>CSS布局模型</h2><p>布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。 </p> <ul> <li>流动模型（Flow）<ul> <li>块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。</li> <li>内联元素都会在所处的包含元素内从左到右水平分布显示。<br /></li> </ul> </li> <li>浮动模型 (Float)<br>float:left/right</li> <li>层模型（Layer）<br>层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作.<ul> <li>绝对定位(position: absolute)<br>需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。</li> <li>相对定位(position: relative)<br>相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动</li> <li>固定定位(position: fixed)<br>与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。</li> </ul> </li> </ul> <h2 id="CSS代码缩写"><a href="#CSS代码缩写" class="headerlink" title="CSS代码缩写"></a>CSS代码缩写</h2><ul> <li>盒模型代码简写<ul> <li>如果top、right、bottom、left的值相同，如下面代码：<br> margin:10px 10px 10px 10px;<br> 可缩写为：<code>margin:10px;</code></li> <li>如果top和bottom值相同、left和 right的值相同，如下面代码：<br> margin:10px 20px 10px 20px;<br> 可缩写为：<code>margin:10px 20px;</code></li> <li>如果left和right的值相同，如下面代码：<br> margin:10px 20px 30px 20px;<br> 可缩写为：<code>margin:10px 20px 30px;</code></li> </ul> </li> <li>颜色值缩写<br>关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。</li> <li>字体缩写</li> </ul> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">body{</span><br><span class="line"> font:italic small-caps bold 12px/1.5em "宋体",sans-serif;</span><br><span class="line">}</span><br></pre></td></tr></table></figure> <p><strong>注意：</strong></p> <ol> <li>使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。</li> <li>在缩写时 font-size 与 line-height 中间要加入“/”斜扛。</li> </ol> <h2 id="颜色值"><a href="#颜色值" class="headerlink" title="颜色值"></a>颜色值</h2><ul> <li>英文命令颜色</li> <li>RGB颜色</li> <li>十六进制颜色</li> </ul> <p>##长度值<br>-像素px<br>-em即font-size值<br>-百分比</p> <h2 id="css样式设置技巧"><a href="#css样式设置技巧" class="headerlink" title="css样式设置技巧"></a>css样式设置技巧</h2><ul> <li>水平居中设置-行内元素<br>如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。</li> <li>水平居中设置-定宽块状元素<br>满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。</li> </ul> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><style></span><br><span class="line">div{</span><br><span class="line"> border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/</span><br><span class="line"> </span><br><span class="line"> width:500px;/*定宽*/</span><br><span class="line"> margin:20px auto;/* margin-left 与 margin-right 设置为 auto */</span><br><span class="line">}</span><br><span class="line"></style></span><br></pre></td></tr></table></figure> <ul> <li><p>水平居中总结-不定宽块状元素方法</p> <ul> <li>加入 table 标签<ol> <li>为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <code><tbody>、<tr>、<td></code>)。</li> <li>为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。</li> </ol> </li> <li>设置 display:inline 方法<br> 改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中效果</li> <li>设置 position:relative 和 left:50%;<br> 通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。</li> </ul> </li> <li><p>垂直居中-父元素高度确定的单行文本<br>父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。</p> <p> height:100px;<br> line-height:100px;</p> </li> <li><p>垂直居中-父元素高度确定的多行文本</p> <ul> <li>使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。</li> <li>在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。</li> </ul> </li> <li><p>隐性改变display类型</p> </li> </ul> </article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="http://example.com">筠</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="http://example.com/2015/11/03/HMTL%E5%92%8CCSS%E7%9A%84%E4%BA%8C%E5%91%A8%E7%9B%AE/">http://example.com/2015/11/03/HMTL%E5%92%8CCSS%E7%9A%84%E4%BA%8C%E5%91%A8%E7%9B%AE/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://example.com" target="_blank">琴韵居</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/html/">html</a><a class="post-meta__tags" href="/tags/css/">css</a></div><div class="post_share"><div class="social-share" data-image="/img/avatar2.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.3/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.3/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2015/11/16/%E4%B8%AD%E4%BA%8C%E9%80%97%E6%AF%94%E5%B7%B2%E5%BC%83%E7%96%97%EF%BC%8C%E5%A4%A7%E4%B8%89%E7%84%A6%E8%99%91%E5%8F%88%E6%9D%A5%E6%89%BE/" title="中二逗比已弃疗，大三焦虑又来找"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">中二逗比已弃疗，大三焦虑又来找</div></div></a></div><div class="next-post pull-right"><a href="/2015/10/06/%E4%BA%BA%E9%97%B4%E5%A4%B1%E6%A0%BC/" title="书摘|人间失格|太宰治"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">书摘|人间失格|太宰治</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2015/04/09/play-html/" title="玩玩html"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2015-04-09</div><div class="title">玩玩html</div></div></a></div><div><a href="/2015/04/16/play-css/" title="玩玩css"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2015-04-16</div><div class="title">玩玩css</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/img/avatar2.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">筠</div><div class="author-info__description"></div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">123</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">29</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div><a id="card-info-btn" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">寻常一样窗前月，才有梅花便不同。</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#html"><span class="toc-number">1.</span> <span class="toc-text">html</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AE%A4%E8%AF%86%E6%A0%87%E7%AD%BE"><span class="toc-number">1.1.</span> <span class="toc-text">认识标签</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2020/02/24/BookZxjmdglxsm/" title="书评 | 书摘 | 哲学家们都干了些什么"><img src="https://i.loli.net/2019/11/23/6Gq8V9ekIKYnCvj.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="书评 | 书摘 | 哲学家们都干了些什么"/></a><div class="content"><a class="title" href="/2020/02/24/BookZxjmdglxsm/" title="书评 | 书摘 | 哲学家们都干了些什么">书评 | 书摘 | 哲学家们都干了些什么</a><time datetime="2020-02-24T07:16:14.000Z" title="发表于 2020-02-24 15:16:14">2020-02-24</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2019/12/16/PhotoShop-A-jichu/" title="笔记 | PhotoShop基础篇">笔记 | PhotoShop基础篇</a><time datetime="2019-12-16T05:11:17.000Z" title="发表于 2019-12-16 13:11:17">2019-12-16</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2019/11/24/BookXzfjjxjy/" title="书摘 | 薛兆丰经济学讲义"><img src="https://i.loli.net/2019/12/08/ZsmgdNYHU5A3bwS.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="书摘 | 薛兆丰经济学讲义"/></a><div class="content"><a class="title" href="/2019/11/24/BookXzfjjxjy/" title="书摘 | 薛兆丰经济学讲义">书摘 | 薛兆丰经济学讲义</a><time datetime="2019-11-24T13:40:46.000Z" title="发表于 2019-11-24 21:40:46">2019-11-24</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2019/11/24/MySoftware/" title="软件记录 | 常用、效率、体验">软件记录 | 常用、效率、体验</a><time datetime="2019-11-24T04:31:59.000Z" title="发表于 2019-11-24 12:31:59">2019-11-24</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2019/08/08/ThingsAboutTensorflow-Keras/" title="关于TensorFlow与Keras的一些事">关于TensorFlow与Keras的一些事</a><time datetime="2019-08-08T09:51:02.000Z" title="发表于 2019-08-08 17:51:02">2019-08-08</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">©2020 - 2024 By 筠</div><div class="framework-info"><span>框架 </span><a href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js?v=4.13.0"></script><script src="/js/main.js?v=4.13.0"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0.33/dist/fancybox/fancybox.umd.min.js"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span> 数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js?v=4.13.0"></script></div></div></body></html>