pink老师HTML5+CSS3学习笔记 | DAY2

①没有语义,就是个盒子,用来装内容的。

②div是division(分割,分区)的缩写,span(跨度)

③特点:

  • div标签用来布局,一行只能放一个div,理解为一个大盒子;
  • span标签用来布局,一行上可以放多个span,理解为一个小盒子。

④应用:

<body>
    <div>div标签1:单独占据一行</div>123被另起一行
    <div>div标签2:单独占据一行</div>
    <span>span标签1</span>
    <span>span标签2</span>
    <span>span标签3</span>
    span标签可以跨行显示
</body>

2、图像标签

①<img src="图像" />,单标签;

②属性:属于某个标签的特性;

③src是img标签的必须属性(用img标签一定要写src属性),用于指定图像文件的路径和文件名;

④其他属性:

  • alt:文本属性,替换文本,图像不能显示时替换;
  • title:文本属性,提示文本,鼠标放在图像上显示文字;
  • width:像素属性,设置图像的宽度;
  • heigh:像素属性,设置图像的高度;
  • 宽度和高度一般不同时设置,可只设置一项,另一项会等比例缩放;
  • border:像素属性,设置图像的边框粗细。一般在CSS中设置。

⑤应用:

<body>
    <h1>img标签的使用:</h1>
    <img src="img01.jpg" width="500" border="10"/>
    <h1>alt 替换文本,图像显示不出来时用文字替换:</h1>
    <img src="img.jpg" alt="我爱丸子妹~" width="500"/>
    <h1>title 提示文本,鼠标放在图像上提示的文字:</h1>
    <img src="img01.jpg" title="我爱丸子妹~" height="200"/>
</body>

⑥注意点:

  • 图像标签可以拥有多个属性,必须写在标签名的后面;
  • 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开;
  • 属性采取键值对的格式(即key="value"的格式,属性="属性值");

3、路径

①目标文件夹和根目录:

  • 目录文件夹:就是普通文件夹,存放页面相关的所有文件;
  • 根目录:打开目录文件夹的第一层就是根目录。

②vscode打开目录文件夹:

  • 文件--打开文件夹--选择目录文件夹。如此后期更加方便管理文件。

③路径分为相对路径和绝对路径:

  • 相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。就是图片相对于html页面的位置。
    • 分类:
      •  同一级路径:图像文件与html文件位于同一级,如
        <img src="img.png">
      •  下一级路径:符号"/",图像位于html文件下一级,如
        <img src="images/img.png">
      • 上一级路径:符号"../",图像位于html文件的上一级,如
        <img src="../img.png">
  • 绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径,如本地地址
    <img src="F:\HTML\images\img.png">
    或网络地址
    <img src="F:\HTML\imges\https://img-home.csdnimg.cn/images/20201124032511.png">
  • 注意:

    • 相对路径和绝对路径的斜杠符号不同,相对路径是"/",绝对路径是"\";

    • 绝对路径少用。

4、超链接标签

①用于从一个页面链接到另一个页面,<a href=""></a>。

②属性:

  • href:必须属性,用于指定连接目标的url地址,当为标签应哟个href属性时,它就具有了超链接的功能格式:一定要以http://开头;

  • target:用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开。

③链接分类:

  • 外部链接:如:<a href="http://www.baidu.com">百度</a>;
  • 内部链接:跳转该网站内部的页面,直接链接内部页面名称,如:<a href="index.html">首页</a>;
  • 空链接:如果没有确定链接目标时,<a href="#">首页</a>;
  • 下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件,<a href="img01.zip">下载</a>;
  • 网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接,<a href="http://www.baidu.com"><img src="img.png"></a>;
  • 锚点链接:点击链接可以快速定位到页面中的某个位置
    • 在连接文本的href属性中,设置属性值为#名字的形式,如<a href="#two">第二集</a>;
    • 找到目标位置标签,里面添加一个id属性=刚才的名字,如<h3 id="two">第二集介绍</h3>。

④应用:

<body>
    <h3>外部链接:</h3>
    _self属性是target的默认值,在当前窗口打开网页:<a href="http://www.baidu.com" target="_self">百度</a>
    <br />_blank属性是在新窗口打开页面:<a href="http://www.baidu.com" target="_blank">百度</a>

    <h3>内部链接:</h3>
    <a href="05-课堂案例1-体育新闻.html">体育新闻</a>

    <h3>空链接:</h3>
    <a href="#">首页</a>

    <h3>下载链接:</h3>
    <a href="img01.zip">下载</a>

    <h3>网页元素链接:</h3>
    <a href="http://www.baidu.com"><img src="img01.jpg" width="200"></a>
</body>

5、注释和特殊字符

①注释:

  • <!--开头,-->结尾;
  • 快捷键:ctrl+/。

②特殊字符:

  • 一些特殊符号在html中难以使用,则用特殊字符替代:
特殊字符描述字符的代码
空格&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
人民币&yen;
©版权&copy;
®注册商标&reg;
°摄氏度&deg;
±正负号&plusmn;
×乘号&times;
÷除号&divide;
²平方&sup2;
³立方&sup3;

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值