day2-列表-多媒体标签-区块标签-2022-11-17

day2-列表-多媒体标签

一、 dl、dt、dd

1、dl：定义列表（definition lists）

2、dt：列表元素标题(definition term)

3、dd：列表元素里面的内容（definition description）
实践如下：

<dl>
         <dt>运动项目：</dt>
         <dd>羽毛球</dd>
         <dd>足球</dd>
         <dd>篮球</dd>
  
         <dt>学习内容：</dt>
         <dd>语文</dd>
         <dd>数学</dd>
         <dd>英语</dd>
         
         <dt>深圳</dt>
         <dd>中国经济特区、全国性经济中心城市和国际化城市</dd>
     </dl>

二、有序列表ol（Ordered list）

有序列表的type的类型有：1、a、A、i、I
实践如下：

<ol type="A">
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
    </ol>
    <ol type="1">
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
    </ol>
    <ol type="a">   
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
    </ol>
    <ol type="I">   
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
    </ol>

三、无序列表（Unordered list）

无序列表的type的类型有：square方块、none、circle空心圆点、disc实心圆点。
实践如下：

   <ul type="square">
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
    </ul>
    <ul type="none">
        <li>2222</li>
        <li>2222</li>
        <li>2222</li>
    </ul>
    <ul type="circle">
        <li>3333</li>
        <li>3333</li>
        <li>3333</li>
    </ul>
    <ul type="disc">
        <li>4444</li>
        <li>4444</li>
        <li>4444</li>
    </ul>

总结：列表的用途很广泛，一个网页内容部分基本要用到列表

四、2022-11-17散乱的知识点

1、超链接 a

 <a href="">xxxx</a>

2、插入图片

 <img src="" alt="">

3、插入视频

    <video src="video/xxxx.mp4" controls loop autoplay width="300"></video>

4、插入音频

 <audio src="music/wellspring.mp3" controls autoplay loop>
        请升级浏览器
    </audio>

5、绝对路径http://www.xxx.com/a/b/img/1.png

6、相对路径
往前退两级再进xxx文件： …/…/xxx/a.png
同在一级文件下：xxx/a.png

五、语义化标签

1、行内元素span、b、u、i 、strong、em、mark
实践如下：

  <div>
        <span>研研鱼</span>
        <span>研研鱼</span>
        <span>研研鱼</span>
    </div>
    <div>
        <b>研研鱼</b> 
    </div>
    <div>
        <u>研研鱼</u>
    </div>
    <div>
        <i>研研鱼</i>
    </div>
    <div>
        <strong>研研鱼</strong>
    </div>
    <div>
        <em>研研鱼</em>
    </div>
    <div>
        <mark>研研鱼</mark>
    </div>

<p>
        <figure>
            <img src="images/xxx/a.jpg" alt="">
            <figcaption>hhh</figcaption>
        </figure>
       
    </p>

2、区块标签
要熟练运用区块标签。养成下意识。而不是什么都用div！！

  <!-- 网页的头部  -->
        <header>网页的头部</header>
        <!-- 导航条 -->
        <nav>导航条</nav>
        <!-- 网页的核心：广告、文章 -->
        <main>网页的核心 </main>
        <!-- 文章内容 -->
        <article>
            <h1>文章的标题</h1>
            <section>部分1</section>
            <section>部分2</section>
            <section>部分3</section>
        </article>
        <!-- 广告 -->
         <aside>我是广告</aside>
        <!-- 页脚 -->
        <footer></footer>

学习总结：多练！！！！