您现在的位置:首页 >> 前端 >> 内容

前端学习之HTML标签的使用

时间:2018/6/28 14:55:17 点击:

  核心提示:1、title标签headtitle网页的标题/title/headtitle网页的标题标签,默认会显示在浏览器的标题栏中。搜索引擎在检索页面时,会首先检索title标签中的内容。它是网页中对于搜索引...

1、title标签

    <head>

        <title>网页的标题</title>

    </head>

title网页的标题标签,默认会显示在浏览器的标题栏中。搜索引擎在检索页面时,会首先检索title标签中的内容。它是网页中对于搜索引擎来说最重要的内容,会影响到网页在搜索引擎中的排名。

2、meta标签

    <head>

        <meta charset="utf-8" />

        <title>网页的标题</title>

    </head>

告诉浏览器,网页所采用的编码字符集。meta标签用来设置网页的一些元数据,比如网页的字符集,关键字、简介。 

“` 

    <!-- 

        还可以用来指定网页的描述

        搜索引擎在检索页面时,会同时检索页面中的关键词和描述,但是这两个值不会影响页面在搜索引擎中的排名

    -->

    <meta name="description" content="发布h5、js等前端相关的信息" />

    <!-- 

        使用meta可以用来做请求的重定向

        <meta http-equiv="refresh" content="秒数;url=目标路径" />

    -->

    <meta http-equiv="refresh" content="5;url=https://www.baidu.com" />

**3、img标签**

    <!-- 

        使用img标签来向网页中引入一个外部图片,

            img标签也是一个自结束标签

        属性:

            src:设置一个外部图片的路径

            alt:可以用来设置在图片不能显示时,对图片的描述

                    搜索引擎可以通过alt属性来识别不同的图片

                    如果不写alt属性,则搜索引擎不会对img中的图片进行收录

            width:可以用来修改图片的宽度,一般使用px作为单位

            height  :可以用来修改图片的高度,一般使用px作为单位

            宽度和高度两个属性如果指设置一个,另一个也会同时等比例调整大小

                如果两个值同时指定则按照你指定的值来设置

            一般开发中除了自适应的页面,不建议设置width和height 

    --> 

    <img src="1.gif" alt="苹果" width="200px" height="200px"  />

在浏览器中搜索图片时,其实是根据alt属性中制定的内容进行搜索的。比如alt中属性指定的是水果,在浏览器中输入苹果,查找图片是就会找到该图片。

    <!--

        src属性配置的是图片的路径,目前我们所要使用的路径全都是相对路径。

        相对路径:

            相对路径指相对于当前资源所在目录的位置

            <img src="abc/bcd/2.gif" alt="这是一个大松鼠"/>

        可以使用../来返回一级目录,返回几级目录就写几个../    

        <img src="../../img/2.gif" alt="这是一个大松鼠"/>

    -->

    <img src="../img/1.gif" alt="苹果"/>

    <!--

        图片的格式

            JPEG(JPG)

                - JPEG图片支持的颜色比较多,图片可以压缩,但是不支持透明

                - 一般使用JPEG来保存照片等颜色丰富的图片

            GIF

                - GIF支持的颜色少,只支持简单的透明,支持动态图

                - 图片颜色单一或者是动态图时可以使用gif

            PNG

                - PNG支持的颜色多,并且支持复杂的透明

                - 可以用来显示颜色复杂的透明的图片

        图片的使用原则:

            效果不一致,使用效果好的

            效果一致,使用小的

    -->

**4、iframe内联标签**

    <body>

        <!-- 

            使用内联框架可以引入一个外部的页面

                使用iframe来创建一个内联框架

                属性:

                    src :指向一个外部页面的路径,可以使用相对路径

                    width:

                    height:

                    name :可以为内联框架指定一个name属性

            在现实开发中不推荐使用内联框架,因为内联框架中的内容不会被搜索引擎所检索        

        -->

        <iframe src="test.html" name="test"></iframe>

    </body>

**5、a超链**

<!-- 

href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址

_blank,在新的窗口中打开链接

-->

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

在制定的内联框架中打开制定的地址网页

        <a href="demo03.html" target="tom">在内联框架tom中打开该网页</a>

        <br />

        <iframe src="demo.html" name="tom"></iframe>

6、center居中标签

        <!-- center标签中的内容,会默认在页面中居中显示 

                我们可以将要居中的元素,全都放到center中

        -->

        <center>

            <p>内容</p>

        </center>

作者:网络 来源:u010502101