目录
元素
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>