美文网首页
初学HTML标签用法

初学HTML标签用法

作者: qianxun0921 | 来源:发表于2018-09-07 08:15 被阅读0次
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>个人博客</title>
    </head>
    <body>
        <center>
            <div>
                <p><a href="#bottom" name="top">去底部</a>&nbsp;&nbsp;去指定位置</p>
            </div>
            <h1>这是我的个人博客</h1>
            <hr>
            <h2>东风破</h2>
            <a href="https://baike.baidu.com/item/%E5%91%A8%E6%9D%B0%E4%BC%A6/129156?fr=aladdin">周杰伦</a>
            <div style="font-size: 15px;">
                一盏离愁孤单伫立在窗口<br>
                我在门后假装你人还没走<br>
                旧地如重游月圆更寂寞<br>
                夜半清醒的烛火不忍苛责我<br>
                一壶漂泊浪迹天涯难入喉<br>
                你走之后酒暖回忆思念瘦<br>
                水向东流时间怎么偷<br>
                花开就一次成熟我却错过<br>
                谁在用琵琶弹奏一曲东风破<br>
                岁月在墙上剥落看见小时候<br>
                犹记得那年我们都还很年幼<br>
                而如今琴声幽幽我的等候你没听过<br>
            </div>
            <img src="dfp1.jpg" alt="东风破" style="height: 250px;width: 400px">
            <div style="font-size: 15px;">
                谁在用琵琶弹奏一曲东风破<br>
                枫叶将故事染色结局我看透<br>
                篱笆外的古道我牵着你走过<br>
                荒烟漫草的年头就连分手都很沉默<br>
    
                一壶漂泊浪迹天涯难入喉<br>
                你走之后酒暖回忆思念瘦<br>
                水向东流时间怎么偷<br>
                花开就一次成熟我却错过<br>
    
                谁在用琵琶弹奏一曲东风破<br>
                岁月在墙上剥落看见小时候<br>
                犹记得那年我们都还很年幼<br>
                而如今琴声幽幽我的等候你没听过<br>
    
                谁在用琵琶弹奏一曲东风破<br>
                枫叶将故事染色结局我看透<br>
                篱笆外的古道我牵着你走过<br>
                荒烟漫草的年头就连分手都<br>
    
                谁在用琵琶弹奏一曲东风破<br>
                岁月在墙上剥落看见小时候<br>
                犹记得那年我们都还很年幼<br>
                而如今琴声幽幽我的等候你没听过<br>
            </div>
            <img src="dfp2.jpeg" alt="周杰伦" style="height: 250;width: 400px">
            <div style="font-size: 15px;">
                谁在用琵琶弹奏一曲东风破<br>
                岁月在墙上剥落看见小时候<br>
                犹记得那年我们都还很年幼<br>
                而如今琴声幽幽我的等候你没听过<br>
            </div>
            <hr>
            <p>友情链接:<a href="http://www.kuwo.cn/">周杰伦歌曲免费下载</p>
            <p><a href="#top" name="bottom">回到顶部</a> | <a href="https://outlook.live.com/owa/">联系我们</a></p>
    
        </center>
    </body>
    </html>
    

    网页效果如下图:


    捕获.PNG
    捕获1.PNG
    捕获2.PNG

    主要学习内容:

    HTML的主体结构

    <!DOCTYPE html>
    <html>
        <head>
            <title>第一个网页</title>
        </head>
        <body>
            <h1>这是一个很漂亮的网页</h1>
        </body>
    </html>
    

    HTML的标题

    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
    

    效果如下:


    biaoti.PNG

    加粗

    <b>
    

    插入图片

    <img src="wuhuang.jpg" alt="这是一只吾皇猫">
    

    src 后面加上图片文件的路径
    alt 表示当图片无法显示时对图片进行描述

    HTML中的三种图片格式:jpg,png,gif

    • 三种图片格式效果不一致的时候用最好的,效果一致时用最小的

    小于号标签

    &lt;
    

    大于号标签

    &gt;
    

    空格标签

    &nbsp;
    

    版权符号

    &copy;
    

    换行标签的区别

    <br/>
    

    是XHTML中的语法

    <br>
    

    是HTML中的语法

    内联框架

    引入另一张网页(但iframe标签不推荐使用)

    <iframe></iframe>
    

    超链接

    <a href="www.baidu.com" target="_blank">百度超链接</a>
    

    target="_blank" 表示在新页面中打开一个超链接

    引入外部样式

    <link rel="stylesheet" type="text/css" href="style.css">
    

    将这句代码写到head标签中

    块元素和内联元素

    块元素:div,p,h1~h6,ul,li
    内联元素:span,a,img,iframe

    块元素用来布局,内联元素用来作为布局样式

    相关文章

      网友评论

          本文标题:初学HTML标签用法

          本文链接:https://www.haomeiwen.com/subject/qqeqgftx.html