HTML学习笔记.docx

1、HTML学习笔记HTML学习笔记Java相关课程系列笔记之六笔记内容说明HTML（王春梅老师主讲，占笔记内容100%）；目 录一、 HTML概述 11.1什么是HTML 11.2 Web浏览器 1二、 HTML基础语法 22.1标记语法 22.2封闭类型标记：双标记 22.3非封闭类型标记：单标记或者空标记 22.4元素和属性 22.5注释 22.6 HTML文档的标准结构 32.7版本信息 32.8 元素 32.9 元素 42.10头元素： 42.11头元素： 42.12案例：创建一个标准结构的 HTML 文档，并创建头元素。 4三、 文本标记 53.1文本标记的作用 53.2文本于特数字符

2、 53.3标题元素 53.4段落元素 53.5换行元素 53.6分区元素和 53.7块级元素（block）和行内元素（inline） 53.8案例：使用文本标记为页面添加内容 6四、 图像和连接 74.1图像元素 74.2链接元素 74.3 URL 74.4锚点 74.5案例：使用图像和链接标记 8五、 列表标记 95.1列表的作用 95.2无序列表 95.3有序列表 95.4列表的嵌套 95.5案例：使用列表标记添加导航目录 9六、 表格 106.1表格的作用 106.2创建表格 106.3表格的常用属性 106.4单元格的常用属性 106.5表格的标题 106.6行分组（表格特有的） 11

3、6.7不规则表格 116.8表格的嵌套 116.9案例：实现如下图所示表格 11七、 表单 127.1表单的作用 127.2表单元素 127.3 元素 127.4文本框与密码框 127.5单选框和多选框 137.6按钮 137.7隐藏域和文件选择框 137.8 元素 137.9选项框 137.10 元素 147.11表单元素分组（表单元素特有的） 147.12案例：创建复杂表单 14八、 框架 158.1浮动框架的作用 158.2 元素 15九、 其他注意事项 169.1 Web应用程序的层次结构 169.2界面层中根据类型应用程序的分类 169.3单机应用和Web应用 169.4 Web类型

4、的应用程序 169.5本课程分为： 169.6何为Web基础 161、HTML概述1.1什么是HTML1）HTML（HyperText Markup Language）是一种超文本标记语言，是一种纯文本类型的语言，是用来设计网页的标记语言。2）用该语言编写的文件，以.html或者.htm为后缀。3）由浏览器解释运行。4）HTML是一个扩展性很强的语言，可以嵌套用脚本语言编写的程序段，如：VBScript、JavaScript。嵌入JavaScript代码可以实现动态效果，同时也可以使用CSS定义样式。1.2 Web浏览器1）主要功能：代理访问者提交请求。作为HTML解释器和内嵌脚本程序执行器。

5、用图形化的方式显示HTML文档。2）主要Web浏览器产品IE、Firefox、Chrome、Opera、Safari2、HTML基础语法2.1标记语法1）HTML用于描述功能的符号称为“标记”，比如、等。2）标记在使用时必须使用尖括号括起来，有些标记还必须成对出现。2.2封闭类型标记：双标记1）语法：内容内容2）属性的声明必须位于开始标记里。3）一个标记的属性可能不止一个，多个属性之间用空格隔开。 注意事项：v 封闭类型的标记必须成对出现。v 如果一个应该封闭的标记没有被封闭，则会产生意料不到的错误。2.3非封闭类型标记：单标记或者空标记1）语法：或者2）不需要结束标记，不能包含内容，可以设置

6、属性。例如： hello word hello word hello word hello word 注意事项：v 为当前标准，为早期版本。v 对于单标记，建议写法 ，而不是 。2.4元素和属性1）元素：每一对尖括号包围的部分，如包围的部分就叫做body元素。2）属性：用来修饰元素，每个属性都有值，属性放在开始标记中。2.5注释为代码添加适当的注释是一种良好的编码习惯。1）注释只在编辑文档情况下可见，在浏览器展示页面时并不会显示。2）添加注释的语法： 注意事项：v “”之间的任何内容都不会显示在浏览器中。v 注释不可以嵌套在其他注释中。2.6 HTML文档的标准结构1）结构： 版本信息 2）例

