第二天

标签的语义化

合理的标签做合理的事情

标签类型

div标签（大盒子标签）

<div> </div>

span标签（小盒子标签）

<span></span>

格式化标签

• 加粗：b或者strong
• 斜体：i或者em
• 删除线：del和s
• 下划线：ins 和u

预格式化标签

<pre></pre>

iframe元素标签

!-- 内联框架标签 -->
         <!-- 
            src:路径
            width:宽度
            height:高度
            framebdrder:值是“1”或者“0”   1是有边框  0是没有边框
          -->
            <iframe src="路径  width="1200"   height="900" frameborder="0"></iframe>

三大列表

  <!-- 三大列表 -->
    <!-- 无序列表 -->
    <ul>
        <li>1111</li>
        <li>2222</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>111</li>
        <li>222</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
        <dt>早餐</dt>
        <dd>包子</dd>
        <dd>油条</dd>
        <dd>豆浆</dd>
    </dl>

标签的划分

块级元素

<!-- 块级元素（标签） -->
 <!-- 
     特点：
       独占一行 可以设置宽高
       排列方式是纵向排列 从上往下 
       如果不设置宽高，会继承父级的宽高
  -->
 <div>我是div</div>
 <div>我是div</div>

块状元素标签：

<!-- 块级元素 -->
<div>高怀东</div>
<ol><li></li>
   <li></li>
</ol>
<ul>
   <li></li>
   <li></li>
</ul>
<dl>
   <dt>111</dt>
   <dd>222</dd>
   <dd>333</dd>
</dl>

<h1>一级标题</h1>
<p>段落</p>
<pre>
   111
     22
      333
</pre>

行内元素

<!-- 行内元素 -->
    <!-- 
        特点：
         共占一行，不能设置宽高
         排列方式是横向排列，从左往右
         如果不设置宽高，由内容撑开
     -->
    <span>我是span我是span我是span我是span我是span</span>

    <span>我是span</span>

行内元素标签：

<!-- 行内标签 -->
<span>小盒子</span><span>777</span>
<span>hohoi</span>
<i>斜体</i>
<em>斜体</em>
<b>加粗</b>
<strong>加粗</strong>
<s>111</s>
<del>删除</del>
<ins>下划线</ins>
<u>下划线</u>
<a href="">百度</a>

行内块元素

<!-- 行内块元素 -->
  <!-- 
      特点：
        攻占一行，可以设置宽高
        排列方式是横向排列，从左往右
   -->
   <div>
      <img src="图片" alt="">
      <img src="图片" alt="">
   </div>

行内块元素标签：

<!-- 行内块 -->
<img src="" alt="uhiu">
<iframe src="" frameborder="">iubibsdadaadku</iframe>

更改显示类型

格式：dispaly:value

block 块状元素

inline 内联元素

inline-block 内联块状元素

none 隐藏元素

绝对路径和相对路径

   <!-- 路径：绝对路径和相对路径 -->
<!-- 绝对路径：物理磁盘或者线上地址 -->
<img src="" alt="">
<!-- 相对路径： -->
<!-- ./同级 可以省略不写 -->
<!-- ././  返回上一级-->
<!-- /   进入下一级 -->

面试题

让一个元素消失有几种方法

<style>
   
        1. /* div{display: none;}隐藏后，位置不在 */
        2. /* div{visibility: hidden;}隐藏后，位置还在 */
        3./* div{opacity: 0.5;}控制透明度透明度是0-1  0是完全透明  1就是不透明 */
        4./* div { margin-left: -200px;} margin负值，不是消失了，是将它移动到屏幕左侧看不见的位置 */
        5./* div{font-size: 0;} */
        6. /*div{width: 0;
                height: 0;
                overflow: hidden;} */

    </style>