HTML简介

网页的结构：
一个网页有三个部分组成:结构、表现、行为

结构：
结构是页面的整体结构，哪里是标题，哪里是段落，哪里是图片；
结构使用HTML来编写

表现：
表现是页面的外在的样式，比如字体，字体大小，字体颜色，背景。。。；
使用CSS来设置页面中元素的样式

行为：
页面和用户之间的交互行为；
使用JavaScript来设置页面的行为

一个设计优良的网页要求结构、表现、行为三者分离,
在开发中总是要面临一个问题，就是程序之间的耦合，三者分离就是为了解耦合.

HTML，超文本标记语言
负责页面中的结构，定义出页面中的各个组成部分,
HTML是采用纯文本的形式的编写，采用HTML标签来标识出页面中的不同部分

HTML页面的结构

	<!doctype html>
	<html>
		<head>
			<meta charset="utf-8" />
			<title></title>
		</head>
		<body>
			<!-- 网页的主体内容 -->
		</body>
	</html>

属性：

通过属性可以设置标签的效果
属性需要定义在开始标签中或这自结束标签中
属性实际上是一组一组名值对结构
例子：

<标签名 属性名="属性值" 属性名="属性值"></标签名>
<标签名 属性名="属性值" 属性名="属性值" />

文档声明：

<!doctype html>
用来标识当前页面的html的版本,
该声明用来告诉浏览器，当前的页面是使用HTML5的标准编写的。

注释：

语法：<!-- 注释内容 -->
注释中的内容不会在页面中显示，但是会在源码中显示，我们可以通过注释来说明网页的代码
也可以通过注释隐藏一些页面中不想显示的内容

实体：

在HTML页面中一些特殊符号是不能直接使用，需要使用实体来代替这些特殊符号
实体也可以称为转义字符
实体的语法：&实体名;
>常用的实体：
    <  &lt;
    >  &gt;
    空格  &nbsp;
    版权符号 &copy;

相对路径：

相对于当前资源所在的目录的路径
可以使用…/返回一级目录，返回几级使用几个…/

xHtml语法规范：

1.HTML中不区分大小写，但是尽量使用小写
2.HTML的注释不能嵌套
3.标签必须结构完整（要么成对出现，要么自结束标签）
4.标签可以嵌套但是不能交叉嵌套
5.属性必须有值，且值必须加引号，单引号双引号都可以

HTML常用标签

<html>
网页的根标签
一个页面中有且只有一个根标签
网页中的所有内容都需要写在html标签的内部
 
<head>
网页的头部
该标签中的内容不会在网页中直接显示
该标签用于帮助浏览器解析页面


<title>：
	<head>子标签
用来设置网页的标题
默认会在浏览器的标题栏中显示
搜索引擎检索网页时，会主要检索title中的内容，它会影响到页面在搜索引擎中的排名

<meta>：
	<head>子标签
用来设置网页的元数据，比如网页使用的字符集
	<meta charset="utf-8" />
设置网页的关键字
	<meta name="keywords" content="关键字,关键字,关键字,关键字"/>
设置网页的描述
	<meta name="description" content="网页的描述"/>
请求的重定向
	<meta http-equiv="refresh" content="秒数;url=地址"  />
 
<body>
网页的主体
网页中所有的可见部分都需要在body中编写
 
<h1> ~ <h6>
标题标签
在html中一共有六级标题
六级标题中，h1最重要，h6最不重要，一般页面中只会使用h1~h3
h1的重要性仅次于title，浏览器也会主要检索h1中的内容，以判断页面的主要内容
一般一个页面中只能写一个h1
 
<p>    
段落标签

<br/>
换行标签

<hr/>
水平线标签

内联框架：

可以向一个页面中引入其他的外部页面

扫描二维码关注公众号，回复： 3450564 查看本文章

<iframe></iframe>

属性：
src   外部页面的地址，可以使用相对路径
width和height   可以设置框架的宽度和高度
name  可以为内联框架指定一个名字
target
	可以将该属性值设置为超链接的target属性的值
	这样当点击超链接时，页面将会在相应的内联框架中打开
	内联框架中的内容不会被搜索引擎所检索，所以开发中尽量不要使用内联框架

超链接：

可以使当前页面跳转到其他的页面

<a>链接的文字</a>

>属性：
href：指向链接跳转的目标地址，可以是一个相对路径,还可以是#id属性值，这样当点击超链接以后，将会跳转到当前页面的指定位置。
    可以使用mailto:来创建一个发送电子邮件的超链接
target：指定在哪个窗口中打开链接
	可选值：
		_self   默认值，默认在当前窗口打开链接
		_blank     在新窗口中打开链接
内联框架的name属性值      在指定的内联框架中打开链接

图片标签

<img />

使用图片标签可以向页面中引入一个外部图片

属性：
	src：指向一个外部图片的路径，可以使用相对路径
	alt：指定一个在图片无法加载时对图片的描述
			 搜索引擎主要通过该属性来识别图片的内容
			 如果不写该属性则搜索引擎会对图片进行收录
	width：设置图片的宽度
	height：设置图片的高度

图片的格式：
	JPEG：颜色丰富的图片，如，照片
	GIF：颜色单一，简单透明的图片，动态图
	PNG：颜色丰富，复杂透明的图片
图片选择的原则：
	效果一致，用小的
	效果不一致，用效果好的

文本标签

<em>
表示语气上的强调
 
<strong>
表示内容的重要性
 
<i>
表示单纯的斜体
 
<b>
表示单纯的加粗
 
<small>
表示细则一类的内容
 
<cite>
表示参考的内容，凡是加书名号的都可以使用cite
 
<q>
短引用，行内引用
   
<blockquote>
长引用，块级引用
 
<sup>
上标
 
<sub>
下标
 
<del>
删除的内容
 
<ins>
插入的内容
 
<pre>
预格式标签，可以保留代码中空格换行这些格式
 
<code>
表示程序代码

02_HTML基础