前端记录第二天

1、列表标签

（1）有序列表

有序列表：使用有序的序号作为项目符号。

        可以通过type属性指定序号的类型。

可选值：1、默认值，使用阿拉伯数字

                2、a/A，采用小写或大写字母作为序号

                3、i/I，采用小写或大写的罗马数字作为序号

<ol type='circle'>
      <li>打豆豆</li>
      <li>吃饭</li>
      <li>睡觉</li>
    </ol>

（2）无序列表

无序列表：使用无序的序号作为项目符号

        通过type属性可以修改无序列表的项目符号。

可选值：1、disc，默认值，实心的圆点

                2、square，实心的方块

                3、circle，空心的圆

注意：1、默认的项目符号我们一般都不使用！！

           2、如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置

           3、ul和li都是块元素

<ul type="A">
      <li>
        我是ul下的li
      </li>
      <li>
        我是li里面的li
      </li>
    </ul>

    <ul type='I'>
      <li>吃饭</li>
      <li>睡觉</li>
      <li>打豆豆</li>
    </ul>

（3）定义列表

        定义列表：用来对一些词汇或内容进行定义。

        使用dl来创建一个定义列表，dl中有两个子标签

        dt：被定义的内容

        dd：对定义内容的描述

注意：dl、ul、ol之间都可以相互嵌套

<dl>
      <dt>html</dt>
      <dd>html的描述</dd>

      <dt>css</dt>
      <dd>css的描述</dd>
    </dl>

2、超链接标签    a

        HTML页面使用超链接与网络上的另一个HTML页面相连。几乎可以在所有的网页中找到超链接。

点击超链接会出现很多效果：

        1、可以让我们从一个页面跳转到另一个页面。

        2、跳转到当前页面的其他位置。

        3、下载

—在HTML中链接可以是一个字，一个词，也可以是一个图片，这些都是可以点击的。

—使用a标签来创建一个超链接，它是个行内元素，在a标签中可以嵌套除自身外的任何元素。

属性：

        （1）: href:指向链接跳转的目标地址

        -值可以是一个外部的网站的地址（绝对路径），-可以是一个内部页面的地址（ 相对路径）

        （2）target属性：可以用来指定打开链接的位置

                可选值：

                        self，表示在当前窗口中打开（默认值）

                        blank，在新的一个新的页面中打开链接

可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开

        4、锚点功能（页面内的跳转）

        所谓锚点 ，就是指当点击链接文本时，跳转到当前页面的指定元素位置

        （1）若将超链接的href属性设置为#，点击超链接后，页面不会发生跳转，而是跳到当前页面的顶部的位置

        （2）跳转到页面的指定位置，

                语法：将href属性设置为 #目标元素的id属性值

<a href="#bottom">去底部</a>

<p  id="bottom">底部</p>

        给标签加标记——id属性（唯一不重复的标记）

        （1）每一个标签都可以添加一个id属性

        （2）id属性就是元素的唯一标识，同一页面中不能出现重复的id属性

        （3）id区分大小写，且不能以数字开头

5、空链接

不想使<a>元素的跳转功能生效，在href属性中写入一个#或者是javascript:;，

此时的超链接没有作用，当还没有想好超链接具体跳转位置时，可以当做占位符使用。

3、图片标签    img

        使用img标签来向网页中引入一个外部图片，

        img标签是一个自闭合标签

        img这种元素属于行内块元素（基于块和行内元素之间，具有两种元素的特点）

属性：

         src：设置一个外部图片的路径，路径规则跟超链接是一样的

        alt：可以用来设置在图片不能加载时，对图片的描述

        搜索引擎可以通过alt属性来识别不同的图片，如果不写alt属性，则搜索引擎不会对img中的图片进行收录

        width：可以用来修改图片的宽度,一般使用px作为单位

        height：可以用来修改图片的高度，一般使用px作为单位

注意：

        1:宽度和高度两个属性如果指设置一个，另一个也会同时等比例调整大小

        如果两个值同时指定则按照你指定的值来设置

        2:一般开发中除了自适应的页面，不建议设置width和height

        大图变小，会多占内存，小图变大会失真

        3:pc端，需要多大的图，就裁多大的

        移动端，进场会对图片进行缩放（大图缩小）

4、块元素

        -在网页中一般通过块元素对页面进行布局

        -特点：会独占一行的的元素,无论他的内容有多少他都会独占一整行

        -例：p h1 h2 h3 div header ul li...等

5、行内元素

        -用来包裹文字

        -特点：指的是只占自身大小的元素，不会占用一行

        -例：a span,em strong...等

6、行内块元素

注意：

        1：一般情况下，会在块元素中放行内元素，而不会在行内元素中放块元素

        2:块元素中基本什么都能放

        3:p元素中不能放任何块元素 特殊的存在。

特点：1、行内块元素之间可以在一行展示

            2、可以设置宽和高

7、布局标签

        header 网页的头部

        main 网页的主体部分（一般就一个）

        footer 网页的底部

        nav 网页的导航

        aside 和主体相关的内容，侧边栏

        article 文章之类的

        section 独立的区块，上面的标签都不合适就用这个

        div 没有语义，就用来表示一个区块，目前来讲div还是主流的布局元素

        span 行内元素 ，也是没有任何语义，一般用于在网页中选中文字

<header></header>
    <main>
      <nav></nav>
      <aside></aside>
      <article></article>
      <section></section>
      <div></div>
      <span></span>
    </main>
    <footer></footer>

8、   音频标签

        src是引入外部音频的路径，audio标签之间的文本是用于音频不生效时展示的文本内容

属性：1、controls 显示播放控件

           2、autoplay 自动播放（部分浏览器不支持）

           3、loop 循环播放

音频标签目前支持三种格式：mp3、Wav、Ogg

<audio src="" controls autoplay loop></audio>

9、视频标签

                src是引入外部音频的路径，vedio标签之间的文本是用于视频不生效时展示的文本内容

         属性：1、controls 显示播放控件

                     2、autoplay 自动播放（部分浏览器不支持）

                     3、loop 循环播放