Web基础02

一、图片

        1、图片的使用

        语法：<img src=""/>

                src        图片的地址 src="url"

        2、URL

                Uniform Resource Locator        统一资源定位符/器        俗称：路径

                URL分类

                ①绝对路径

                        是一个完整的路径结构，一般使用网络图片会用绝对路径   https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500

                ②相对路径

                        参照物是当前的HTML文件

                        1、HTML文件和图片是平级关系，src="01.jpg"

                        2、HTML文件和图片是平级的下级，src="平级/02.jpg"

                        3、HTML文件和图片是上级的平级，src="../03.jpg"

        3、属性

                src=""        引入图片的URL

                alt=""        图片加载失败时，显示的文本

                width=""        宽度

                height=""        高度

                        图片设置宽高如果只设置一个数值，另一边会自适应。

二、列表

        将具有相似特征或者具有先后顺序的内容按照从上到下或从左往右的顺序排列

        列表分类：

                1、有序列表

                        <ol></ol>       全称： order list

                                列表项

                                <li></li>

                2、无序列表(ps：现在大多使用无序列表)

                        <un></un>        全称：unorder list

                                列表项

                                <li></li>

三、标签的类型分类

        1、块级元素

                h1.....h6        p        div 。。。

        2、行内元素

                b        s        i        u        span 。。。

                ----行内块元素（行内元素的分支）

                        可以设置宽高(主要是在特殊情况下为给行内元素设置宽高)

                        在head标签中编写style标签，在style标签中编写块的属性

                        例：div{

                                        display：inline-block；

                                }

                        即可设置元素宽高

CSS

        Cascading Style Sheets

        简称：样式表

一、语法规范

        常用的样式属性

        color：颜色；        设置文字颜色

        font-size：16px；        设置文字大小

        background-color：背景颜色；        设置背景颜色

        

        样式规则：

        1、行内样式

                任何元素都有style属性，在style中编写样式

                缺点：不能重用

        2、内部样式

                在head标签中编写style标签

                在style标签中编写样式

                选择器{......}

                缺点：只能在当前页面中重用

        3、外部样式

                单独创建一个.css文件

                在html的head中使用link标签引入

                <link rel="stylesheet" href="styleTset.css">        

                特点：在当前项目中的所有页面都可以使用

二、选择器

        规范页面中哪些元素能够使用当前设置的样式

        实际就是一个条件，（判断）如果符合这个条件的所有元素都会应用这个样式

        1、元素选择器

                设置当前页面中对应元素的公用样式

                div{......}        p{.......}

        2、id选择器

                id在一个页面中不能重复，所有的id选择器只能被元素应用

               注意： 命名时不能以数字开头,ID里不要有括号

                #d1{......}

        3、类选择器

                使用：        .定义样式，  d1{.....}(定义)

                谁需要用，谁就用class调用

        4、后代选择器

                通过元素的后代关系，来匹配元素

                后代关系：一层嵌套或者多层嵌套为后代

                .d1 span{......}

        5、子代选择器

                通过元素的子代关系，来匹配元素

                子代关系：一层嵌套为子代

                .d1>p>span{......}

        6、伪类选择器

                匹配元素在某一种状态时的样式

                ：hover        鼠标悬停时的状态

                ：active        激活状态