一、实体(转义字符)
在HTML中,一些诸如<、> 就是普通的小于号和大于号不能直接使用,因为浏览可能会把它当成一个标签去解析,所以需要一些特殊字符去表示这些特殊字符,
这些字符我们称他们叫实体,也叫转义字符。浏览器解析到实体时,会自动将实体装换成对应的字符。
语法: &实体的名字; 即"&"符号开头";"符号结尾
如,小于号 <: <; 全称:less than 比....小
大于号 >: >; 全称:greater than 比.....大
空格 :  ;一个 代表一个空格,全称:Non-Breaking Space,不带换行的空格
版权符号 ©:©;全称: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<c <br /> <!-- <小于号 --> m>n <br /> <!-- >大于号--> 锄禾日当午,汗滴禾下土。 <!-- 加一个空格--> ©版权所有,违反必究。 <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> | <a href="http://www.iqiyi.com/">爱奇艺</a> <br /> <p> <a href="#">回到顶部</a> | <!--联系我们就是一个发送电子邮件的链接 写法:href="mailto:邮件地址" 当点击这个超链接,会打开计算机中的默认的电子邮件客户端,并且已经将收件人设置为邮件地址 如果没有就不打开。 --> <a href="mailto:XXX@163.com">联系我们</a> </p> <!--这里的id就相当于锚点,在当前页面设置为不重复的名字,不能数字开头--> <p id="bottom"> 京ICP证XXXX号-1 京网文【2019】0XXX-XXX号 </p> <p> © 2019ID长安忆</p> </center> </body> </html>