HTML基础01

列表标签

• 无序列表:

  无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

  无序列表使用 <ul> 标签

<ul>
    <li>刘备</li>
    <li>关羽</li>
    <li>孙尚香</li>
    <li>诸葛亮</li>
    <li>刘禅</li>
</ul>

• 有序列表:

  有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

  列表项使用数字来标记。

<ol> 
    <li>打开冰箱门</li> 
    <li>把大象装进去</li>
    <li>关上冰箱门</li>
</ol>

• 自定义列表:

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dt>蔬菜</dt>
    <dd>大白菜</dd>
</dl>

• 列表嵌套： 有序和无序可以任意无限嵌套

图片标签img

• 支持的图片格式： jpg/jpeg, png, gif
• src图片路径： 相对路径：访问站内资源时使用width/height:设置图片的宽高 两种赋值方式:1. 像素 2. 上级元素的百分比 如果只设置宽度,高度会等比例缩放
  1. 和页面同级目录: 直接写图片名
  2. 在页面的上级:../图片名
  3. 在页面的下级: 文件夹名/图片名 绝对路径：访问站外资源时使用，访问站外资源又称为图片盗链（好处：可以节省本站资源，坏处：有可能会找不到图片）
• title: 鼠标在图片上悬停时显示的文本
• alt: 图片不能正常显示时显示的文本

超链接a

• href: 资源路径, 使用方式类似src,支持相对路径和绝对路径, 如果访问的资源浏览器支持浏览则直接浏览如果浏览器不支持浏览则触发下载
• 图片超链接: 用a标签包裹图片就是图片超链接
• 页面内部跳转: 在目的地标签里面添加id="xxx", 在点击的超链接中href="#xxx" 即可跳转到页面中id为xxx的元素位置

分区标签

• 分区标签可以理解成是一个容器,对多个相关性的标签进行统一管理
  
• 常见的分区标签div和span

1. div:块级分区元素,特点是独占一行
2. span:行内分区元素,特点是共占一行

• html5标准中新增了分区标签,作用和div是一样的,主要是为了提高代码的可读性,包括:header头,footer脚,article正文,nav导航,section区域　

 

<header></header>
<article></article>或<section></section>
<footer></footer>