前端—HTML中常见标签的使用

HTML

1.常见标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="../css/pra.css"><!--用来写css文件地址的,rel表明文档的样式表-->
</head>
<body>
<!--1.元素由于开始标签,内容,结束标签这个三部分组成-->
<!--段落标签-->
    <p>我的猫咪起<strong></strong></p>
<!--em标签是让字体变为斜体-->
    <em>漂亮了</em>

<!--2.块级元素和嵌套元素,p就是一个块级元素-->
    em>第一</em><em>第二</em><em>第三</em><!--结果就在一行-->

    <p>第四</p><p>第五</p><p>第六</p><!--每一个都会自己换行显示-->


<!--3.空元素,就是只有开始标签的-->
    <img src="">

<!--4.属性href:超链接的web地址-->
<!--<p>欲练<a href="https://zh.wikipedia.org/zh-hans/葵花宝典" title="葵花宝典简介" target="_blank">葵花宝典</a>,需引刀自宫</p>-->

<!--5.布尔属性-->
<!-- 使用disabled属性来防止终端用户输入文本到输入框中 -->
    <input type="text" disabled>
<!-- 下面这个输入框没有disabled属性,所以用户可以向其中输入 -->
    <input type="text">

<!--6.练习-->
    <h1>经典回忆</h1>
    <p>
        相思无用,惟别而已。别期若有定,千般煎熬又何如?莫道黯然销魂,何处<strong>柳暗花明</strong><br>
        ——《神雕侠侣》
    </p>
    <img src="../image/q.jpg"><!--这里是图片的地址,可以写自己的地址,或者注释掉-->
<!--7.标题标签-->
<h1>静夜思</h1>
<p>床前明月光 疑是地上霜</p>
<p>举头望明月 低头思故乡</p>

<!--8.<span>元素它没有语义。当您想要对它用CSS(或者JS)时,您可以用它包裹内容,且不需要附加任何额外的意义(在未来的课程中你会发现更多这类元素)。-->
<h1>这是一个顶级标题</h1>
<span style="font-size: 32px; margin: 21px 0;">这是顶级标题吗?</span>

<!--9.列表-->
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
</ol>
<ol>
    <li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀,调成“腌料”,鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀,腌渍半小时。</li>
    <li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀,调成“综合调味料”。</li>
    <li>鸡丁腌好以后,色拉油下锅烧热,先将鸡丁倒入锅内,用大火快炸半分钟,炸到变色之后,捞出来沥干油汁备用。</li>
    <li>在锅里留下约两大匙油,烧热后将切好的干辣椒下锅,用小火炒香后,再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅,用大火快炒片刻后,再倒入“综合调味料”继续快炒。
        <ul>
            <li>如果你采用正宗川菜做法,最后只需加入花生米,炒拌几下就可以起锅了。</li>
            <li>如果你在北方,可加入黄瓜丁、胡萝卜丁和花生米,翻炒后起锅。</li>
        </ul>
    </li>
</ol>
<dl>
    <dt>培根</dt>
    <dd>整个世界的粘合剂。</dd>
    <dt>鸡蛋</dt>
    <dd>一块蛋糕的粘合剂。</dd>
    <dt>咖啡</dt>
    <dd>一种浅棕色的饮料。</dd>
    <dd>可以在清晨带来活力。</dd>
</dl>

<!--10.斜体字,粗体字,下划线-->
<i>咖啡</i>
<b>切面包</b>
<u>奶茶</u>

<!--11.超链接-->
<p><a href="https://www.qq.com/">腾讯</a></p>
<!--标记联系方式-->
<!--    <address>-->
<!--        <a href="mail:qq.com">qq.conm</a><br>-->
<!--        <a href="phone">1212315151</a>-->
<!--    </address>    -->

<!--12.标记时间和日期-->
<time datetime="2016-01-20">20 January 2016</time>

<!--13.<header> 页眉-->
<header>
    <h1>Cute Puppies Express!</h1>
</header>
<main>
    <p>I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and their ears are so, so snuggly soft!</p>
</main>
<!--14.<nav> 导航栏 -->
<nav>
    <ol>
        <li>主页</li>
        <li>注册页面</li>
        <li>登录页面</li>
    </ol>
</nav>
<!--15.<main> 主内容 ,主内容中还可以有各种各样的内容前端<article>,<section>,<div>-->
<!--16.<aside> 侧边栏 经常嵌套在<main>中-->
    <p>主要内容</p>
    <aside>
        <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
    </aside>
<!--17.<footer> 页脚-->
<article>
    <h1>How to be a wizard</h1>
    <ol>
        <li>Grow a long, majestic beard.</li>
        <li>Wear a tall, pointed hat.</li>
        <li>Have I mentioned the beard?</li>
    </ol>
    <footer>
        <p>© 2018 Gandalf</p>
    </footer>
</article>
<!--13到17的结合-->
<main> <!-- 网页主体内容 -->
    <article>
        <!-- 此处包含一个 article(一篇文章),内容略…… -->
    </article>

    <aside> <!-- 侧边栏在主内容右侧 -->
        <h2>相关链接</h2>
        <ul>
            <li><a href="#">这是一个超链接</a></li>
            <!-- 侧边栏有n个超链接,略略略…… -->
        </ul>
    </aside>
</main>

<footer> <!-- 本站所有网页的统一页脚 -->
    <p>© 2050 某某保留所有权利</p>
</footer>

<!--18.<div>块级无语义元素-->
<div class="shopping-cart">
    <h2>购物车</h2>
    <ul>
        <li>
            <p><a href=""><strong>银耳环</strong></a>:$99.95.</p>
        </li>
        <li>
            ...
        </li>
    </ul>
    <p>售价:$237.89</p>
</div>

<!--19.换行<br>和水平分割线<hr>-->
<em>好好学习</em><em>天天向上</em>
<em>好好学习</em><br><em>天天向上</em>
<em>好好学习</em><hr><em>天天向上</em>
</body>
</html>

2.运行结果

  • 访问地址是按照自己放的目录来定的
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_45665172/article/details/111463644