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空格
转移符
表格空格,两个 一起使用是一个空格
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 禁用调整大小