5.24基础标签

注意点：

• 路径问题
• 相对路径如果是查找上级，有可能运行会不显示，可以直接打开文件查看
• 绝对路径不要出现中文名称
• 一般企业开发中不适用绝对路径，可移植性比较差

HTML注释(Annotation)

• 什么是注释?

• 注释是在所有计算机语言中都非常重要的一个概念，从字面上看，就是注解、解释的意思

• 注释可以用来解释某一段程序或者某一行代码是什么意思，方便直接或程序员之间的交流

• 为什么要使用注释?

• 适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的

• 注释格式

<!--被注释的内容-->

• 注意点:

  • 被注释的内容不会在浏览器中显示, 注释是写给我们自己看的
  • 注释不能嵌套使用

<!--<!--被注释的内容-->-->

• 快捷键: ctrl + /

img标签(image)

• 作用: 在网页上插入一张图片

• 格式:

![](图片路径)

• 标签的属性

  写在标签中K="V"这种格式的文本我们称之为标签属性

Paste_Image.png

• 注意点:

• img标签添加的图片默认不是占一整行空间

• 如果想让图片等比拉伸, 只写高度或者宽度即可

br标签(Break)

• 作用:

• 让内容换行

• 格式:

<br/>

• 注意点:

• br的意思是不另起一个段落进行换行, 而网页中99.99%需要换行时都是因为另起了一个段落, 所以应该用p来做

相对路径和绝对路径

• 图片路径分为两种, 一种是绝对路径, 一种是相对路径, 我们重点学习相对路径, 因为在企业级开发中没有人使用绝对路径

• 绝对路径

• 从电脑的具体盘符开始寻找我们需要的资源

![](C:\作业\code\user/1.png)

• 相对路径

• 一个文件相对于另外一个文件的位置寻找我们需要的资源

 ![](images/1.png)

• 同级

  • 直接编写, 例如: girl.png
  • 加上./ 编写, 例如./girl.png
  • ./代表当前目录, ./girl.png代表在当前目录下查找

• 下级

• 直接编写, 例如abc/girl.png

• 加上./ 编写, 例如./abc/girl.png

• 相对当前目录有几个文件夹,就在后面依次补全几个文件夹名称即可, 例如 abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png

• 上级

• ../代表访问上级目录

• 假设a文件夹下面有b文件夹, 图片存放在a文件夹中, html文件存放在b文件夹中, 那么路径为../girl.png
  因为html文件在b文件夹中, 所以路径是相对于b文件夹的, 所以../代表访问b文件夹的上一级目录, b文件夹的上一级目录是a文件夹, 所以../girl.png就代表在a文件夹查找girl.png
  注意事项:

• 注意事项:

• 相对路径不会出现这种格式aaa/../bbb/girl.png

• 虽然可以显示, 但是企业开发中千万不要这么写

a标签(anchor)

• 格式:

 <a href="http://www.baidu.com">百度</a>

• 作用: 用于从一个页面链接到另一个页面

• 注意事项:

• 在a标签之间一定要写上文字, 如果没有, 那么在页面上找不到这个标签

• a标签也叫做超级链接或超链接

• a标签的属性

Paste_Image.png

• base标签和a标签结合使用
  如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦, 这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
• 格式:

<base target="_blank" />

• 注意事项:
• base必须嵌套在head标签里面
• 如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行

a标签其它用法

• 假链接(本质是跳转到当前页面)
• 格式

• 格式

• 跳转到当前页面指定位置(锚点链接)
  2.1.格式

<a href="#location">跳转到指定位置</a>

• 2.2.在页面的指定位置给任意标签添加一个id属性
  例如

<p id="location">这个是目标</p>

• 跳转到指定页面的指定位置

格式:

<a href="01-锚点链接.html#location">跳转到指定位置</a>

只需要在01-锚点链接.html页面添加一个id位置即可

• 下载(极力不推荐使用)
  例如<a href="girl.zip">下载福利资源<a/>

列表标签

无序列表(unordered list)

• 作用: 给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后
• 格式:

Paste_Image.png

li 英文是 list item, 翻译为列表项

• ul应用场景:

• 导航条

• 商品列表等

• 新闻列表

• 注意事项:
• 这里指的无序是指对于主体来说内容没有先后之分, 例如主题是"选择居住城市(CN)"北京上海都是中国的城市, 无论谁放在前面它都还是中国的城市的. 如果标题改为"中国雾霾排行", 那么就必须有严格的排名,北京必须写在前面
• 浏览器会给无需列表自动添加先导符号但是一定一定千万千万要记住, ul的作用并不是给文字添加小圆点, 而是增加无序列表的语义
  • 其实ul还有一个type属性, 可以修改先导符号的样式, 取值有disc、square、circle几种
    但是由于样式将来都是通过css来完成, 所以这里就不给大家介绍了
    ul是一个组标签, 一定是一坨一坨的出现, 也就是说li标签不能单独存在, 必须包裹在ul里面
  • 由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签, 永远记住ul里面最好只写li标签
  • 虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签,
    甚至可以添加ul标签

Paste_Image.png