Html-Day02-PM

笔记1：超连接

• 什么是超连接？

  • 在网页中所有点击之后可以跳转的内容就是超连接。

• 约束

  • <a></a>

• 属性

  • href–>添加超连接跳转地址
  • target–>设置跳转的方式
    • self–>默认跳转方式：表示当前页面
    • blank–>表示打开新的页面来跳转

整理

• 超连接的标签为<a>
• href属性设置地址，target设置跳转方式

练习

<a href="https://www.bilibili.com/" target="_blank">哔哩哔哩</a>
<a href="https://translate.google.cn/" target="_blank">谷歌搜索</a>
<a href="https://www.csdn.net/" target="_self">CSDN</a>

小结

• 标签语言非常的方便，只要记得标签名以及标签属性就能运用
• 新单词
  • target–>目标

---

笔记2：列表标签

• 列表的分类
  • 无序列表<–大部用到的都是
  • 有序列表
  • 定义列表<–很少用到
• 标签约束
  • 无序列表–>ul
  • 有序列表–>ol
  • 子标签–>li
• 属性：
  • type–>类型

整理

• 由于定义列表很少用到，所以先忽略。
• 有序列表的标签为ol，无序列表的标签为ul
• 标签里的type属性可以更换列表的格式

练习

<ol>
    <li>早餐</li>
    <li>午餐</li>
    <li>晚饭</li>
</ol>
<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ul>

小结

• 不能说和Makedowm很像，只能说是一模一样。
• 新单词
  • type–>类型

---

笔记3：img标签

• img标签可以在html页面中显示图片
• 属性
  • src–>设置图片路径
  • width–>宽
  • height–>高
  • bordar–>边框
  • alt–>当找不到图片的时候，代替图片的文本
• 在web中路径分为相对路径和绝对路径
  • 相对路径
    • . -->表示当前目录
    • … --> 表示当前文件所在的文件的上一级目录
    • 文件名–>表示当前文件所在目录的文件中，相当于 ./文件名 <-- ./可以省略
  • 绝对路径
    • 约束为：
      • http://id:port/工程名/资源路径
• 回顾
  • 在java中路径也分为相对路径和绝对路径
    • 相对路径：从工程名开始算
    • 绝对路径：盘符：/目录/文件名

整理

• 添加图片只需要找到图片的路径，然后再调用标签的属性。这很像是Java创建一个对象，然后调用方法一样。思路上是一样的，把标签当做对象,属性当做方法。
• 关于img标签的属性
  • src路径
  • width宽height高bordar
  • alt找不到图片时候的备用文本显示

练习

<img src="01.jpg" width="355" height="155" border="1" alt="找不到图片!" >
<img src="../HtmlLeam/01.jpg" width="355" height="155" border="1" alt="找不到图片!" >

小结

• 交互感max