7、如： 2.7版本信息1）在文档的起始用DOCTYPE声明指定的版本和风格，让浏览器清楚文档的版本、类型和风格。版本信息分为三种：严格型、传统型（过渡型）、框架型。2）Strict DTD： 3）Transitional DTD：（常用）4）Frameset DTD：（不常用了） 注意事项：传统型不需要命名空间，严格型需要命名空间。2.8 元素1） 元素用于为页面定义全局信息所有其他头元素的容器。 紧跟在起始标签之后。2）定义整个文档相关的信息，常包含如下子元素：标题。：元数据元素，定义页面的编码格式或者刷新频率等。：JavaScript脚本（或引入Ajax、jQuery脚本等）。：定义内部样式

8、表。：为当前页面引入其他资源（如外部样式表）。2.9 元素文档的主体，包含所有要显示的内容。2.10头元素：标题元素用于为文档定义标题。1）标题元素的内容出现在浏览器顶部。2）没有属性。3）必须出现在元素中。4）一个文档只能有一个标题元素。例如： 第一个网页 2.11头元素：元数据元素用于定义网页的基本信息。1）为空标记。2）常用属性有：content、http-equiv例如： 第一个网页 2.12案例：创建一个标准结构的 HTML 文档，并创建头元素。 第一个网页 注意事项：若不想出现乱码，则存储时的物理编码和查看时的编码需要一致；若出现乱码，则一看保存时的编码，二指定查看编码。3、文本标

9、记3.1文本标记的作用1）文本是网页上的基本成分。2）直接书写的文本会用浏览器默认的样式显示。3）包含在标记中的文本则会被显示为标记所拥有的样式：特殊字符、注释、标题元素、段落元素、换行元素、分区元素。3.2文本于特数字符1）空格折叠：多个空格或制表符压缩成单个空格，即只显示一个空格。2）特殊字符（如空格），可以用转义字符，也称为字符实体。例如：The <p> element.   ©2013 by chang.对应：The element. 2013 by chang.3.3标题元素1）标题元素让文字以醒目的方式显示，往往用于文章的标题。2

10、）基本语法：，#：可以为1、2、3、4、5、6 从到，即标题1到标题6 注意事项：最大，最小。3.4段落元素1）元素提供了结构化文本的一种方式。2）元素中的文本会用单独的段落显示：与前后的文本都换行分开（即p中的内容会独占一行）。添加一段额外的垂直空白距离，作为段落间距（与相比，间距较大）。常用属性：align（可用的值有：left、right、center）例如： The first paragraph. The first paragraph.3.5换行元素使用元素在任何地方创建手动换行，该元素为空标记，语法为：。相当于回车，间距较小。3.6分区元素和1）分区元素用于为元素分组，常用于页面

11、布局。即对某些元素进行一些统一的设置。2）文本：不会影响布局，常用于同一行中部分元素。3）文本：独占一行，常用于多行的情况下。3.7块级元素（block）和行内元素（inline）1）块级元素：默认情况下，块级元素会独占一行，即前后都会自动换行，比如：、2）行内元素：可以和其他元素位于同一行，即不会换行，比如：、3.8案例：使用文本标记为页面添加内容 一个 HTML 文档 Java 语言基础  <Day03> 1 个人所得税计算器 1.1 问题 计算个人所的税 1.2 方案 使用if语句来完成该程序 1.3 实现 使用记事

12、本，代码如下： public class IncomeTax 4、图像和连接4.1图像元素1）使用元素将图像添加到页面，该元素为空标记，语法为。2）必须属性：src3）常用属性：width、height4）语法： 例如： 注意事项：不建议宽高都设置，因为不知原图的比例，都设置会变形，只设置一个，系统会自动按比例缩放。4.2链接元素1）使用元素创建一个超级连接：点击、去往其他资源（常见的去页面）。2）语法：被单击的内容、文本或图片href属性：链接URLtarget属性：目标，可取的值有： _self：默认值，替换当前页_blank：打开新的空白页，显示页面4.3 URL1）URL（Unifor

