Front end: el uso de etiquetas comunes en HTML

HTML

1. Etiquetas comunes

<!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. Ejecución de resultados

  • La dirección de acceso se determina según el directorio que coloque
    Inserte la descripción de la imagen aquí
    Inserte la descripción de la imagen aquí
    Inserte la descripción de la imagen aquí
    Inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/qq_45665172/article/details/111463644
Recomendado
Clasificación