目录
元素
2.12案例：创建一个标准结构的 HTML 文档，并创建头元素。
1、 HTML概述
1.1什么是HTML
1）HTML（HyperText Markup Language）是一种超文本标记语言，是一种纯文本类型的语言，是用来设计网页的标记语言。
2）用该语言编写的文件，以.html或者.htm为后缀。
3）由浏览器解释运行。
4）HTML是一个扩展性很强的语言，可以嵌套用脚本语言编写的程序段，如：VBScript、JavaScript。嵌入JavaScript代码可以实现动态效果，同时也可以使用CSS定义样式。
1.2 Web浏览器
1）主要功能：
①代理访问者提交请求。
②作为HTML解释器和内嵌脚本程序执行器。
③用图形化的方式显示HTML文档。
2）主要Web浏览器产品
IE、Firefox、Chrome、Opera、Safari
2、 HTML基础语法
2.1标记语法
1）HTML用于描述功能的符号称为“标记”，比如<p>、<h1>等。
2）标记在使用时必须使用尖括号括起来，有些标记还必须成对出现。
2.2封闭类型标记：双标记
1）语法：
<标记>内容</标记>
<标记 属性1="值" 属性2="值">内容</标记>
2）属性的声明必须位于开始标记里。
3）一个标记的属性可能不止一个，多个属性之间用空格隔开。
u 注意事项：
v 封闭类型的标记必须成对出现。
v 如果一个应该封闭的标记没有被封闭，则会产生意料不到的错误。
2.3非封闭类型标记：单标记或者空标记
1）语法：
<标记>或者<标记 />
2）不需要结束标记，不能包含内容，可以设置属性。
例如： hello word <br>hello word
hello word <br />hello word
u 注意事项：
v <br />为当前标准，<br>为早期版本。
v 对于单标记，建议写法 <br />，而不是 <br>。
2.4元素和属性
1）元素：每一对尖括号包围的部分，如<body></body>包围的部分就叫做body元素。
2）属性：用来修饰元素，每个属性都有值，属性放在开始标记中。
2.5注释
为代码添加适当的注释是一种良好的编码习惯。
1）注释只在编辑文档情况下可见，在浏览器展示页面时并不会显示。
2）添加注释的语法：
<!--注释的文本内容-->
u 注意事项：
v “<!--”和“-->”之间的任何内容都不会显示在浏览器中。
v 注释不可以嵌套在其他注释中。
2.6 HTML文档的标准结构
1）结构：
版本信息
<html><!--HTML页面-->
<head></head><!--文件头-->
<body></body><!--文件主体部分-->
</html>
2）例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body></body>
</html>
2.7版本信息
1）在文档的起始用DOCTYPE声明指定的版本和风格，让浏览器清楚文档的版本、类型和风格。版本信息分为三种：严格型、传统型（过渡型）、框架型。
2）Strict DTD：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3）Transitional DTD：（常用）
<!DOCTYPE html >
4）Frameset DTD：（不常用了）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
u 注意事项：传统型不需要命名空间，严格型需要命名空间。
2.8 <head>元素
1）<head> 元素用于为页面定义全局信息
①所有其他头元素的容器。 ②紧跟在起始标签<html>之后。
2）定义整个文档相关的信息，常包含如下子元素：
①<title>：标题。
②<meta>：元数据元素，定义页面的编码格式或者刷新频率等。
③<script>：JavaScript脚本（或引入Ajax、jQuery脚本等）。
④<style>：定义内部样式表。
⑤<link>：为当前页面引入其他资源（如外部样式表）。
2.9 <body> 元素
文档的主体，包含所有要显示的内容。
2.10头元素：<title>
标题元素<title></titile>用于为文档定义标题。
1）标题元素的内容出现在浏览器顶部。
2）没有属性。
3）必须出现在<head>元素中。
4）一个文档只能有一个标题元素。
例如：<head>
<title>第一个网页</title>
</head>
2.11头元素：<meta>
元数据元素<meta />用于定义网页的基本信息。
1）为空标记。
2）常用属性有：content、http-equiv
例如：<head>
<title>第一个网页</title>
<meta http-equiv="refresh" content="3" /><!--3秒刷新一次-->
<!--文档内容为：文本格式的html，字符集采用utf-8-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
2.12案例：创建一个标准结构的 HTML 文档，并创建头元素。
<!--版本信息-->
<!DOCTYPE html >
<!--html元素，表示整个文档-->
<html>
<!--头元素：描述整个文档的相关信息-->
<head>
<title>第一个网页</title>
<meta http-equiv="refresh" content="3" /><!--3秒刷新-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<!--文档主体：显示-->
<body>
</body>
</html>
u 注意事项：若不想出现乱码，则存储时的物理编码和查看时的编码需要一致；若出现乱码，则一看保存时的编码，二指定查看编码。
3、 文本标记
3.1文本标记的作用
1）文本是网页上的基本成分。
2）直接书写的文本会用浏览器默认的样式显示。
3）包含在标记中的文本则会被显示为标记所拥有的样式：特殊字符、注释、标题元素、段落元素、换行元素、分区元素。
3.2文本于特数字符
1）空格折叠：多个空格或制表符压缩成单个空格，即只显示一个空格。
2）特殊字符（如空格），可以用转义字符，也称为字符实体。
例如：The <p> element. ©2013 by chang.
对应：The <p> element. ©2013 by chang.
3.3标题元素<hn>
1）标题元素让文字以醒目的方式显示，往往用于文章的标题。
2）基本语法：<h#>……</h#>，#：可以为1、2、3、4、5、6
从<h1>到<h6>，即标题1到标题6
u 注意事项：<h1>最大，<h6>最小。
3.4段落元素<p>
1）<p>元素提供了结构化文本的一种方式。
2）<p>元素中的文本会用单独的段落显示：
①与前后的文本都换行分开（即p中的内容会独占一行）。
②添加一段额外的垂直空白距离，作为段落间距（与<br />相比，间距较大）。
常用属性：align（可用的值有：left、right、center）
例如： <p>The first paragraph.</p>
<p align="right">The first paragraph.</p>
3.5换行元素<br>
使用<br>元素在任何地方创建手动换行，该元素为空标记，语法为：<br />。相当于回车，间距较小。
3.6分区元素<span>和<div>
1）分区元素用于为元素分组，常用于页面布局。即对某些元素进行一些统一的设置。
2）<span>文本</span>：不会影响布局，常用于同一行中部分元素。
3）<div>文本</div>：独占一行，常用于多行的情况下。
3.7块级元素（block）和行内元素（inline）
1）块级元素：默认情况下，块级元素会独占一行，即前后都会自动换行，比如：<div>、<p>、<hn>、<li>
2）行内元素：可以和其他元素位于同一行，即不会换行，比如：<span>、<img>、<a>
3.8案例：使用文本标记为页面添加内容
<!DOCTYPE html>
<html>
<head>
<title>一个 HTML 文档</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h1 align="center">Java 语言基础 <span style="color:red;">
<Day03></span></h1>
<h2>1 个人所得税计算器</h2>
<h3>1.1 问题</h3>
<p>计算个人所的税</p>
<h2>1.2 方案</h2>
<p>使用if语句来完成该程序</p>
<h2>1.3 实现</h2>
<p>使用记事本，代码如下：</p>
<p>public class IncomeTax<br />
{<br /><br /><br />}
</p>
</body>
</html>
4、 图像和连接
4.1图像元素<img>
1）使用<img>元素将图像添加到页面，该元素为空标记，语法为<img />。
2）必须属性：src
3）常用属性：width、height
4）语法：<img src="图像的路径" width="宽" heigth="高"/>
例如：<img width="100" src="images/cat.jpg" />
u 注意事项：
<img src="d:/a.jpg" /><!--本地的绝对路径，放在Web里是不行的！-->
<img src="a.jpg" /><!--相对路径，当前项目下-->
<img src="http://tts.tarena.com.cn/a.jpg" /><!--绝对路径，全路径-->
不建议宽高都设置，因为不知原图的比例，都设置会变形，只设置一个，系统会自动按比例缩放。
4.2链接元素<a>
1）使用<a>元素创建一个超级连接：点击、去往其他资源（常见的去页面）。
2）语法：<a href="" target="">被单击的内容、文本或图片</a>
①href属性：链接URL
②target属性：目标，可取的值有： _self：默认值，替换当前页
_blank：打开新的空白页，显示页面
4.3 URL
1）URL（Uniform Resource Locator）：统一资源定位器，用来标识网络中的任何资源。如：文本、图片、音视频文件、段落或其他超文本。
2）完整URL的组成：协议、机名、路径名、文件名。
3）URL中的路径名表示方法有：相对路径和绝对路径。
4.4锚点
1）锚点是文档中某行的一个记号，用于链接到文档中的某一行。即实现当前页面的不同位置之间的跳转。
2）如何使用锚点：
第一步：使用a在目标位置定义一个锚点，<a name="link1"></a>
第二步：使用连接a链接到锚点（在锚点名前加上#），href指向link1，<a href="#link1"></a>
u 注意事项：
v #代表后面的不是页面，而是一个锚点。
v 页面不同位置之间的跳转要在有滚动条的情况下才有效！
3）直接回到页面的顶端
①早期版本里，要先定义锚点，再定义链接。
②因为非常常用，所以现在简化了，直接写个#，不用先去定义锚点了：
<a href="#">test</a>
4.5案例：使用图像和链接标记
<!DOCTYPE html >
<html>
<head>
<title>一个 HTML 文档</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h1 align="center">Java 语言基础 <span style="color:red;">
<Day03></span></h1>
<h2>1 个人所得税计算器</h2>
<h3>1.1 问题</h3>
<p>计算个人所的税</p>
<div align="center">
<a href="http://tts6.tarena.com.cn" target="_blank" >
<img src="images/calculater.jpg" width="500" />
</a>
<p>图-1</p>
</div>
<h2>1.2 方案</h2>
<p>使用if语句来完成该程序</p>
<div align="center">
<a href="http://tts6.tarena.com.cn" target="_blank" >
<img src="images/if.jpg" width="500" />
</a>
<p>图-2</p>
</div>
<h2>1.3 实现</h2>
<p>使用记事本，代码如下：</p>
<p>public class IncomeTax<br />
{<br /><br /><br />}
</p>
<p align="center"><a href="#">To Top</a></p>
</body>
</html>