Java相关课程系列笔记之六HTML学习笔记.docx

上传人:b****0 文档编号:17839651 上传时间:2023-08-04 格式:DOCX 页数:27 大小:31.11KB
下载 相关 举报
Java相关课程系列笔记之六HTML学习笔记.docx_第1页
第1页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第2页
第2页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第3页
第3页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第4页
第4页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第5页
第5页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第6页
第6页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第7页
第7页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第8页
第8页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第9页
第9页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第10页
第10页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第11页
第11页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第12页
第12页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第13页
第13页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第14页
第14页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第15页
第15页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第16页
第16页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第17页
第17页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第18页
第18页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第19页
第19页 / 共27页
Java相关课程系列笔记之六HTML学习笔记.docx_第20页
第20页 / 共27页
亲,该文档总共27页,到这儿已超出免费预览范围,如果喜欢就下载吧!
下载资源
资源描述

Java相关课程系列笔记之六HTML学习笔记.docx

《Java相关课程系列笔记之六HTML学习笔记.docx》由会员分享,可在线阅读,更多相关《Java相关课程系列笔记之六HTML学习笔记.docx(27页珍藏版)》请在冰点文库上搜索。

Java相关课程系列笔记之六HTML学习笔记.docx

Java相关课程系列笔记之六HTML学习笔记

HTML学习笔记

Java相关课程系列笔记之六

 

笔记内容说明

HTML(王春梅老师主讲,占笔记内容100%);

目录

一、HTML概述1

1.1什么是HTML1

1.2Web浏览器1

二、HTML基础语法2

2.1标记语法2

2.2封闭类型标记:

双标记2

2.3非封闭类型标记:

单标记或者空标记2

2.4元素和属性2

2.5注释2

2.6HTML文档的标准结构3

2.7版本信息3

2.8元素3

2.9元素4

2.10头元素:

