Day02

01、行属性标签

1. span 标记标签

没有实际意义，通常用来渲染文字

2. a 标签

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

        target 属性：设置标签页的打开方式

                _blank：在新标签页打开

                _self：默认值，在当前页打开

作用：

            1.设置一个超链接

            2.设置锚点

                最常用的效果是 回到顶部

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

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

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

            3.下载文件

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

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

        iframe 框架

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

               height="设置高度"

               width="设置宽度"

3.strong 强调标签

        em 强调并且斜体

        b 文本加粗（不常用，H5中即将废弃）

        i 文本斜体

        var 文本斜体（不常用，H5中即将废弃）

4.q 标签,引用标签，他引用的内容比较简短

        pre 标签，格式化输出

        code 标签，一般是嵌套代码使用

        %lt; 在Html中渲染为 <

        &gt; 在Html中渲染为 >

        %nbsp; 在Html中渲染为 空格

02、图片

1.img 标签，是一个单标签

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

        文件资源路径 分为三种

        a.网络路径

            图片的网络地址

        b.绝对路径

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

        c.相对路径

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

            ./ 代表的是当前目录

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

            相对路径是开发中最常用的

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

            作用：

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

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

        width/height 设置图片的宽和高，在实际的开发当中，一般只设置单个的宽或者高，另一侧根据比例自适应

03、总结

1.块属性标签

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

            b.支持上下 padding 和 上下 margin

        2.行属性标签

            a.不会独自占用一行空间，从左至右横向排列

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

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

04、emment语法

E 代表标签名

        E(标签名)*n  创建n个 E 标签

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

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

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

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

        + 表示同级

        E+p 同时创建兄弟元素 E 和 p（二者不相互嵌套）

        ^ 表示上一级

        E^div

        使用[] 设置属性

04、嵌套

标签嵌套规则

        1.块标签可以嵌套所有的标签

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

        以下标签不能相互嵌套

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

        2.a 标签不能相互嵌套

06、css样式表

设置类名

            .类名 {

                样式内容

            }

            text-align: 文本排布，一般放在块标签上，用来控制块标签中 行标签 和 文本的对齐位置：

                left：左对齐（默认）

                center： 居中对齐

                right： 右对齐

css 层叠式样式表，他是用来给Html结构添加样式的

        样式表的引入方式：

        1.行间样式

            在标签上，设置style属性，在style中设置样式

        2.内部样式表

            在head中设置 style 标签，在标签中设置样式