美文网首页
初学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标签用法

    网页效果如下图: 主要学习内容: HTML的主体结构 HTML的标题 效果如下: 加粗 插入图片 src 后面加上...

  • HTML入门2:html常用的标签

    本文为HTML中常用标签的用法。其中包括a标签,img标签,table标签,from标签 一、a 标签的用法 1....

  • web前端

    1. 2.标签 3.定义和用法 ...

  • 《HTML常用标签》

    这篇博客将包含HTML中常见且重要的a标签、table标签以及img标签的用法和作用。 a标签的用法 首先a标签是...

  • 好程序员web前端分享html中meta标签及用法详解

    好程序员web前端培训分享html中meta标签及用法详解,这篇文章给大家介绍了html中meta标签及用法详解,...

  • HTML常用标签

    HTML常用的几个标签a、img、table,用法如下 a标签的用法 a标签主要是跳转到外部链接,跳转到内部锚点,...

  • (1.2)DOCTYPE声明

    HTML标签 定义和用法 ·声明必须是HTML文档的第一行,位于 标签之前...

  • Html5 标签的变化 - DOCTYPE 声明

    HTML 标签 定义和用法 什么必须是HTML文档的第一行,位于 标签之...

  • 2019-04-24

    html HTML 标签 css flex vue vm.$emit用法 $emit 绑定一...

  • HTML常见标签用法

    什么是HTMLHTML是用来描述网页的一种语言 HTML标签HTML标签通常被称为HTML标签 web游览器的作用...

网友评论

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

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