HTML
目录
实体
图片标签
meta标签
内联框架
超链接
HTML简介
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的网络资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是不同于纯文本的一种形式，可以简单的理解为纯文本的一种进阶，可以进行文字，图片，视频的处理，事实上在超文本中的“超”就是指超链接，在今后学详细学到什么是超链接。
HTML的标准结构
<html> <!-- 根标签有且只有一个，所有的网页内容都在htmle标签里面-->
<head> <!--
用来设置网页的头部信息，head标签中的内容不会在网页中直接显示
head标签是用来帮助浏览器解析网页
-->
<title></title>
</head>
<body>
<!--
body标签表示页面的主体，在网页中所有可见的内容都应该写在body标签中
-->
<h1>*****</h1>
</body>
</html>HTML注释
不同于其他语言的注释风格，在HTML中我们使用“<!-- -->”结构来表示注释，首先在注释中的内容不会在页面中显示，但是可以在源码中显示，因此在编写代码时可以通过注释进行描述，帮助今后的代码维护。
标签的属性
属性： 可以通过属性来设置标签，如果处理标签中的内容可以在开始标签中添加属性 属性实际上就是一个名值对的结构，属性名 =“属性值”，在一个标签中可以同时设置多个属性，属性间需要使用空格隔开。
常用的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>常用标签</title>
</head>
<body>
<!--
标题标签
-在HTML中，一共有六级标题标签
h1、、、h6
在显示的效果上h1最大，h6最小，但是文字的大小我们可以通过CSS进行设置
使用HTML标签时，关注的是标签的语义，我们使用的标签都是语义化标签
在6级标签中，h1最为重要，用来表示一个网页的主要内容，h2~h6重要性以此降低
对于搜索引擎而言，h1的重要性仅次于title标签，搜索引擎在检索完title标签的内容后，会立即查看h1中的内容
h1标签非常重要，他会影响到页面在搜索引擎中的排名，页面中只能写一个h1
在日常的Web开发中，对于页面标题标签往往只使用h1、h2、h3，而h3以后的基本不再使用
-->
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
<!--
段落标签，段落标签用于表示内容中的一个自然段
使用p标签来表示一个段落
p标签中的文字，默认会独占一行，并且段与段之间会一个间距
-->
<p>我是一个p标签，我用来表示一个段落</p>
<!--
在 HTML中，字符之间再多的空格，浏览器也会当作一个空格解析，换行也会当成一个空格解析
在页面中可以使用br标签来表示一个换行，br标签是自结束标签
-->
<p>
锄禾日当午，汗滴禾下土。<br/>
谁知盘中餐，粒粒皆辛苦。<br/>
</p>
<!--
hr标签也是一个自结束标签，可以在页面中生成一条水平线
-->
<hr/>
</body>
</html>
实体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>实体</title>
</head>
<body>
<!--
在HTML有一些符号例如：<,>等特殊字符是不能直接使用的
需要使用一些特殊的符号来表示这些特殊字符，这种特殊符号就是实体，也称为转义字符串
浏览器解析到实体时，会自动将实体转换为对应的字符
实体的语法：
&实体的名字;
< <
> >
空格
版权符号 ©
-->
a<c
<p>©今天天气 好晴朗，处处好风光</p>
</body>
</html>
图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>图片标签/相对路径</title>
</head>
<body>
<!--
使用img标签来向网页中引入一个外部图片，
img标签也是一个自结束标签
属性：
src：设置一个外部图片的路径
alt：可以用来设置在图片不能显示时，对图片的描述
搜索引擎可以通过alt属性来识别不同的图片
width:可以用来修改图片的宽度
heigth：可以用来修改图片的高度
宽度和高度两个属性如果只设置一个，另一个也会同时等比例调整大小
如果两个值同时指定则按照你指定的值来设置
一般开发中除了自适应的页面，不建议设置widt和height
-->
<img src="1.gif" alt="这是一个大松树" width="200px" height="200px"/>
<!--
src属性配置的是图片的路径，目前我们所要使用的路径全部是相对路径。
相对路径：
指的是相对于当前资源所在目录的位置
绝对路径：
指的是资源在计算机中的绝对位置
-->
</body>
</html>
图片的格式
JPEG（JPG） -JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明 -一般使用JPEG来保存图片等颜色丰富的图片
GIF -GIF支持的颜色少，只支持简单的透明，支持动态图 -图片颜色单一或者是动态图时可以使用gif
PNG -PNG支持的颜色多，并且支持复杂的透明 -可以用来显示颜色复杂的透明的图片
图片的使用原则： 效果不一致，使用效果好 效果一致，使用内存小的
meta标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>meta标签</title>
<!--
使用meta标签还可以用来设置网页的关键字
-->
<meta name="keywords" content="HTML5,js,前端">
<!--
还可以用来指定网页的描述
搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两份值不会影响页面在搜索引擎中的排名
-->
<meta name="deaadf" content="发布****">
<!--
使用meta标签可以用来做一个做请求的重定向
-->
<meta http-equiv="refresh" content="5" ;url = "http://www.baidu.com"/>
</head>
<body>
<h1>5秒后跳转页面</h1>
</body>
</html>内联框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>内联框架</title>
</head>
<body>
<!--
使用内联框架可以引入外部的页面
使用iframe来创建一个内联框架
属性：
scr：指向一个外部页面的路径，可以使用相对路径
width：
heigth：
name：可以为内联框架指定一个name属性
在现实开发中并不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索，
如果所开发的项目为内网项目时可以使用，影响不大
-->
</body>
</html>超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>超链接</title>
</head>
<body>
<!--
使用超链接可以让我们从一个页面跳转到另一个页面
使用a标签来创建一个超链接
属性：
href：指向链接跳转的目标地址，可以写一个相对路径也可以写一个完整的地址
-->
<a href="********">我是一个超链接</a>
<a href="********">我是一个超链接</a>
<!--
a标签中的target属性可以用来指定打开链接的位置
可选值：
_self:表示在当前窗口中打开（默认值）
_blank：在新的窗口中打开连接
-->
<a href="********">我是一个超链接</a>
<br/>
<iframe src="firstone" frameborder="tom"></iframe>
<!--
在创建超链接时，对于不确定的地址可以用&作为占位符
在连接跳转到id为**的元素位置时，直接在href中写id的值
-->
<!--
如果将链接地址设置为&，则点击链接时会自动跳转到当前页面的顶部
html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识
这个属性就是id，id属性在同一页面中只能有一个不能重复
-->
</body>
</html>
