时间戳

首页 > 技术文章 > HTML5+CSS3学习笔记3 列表+超链接+图片标签

HTML5+CSS3学习笔记3 列表+超链接+图片标签

poetea 2021-02-13 17:47 原文

P18-P24

  • P18 语义化标签
  • P19 列表
  • P20 超链接
  • P21 相对路径
  • P22 超链接的其他用法
  • P23 图片标签
  • P24 图片的格式

结构化语义标签（Content sectioning）

  • header 表示网页的头部
  • main 表示网页的主题部分（一个页面只会有一个main）
  • footer 表示网页的底部
  • nav 表示网页中的导航
  • aside 表示和主题相关的其他内容（侧边栏）
  • article 表示一个独立的文章
  • section 表示一个独立的区块，上边的标签都不能表示时使用section
  • div 没有语义，就用来表示一个区块，目前来讲div还是我们主要使用的布局元素（div可以代替上面的所有东西）
  • span 行内元素，没有任何语义，一般用于在网页中选中文字

列表（list）

在html中可以创建列表，html列表一共有三种：

  1. 有序列表
  2. 无序列表
  3. 定义列表

有序列表，使用 ol 标签来创建有序列表

<ol>
    <li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ol>

无序列表，使用 ul 标签来创建无序列表

<ul>
    <li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ul>

定义列表，使用 dl 标签来创建一个定义列表，使用 dt 来标识定义的内容，使用 dd 来对内容进行解释说明

<dl>
    <dt>结构</dt>
    <dd>结构标识网页的结构，结构用来规定网页中哪里是标题，哪里是段落。</dd>
    <dd>结构标识网页的结构，结构用来规定网页中哪里是标题，哪里是段落。</dd>
    <dd>结构标识网页的结构，结构用来规定网页中哪里是标题，哪里是段落。</dd>
</dl>

超链接

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置。

使用 a 标签来定义超链接。
属性：

  • href 指定跳转的目标路径
    • 值可以是一个外部网站的地址
    • 也可以写一个内部页面的地址

超链接也是一个行内元素，在a标签重可以嵌套除它自身外的任何元素

<a href="https://www.baidu.com">超链接</a>
<a href="poetea.html">超链接</a>

当我们需要跳转到一个服务器内部的页面时，一般我们都会使用相对路径

相对路径都会使用 . 或 .. 开头
./ 可以省略不写，如果不写 ./ 也不写 ../ 则就相当于写了 ./

  • ./ 表示当前文件所在的目录
  • ../ 表示上级目录

VSCode 快速复制一行快捷键：

Alt+Shift+下（复制到下一行）
Alt+Shift+上（复制到上一行）

超链接的其他用法

target 属性，用来指定超链接打开的位置：
可选值：

  • _self 默认值 在当前页面中打开超链接
  • _blank 在一个新的页面中打开超链接

可以直接将超链接的 href 属性设置为 #，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置。

id 属性（唯一不重复的）：

  • 每一个标签都可以添加一个 id 属性
  • id 属性就是元素的唯一标识，同一个页面心中不能出现重复的 id 属性
<a href="#id">超链接</a>
    
<p id="id">这里</p>

可以跳转到页面的指定位置，只需将 href 属性设置 #目标元素的id属性值

可以使用 javascript:; 来作为 href 的属性，此时点击这个超链接什么也不会发生

<a href="javascript:;">这是一个新的超链接</a>

图片标签

图片标签用于向当前页面中引入一个外部图片。
使用 img 标签来引入外部图片， img 标签时一个字节数标签。
属性：

  • src 属性指定的是外部图片的路径（路径规则和超链接是一样的）
  • alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示
    搜索引擎会根据 alt 中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所搜索到
  • width 图片的宽度
  • height 图片的高度
    • 宽度和高度中如果值修改了一个，则另一个会等比例缩放

注意：一般情况在pc都安，不建议修改图片的大小。需要多大的图片就裁多大。但是在移动端，经常需要对图片进行缩放（大图缩小）

<img src="./img/1.gif" alt="poetea">
<img width="100" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1725312127,1954776889&fm=26&gp=0.jpg">

图片的格式：

  • jpeg(jpg)：

    • 支持的颜色比较丰富，不支持透明效果，不支持动图
    • 一般用来显示照片

  • gif：

    • 支持的颜色比较少，支持简单透明，支持动图
    • 颜色单一的图片，动图

  • png：

    • 支持的颜色丰富，支持复杂透明，不支持动图
    • 颜色丰富，复杂透明图片（专为网页而生）

  • webp

    • 支持的颜色丰富，支持复杂透明，不支持动图
    • 它具备其他图片格式的所有有点，而且文件还特别的小

  • base64

    • 将图片使用base64编码，这样可以将图片转换为字符，通过自负的形式来引入图片
    • 一般都是一些需要和网页一起加载的图片才会使用base64

效果一样，用小的
效果不一样，用效果好的

推荐阅读