003+limou+HTML——(3)HTML列表

000、前言

列表是网页常见的一种数据排列方式,在HTMl中列表一共有三种:有序列表、无序列表、定义列表(另外“目录列表dir”和“菜单列表menu”已经在HTML5中被废除了,现在都是使用无序列表ul来替代)

001、有序列表:ol、li

(1)一般使用

  • 有序列表有先后之分
  • 用ol、li标签配合使用就可以显示有序列表,而且ol标签内部子标签也只能是li,另外也不要直接把文本放在ol里面
  • ol即ordered list(有序列表),li即list(列表项)
DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>网页标题title>
    head>

    <body>
        <h1>文本标题1h1>
        <ol>
            <li>列表01li>
            <li>列表02li>
            <li>列表03li>
        ol>
       
        <h1>文本标题2h1>
        <h1>文本标题3h1>
    body>
html>

003+limou+HTML——(3)HTML列表_第1张图片

(2)利用type属性

  • 利用type属性可以改变列表项符号
    003+limou+HTML——(3)HTML列表_第2张图片
DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>网页标题title>
    head>

    <body>
        <h1>文本标题1h1>
        <ol type="A">
            <li>列表01li>
            <li>列表02li>
            <li>列表03li>
        ol>
       
        <h1>文本标题2h1>
       
        <h1>文本标题3h1>
    body>
html>

003+limou+HTML——(3)HTML列表_第3张图片

002、无序列表:ul、li

(1)一般使用

  • 无序列表无先后之分
  • 用ul、li标签配合使用就可以显示无序列表,而且ul标签内部子标签也只能是li,另外也不要直接把文本放在ul里面
  • ul即unordered list(有序列表),li即list(列表项)
DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>网页标题title>
    head>

    <body>
        <h1>文本标题1h1>
        <ol type="A">
            <li>列表01li>
            <li>列表02li>
            <li>列表03li>
        ol>
       
        <h1>文本标题2h1>
        <ul>
            <li>列表01li>
            <li>列表02li>
            <li>列表03li>
        ul>

        <h1>文本标题3h1>
    body>
html>

003+limou+HTML——(3)HTML列表_第4张图片

(2)利用type属性

  • 利用type属性可以改变列表项符号
    003+limou+HTML——(3)HTML列表_第5张图片

(3)深入了解无序列表

实际上的开发工作中无序列表是用的最多的,只要涉及到数据表示,无序列表就几乎无处不在003、定义列表:dl、dt

  • 定义列表是一组带有特殊含义的列表,一个列表项中含有“条件”和“列表”两部分
  • dl,即definition(定义列表)
  • dt,即definition term(定义名词)
  • dd,即definition description(定义描述)
DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>网页标题title>
    head>

    <body>
        <h1>文本标题1h1>
        <ol type="A">
            <li>列表01li>
            <li>列表02li>
            <li>列表03li>
        ol>
       
        <h1>文本标题2h1>
        <ul>
            <li>列表01li>
            <li>列表02li>
            <li>列表03li>
        ul>

        <h1>文本标题3h1>
        <dl>
            <dt>HTMLdt>
            <dd>制作网页的标准语言,控制网页的结构dd>
            <dt>CSSdt>
            <dd>层叠样式表,控制网页的样式dd>
            <dt>Javascriptdt>
            <dd>脚本语言,控制网页的行为dd>
        dl>
    body>
html>

003+limou+HTML——(3)HTML列表_第6张图片

004、HTNL语义化

(1)误区

学习HTML的时候,认为一些标签可以被其他的标签轻易实现而认为这个标签没有用。这是一个很大的误区。HTML不同的标签从显示的角度来看确实可以达到互换的效果,比如使用下面的标签代码代替有序列表:

<div>1、HTMLdiv>
<div>2、CSSdiv>
<div>3、Javascriptdiv>

(2)语义

但是这违背了HTML的初衷,在HTML中,标签都有自己的语义,一般都是优先使用有语义的标签。比如h1标签,表示的是header1,标记的是一个最高级标题,而div和span是无语义的标签。(span标签是一个行内标签,也叫内嵌标签)

(3)调试

①HTML的标签具有语义的标签,可以方便调试,快速找到有错误的代码,具有可读性
②另外语义还对搜索引擎优化(SEO)有极其重要的作用

你可能感兴趣的:(HTML学习笔记,html,前端,javascript)