HTML基础

HTML

一、HTML概述

HTML全称：Hyper Text Markup Language(超文本标记语言)超文本标记语言是标准通用标记语言（SGML）下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。HTML是一门用户创建网页文档的标记语言，网页文件本身是一种文本文件，通过在文本文件中添加标记符。HTML可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示、包括音频、视频等等如何播放）。简单一句话：HTML是一门用来创建网页的标记语言。

网页：网页，是网站中的一个页面，通常是网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件，俗称 HTML文件。

二、版本发展

HTML4.01 传统使用，现在一般不使用，最为流行的Html5, html5的诞生是随着移动互联网的崛起。

三、基本结构

<html>
    <head>
          <meta charset="utf-8" />
          <title> 这里是标题 </title>       
    </head>
    <body>
          这里是主内容
    </body>
</html>

网页文件的扩展名为*.html

五、HTML语法

5.1基本语法

<!DOCTYPE html>

文档声明：告诉浏览器使用的是HTML5版本

<tag>内容</tag> 标签：一般都是成对出现的，还有<tag/>表示闭合标签

5.2属性语法

<tag attr="value" attrName="name"></tag> attr是标签的属性，可以有多个，控制标签的行为

5.3标签的嵌套

<A>
	<B>
    </B>
</A>

标签B作为标签A的内容

六、标签的详解

6.1排版

6.1.1结构标签

1、html
2、head、title
3、body

<!DOCTYPE html>   <!-- 声明文档类型 html5   -->
<html>
	<head>              <!-- 网页头（显示在浏览器选项卡中，或者页面配置信息） -->
		<meta charset="utf-8" />  <!--页面编码 -->
		<title>这里是标题</title>       <!--标题-->
	</head>
	<body>   <!-- 网页的主体 -->
		这里是内容
	</body>
</html>

6.1.2标题标签

###### 1.2 标题标签

```
<h1>小明和小红</h1>
<h2>小明和小红</h2>
<h3>小明和小红</h3>
<h4>小明和小红</h4>
<h5>小明和小红</h5>
<h6>小明和小红</h6>

h1 - h6 数字越大字体越小。用来做标题展示

6.1.3段落标签

<p>
    这里是p标签
</p>

6.1.4 水平线

<hr size="4" color="red"/>

是一个闭合标签,size属性控制粗细，color控制颜色

6.1.5换行

新开一行，起到回车的作用

6.1.6空格

转移符&nbsp;

表格空格，两个&nbsp一起使用是一个空格

6.2区块

6.2.1内联元素

<span>区内容</span>

不换行，多个span在一行，将来结合css进行样式控制文本的外观

6.2.2块（块级元素）

<div> 块内容</div>

块元素占一行，能够结合css控制页面的布局
日期框

七、框架

把更多的功能页面集成在一个页面中。减少页面的跳转。

Iframe

在一个页面中预留一个窗口（理解为一空间）这个空间用于来展现其他页面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>上边内容</h1>
		<a href="tag_form.html" target="myframe"  >form表单案例</a> 
		<a href="tag_font.html" target="myframe">字体案例</a> 
		<a href="tag_tab.html" target="myframe">表格案例</a>
		<iframe name="myframe" width="100%" height="200px" frameborder="no"></iframe>
		<h1>下边内容</h1>
	</body>
</html>

frameset

称为框架集，用于整合多个frame，实现页面的整合。

<frameset rows="10%,*" frameborder="0" >
	
	<frame src="top.html" noresize="noresize" />
	 
	<frameset cols="15%,*">
		<frame src="left.html" noresize="noresize" />
		<frame name="nbframe"  noresize="noresize"/>
	</frameset>

</frameset>

frameborder 去边框 noresize 禁用调整大小