[19/06/04-星期二] HTML基础_实体(转义字符)、图片标签(img)、元标签(meta)、语法规范、内联框架(iframe)、超链接

时间：2022-04-08 11:46:26

一、实体(转义字符)

　　在HTML中，一些诸如<、> 就是普通的小于号和大于号不能直接使用，因为浏览可能会把它当成一个标签去解析，所以需要一些特殊字符去表示这些特殊字符，

这些字符我们称他们叫实体，也叫转义字符。浏览器解析到实体时，会自动将实体装换成对应的字符。

语法： &实体的名字；   即"&"符号开头"；"符号结尾

如，小于号 <：   &lt；  全称：less than  比....小

　　大于号 >：  &gt； 全称：greater than  比.....大

　　空格  ： &nbsp；一个&nbsp代表一个空格，全称：Non-Breaking Space，不带换行的空格

　　版权符号 ©：&copy；全称：copyright，版权，著作权

二、图片标签(img)

　　使用img标签来向网页中引入外部图片，img标签也是个自结束标签

　　属性：  src，设置一个外部图片的路径，全称：source，源文件

　　　　　  alt，可以用来设置图片的描述，全称：alternative，可以供替代的。当图片没被加载出来，会看到文字描述。而且搜索引擎会通过alt属性来识别不同的图片

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

　　　　　  width，修改图片的宽度，单位是px 或者是百分比，当宽度或高度如果只设置一个，另一个也会等比例调整大小。

　　　　　 height，修改图片的高度，单位是px 或者是百分比，如果两个值同时设置，则会按设定的来，实际中除了自适应页面，不建议设置宽和高。

注意问题： 相对路径：指的是当前资源所在的目录位置，目标图片相对于当前html文件的路径。可以使用 "../" 去找图片的位置

　　　　　 绝对路径：把路径名写全包含盘符的路径，即从盘符开始的路径。

引申： ../ 用来返回到上一级目录，返回几级目录就写几个../  如：../../img/SongYi.jpg，表示返回2级目录去找图片

图片的格式：JPEG(就是JPG)：支持的颜色比较多，但是不支持透明，一般使用这种格式来保存照片等颜色丰富的图片。

　　　　　　GIF:只支持简单的透明，支持的颜色少，支持动态图。图片颜色单一或是动态图时用这种格式。

　　　　　　PNG:支持颜色多，并且支持复杂的透明，可以用来显示颜色复杂的透明的图片。

使用原则：效果不一致，使用效果好的；效果一致的，使用小的。但是并不绝对。

三、meta标签

　　使用这个标签可以设置网页的字符集、关键字、

　　属性：charset，设置字符集。 如：<meta charset="UTF-8">

　　　　　name="keywords"和content，设置关键字。如：<meta name="keywords" content="关雎尔 ,乔欣，欢乐颂" />

　　　　　name="description"和content，设置网页的描述。如<meta name="description" content="关于欢乐颂中关雎尔的信息" />

　　　　　http-equiv和content，设置网页的重定向。如<meta http-equiv="refresh" content="5,url=https://www.baidu.com/" /> 表示本网页5秒后跳到百度首页

作用：搜索引擎在检索页面时，会同时检索页面中的关键词和描述，会作为参考。但是这2个值不会影响网页在搜索引擎的排名。

四、HTML(严格点叫XHTML)的语法规范

　　1、HTML中不区分大小写，但是一般都使用小写。 <P> ...</p>是对的

　　2、HTML中的注释不能嵌套。

　　3、HTML中标签必须结构完整。要么成对出现，要么是自结束标签。但是如果不写完整浏览器不会报错，它会尽最大的努力去解析页面，所有不符合规范的标签，浏览器

会帮你自动添加。但是不建议这么做，因为有时浏览器会修正错误。浏览器也是被逼的，只是为了抢占市场。

　　4、HTML标签可以嵌套，但是不能交叉嵌套。

　　5、HTML中属性必须有值，且值必须加引号(单双引号均可)。 H5语法新变化，属性值可以省略，可以不使用引号。

五、内联框架(iframe)

　　使用内联框架可以引入一个外部的页面，使用iframe。但是在实际中不推荐使用，因为内联框架中的内容不会被搜索引擎所检索。

　　属性：src，指向外部一个页面的路径，可以使用相对路径。

　　　　　width和height，设置宽和高

　　　　　name，给内联框架起个名字

六、超链接(a)

　　使用超链接可以使我们从一个页面跳到另一个页面，使用a标签

