前端

html常用的基本标签

2019-07-17  本文已影响2人  59e89c043543

HTML基础包括web工作原理,HTML概述,HTML基本标签和HTML高级标签。


〈html〉...〈/html〉标签标记着HTML文档的开始和结束。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8"/>

        <title>

          my first page

        </title>

    </head>

    <body>

        HELLO!

    </body>

</html>


<meta>标签

<!--网页字符编码-->

<meta charset="utf-8">


h1—h6标题标签

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>标题标签</title>

    </head>

    <body>

        <h1>这是一级标题</h1>

        <h2>这是二级标题</h2>

        <h3>这是三级标题</h3>

        <h4>这是四级标题</h4>

        <h5>这是五级标题</h5>

        <h6>这是六级标题</h6>

    </body>

</html>


p段落标签 hr水平线标签 strong加粗 em斜体 br换行
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8"/>

        <title>段落标签</title>

    </head>

    <body>

        <!--段落标签-->

        <p>这是一个段落

        </p>

        <p>这是另外一个段落</p>

        <!--hr水平线标签-->

        <hr/>

        <!--strong加粗em斜体标签-->

        <p>我<strong>来自</strong><br/><em>江科大</em></p>

    </body>

</html>


图片标签,注释和特殊符号

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8"/>

        <title>图片</title>

    </head>

    <body>

        <!-- 相对路径 -->

        <img src="../Images/1.png" alt="这是图片" title="我叫图片" width="200" height="300">

        <!-- 绝对路径 -->

        <img src="http://www.xmgc360.com/_pages/articles/2018.jpg" alt="这是图片">

        <!-- 特殊符号 -->

        <p>如果时间&gt;七点就坐公交</p>

        <p>如果时间&lt;八点就打车</p>

        <p>这是一段很长&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;很长很长很长很长的话</p>

        <p>这里想要用一个引号&quot;</p>

        <p>这是一个&copy;版权符号</p>

    </body>

</html>


a链接标签

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8"/>

        <title>超链接</title>

    </head>

    <body>

        <a href="https://www.baidu.com" target="_self">百度</a>

        <a href="http://www.baidu.com" target="_blank" ><img src="../Images/1.png" alt="这是图片"></a>

    </body>

</html>


锚链接

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8"/>

        <title>锚链接</title>

    </head>

    <body>

        <a href="#marker">这是一个标记</a><br/>

        <a name="marker"><img src="../Images/1.png" alt="这是图片" title="我叫图片" width="200" height="300"></a>

    </body>

</html>


功能性链接

<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>


这些是html常用的基本标签,是学习前端知识的第一小步,革命尚未成功,同志仍需努力!

上一篇下一篇

猜你喜欢

热点阅读