菜鸟web笔记

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <!--

        <ul> 无序列表

        <li>列表项</li>

        语义:用于将没有数字顺序的一组内容或数据进行分组

        默认样式:

                默认间距(上下带外间距,左侧有内填充)

                列表样式:实心圆

        type属性---ul

              disc----实心圆

              circle---空心圆

              square---正方形

              none-----取消前面的列表符

          注意:type属性不常用,通常用css属性进行代替

         

          使用场景:新闻列表

                   商品列表

                   导航,分页,选项卡      


 

    </ul>-->

    <!--

        <ol>有序列表

           <li> 列表项</li>

           默认样式:

                 默认有间距(上下有外间距,左侧有内填充)

                 列表样式:数字编号

            type属性

                  type=”1“ 默认的数字序号

                  type=”a“小写字母序号

                  type=”A“大写字母序号

                  type=”i“小写罗马数字

                  type=“I”大写罗马数字

            使用场景:

                  排行榜单

                  步骤清单

                  面包屑导航    


 

        </ol>

     -->

     <!--

        <dl>自定义列表

            <dt> 专业名词</dt>

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

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

            ·········

            ·····

            ···

            自定义列表:

                   语法:对专业名词进行定义和描述的列表

                     dl  定义自定义列表

                     dt  自定义列表项

                     dd  自定义列表的注释,解释,描述

                用于将一组项目及相关的描述进行分组的列表

                默认样式:

                     dl自带上下外间距  dd自带左侧外间距

                使用场景:

                       名称解释,分类,

                注意事项:

                       允许使用多条项目的定义和描述

                         

        </dl>

      -->

      <!--

        图像标签  img定义html页面中的图像

        语法

            <img src="" alt="" title=“” width=“” height=“”>

        属性

            src属性

                 作用:用于指定图像文件的路径和文件名

                 路径:images文件夹存放图片,找图片时,需要通过路径来描述

                       图片文件的位置

                 URL:统一资源定位符

                 绝对路径:网络上的绝对路径或者磁盘中的绝对路径

                 语法:<img src="网址/图片属性中的位置">

                 特点:绝对的URL始终指向同一位置,无论在何处使用

                 注意事项:在链接到同一网站的其他位置时,应该尽可能使用相对路径,

                          链接到另外一个网站时,需要使用绝对路径。

                 相对路径:指是由这个文件坐在的位置为参考基础,而建立的目录关系

                          常用的描述路径的方法:当前目录,上一级目录,下一级目录

                 当前目录: ./ 如果引用的文件和当前文件处在同一级,./是可以省略的

                 上一级目录:../

                 下一级目录:/.                  


 

            alt属性:

                  作用:当图片加载失败时用来替换的文字,有利于用户体验

            title属性

                  作用:当鼠标悬停在图片上时,鼠标右下角会出现定影的文字,有利于用户体验

            width/height属性

                  作用:用于指定图片的宽度和高度

                  注意:如果只指定其中的宽度或者高度,另一个值会发生等比例变化

        默认样式

               多张图片可以在一行显示

               图片之间有间隙 换行会被解析成空格

               图片默认产生下间隙x            

       -->

       <!--

        超链接

            语法<a href="" target="_self/_blank" title="">文本</a>

            默认样式:不会独占一行

                 自带下划线和字体颜色

                 默认在当前窗口打开

            属性:

                href属性:

                  作用:指定连接的跳转位置

                target属性

                  作用:指定目标地址的打开方式

                  取值:

                     _self.默认值,在当前窗口打开

                     _blank新建窗口打开

                title属性

                   作用:定义提示文本,当鼠标悬停在链接上时显示,提示工具

                   

                   

        超链接也可以链接到本地,使用方式跟img一样在连接前加./

       

        空连接:没有链接输入时,先用#代替

         

        下载链接,href里面是一个文件或者压缩包

        -->

        <!--

        锚点跳转

              ①单页面锚点跳转:当我们点击锚点链接时,可以快速定位到页面中的

               某个位置

               语法:

               跳转链接:<a herf="#id名称">内容</a>

               目标点:<开始标签 id=“id名称”>内容</结束标签>

              ②多页面锚点跳转

               语法:

               跳转链接:<a href="目标的路径+#id名称">内容</a>

               目标点:<开始标签 id=“目标的路径和位置”>内容</结束标签>


 

         -->

         <!--

            文本

              <p>普通文本</p>

              em:双标签,用于强调标记的内容

                   默认样式:

                    斜体显示,不独占一行

              i:双标签,无语义,只是有倾斜效果

                   默认样式:斜体样式,不独占一行

              strong:语义:用于强调标记的内容

                     默认样式:粗体显示,不独占一行

              b:无语义,只是样式有加粗效果

                   默认样式:粗体显示,不独占一行

              del:在文档中有一条删除线

                  默认样式:带有中划线,不独占一行

              span:通常用来区分文本样式,无语义

                    无默认样式 ,又叫做万能标签

              br:换行标签,单标签,强制换行<br>

              sup:上标标签

              sub:下标标签

            实体字符

               &lt:小于号

               &gt:大于号

               &nbsp:空格        

           

          -->

</body>

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值