第一天 ——网页开发基础

HTML技术

HTML简介

HTML是英文Hyper Text Markup Language的缩写，中文译为“超文本标记语言”，其主
爱作用是通过HTML标记对网页中的文本、图片、声音等内容进行描述。HTML两贡就是一个后级名为” hm”或”.htm”的文件，它可以用记事本打开，所以简单的HTML代码可以在记事
本中编写。编写完成后，将文件后级名修改为”.html” 即可生成一个HTML网页。
在实际开发中，项目的静态页面通常由网页制作人员设计和制作，开发人员只需了解页面元素，能够使用和修改页面中的元素，并在项目运行时能够展示出相应的后台数据即可。网页制作人员通常会使用一些专业软件来创建HTML页面，由于本教材中HTML技术只作为Java Web学习的辅助技术，所以这里不会详细介绍如何使用专业工具制作网页，只需要读者了解页面元素的构成，会调试基本的页面效果即可。
了解了什么是HTML后，接下来通过一个基本的HTML文档来讲解其内部的构成，如文件
htmlDemo01.html

双击图1-1所示的htmlDemo01.html文件，即可通过浏览器打开页面。由于HTML页面中没有添加任何内容，此时打开的只是一个空白页面，为了查看页面效果，可以使用记事本打开该文件，在两个标记之间添加一句话，具体如下。

1.段落标记

和换行标记

为了使网页中的文字有条理地显示出来，HTML提供了段落标记

，如果希望某段文本强制换行显示，就需要使用换行标记
。接下来，通过案例来演示这两种标记的使用。在chapter01文件夹中新建HTML文件htmlDemo02。
htmlDemo02.html

2.文本样式标记

在HTML中，使用标记来控制网页中文本的样式，如字体、字号和颜色。其基本语法格式如下:
文本内容
接下来通过一个案例来演示标记的使用。在chapter01 文件夹中新建HTML文件htmlDemo03,其关键代码如文件1-3所示。

在制作网页时，为了使网页中的数据能够有条理地显示，可以使用表格对网页进行规划。在Word文档中，可通过插入表格的方式来创建表格，而在HTML网页中要想创建表格，需要使用相关的表格标记才能创建表格。
接下来，通过一个案例来演示

标记的使用。在chapter01文件夹中创建一个HTML文件htmiDemo04。
htmlDemo04 html

1.无序列表

列表标记分为有序列表和无序列表，由于在HTML中无序列表较为常用，所以下面针对无序列表进行详细的讲解。为了使网页更易读，经常将网页信息以列表的形式呈现，例如淘宝商城首页的商品分类就是以列表的形式呈现的。无序列表的各个列表项之间没有顺序级别之分，通常是

并列的。定义无序列表的基本语法格式如下所示。

列表项11i>
列表项211>
列表项311>
在上述语法中，

• 标记用于定义无序列表，
• 标记嵌套在
  • 标记中，用于描述具体的列表项，每对

    中至少应包含- 对。 接下来通过一一个案例来演示

    标记的使用。
    在chapter01文件夹中创建一个HTML文件htmlDemo05。
    

    
    2.超链接标记
    一个网站通 常由多个页面构成，进入网站时首先看到的是其首页面，如果想，子页面，就需要在首页面的相应位置添加超链接。在HTML中创建超链接非常简早，
    标记环绕需要被链接的对象即可。其基本语法格式如下所示。
    文本或图像
    在上述语法中， 标记是一个行内标记， 用于定义超链接，href 属性用于指定链接指问的页面的URL,当在 标记中使用href属性时，该标记就具有了超链接的功能: target 属性用于指定页面的打开方式，其取值有self… _blank、 parent 和top (. self 和_blank 较为常用)，具中self 为默认值，意为在原窗口打开，_blank 为在新窗口打开，parent 是在父框架集中打开被链接文档，top 是在整个窗口中打开被链接文档。接下来通过一个案例来演示 标记的使用。在chapter01文件夹中创建-一个HTML文件htmlDemo06。
    htmlDemo06.html
    
    1.2.2 CSS 样式的引用方式

要想使用CSS修饰网页，就需要在HTML文档中引入CSS。引入CSS的方式有4种，分别为链入式、行内式(也称为内联样式)内嵌式和导入式。下面对开发中常用的内嵌式和链入式这2种引入方式进行讲解，具体如下。

1.内嵌式

内嵌式是将CSS代码集中写在HTML文档的头部标记中，并用

**在chapter01文件夹中创建一个HTML文件cssDemo01,其关键代码如文件1-10所示。

cssDemo01 .html**

1.3.1 DOM相关知识

DOM是Document Object Model (文档对象模型)的简称，是w3C组织推荐的处理可扩展标志语言的标准编程接口，它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。W3C中将DOM标准分为3个不同的部分:核心DOM、XML DOM和HTML DOM,其中，核心DOM是针对任何结构化文档的标准模型,XML DOM是针对XML文档的标准模型，而HTML
DOM是针对HTML文档的标准模型。由于本章中主要讲解的是网页开发的基础知识，而主要涉=’gre 及的DOM内容就是HTML DOM,所以本节将主要介绍HTML DOM的知识。
HTML DOM模型被构造为对象的树，该树的根节点是文档( Document )对象，该对象有一
个documentElement的属性引用，表示文档根元素的Element对象。HTML文档中表示文档根
元素的Element对象是元素，和 元素可以看作树的枝干。
HTML DOM树的结构如图1。

文章知识点与官方知识档案匹配，可进一步学习相关知识Java技能树首页概览91286 人正在系统学习中

来源：@zzd