前端学习day02

目录 

一、行属性标签

 二、图片

 三、快和行

四、emmet语法

五、标签嵌套规则

---

一、行属性标签

1.span 标记标签，没有实际意义，通常用来渲染文字。

2.iframe(框架)：

           src="需要显示的页面地址"

           height="设置宽度"

           width="设置宽度"

<iframe src="/01day/03基础标签-块.html" frameborder="0"></iframe>

3.a 标签：

        href 属性：用来设置超链接的地址

        title属性：鼠标悬停上去之后的提示信息

        target属性：规定在何处打开文档

               A.target=“_self“  默认值

       B. target=“_blank“  新窗口打开

      作用：1.设置一个超链接;

                2. 设置锚点：

                  最常用的是 回到顶部

                  如果在开发中需要设置a标签点击没有效果，则可以设置href属性为##既是：  href="##"

                  如果需要设置回到顶部 则 href="#"

                  不要设置href为空，这样会导致页面刷新

<a href="#">回到顶部</a>
<a href="#ye">锚点</a>
<div id="ye" style="height: 100px; background: #ff0; "></div>
<a href="##">点击没有效果</a>

                3.下载文件：

 a.如果设置下载文件是  音频、视频、图片、文档等，都需要经过压缩之后，再在href上设置文件的路径

 b.如果是 文本类型的文件，可以直接把文件路径设置在href属性上，直接由浏览器打开

<a href="./aa.rar">下载文件</a>
<a href="./abc.txt">文件</a>

1.加粗:（推荐使用strong） 

• strong  强调标签
• b          文本加粗(不常用，h5中即将废弃)

2.倾斜：（推荐使用em）

• em      强调并且斜体
• i       文本斜体  
• var     文本斜体(不常用，h5中即将废弃)

3.扩展：

• br        强制换行
• u         下划线
• sub      下标
• sup      上表
• q         标签，引用标签，他引用的内容比较简短
• pre      标签，格式化输出
• code   标签，一般是嵌套代码使用

4.特殊符号：

• &lt;   在html中渲染为:    <
• &gt;   在html中渲染为:   >
• &nbsp; 在html中渲染为；空格:
• &emsp:空格（占据1个中文宽度，不受字体影响）
• &copy: 在html中渲染为: ©  (版权）
• &trade:  在html中渲染为: ™(商标）

• &reg; 在html中渲染为: ® (商标）

---

 二、图片

img标签，是一个单标签。

        src属性：用来设置图片资源路径

        文件资源路径 分为三种：

        a.网络路径

             图片的网路地址。

        b.绝对路径

              从服务器根目录开始直到找到需要的文件的整个路径,一般不使用。

        c.相对路径

            相对于当前文件所在的资源路径

            ./ 代表的是当前目录

            ../ 代表的是上一级目录

            相对路径在开发中最常用

        alt属性，用来解释图片的内容

            作用：

            1.当图片没有被加载的时候，会显示alt的内容

            2.通过alt属性，告诉浏览器当前图片的内容

         title属性：鼠标悬停上去之后的提示信息

        width/height 设置图片的宽和高

            在实际的开发当中，一般指设置单个的宽或者高，另一侧根据比例显示大小

---

 三、快和行

1.块属性标签

            a.独自占据一行空间，支持宽和高的设置,设置完宽和高以后，仍然独占一行；

            b.支持上下 padding  和 上下 margin；

2.行属性标签

            a.不会独占一行，从左至右横向排列；

            b.无法设置宽和高，他的宽和高由内容撑开；

            c.不支持上下 padding 和 上下 margin；

---

四、emmet语法

E 代表标签名

        E*n 创建n个E标签

        E{自挂东南枝}*n 创建n个内容为‘自挂东南枝’的E标签 

        E{自挂东南枝}*n 创建n个内容为‘自挂东南枝’+序号的E标签，$表示序号，从1开始

     <!-- ul>li*5>a{百度$} -->
     <ul>
        <li><a href="">百度1</a></li>
        <li><a href="">百度2</a></li>
        <li><a href="">百度3</a></li>
        <li><a href="">百度4</a></li>
        <li><a href="">百度5</a></li>
     </ul>

        > 表示的是下一个层级（子元素）

        E>a 在E标签中添加子元素 a 标签

        + 表示同级

        E+p 同时创建兄弟元素E和p，不相互嵌套

        ^ 表示上一级

        E>p^div  创建 div 标签 和E 标签同级

        使用[] 设置属性

<!-- div[id] -->
<div id=""></div>

---

五、标签嵌套规则

1.块标签可以作为一个布局标签，嵌套所有的标签

2.行标签不能嵌套块标签

以下标签不能相互嵌套：

            1.p 标签，h1-h6都不能相互嵌套，并且他们也不能嵌套块标签

            2. a 标签不能相互嵌套