2022.09.16

自学前端第二天的笔记：

今天在B站自学了无序、列表，有序列表，自定义列表图像标签，绝对路径，超链接   ，锚点链接

type 属性：定义列表 项符号

  1.      有序列表：1 ，A, a , I , i

        type 属性：

        a  是小写英文字母

        A 是大写英文字母

        i 是小写罗马数字

        I 是大写罗马数字

   2. 无序列表 ：disc（实心圆，默认）square（方块）

                                circle（空心圆）

   3.自定义列表：

 <dl></dl>定义自定义列表

 <dt></dt>定义专业名词

 <dd></dd>对专业名词进行解释

  4.图像标签：

            src属性：（必须）

                作用：用于指定图像文件路径

            alt属性：

                作用：当图片加载失败时，显示文字进行替换，有利于用户体验

            title属性：

                作用：当鼠标悬停在图片上面时，鼠标右下角出现对图片解释说明的文字，有利于用户体验

            width属性：

                作用：设置图片的宽度    

            height属性：

                作用：设置图片的高度

                如果指定一个宽或高时，那么另外一个值按照原比例进行等比缩放

                值可以不带单位，默认就是px（像素）

     5.绝对路径与相对路径

        

  绝对路径：

                1.本地磁盘

                2.网络地址  

                特点：指向同一位置，无论在何处使用

        相对路径：

                以当前html文件为原点（参照物），去建立目标关系，当前目录，下一级目录

                        当前目录：

                            ./ 代表当前目录    ./后面加文件名

                            如果当前html和图片在同一级目录里面， . /是可以省略的

                        下一级目录：

                            /  表示下一级目录

                        上一级目录：

                        . . / 表示打开上一级目录

                        上上级目录：

                        . ./ . ./

      6.超链接：

        

默认样式：

                默认带下划线    自带字体颜色

                不独占一行

                默认在当前窗口打开

               

        href 属性：

                指定跳转的地址

        target属性：

                指定目标地址的打开方式

                取值：

                            _blank      新窗口打开

                            _self           当前窗口打开（默认值）

        title属性 ：

                作用：提示文本：当鼠标悬停在链接上时会显示里面的文字

  7.锚点链接

锚点：

                当我们点击锚点链接时，可以快速定位到页面中的某一个位置。

               

            单页面的锚点跳转：

                语法：

                            定义目标：<div  id="id 名称"></div>

                            定义跳转点：<a href="#box">锚点</a>

            多页面的锚点跳转：

                    定义目标：目标点(a html) 页面里的 <div id="id名称"></div>

                    定义跳转点：<a href="目标点的路径(a.html)# id名称（box1）"> logo </a>

                8.文本格式标签：

            

em标签 :

            默认样式：倾斜

                            不独占一行

            有语义：强调内容

   i 标签:

            默认样式：倾斜

                            不独占一行

            没语义

    strong标签:

            默认样式：加粗

                            不独占一行

            有语义：强调内容

     b标签:

            默认样式：加粗

                            不独占一行

            没语义

            del标签 :

                    删除内容

            默认样式：

                    带有中划线

                    不独占一行  

            sup标签:

                    上标标签    

                       

            sub标签：

                    下标标签    

            span标签：(万用标签)

                    通常用来区分文本的样式

                无语意标签，也无默认样式

            ins标签：下划线

9.实体字符

实体字符：

                &nbsp； 空格

                &gt;    大于号>

                &lt；  小于号<

10   . 语义化的好处？

        1.在没有css的情况下，页面也能很好的呈现出内容结构。

        2.让代码更具有可读性，便于团队的开发和维护。

        3.有利于我们的SEO搜索引擎优化。

        4.有利于用户体验   img title alt

11.css行内样式

 css样式         行内样式

  <开始标签   styple="属性：属性值；"></ 结束标签>

今天的总结就是这些啦，欢迎前来共同学习！