13、m Resource Locator）：统一资源定位器，用来标识网络中的任何资源。如：文本、图片、音视频文件、段落或其他超文本。2）完整URL的组成：协议、机名、路径名、文件名。3）URL中的路径名表示方法有：相对路径和绝对路径。4.4锚点1）锚点是文档中某行的一个记号，用于链接到文档中的某一行。即实现当前页面的不同位置之间的跳转。2）如何使用锚点：第一步：使用a在目标位置定义一个锚点，第二步：使用连接a链接到锚点（在锚点名前加上#），href指向link1， 注意事项：v #代表后面的不是页面，而是一个锚点。v 页面不同位置之间的跳转要在有滚动条的情况下才有效！3）直接回到页面的顶端早期版本

14、里，要先定义锚点，再定义链接。因为非常常用，所以现在简化了，直接写个#，不用先去定义锚点了：test4.5案例：使用图像和链接标记 一个 HTML 文档 Java 语言基础  <Day03> 1 个人所得税计算器 1.1 问题 计算个人所的税 图-1 1.2 方案 使用if语句来完成该程序 图-2 1.3 实现 使用记事本，代码如下： public class IncomeTax To Top 5、列表标记5.1列表的作用1）列表是指将具有相似特征或者具有先后顺序的几行文字进行对其排列。2）所有的列表都由列表类型和列表项组

15、成：列表类型有：有序列表（ordered list）和无序列表（unordered list）。列表项有：（list item），用于指示具体的列表内容。 注意事项：定义一个列表必须使用或。列表的每个内容，使用一个。5.2无序列表1）元素表示无序列表，用于列出页面上没有特定次序的一些项目。2）元素中只能包含具体的列表项元素，列表中包含的每一项都必须包含在起始标记和结束标记之间。例如： onetwo 5.3有序列表1）元素表示有序列表，用于列出页面上有特定次序的一些项目。2）元素中只能包含具体的列表项元素，列表中包含的每一项都必须包含在起始标记和结束标记之间。例如： onetwo 5.4列表的嵌

16、套1）将列表元素嵌套使用，可以创建多层列表，即可以将整个列表放在某个li里。2）常用于创建文档大纲、导航菜单等。例如： Web基础知识 Web的工作原理 HTML快速入门 基础语法 5.5案例：使用列表标记添加导航目录 个人所得税计算器 问题 方案 6、表格6.1表格的作用1）表格通常用来组织结构化的信息。2）表格是一些被称作单元格的矩形框按照从左到右，从上到下的顺序排列在一起形成的。3）表格的数据保存在单元格里。4）显示网格数据，常用于页面的布局。6.2创建表格1）定义表格：使用成对的标记。2）创建表行：使用成对的标记。3）创建单元格：使用成对的标记（table defination）。例如

17、： 第1行，第1列第1行，第2列 第2行，第1列第2行，第2列 6.3表格的常用属性1）border属性：表格外边框宽度，会为每个单元格应用边框！2）width/height属性：表格的宽和高。3）align属性：水平对齐方式，可选的值有：left、right、center4）cellpadding属性：单元格内容和单元格边框之间的距离。5）cellspacing属性：单元格之间的距离。 注意事项：v 表格的高宽默认自适应（按内容长度自适应）。v 对表格的宽设定值，则每列的宽按单元格内容的长度的比例分配，如第一列5个字符，第二列4个字符，则分配比例为5：4。v 对列设置宽，会影响整列。对列设置

18、高，会影响整行。6.4单元格的常用属性1）width/height属性：单元格的宽和高。2）align属性：水平对齐方式，可选的值有：left、right、center3）valign属性：垂直对齐方式，可选的值有：top、middle、bottom6.5表格的标题1）使用元素为表格定义标题，默认情况下，标题将在表格上方居中显示。2）标签只能位于表格里，且只能对每个表格定义一个标题，且作为第一个子元素存在！ 例如： 我的表格 第1行，第1列第1行，第2列6.6行分组（表格特有的）将多个行作为一组，进行统一设置的时候，使用专门的对表格实现分组的元素。1）表格可以划分为3个部分：表头、表主体和表尾。2）表头行分组：只能出现