html的语法，有三个基本结构：
<html>
<head>
<!--定义了头部信息-->
</head>
<body>
<!--内容主体-->
这是我们的第一个网页
</body>
</html>
head标签包含的内容
-
title标签
title标签是设置网页的标题的，其设置方式为：
<title>这是网页的标题</title>
<html>
<head>
<title>这是网页的标题</title>
</head>
<body>
这是我们的第一个网页
</body>
</html>
- meta标签
前面我们遇到了html在浏览器中显示乱码，要解决乱码问题，可以通过meta标签来实现。其代码为：<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 如果我们使用utf-8乱码，那么我们就用gb2312
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>这是网页的标题</title>
</head>
<body>
这是我们的第一个网页
</body>
</html>
body部分
- body标签，是对正文内容进行处理的，正文的样式主要是设置其颜色
<html>
<head>
<title>设置网页的颜色</title>
</head>
<body bgcolor="red">
内容暂时不管
</body>
</html>
以上设置了背景颜色为红色bgcolor="red"，如果我们要设置其他颜色，同理也可以进行设置。当然，如果我们要设置青色，要设置24度灰，又该怎么办？
其实现方式可以使用RGB颜色编码来实现各种颜色, <body bgcolor="#228800"> 这是16进制颜色编码
我们也可以使用图片做背景，那么首先得有一张图片。然后这张的位置是对应了网页的位置。其实现代码为：<body backgroud="图片的路径">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>这是网页的标题</title>
</head>
<body background="./linux.jpg">
这是实现用图片做网页的背景
</body>
</html>
对正文文字进行处理
- Hn标签，它是对文字大小进行设置的，我们有<H1>到<H6>总6个设置文字大小的标签
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>设置文字大小</title>
</head>
<body>
<h1>春晓</h1>
<h2>春眠不觉晓</h2>
<h3>处处闻啼鸟</h3>
<h4>夜来风雨声</h4>
<h5>花落知多少</h5>
<h6>作者：千里</h6>
<h7>2018-7-9</h7>
</body>
</html>
- font标签，对字体进行设置，包括改变颜色，它有颜色属性
<font color="red">，但其不仅仅只有颜色属性，也可以设置大小size="5"。甚至还有设置字体face属性，例如：face="黑体"
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>设置文字的font标签</title>
</head>
<body>
<font color="red" face="黑体">春晓</font>
<font color="blue" face="隶书" size="8">春眠不觉晓</font>
处处蚊子咬
</body>
</html>
注：size属性是可以使用size="8"，8个像素单位。也可以使用size="+8"表示在基准上增加8个像素。也可以使用size="-8"在基准上减小8个像素。
- 实现换行的br标签，可以实现换行操作。br标签比较特殊，有三种实现方式：
<br>或<br />或<br>内容</br这三种方式都可以，当然我们一般建议是在两行之间使用<br />标签
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>设置文字的font和br标签</title>
</head>
<body>
<font color="red" face="黑体">春晓</font> <br /> <!--在两行之间使用换行标签-->
<font color="blue" face="隶书" size="8">春眠不觉晓</font>
处处蚊子咬
</body>
</html>
- hr标签，HR标签是划一道杠。这道杠可以弄成很胖的，其属性为：
size="值"，还有一个宽度width属性，还有一个对齐方式，align="值"，其值有：left(左)，right(右)，middle(中)-->center，也有颜色属性：color
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>设置hr标签</title>
</head>
<body>
<font color="red" face="黑体">春晓</font> <br />
<hr size="50">
<font color="blue" face="隶书" size="8">春眠不觉晓</font>
<hr width="300" align="center">
处处蚊子咬
</body>
</html>
- p标签，该标签是段落标签。我们可以针对一块内容进行属性设置。在段落中，我们可以进行对齐的处理，其属性为：align
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>设置段落标签</title>
</head>
<body>
<p>
标题：html从入门到放弃
</p>
<p align="middle">
内容：html是一门优秀的语言，通过学习html语言可以让人精神气爽，气若吐兰。学习三天后，可以让腰不酸，腿不疼，头不抽筋了。整个人就像步入了仙境一般。
</p>
</body>
</html>
- 特殊字符，我们知道段落一般有一个特征是需要空两格。在HTML中是无法识别普通空格的，需要进行特殊处理。使用
来表示一个空格。 - 另外还有一个叫做
©表示版权信息。还有如：>表示大于号，<表示小于号。
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>设置特殊符号标签</title>
</head>
<body>
<p align="center">
标题：html从入门到放弃
</p>
<p align="left"><!--设置左对齐-->
内容：html是一门优秀的语言，通过学习html语言可以让人精神气爽，气若吐兰。学习三天后，可以让腰不酸，腿不疼，头不抽筋了。整个人就像步入了仙境一般。
</p>
<hr><!--最底部一道杠之后，添加右对齐的版权信息-->
<p align="right">
© 求索教育 2016-2026
</p>
</body>
</html>
-
B标签，加粗操作。
一般标题需要进行加粗操作，这时候我们可以使用B标签来实现。而且我们也可以实现标签的叠加操作，来实现功能的叠加
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>加粗和标签叠加操作</title>
</head>
<body>
<p align="center">
<b>标题：html从入门到放弃</b> <!--在p标签里面使用了b标签-->
</p>
<p align="left"><!--设置左对齐-->
内容：html是一门优秀的语言，通过学习html语言可以让人精神气爽，气若吐兰。学习三天后，可以让腰不酸，腿不疼，头不抽筋了。整个人就像步入了仙境一般。
</p>
<hr><!--最底部一道杠之后，添加右对齐的版权信息-->
<p align="right">
© 求索教育 2016-2026
</p>
</body>
</html>
- img图片标签
我们可以在网页上显示图片信息，在这里图片是给出对应的链接的。对应的就有源地址src属性，为：<img src="路径" >。在图片处理中，我们还可以有一些其他属性
- 大小设置，即高度（height="值"）与宽度（width="值"），而且可以百分比方式设置。
- 还可以鼠标移动到图片上，会显示图片的文字，就是加入
alt="内容" - 还可以有对齐方式的属性，align
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>图片操作</title>
</head>
<body>
这是图片之前的内容
<img src="./img/002.gif"> <!--图片是一个整体，不能够加文字所以可以没有结束标签-->
<img src="./linux.jpg" height="50%" width="50%" alt="linux进阶指南" align="right">
这是图片之后的内容
</body>
</html>
- 内容编号
我们可以对网页内容，使用有序序号和无序序号两种。
-
有序序号标签：ol ，有序序号的处理方式。使用ol对内容进行有序标注的同时还需要使用<li>标签进行配合
有序编号可以修改其序号表示形式，用type属性，用其对应的序号第1个。例如： 1 a A i I
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>内容编号</title>
</head>
<body>
<ol type="a">
<li>标题要突出</li>
<li>要有自己的观点</li>
<li>正文要有创意</li>
<li>故事要新颖</li>
<li>结尾要有寓意</li>
</ol>
</body>
</html>
-
无序序号<ul>，有些要求显示为无序序号，这时候可以使用ul标签来实现
它也有几种表现形式，type值有：disc（实心圆）、square（方块）、circle（空圈）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>内容编号</title>
</head>
<body>
<ul type="square">
<li>标题要突出</li>
<li>要有自己的观点</li>
<li>正文要有创意</li>
<li>故事要新颖</li>
<li>结尾要有寓意</li>
</ol>
</body>
</html>
- pre标签，即预文本设置。将图片和文字合在一起进行展示
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>内容编号</title>
</head>
<body>
<pre>
<img src="./img/002.gif" align="left">
标题要突出
要有自己的观点
正文要有创意
故事要新颖
结尾要有寓意
</pre>
</body>
</html>
- marquee实现跑马灯效果
- 不仅文字可以实现跑马灯效果，图片也可以实现跑马灯效果，HR标签也可以
- direction="right" |"left"|"up"|"down"属性可以调整跑马灯的运行方向
- 如果是要设置跑马灯的高度与宽度，可以使用height和width属性进行设置
- 还可以设置跑马灯的行为，使用behavior属性，可以设置循环滚动（scroll）、往返撞击（alternate）、只滚动一次（slide）等行为
- 可以将滚动的区域设置背景颜色，其属性为：bgcolor="颜色"
- 还可以设置延时滚动效果，scrolldelay="1000"，其单位为毫秒
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>跑马灯效果</title>
</head>
<body>
<marquee diretion="right">验证出现的方向，从左往右</marquee>
<marquee behavior="slide">只会运行一次就停止</marquee>
<marquee bgcolor="blue">跑马灯区域背景颜色</marquee>
<marquee scrolldelay="500">设置运行延时效果</marquee>
<marquee behavior="alternate" direction="up" height="200" bgcolor="yellow">
欢迎来到html课堂，在这个课堂你会学习到放弃是什么滋味
</marquee>
<marquee scrolldelay="1000" bgcolor="yellow">
<hr width="300" size="15" color="red">
</marquee>
</body>
</html>
-
A标签，为HTML中最重要的标签之一，这个是超链接标签。
href表示超链接去向位置，是一个目标网址，也可以是一个本地网页
href还可以实现对邮箱的超链接，其实现代码为：
<a href="mailto:myemail@qq.com">打开窗口是新窗口还是原有窗口，其实现代码为：
<a target="值">主要有两个值：_self和_blank
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>超链接的设置</title>
</head>
<body>
<p align="center"><b>HTML入门教程</b></p>
<a href="http://www.baidu.com">1.HTML之HEAD标签</a> <!--跳转到了百度首页-->
<a href="./body.html">2.HTML之BODY标签</a>
<a href="mailto:service@qiusuoedu.com">求索教育服务邮箱</a>
<a href="http://www.baidu.com" target="_self">当前窗口打开百度</a><br />
<a href="http://www.baidu.com" target="_blank">新页面打开百度</a>
</body>
</html>
-
表格，如何在HTML中实现表格
要在HTML中实现表格，首先要有table标签来告诉HTML这是一个表格。然后表格中存在行<tr>，每个行中又有若干个单元格是：<td>
即：表格中存在多行，那么就有多个<tr>标签组。每一行又有若干个单元格，即<td>标签组
<html>
<head>
<title>表格的制作</title>
</head>
<body>
这是表格前面的内容<br>
<!--以下代码实现表格的制作-->
<table>
<tr> <!--这是第一行-->
<td>第1行第1格</td> <!--第1个单元格-->
<td>第1行第2格</td> <!--第2个单元格-->
</tr>
<tr> <!--这是第二行-->
<td>第2行第1格</td>
<td>第2行第2格</td>
</tr>
<tr> <!--这是第三行-->
<td>第3行第1格</td>
<td>第3行第2格</td>
</tr>
</table>
这是表格后面的内容<br>
</body>
</html>
- 我们会发现以上制作出来的表格，没有边框，看起来并不习惯。其实只需要在<table>标签中加入border属性即可。对应的代码为：
<table border="1">，即实现了1个像素的边框。 - 我们设置了边框的大小，还可以设置边框的颜色。其实现代码为：
<table border="1" bordercolor="red"> - 可以对表格设置背景颜色，代码为：
<table bgcolor="yellow">，可以设置背景颜色，那也可以设置背景图片：<table background="图片地址"> - 我们知道，表格有标题行（第一行）与众不同。我可以设置第一行的背景颜色，这该如何设置？
- 表格可以设置背景颜色，行也可以设置背景颜色，单元格可以吗？
- 我们第一行的与众不同，还包含内容居中对齐。如何实现居中对齐？代码为：
<tr align="center"> - 如果我们设置
<table align="center">，这时候是哪种居中？ - 表格还有两个属性：cellpadding和cellspacing，cellpadding是内容与单元格边框的边距。cellspacing是单元格与单元格之间的边框。
单元格的合并：
- 在表格中，有时候我们期望进行单元格的合并。合并的方式为：第1个单元格占2个列宽（colspan="2"）第2个单元格对应的就没有了。
- 如果是合并两行内容，则对应的是第1个单元格占2个行宽（rowspan="2"），第2行的单元格对应的就没有了。
<html>
<head>
<title>表格的制作</title>
</head>
<body>
这是表格前面的内容<br>
<!--以下代码实现表格的制作-->
<table>
<tr> <!--这是第一行-->
<td>第1行第1格</td> <!--第1个单元格-->
<td>第1行第2格</td> <!--第2个单元格-->
</tr>
<tr> <!--这是第二行-->
<td colspan="2">第2行第1格</td> <!--colspan表示列宽-->
<!--第2格没有了-->
</tr>
</table>
这是表格后面的内容<br>
</body>
</html>
-
frame标签，它由frameset和frame两个标签组成
我们可以把网页区域分成若干个部分（frame），全部是frameset。我们使用frameset的核心目的是对网页进行分块，不是对它的body部分进行切割。
frame的处理：
- 我们需要加入框架的分块方式，是横向分块还是纵向分块。如果是横向分块就用rows="20%,30%,50%"，当然我们的分块最终必然是100%，所以我们也可以这么写：
<frameset rows="20%,30%,*"> - 如果我们需要纵向分块，则使用cols="30%,40%,*"，来实现纵向分块。
<html>
<head>
<title>使用frame进行布局</title>
</head>
<frameset rows="20%,30%,50%">
<frame></frame> <!--第1个框架-->
<frame></frame> <!--第2个框架-->
<frame></frame> <!--第3个框架-->
</frameset>
</html>
- 如果我想实现品字型布局，该如何设计？
<html>
<head>
<title>使用frame进行布局</title>
</head>
<frameset rows="30%,*"> <!--横向分成了两块-->
<frame></frame>
<frameset cols="50%,*"> <!--第2块是一个框架集，又要分成两块-->
<frame></frame>
<frame></frame>
</frameset>
</frameset>
</html>
- 以上的框架是可以调整大小的，如果我们要设置其不可以调整大小，在<frame>标签中使用noresize属性。这个属性比较特别，我们可以有值也可以没有值。其实现方式是：
<frame cols="50,*" noresize="noresize">或``<frame cols="50,*" noresize>`都可以。 - 如果我们要求不显示框架的边框，我们可以设置属性
<frameset border=0>
实现框架中的内容：
- 我们需要专门的设计一个网页用来存放内容，然后通过框架加载过去即可。
<html>
<head>
<title>使用frame进行布局</title>
</head>
<frameset rows="30%,*"> <!--横向分成了两块-->
<frame src="./a.html"></frame> <!--引入了a.html的内容-->
<frame name="right" src="http://www.baidu.com"></frame> <!--给其命名，让这个区域有名字-->
</frameset>
</html>
- 接下来我们只需要设计a.html的内容即可。这两个网页按正常网页来设计即可。
<html>
<body>
<!--a.html的内容主要是超链接，但是需要跳转到叫做right的区域-->
<a href="http://news.qq.com" target="right">腾讯新闻网</a><br>
<a href="http://news.163.com" target="right">网易新闻网</a><br>
<a href="http://news.sina.com.cn" target="right">新浪新闻</a><br>
<a href="http://www.ifeng.com" target="right">凤凰资讯</a><br>
</body>
</html>