　　属性：href，设置要跳转到目标地址。可以写相对路径或绝对路径。如果地址不确定，可以写个"#"作为占位符，而且设置为#，点击后自动跳到顶部，等于重新打开网页

　　　　　target，设置在什么位置打开新的网页，如在当前窗口打开(_self)，在新窗口打开(_blank)。不写的话默认在当前网页

　　　　　　　　　也可以自定义一个内联框架的name值(如示例中的_html)，让超链接在内联框架中打开。

【代码示例】

<!DOCTYPE html>

<html>

    <head>

        <!--三、meta标签：元数据的意思

            除了可以设置字符集外，还可以设置关键字

        -->

        <meta charset="UTF-8">

        <meta name="keywords" content="关雎尔 ,乔欣，欢乐颂" />

        <meta name="description" content="关于欢乐颂中关雎尔的信息" />

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

        <title>html实体和图片标签</title>

    </head>

    <body>

        <!--一、实体举例-->

        a&lt;c  <br />    <!-- &lt;小于号 -->

        m&gt;n  <br />    <!-- &gt;大于号-->

        &nbsp;&nbsp;锄禾日当午，汗滴禾下土。 <!--&nbsp;加一个空格-->

        &copy;版权所有，违反必究。 <br />

        <!--二、图片标签 img-->

        <img src="../img/QiaoXin.jpg" alt="这是关雎尔的扮演者" width="400px" height="300px"/> 

        <!--五、内联框架 iframe-->

        <iframe src="01 html基础知识.html" name="_html"></iframe> <br />

        <!--六、超链接-->

        <a href="https://www.baidu.com" target="_blank">点我去百度首页</a>

        <a href="https://www.baidu.com" target="_html">点我在内联框架打开百度</a>

    </body>

</html>

【小练习】

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>个人博客</title>

    </head>

    <body>

        <h1 align="center">这是我的个人博客</h1>

        <!--这里就是直接跳到id为bottom的锚点位置 写法：#id值-->

        <a href="#bottom" > 直接到底部</a> 

        <hr  />

        <h3 align="center">青花瓷</h3>

        <center><!--这部分使用center标签居中，凡是这个标签中的内容都会居中显示-->

            <a href="https://baike.baidu.com/item/%E5%91%A8%E6%9D%B0%E4%BC%A6/129156?fr=aladdin">周杰伦</a>

        </center>

        <p align="center">素胚勾勒出青花笔锋浓转淡</p> <!--这里使用的是段落中文字居中-->

        <p align="center">瓶身描绘的牡丹一如你初妆</p>

        <p align="center">冉冉檀香透过窗心事我了然</p>

        <p align="center">宣纸上走笔至此搁一半</p>

        <p align="center">釉色渲染仕女图韵味被私藏</p>

        <p align="center">而你嫣然的一笑如含苞待放</p>

        <p align="center">你的美一缕飘散</p>

        <p align="center">去到我去不了的地方</p>

        <center> <!--这部分使用center标签居中，凡是这个标签中的内容都会居中显示-->

            <img src="../img/qinghuaci.jpg"  width="400px" height="300px" />

            <p>天青色等烟雨 ，而我在等你</p>

            <p>炊烟袅袅升起， 隔江千万里</p>

            <p>在瓶底书刻隶仿前朝的飘逸</p>

            <p>就当我为遇见你伏笔</p>

            <p>

            天青色等烟雨 ，而我在等你 <br /> <!--可以看到使用br换行与使用p标签明显不同-->

            月色被打捞起 ，晕开了结局 <br />

            如传世的青花瓷自顾自美丽<br />

            你眼带笑意<br />

            </p>

            <hr />

                  友情链接：

            <a href="http://www.kugou.com/">酷狗音乐</a> &nbsp;|&nbsp;

            <a href="http://www.iqiyi.com/">爱奇艺</a> <br />

            <p>

                <a href="#">回到顶部</a> &nbsp;|&nbsp;

                <!--联系我们就是一个发送电子邮件的链接

                    写法：href="mailto:邮件地址"

                    当点击这个超链接，会打开计算机中的默认的电子邮件客户端，并且已经将收件人设置为邮件地址

                    如果没有就不打开。

                -->

                <a href="mailto:XXX@163.com">联系我们</a>

            </p>

            <!--这里的id就相当于锚点，在当前页面设置为不重复的名字，不能数字开头-->

            <p id="bottom"> 京ICP证XXXX号-1   京网文【2019】0XXX-XXX号  </p>

            <p> &copy; 2019ID长安忆</p>

        </center>

    </body>

</html>

　　

相关文章