day02

序列表--没有顺序的一组内容

语法:

 <ul> 定义无序列表

  <li>列表项1</li>

  <li>列表项2</li>

    </ul>

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

样式:

默认间距(上下外间距、左边内边距)

      列表样式:实心圆

type属性---ul

      disc---实心圆

      circle---空心圆

      square---正方形

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

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

应用场景

新闻列表

      商品列表

      导航、分页、选项卡

定义列表:

语法:

                <dl>

                    <dt>专业名词/dt>

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

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

                </dl>

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

                dl 定义自定义列表

                dt 自定义列表项

                dd 自定义列表的注释(解释、描述)

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

            默认样式:

                dl自带外边距(上下)、dd,自带左边的外边距

            应用场景:

                名词解释;

                分类

            注意事项:允许使用多条项目的定义和描述

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

语法:

<img src=" " alt=" ">

属性:

src属性:

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

必需属性

alt属性:

      作用:用来指定替换的文本,当图片加载失败,显示该文字对图像进行替换,有利于用户体验

 title属性:

      当鼠标悬停在图片上,鼠标的右下角出现对应的文字,对图片进行解释说明,有利于用户体验

 width/height属性:

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

      注意事项:如果只指定宽或高其中一个,另一个值会按照原比例等比缩放

默认样式:多张图片在一行显示

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

                    默认产生下间隙

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

URL--统一资源定位符

绝对路径:

网络上的绝对路径:

语法:http://...

本地绝对路径:

语法:C:\...

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

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

相对路径:

指是由这个文件所在的位置为参考基础,而建立出的目录关系,常用的描述路径的方法:当前目录、上一级目录、下一级目录

当前目录:

语法:./   如果引用的文件和当前的文件处在同一级 ./ 可以省略

上一级目录:语法:../

下一级目录:语法:/

                   

超链接

默认样式:

不独占一行

自带下划线、字体颜色

默认在当前窗口打开

属性:

href属性:

作用:指定链接的跳转地址

target属性:

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

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

 _blank 新建窗口打开

title属性:

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

        外部链接

        内部链接

        空链接

        下载链接

锚点跳转

单页面锚点跳转

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

            语法:

                跳转链接:<a href=“#id名称”></a>

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

        多页面的锚点跳转

            语法:

                跳转链接:<a href=“页面的路径#id名称”></a>

                目标点:

文本格式化标

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

        默认样式:

            斜体显示

            不独占一行

        i:无语义:只是样式有倾斜效果

        默认样式:

            斜体显示

            不独占一行

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

        默认样式:

            粗体显示

            不独占一行

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

        默认样式:

            粗体显示

            不独占一行

        del:

            在文档中有一条删除线

        默认样式:

            带有中划线

            独占一行

        span:万用标签

            通常用来区分文本样式:

            无语义

            无默认样式

        br:换行标签

            <br>强制换行

        sup:上标标签

        sub:下标标签

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值