4</p><p>2.11头元素:</p><p><meta>4</p><p>2.12案例:</p><p>创建一个标准结构的HTML文档,并创建头元素。</p><p>4</p><p>三、文本标记5</p><p>3.1文本标记的作用5</p><p>3.2文本于特数字符5</p><p>3.3标题元素<hn>5</p><p>3.4段落元素<p>5</p><p>3.5换行元素<br>5</p><p>3.6分区元素<span>和<div>5</p><p>3.7块级元素(block)和行内元素(inline)5</p><p>3.8案例:</p><p>使用文本标记为页面添加内容6</p><p>四、图像和连接7</p><p>4.1图像元素<img>7</p><p>4.2链接元素<a>7</p><p>4.3URL7</p><p>4.4锚点7</p><p>4.5案例:</p><p>使用图像和链接标记8</p><p>五、列表标记9</p><p>5.1列表的作用9</p><p>5.2无序列表<ul>9</p><p>5.3有序列表<ol>9</p><p>5.4列表的嵌套9</p><p>5.5案例:</p><p>使用列表标记添加导航目录9</p><p>六、表格10</p><p>6.1表格的作用10</p><p>6.2创建表格10</p><p>6.3表格的常用属性10</p><p>6.4单元格的常用属性10</p><p>6.5表格的标题<caption>10</p><p>6.6行分组(表格特有的)11</p><p>6.7不规则表格11</p><p>6.8表格的嵌套11</p><p>6.9案例:</p><p>实现如下图所示表格11</p><p>七、表单12</p><p>7.1表单的作用12</p><p>7.2表单元素<form>12</p><p>7.3<input>元素12</p><p>7.4文本框与密码框12</p><p>7.5单选框和多选框13</p><p>7.6按钮13</p><p>7.7隐藏域和文件选择框13</p><p>7.8<label>元素13</p><p>7.9选项框13</p><p>7.10<textarea>元素14</p><p>7.11表单元素分组(表单元素特有的)14</p><p>7.12案例:</p><p>创建复杂表单14</p><p>八、框架15</p><p>8.1浮动框架的作用15</p><p>8.2<iframe>元素15</p><p>九、其他注意事项16</p><p>9.1Web应用程序的层次结构16</p><p>9.2界面层中根据类型应用程序的分类16</p><p>9.3单机应用和Web应用16</p><p>9.4Web类型的应用程序16</p><p>9.5本课程分为:</p><p>16</p><p>9.6何为Web基础16</p><p>1、HTML概述</p><p>1.1什么是HTML</p><p>1)HTML(HyperTextMarkupLanguage)是一种超文本标记语言,是一种纯文本类型的语言,是用来设计网页的标记语言。</p><p>2)用该语言编写的文件,以.html或者.htm为后缀。</p><p>3)由浏览器解释运行。</p><p>4)HTML是一个扩展性很强的语言,可以嵌套用脚本语言编写的程序段,如:</p><p>VBScript、JavaScript。</p><p>嵌入JavaScript代码可以实现动态效果,同时也可以使用CSS定义样式。</p><p>1.2Web浏览器</p><p>1)主要功能:</p><p>①代理访问者提交请求。</p><p>②作为HTML解释器和内嵌脚本程序执行器。</p><p>③用图形化的方式显示HTML文档。</p><p>2)主要Web浏览器产品</p><p>IE、Firefox、Chrome、Opera、Safari</p><p>2、</p><p>HTML基础语法</p><p>2.1标记语法</p><p>1)HTML用于描述功能的符号称为“标记”,比如<p>、<h1>等。</p><p>2)标记在使用时必须使用尖括号括起来,有些标记还必须成对出现。</p><p>2.2封闭类型标记:</p><p>双标记</p><p>1)语法:</p><p><标记>内容</标记></p><p><标记属性1="值"属性2="值">内容</标记></p><p>2)属性的声明必须位于开始标记里。</p><p>3)一个标记的属性可能不止一个,多个属性之间用空格隔开。</p><p>◆注意事项:</p><p>v封闭类型的标记必须成对出现。</p><p>v如果一个应该封闭的标记没有被封闭,则会产生意料不到的错误。</p><p>2.3非封闭类型标记:</p><p>单标记或者空标记</p><p>1)语法:</p><p><标记>或者<标记/></p><p>2)不需要结束标记,不能包含内容,可以设置属性。</p><p>例如:</p><p>helloword<br>helloword</p><p>helloword<br/>helloword</p><p>◆注意事项:</p><p>v<br/>为当前标准,<br>为早期版本。</p><p>v对于单标记,建议写法<br/>,而不是<br>。</p><p>2.4元素和属性</p><p>1)元素:</p><p>每一对尖括号包围的部分,如<body></body>包围的部分就叫做body元素。</p><p>2)属性:</p><p>用来修饰元素,每个属性都有值,属性放在开始标记中。</p><p>2.5注释</p><p>为代码添加适当的注释是一种良好的编码习惯。</p><p>1)注释只在编辑文档情况下可见,在浏览器展示页面时并不会显示。</p><p>2)添加注释的语法:</p><p><!</p><p>--注释的文本内容--></p><p>◆注意事项:</p><p>v“<!</p><p>--”和“-->”之间的任何内容都不会显示在浏览器中。</p><p>v注释不可以嵌套在其他注释中。</p><p>2.6HTML文档的标准结构</p><p>1)结构:</p><p>版本信息</p><p><html><!</p><p>--HTML页面--></p><p><head></head><!</p><p>--文件头--></p><p><body></body><!</p><p>--文件主体部分--></p><p></html></p><p>2)例如:</p><p><!</p><p>DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"</p><p>http:</p><p>//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p><html></p><p><head></head></p><p><body></body></p><p></html></p><p>2.7版本信息</p><p>1)在文档的起始用DOCTYPE声明指定的版本和风格,让浏览器清楚文档的版本、类型和风格。</p><p>版本信息分为三种:</p><p>严格型、传统型(过渡型)、框架型。</p><p>2)StrictDTD:</p><p><!</p><p>DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"</p><p>"http:</p><p>//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></p><p>3)TransitionalDTD:</p><p>(常用)</p><p><!</p><p>DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"</p><p>"http:</p><p>//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p>4)FramesetDTD:</p><p>(不常用了)</p><p><!</p><p>DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN"</p><p>"http:</p><p>//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"></p><p>◆注意事项:</p><p>传统型不需要命名空间,严格型需要命名空间。</p><p>2.8<head>元素</p><p>1)<head>元素用于为页面定义全局信息</p><p>①所有其他头元素的容器。</p><p>②紧跟在起始标签<html>之后。</p><p>2)定义整个文档相关的信息,常包含如下子元素:</p><p>①<title>:</p><p>标题。</p><p>②<meta>:</p><p>元数据元素,定义页面的编码格式或者刷新频率等。</p><p>③<script>:</p><p>JavaScript脚本(或引入Ajax、jQuery脚本等)。</p><p>④<style>:</p><p>定义内部样式表。</p><p>⑤<link>:</p><p>为当前页面引入其他资源(如外部样式表)。</p><p>2.9<body>元素</p><p>文档的主体,包含所有要显示的内容。</p><p>2.10头元素:</p><p><title></p><p>标题元素<title></titile>用于为文档定义标题。</p><p>1)标题元素的内容出现在浏览器顶部。</p><p>2)没有属性。</p><p>3)必须出现在<head>元素中。</p><p>4)一个文档只能有一个标题元素。</p><p>例如:</p><p><head></p><p><title>第一个网页

2.11头元素:

元数据元素用于定义网页的基本信息。

1)为空标记。

2)常用属性有:

content、http-equiv

