这是一个悲伤的故事

被迫营业的第一天( ̄。。 ̄)

学习内容:常用标签(内容较为简单,欢迎纠错。十分感谢)

一、简单的网页

主要展示标签的用法,先给大家看第一个示例图:

使用的标签大多为常用标签,我简单介绍几个标签。

1、<strong></strong> 用于强调文本,通常是用加粗的字体来显示内容

2、<b></b> 普通的文本标签 加粗字体 

3、<u></u> 为文本添加下划线

4、<br>  在文档中插入换行符。

5、<hr> 水平线分隔

6、&copy; 字符实体©

7、&nbsp; 空格标记

 

以下附上代码:


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>糖醋排骨的制作方法</title>

</head>

<body>

    <h1><<糖醋排骨>>的制作方法</h1>

    <div>

        <strong>菜名名称:糖醋排骨</strong><br>

        <strong>市场价格:</strong>26 <br>

        <strong>会员价格:</strong><b style="color:red">24</b><br>

        <strong>使用配料: </strong>排骨、糖、醋 <br>

        <strong>菜品类型: </strong>炒菜 <br>

    </div>

    <br>

    <div>

       <strong> <em><u>做法:</u></em></strong>

        <p>1.猪小排洗净,晾干水份备用;</p>

        <p>2.国内导入少量油,爆香姜片;</p>

        <p>3.放入排骨,一直煸炒到排骨变色后,表面金黄微焦;</p>

        <p>4.此时就可以放入黄金比例中的调料了,顺序是:先放-汤勺料酒,接着两汤勺酱油,三汤勺米醋最后四汤勺白糖,炒匀;</p>

        <p>5.再倒入能没过排骨的开水,调中小火焖20分钟;</p>

        <p>6.20分钟后调入盐,开大火收汁,收到汁浓色亮时,撒入芝麻点缀即可出锅(锅里剩下的姜片丢掉不用,最后大火收汁时注意多翻动锅内的排骨,避免烧焦哟! )。</p>

    </div>

    <hr>

    <div>

        <p>&copy2015阿婆私房菜</p>

    </div>

</body>

</html>

 

二、表格标签的简单使用

附上实例图


代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>
<body>
    <h1>搜索引擎排名</h1>
    <ol>
        <li><b>Google</b></li>
        <li><b>baidu</b></li>
        <li><b>Bing</b></li>
        <li><b>Sogou</b></li>
    </ol>
    <h1>软件编程语言排名</h1>
    <ul>
        <li><b>Java</b></li>
        <li><b>C++</b></li>
        <li><b>Python</b></li>
        <li><b>JavaScript</b></li>
    </ul>
    <h1>健康食品</h1>
    <dl>
        <dt><h3>水果</h3></dt>
        <dd><h3>苹果</h3></dd>
        <dd><h3>香蕉</h3></dd>
        <dt><h3>蔬菜</h3></dt>
        <dd><h3>西兰花</h3></dd>
        <dd><h3>菠菜</h3></dd>
    </dl>
</body>
</html>

实例图:



 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小说排行榜</title>
</head>
<body>
    
    <table align="center" border="1"> 
        <tr>
            <th>排名</th>
            <th>关键字</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关连接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="baidu.com">贴吧</a>
                <a href="baidu">图片</a>
                <a href="baidu">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="./images/down.jpg" alt=""></td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="baidu.com">贴吧</a>
                <a href="baidu">图片</a>
                <a href="baidu">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="baidu.com">贴吧</a>
                <a href="baidu">图片</a>
                <a href="baidu">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="baidu.com">贴吧</a>
                <a href="baidu">图片</a>
                <a href="baidu">百科</a>
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href="baidu.com">贴吧</a>
                <a href="baidu">图片</a>
                <a href="baidu">百科</a>
            </td>
        </tr>

    </table>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值