H5学习之列表、引用标签、定义标签、figure标签、表格

黄良钵

分类: 程序开发 52 0

H5学习之列表、引用标签、定义标签、figure标签、表格列表、引用标签、定义标签、figure标签、表格等标签用法的学习。

列表:

<html>
<head>
    <meta charset="UTF-8">
    <title>有序列表和无序列表</title>
    <style>
        ol{
            counter-reset: ol;
        }
        li{
            /*设置列表标记类型*/
            list-style-type: none;

            /*设置如何放置标记符号的位置
            list-style-position: inside;*/
            
            /*设置图像替换列表的标记符号
            list-style-image: url(fff.png);*/
            
            /*list-style: disc inside url(fff.png);*/
        }
        ol li:before{
            counter-increment: ol;
            content: '['counter(ol)'] ';
        }
        ul{
            padding-left: 80px;
        }
        ul li{
            list-style-type: circle;
        }
        ul li:before{
            content: '❤♠♢♣';
            color: red;
        }
    </style>
<body>
    <!--ol定义有序列表 默认带有16px的外间距 带有40px的左内间距-->
    <!--li定义列表的项 
        reversed 倒序 
        start 有序列表的初始值 如:start="4"
        type 有序列表的标记类型 如:type="A"-->
    <ol type="I" start="4">
        <li>HTML</li>
        <li>JavaScript</li>
        <li>CSS</li>
    </ol>
    <!--ul定义无序列表-->
    <ul>
        <li>JavaScript</li>
        <li>CSS</li>
        <li>NET</li>
    </ul>
</body>
</html>

引用标签:

<html>
<head>
    <meta charset="UTF-8">
    <title>引用标签</title>
    <style>
        cite{
            font-style: normal;
        }
        cite:before{
            content: '《';
        }
        cite:after{
            content: '》';
        }
        q{
            quotes: '「' '」''〔' '〕';
        }
    </style>
<body>
    <!--q表示引用内容 cite表示引用来源 通常是书籍 刊物 名称-->
    <q>有朋自远方来不亦说乎</q>这句话来着<cite>论语</cite><br>
    <q>学而不思则罔 <q>思</q>而不学则殆</q>
</body>
</html>

定义标签:

<html>
<head>
    <meta charset="UTF-8">
    <title>定义标签</title>
    <style>
        dfn{
            font-style: normal;
        }
    </style>
<body>
    <!--dfn对特殊短语的定义-->
    <dfn>
        <!--使用strong强调定义的词 如果这个词是缩写 最好同时使用addr标签-->
        <strong><addr title="Hypertext Markup language">HTML5</addr></strong>是超文本标记语言的最新发展成果
        它包含HTML5 CSS3 JavaScript 等前端开发技术的最新内容
        HTML5是移动互联网时代事件的产物
    </dfn>
    <p>
        <h1>一个简单的HTML文档</h1>
        <code>
            <!--code表示代码内容为某种代码
                pre可以保留空格换行等代码格式-->
            <pre>
    &lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;style&gt;
    
        &lt;/style&gt;
    &lt;body&gt;
        
    &lt;/body&gt;
    &lt;/html&gt;
            </pre>
        </code>
    </p>
</body>
</html>

figure标签:

<html>
<head>
    <meta charset="UTF-8">
    <title>figure</title>
    <style>
        body{
            counter-reset: figure;
        }
        img{
            width: 300px;
            height: 400px;
        }
        figure{
            counter-increment: figure;            
            text-align: center;
        }
        figcaption:before{
            content: '图'counter(figure)' ';
        }
        figcaption[lang="en"]:before{
            content: 'Fig.'counter(figure)' ';
        }
    </style>
<body>
    <!--figure用于文档中的插图-->
    <figure>
        <img src="lry.jpg" alt="">
        <!--figcaption是为figure添加标题-->
        <figcaption>著名影星、歌手</figcaption>
        <figcaption lang="en">ZhuMingGeShou</figcaption>
    </figure>
    <figure>
        <img src="lry.jpg" alt="">
        <!--figcaption是为figure添加标题-->
        <figcaption>著名影星、歌手</figcaption>
        <figcaption lang="en">ZhuMingGeShou</figcaption>
    </figure>
</body>
</html>

表格:

<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        table{
            border: 1px solid green;
            margin: 100px auto;
            /*border-spacing 设置相邻单元格的边框间的距离*/
            border-spacing: 0;
            /*border-collapse 属性设置边框合并为一个单一的边框*/
            border-collapse: collapse;
        }
        caption{
            line-height: 280%;
            font-size: 20px;
        }
        th{
            border: 1px solid green;
            width: 100px;
            height: 36px;
            background-color: green;
            color: white;
        }
        td{
            border-bottom: 1px solid green;
            text-align: center;
            height: 36px;
        }
        td:nth-child(5),
        td:nth-child(6){
            border-right: 1px solid green;
        }
    </style>
<body>
    <!--table定义表格-->
    <table>
        <!--caption定义表格标题-->
        <caption>HTML5课程</caption>
        <!--thead定义表格的表头内容-->
        <thead>
            <!--tr定义表格中的行-->
            <tr>
                <!--th定义表格中的表头单元格-->
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
                <th>周六</th>
                <th>周日</th>                
            </tr>
        </thead>
        <tr>
            <!--td定义表格中的单元-->
            <td>HTML5</td>
            <td>HTML5</td>
            <td>HTML5</td>
            <td>HTML5</td>
            <td>HTML5</td>
            <!--colspan 指的是占了几个单元格
                rowspan 指的是占了几行-->
            <td rowspan="2">自习</td>
            <td rowspan="3">休息</td>
        </tr><tr>
            <td>HTML5</td>
            <td>HTML5</td>
            <td>HTML5</td>
            <td>HTML5</td>
            <td>HTML5</td>
        </tr>
        <tr>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>
            <td>自习</td>           
            <td>休息</td>
        </tr>
    </table>
</body>
</html>

素材下载:2017-04-13 figure.zip

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
figure标签、H5学习、列表、定义标签、引用标签、表格

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “H5学习之列表、引用标签、定义标签、figure标签、表格”

Loading...