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

P18-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 标签来定义超链接
属性

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

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

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

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

VSCode 快速复制一行快捷键:

Alt+Shift+下(复制到下一行)
Alt+Shift+上(复制到上一行)

链接的其他用法

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

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

id 属性(唯一不重复的):

<a href="#id">超链接</a>
    
<p id="id">这里</p>

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

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

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

图片标签

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

注意:一般情况在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">

图片的格式:

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

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码