例如:

第一个网页

--3秒刷新一次-->

--文档内容为:

文本格式的html,字符集采用utf-8-->

2.12案例:

创建一个标准结构的HTML文档,并创建头元素。

--版本信息-->

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

--html元素,表示整个文档-->

--头元素:

描述整个文档的相关信息-->

第一个网页

--3秒刷新-->

--文档主体:

显示-->

◆注意事项:

若不想出现乱码,则存储时的物理编码和查看时的编码需要一致;若出现乱码,则一看保存时的编码,二指定查看编码。

3、

文本标记

3.1文本标记的作用

1)文本是网页上的基本成分。

2)直接书写的文本会用浏览器默认的样式显示。

3)包含在标记中的文本则会被显示为标记所拥有的样式:

特殊字符、注释、标题元素、段落元素、换行元素、分区元素。

3.2文本于特数字符

1)空格折叠:

多个空格或制表符压缩成单个空格,即只显示一个空格。

2)特殊字符(如空格),可以用转义字符,也称为字符实体。

例如:

The<p>element.   ©2013bychang.

对应:

The

element.©2013bychang.

3.3标题元素

1)标题元素让文字以醒目的方式显示,往往用于文章的标题。

2)基本语法:

……,#:

可以为1、2、3、4、5、6

,即标题1到标题6

◆注意事项:

最大,

最小。

3.4段落元素

1)

元素提供了结构化文本的一种方式。

2)

元素中的文本会用单独的段落显示:

①与前后的文本都换行分开(即p中的内容会独占一行)。

②添加一段额外的垂直空白距离,作为段落间距(与
相比,间距较大)。

常用属性:

align(可用的值有:

left、right、center)

例如:

Thefirstparagraph.

Thefirstparagraph.

3.5换行元素

使用
元素在任何地方创建手动换行,该元素为空标记,语法为:


相当于回车,间距较小。

3.6分区元素

1)分区元素用于为元素分组,常用于页面布局。

即对某些元素进行一些统一的设置。

2)文本

不会影响布局,常用于同一行中部分元素。

3)

文本

独占一行,常用于多行的情况下。

3.7块级元素(block)和行内元素(inline)

1)块级元素:

默认情况下,块级元素会独占一行,即前后都会自动换行,比如:

1 个人所得税计算器

1.1 问题

计算个人所的税

1.2 方案

使用if语句来完成该程序

1.3 实现

使用记事本,代码如下:

publicclassIncomeTax

{


}

4、

图像和连接

4.1图像元素

1)使用元素将图像添加到页面,该元素为空标记,语法为

2)必须属性:

src

3)常用属性:

width、height

4)语法:

例如:

◆注意事项:

/a.jpg"/>

--本地的绝对路径,放在Web里是不行的!

-->

--相对路径,当前项目下-->

--绝对路径,全路径-->

不建议宽高都设置,因为不知原图的比例,都设置会变形,只设置一个,系统会自动按比例缩放。

4.2链接元素

1)使用元素创建一个超级连接:

点击、去往其他资源(常见的去页面)。

2)语法:

被单击的内容、文本或图片

①href属性:

链接URL

②target属性:

目标,可取的值有:

_self:

默认值,替换当前页

_blank:

打开新的空白页,显示页面

4.3URL

1)URL(UniformResourceLocator):

统一资源定位器,用来标识网络中的任何资源。

如:

文本、图片、音视频文件、段落或其他超文本。

2)完整URL的组成:

协议、机名、路径名、文件名。

3)URL中的路径名表示方法有:

相对路径和绝对路径。

4.4锚点

1)锚点是文档中某行的一个记号,用于链接到文档中的某一行。

即实现当前页面的不同位置之间的跳转。

2)如何使用锚点:

第一步:

使用a在目标位置定义一个锚点,

第二步:

使用连接a链接到锚点(在锚点名前加上#),href指向link1,

◆注意事项:

v#代表后面的不是页面,而是一个锚点。

v页面不同位置之间的跳转要在有滚动条的情况下才有效!

3)直接回到页面的顶端

①早期版本里,要先定义锚点,再定义链接。

②因为非常常用,所以现在简化了,直接写个#,不用先去定义锚点了:

test

4.5案例:

使用图像和链接标记

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

一个HTML文档

Java 语言基础 

red;">

<Day03>

1 个人所得税计算器

1.1 问题

计算个人所的税

图-1

1.2 方案

使用if语句来完成该程序

图-2

1.3 实现

使用记事本,代码如下:

publicclassIncomeTax

{


}

ToTop

5、

列表标记

5.1列表的作用

1)列表是指将具有相似特征或者具有先后顺序的几行文字进行对其排列。

2)所有的列表都由列表类型和列表项组成:

①列表类型有:

有序列表

    (orderedlist)和无序列表