HTML基础 CSS (上)

 1.图片标签

            租用:向页面中插入一张图片,让图片显示出现

            语法:单标签

            基本语法: <img src="图片存储的地址">

             属性:

             1)src路径属性

                    a)图片和页面文件是同级关系:直接讲图片的名字作为路径即可

                    b)页面文件和图片所在的文件夹是同级关系: 先进入,再去找图片

                    c)页面所在的文件夹和图片是同级别关系: 需要先返回上一级然后再去赵对应的图片

                    d)当前页面所在的文件夹,和图片所在的文件夹是同级别关系的话,则:需要先返回上一级,然后在进入到图片文件夹内,再去找图片

                    路径:

                        相对路径:相对于文件和文件夹之间的关系去查找对应的文件以上的几种情况都属于相对路径

                        绝对路径:是一个完整的地址:互联网地址,某一盘符中的地址

                            http://www.baidu.com/picture/img/makabak.png

                            C://学习资料/mp4/112233/隐藏/pic.png

                        目前来看你做开发的时候大部分使用的是绝对路径:你得治图片地址大部分是存在服务器上面的;

                        学习一阶段的时候:你使用的路径大部分:相对路径

                    注意:

                        ./=====当前目录

                        /======进入目录

                        ../====放回上一接

                        ../../=返回上两级

                2)alt属性

                    图片描述:作用:图片为破损文件的时候,会有一个提示文本显示出来,告诉用于该图片显示的应该是啥

                    只有为破损文件的时候才会显示,正常加载不会显示;文本可以选中,文本是占空间位置的

                3)title属性

                    图片描述:作用:当鼠标划过的时候,会有一个提示信息,告诉用户这里显示的是啥,如果你有超链接的话,高度你跳转的目标地址是啥

                    任何一个标签都可以使用title属性;提示文本不占页面控件

                问题:面试题:alt和title的区别是啥?

                    1)相同点:都属于提示文本,都属于图片的标签属性

                            建议都添加两个属性,好处:方便爬虫的爬取,提高搜索引擎的优化及排名

                    2)不同点:alt是破损的时候才会提示;title无论是否破损都会提示

                            alt提示文本占空间;title不占空间的

                4)width和height===需要带单位

                    width==宽度

                    height==高度

                    注意:实际开发的时候很少使用代码控制图片的大小:使用了代码控制图片大小,让图片容易失真

                    注意:只设置一个属性的话,另外一个方向会自动缩放,会成等比例的缩小方法

        2.列表标签:

            清单标签

            1)有序列表

                有顺序的列表:

                    ol

                        li

      2)无序列表     

                没有顺序的列表

                    ul

                        li

            3)自定义列表

                自行定义的列表

                    dl

                        dt

                        dt

            有序和无序的应用场景:实际开发的时候

                经常使用有序无序列表: 新闻列表, 信息区域展示,导航栏

            自定义:图文混排,地址导航(小米网站底部).

        3.特殊符号

            因为有些符号,直接不能在浏览器中显示的,需要,使用特殊符号处理显示

            1)空格

                &nbsp;===半角空格

                &emsp;===全角空格

            2)大于号和小于号<>

                p标签的基本语法为:<p>文本</p>

                <======&lt;

                >======&gt;

                &lt;p&gt;文本&lt;/p&gt;

            3)版权符号

                ©======&copy;

            4)商标符号:

                ™======&trade;

                ®======&reg;

        4.超链接标签

            超链接标签就是a标签

            存在两个功能

            1)超链接功能

                能实现不同页面之间的跳转,跳转到百度,新浪,跳转到其他的页面

                标签:a标签==双标签

                基本语法:<a href="地址,链接">文本/图片</a>

            2)锚点功能

                能实现:相同页面中的不同区域的跳转 ===锚点功能

                基本语法:

                    点击区域: <a href="#锚点名字">文本</a>

                    跳转区域: <div id="锚点名字"></div>

                作用,点击超链接的视乎让其跳转到对应的位置;====某区域置顶课件

                实际开发的时候:大部分使用一行js代码完成

                返回置顶:只需要在超链接区域href取值上面给上一个#

        5.表单及其控件

        6.补充一个属性:

            超链接和表单form共有的一个属性target属性 控制表单,超链接的打开方法

                在新的页面打开还是原窗口打开

                target=""

                    取值:

                        _self======默认值,在之窗原本窗口打开

                        _blank=====新的窗口打开

                        不常使用

                        _top=======在顶部框架窗口打开

                        _parent====在父级框架窗口打开

        7.水平线标签

            hr==单标签

            基本语法:<hr>

        8.div和span标签=======使用的频率是最高的

            1)div=====盒子标签,块元素,容器标签

                作用:主要应用于布局区块的划分

                语法:双标签

                基本语法:<div></div>

                特点:纵向排列,如果想要实现横向排列:需要使用后面的知识:浮动

            2)span====空标签,空标记,行内元素,容器,只放文本

                作用:独立文本的修饰

                语法:双标签

                基本语法:<span>文本</span>

                特点:span标签横向排列

        1.网站的组成部分

            HTML结构层(标签)

                单

                双

            CSS样式层

                就是对结构的修饰

            JS行为加护层

     css常用标签:

 行内修饰:行内样式表

     width:宽度                                         例:   width:1000px;

     height:高度                                        例: height:100px;

     background-color:背景颜色属性      例  background-color: aqua;

     link 引入外部的css文档                     例: <link rel="stylesheet" href="./css/16.css">

  2.CSS相关知识点:

            1)含义:CSS cascanding(层叠) style(样式) sheet(表)

                    CSS被称之为层叠样式表

            2)文件类型,后缀名是以.css为后缀名的文件

            3)CSS基本语法

                选择器{

                    属性:属性值;                                           

                    属性:属性值;

                    属性:属性值

                }

                基本语法特点:

                    1)属性和属性值放在{}里面不在是放在标签里面了

                    2)属性和属性值使用冒号(:)链接

                    3)每一组属性和属性值结束需要使用分号(;)分割

                    4)最后一组属性和属性值不需要带分号,但是建议你带上

                    5)属性值不需要带引号了

                选择器:查找页面元素的一种方式方法,这种方法有很多,

                {}:样式规则,规定了选择器查找到的元素实现何种样式

                例如:

                    男生{

                        上衣:紧身衣;

                        鞋子:豆豆鞋;

                        上衣颜色:红色;

                        裤子的颜色:绿色;

                    }

                    规定了所有的男同学,实现{}里面的样式

                    姓李的男生{

                        钱包:100w;

                    }

                两个面试题:

                    1)CSS基本语法的构成

                        两个部分组成:选择器,样式规则(样式声明)

                    2)CSS样式声明的组成部分

                        两个部分组成:属性和属性值

            4)CSS基本语法的使用:(3中使用情况)===CSS语法的使用位置问题

                考察点:就是使用位置:====样式表的位置

                a)应用在行内====直接讲CSS语句放在标签里面(行内样式表)

                    基本语法:

                        <div style="属性:属性值;属性:属性值;属性:属性值;"></div>

                    问题: 选择器是谁?就是这个对应的标签(div)

                   

                    行内书写形式完全可以可以进行修饰标签

                    存在弊端:

                        1)结构和样式放在一起,显示的比较混乱

                        2)不易于维护

                        3)代码冗余

                b)应用在html页面内部====内部样式表

                    基本语法:

                    <head>

                        <style>

                            选择器{

                                属性:属性值;

                                属性:属性值;

                            }

                        </style>

                    </head>

                    优点:节约代码,让结构看起来更加的简洁

                    缺点:没有做到充分的样式和结构的分离,因为还在一个页面中呢

                        如果代码过多则需要来回滚动.比较麻烦

                        如果代码过多的时候,修饰也会过多,只要一多,容易造成头重脚轻的情况

                c)外部样式修饰

                    把对应的CSS基本语法放在一个独立的以.css为后缀名的文件中

                    CSS文件和HTML文件===独立开来的

                    产生关系:link标签产生关系

                        在html页面的head标签内

                        <link rel="stylesheet" type="text/css" href="CSS文件的路径">

                        rel==引入文件读取的时候是样式表文件==必须值

                        type=引入文件的类型可以为text/css===可有可无

                    外部样式表:目前来看最优化的

                        充分的做到了结构和样式的分离;易于维护

                    实际开发的时候使用第三种频率比较高