列表 表格 内联框架

**

列表

什么是列表
列表就是信息资源化的一种展示。它可以使信息结构化和条理化,并以列表的形式显示出来,以便浏览者能更快的获得相应的信息

列表的分类
-无序列表
-有序列表
-定义列表

无序列表的特性
没有顺序,每个

  • 标签独占一行(块元素)
    默认
  • 标签项前面有个实心小圆点
    一般用于无序类型的列表,如导航、侧边栏新闻、有规律的图文组合模块等
  • 有序列表的特性
    有顺序,每个

  • 标签独占一行(块元素)
    默认
  • 标签项前面有顺序标记
    一般用于排序类型的列表,如试卷、问卷选项等

    定义列表的特性
    没有顺序,每个

    标签、
    标签独占一行(块元素)
    默认没有标记
    一般用于一个标题下有一个或多个列表项的情况

    无序列表ui>li

    
    <html>
        <head>
            <meta charset="utf-8" />
            <title>title>
        head>
        <body>
            <ul>
                <li>li>
            ul>
        body>
    html>
    

    
    <html>
        <head>
            <meta charset="utf-8" />
            <title>title>
        head>
        <body>
            <ul>
                <li>平安夜里真平安li>
                <li>嫦娥5号回家了li>
                <li>明天就是圣诞节li>
            ul>
        body>
    html>
    

    有序列表ol>li

    
    <html>
        <head>
            <meta charset="utf-8" />
            <title>title>
        head>
        <body>
            <ol>
                <li>li>
            ol>
        body>
    html>
    

    定义列表dl>dt+dd

    
    <html>
        <head>
            <meta charset="utf-8" />
            <title>title>
        head>
        <body>
            <dl>
                <dt>今日新闻大事件dt>
                <dd>平安夜里真平安dd>
                <dd>嫦娥5号回家了dd>
                <dd>明天就是圣诞节dd>
            dl>
        body>
    html>
    

    **

    表格

    
    <html>
        <head>
            <meta charset="utf-8" />
            <title>title>
        head>
        <body>
            <table border="1">
               <tr>
                    <th>学号th>
                    <th>学号th>
                    <th>学号th>
                tr>
                <tr>
                    <td>1td>
                    <td>wsctd>
                    <td>18td>
                tr>
                <tr>
                    <td>2td>
                    <td>pgonetd>
                    <td>19td>
                tr>
                <tr>
                    <td>3td>
                    <td>lxltd>
                    <td>20td>
        body>
    html>
    

    定义表头 有几部分就有几行(除去表头)

    加border="1"有线框,数字决定线框粗细

    跨行与跨列

    
    <html>
        <head>
            <meta charset="utf-8">
            <title>tabletitle>
        head>
        <body>
            <table border="1">
                <tr>
                    <th colspan="6">班级信息统计表th>
                tr>
                <tr>
                    <th>班级th>
                    <th>学号th>
                    <th>姓名th>
                    <th>年龄th>
                    <th rowspan="4" colspan="2">备注th>
                tr>
                <tr>
                    <td rowspan="3">kb99td>
                    <td>1td>
                    <td>wsctd>
                    <td>18td>
                tr>
                <tr>
                    <td>2td>
                    <td>pgonetd>
                    <td>19td>
                tr>
                <tr>
                    <td>3td>
                    <td>lxltd>
                    <td>20td>
                tr>
            table>
        body>
    html>
    

    每一次跨列都需要单独写,跨行写在第一部分代码里
    table[border=1]>(tr>th{表头}*3)>(tr>td{内容}*3)*3

    Video and Audio
    video例

    
    <html>
        <head>
            <meta charset="utf-8">
            <title>title>
        head>
        <body>
            <video src="vedio/vedio.mp4" controls="controls" autoplay="autoplay" loop="loop">video>
        body>
    html>
    

    
    <html>
        <head>
            <meta charset="utf-8">
            <title>title>
        head>
        <body>
            <video controls>
                <source src="vedio/vedio.mp4" type="video/mp4">
            video>
        body>
    html>
    

    video[controls][src=""]
    video[controls]>source[src="" type=""]

    audio例

    
    <html>
        <head>
            <meta charset="utf-8">
            <title>title>
        head>
        <body>
            <audio src="" controls="controls">audio>
        body>
    html>
    

    video和audio都不是块链接

    **

    HTML5结构

    header:标题头部区域的内容(用于页面或页面中的一块区域)
    footer:标记脚部区域的内容(用于整个页面或页面的一块区域)
    section:Web页面中的一块独立区域
    article:独立的文章内容
    aside:相关内容或应用(常用于侧边栏)
    nav:导航类辅助内容

    **

    内联框架

    iframe[src]
    <iframe src="path" name="mainFrame" >iframe>
    
    <iframe name="mainFrame" src="subframe/the_second.html" />
    <a href="subframe/the_second.html "  target="mainFrame">下边显示第二页a>
    

    你可能感兴趣的:(基础,html5,列表)