[19/06/04-星期二] HTML基础_实体(转义字符)、图片标签(img)、元标签(meta)、语法规范、内联框架(iframe)、超链接
一、实体(转义字符)
在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>
[19/06/04-星期二] HTML基础_实体(转义字符)、图片标签(img)、元标签(meta)、语法规范、内联框架(iframe)、超链接的更多相关文章
- [19/06/09-星期日] CSS基础_示例
一.图片格式&Hack(尽量不要使用) IE6对图片png-24的透明效果不支持,IE6中背景会发灰,可以使用png-8来代替.但是使用png-8代替之后清晰度会有所下降. 使用js来解决该问 ...
- HTML&CSS基础-内联框架
HTML&CSS基础-内联框架 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,在同一个路径中有两个网页 <!DOCTYPE html> < ...
- [ATL/WTL]_[0基础]_[CBitmap复制图片-截取图片-平铺图片]
场景: 1.当你须要截取图片部分区域作为某个控件的背景. 2.须要平铺图片到一个大区域让他自己主动放大时. 3.或者须要合并图片时. 代码: CDC sdc; CDC ddc; sdc.CreateC ...
- 六、框架<iframe>、背景、实体
HTML5框架 框架标签(frame) 框架对于页面的设计有着很大的作用 框架集的标签(<frameset>) 框架集标签定义如何将窗口分割为框架 每一个frameset定义一系列行或列 ...
- [19/06/06-星期四] CSS基础_盒子模型
一.盒子模型(框模型.盒模型) CSS处理网页时,它认为每个元素都在一个不可见的矩形盒子里. 为什么想象成盒子模型?因为把所有元素想象成盒子,那么我们对网页的布局就相当于摆放盒子.我们只需要把相应的盒 ...
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- [19/06/03-星期一] HTML基础_C/S与B/S的区别&标题标签(h1-h6)、段落标签(p)
一.C/S与B/S的区别 C/S(Client/Server):客户端/服务器 1)一般使用的软件都是C/S架构,比如QQ.360.office365: 2)C表示客户端,用户通过客户端来使用软件:S ...
- JavaSE学习总结第06天_Java语言基础2 & 面向对象1
06.01 二维数组概述和格式1的讲解 二维数组概述:二维数组其实就是一个元素为一维数组的数组 格式1:数据类型[][] 变量名 = new 数据类型[m][n]; m表示这个二维数组有多少个一维 ...
- C++基础_总结
(1)多态性都有哪些?(静态和动态,然后分别叙述了一下虚函数和函数重载) 多态分为两种:静态和动态.静态主要包括函数重载和模板:动态主要是依靠虚函数实现的. 静态联编:重载函数不加virtual关键字 ...
随机推荐
- MySQL 创建唯一索引忽略对已经重复数据的检查
MySQL 创建唯一索引忽略对已经重复数据的检查 在创建唯一索引的基础上加上关键字"IGNORE "即可.(注意,经测试,在5.7版本已经不再支持该参数) # 重复数据 mysql ...
- Python机器学习常用库记录
1.argparse http://www.jianshu.com/p/fef2d215b91d 命令行解释工具 2.tflearn http://tflearn.org/doc_index/ ten ...
- VUE DIV模拟input框的基本处理
关键代码 <div class="dialog-main" :contenteditable= "editable" v-text="notic ...
- option跳转页面并选中当前值
思路:使用cookie传值赋值 具体实现部分代码: <select onchange="test(this)" class="form-control" ...
- Devexpress MVC DropDownList (持续更新))
@Html.DevExpress().DropDownEdit(settings => { settings.Name = "psBankCharge"; settings. ...
- 关于win7系统下gitbook的安装与gitbook editor的配合使用
1.安装nodejs 2.node -v,可查看node版本: npm -v,可查看npm版本 3.npm install gitbook-cli -g,安装gitbook 此过程经常报错,如果报错, ...
- GoldenGate—AUTORESTART配置
AUTORESTART Valid For Manager Description Use the AUTORESTART parameter to start one or more Extract ...
- 516D Drazil and Morning Exercise
分析 求出直径和最远距离d 之后我们以直径中点为根 发现父亲的d肯定不小于儿子的d 于是从下往上启发式合并维护与子树根的值相差L内的个数即可 代码 #include<bits/stdc++.h& ...
- Vue知识整理12：事件绑定
采用v-on命令进行事件的绑定操作,通过单击按钮,实现按钮文字上数值的增加 带参数的事件过程 可以添加$event事件,实现事件信息的获取
- hibernate 配置+注释
Hibernate配置属性 属性名 用途 hibernate.dialect 一个Hibernate Dialect类名允许Hibernate针对特定的关系数据库生成优化的SQL. 取值 full.c ...