1、HTML讲解,硅谷动力网络学院,专业铸造品质 知识成就未来-硅谷动力网络学院,作者仅授权硅谷动力网络学院发表该系列教程,版权归作者本人与网络学院拥有.任何个人与网站转载请联系,HTML概念,HTML（Hyper Text Markup Language 超文本标识语言） 是一种用来制作超文本文档的简单标记语言。 用HTML编写的超文本文档称为HTML文档。,HTML文档的编写方法,手工直接编写记事本等，存成.htm .html格式 使用可视化HTML编 辑 器Frontpage、Dreamweaver等 由Web 服务器（ 或称HTTP 服务器） 一 方实时动态地生成。,网页文件命名,*.ht
2、m或*.html 无空格 无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字 区分大小写 首页文件名默认为：index.htm 或 index.html,练习,自己新建一个index.html文档,HTML 文件结构,. . . 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。,HTML 文件结构 (Document Structures), HTML 文件的正文,第一张网页（01.html）,my first pageThis is
3、my first homepage!,练习,在刚才新建的html文档中写入title是“我的主页”，body是“这是我的主页”。,基本组成部分 HTML元素属性,HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。,第二张网页（02.htm）,my first page This is my first homepage!,HTML基本结构的 有关元素和元素属性,HEAD元素1 元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 元素定义HTML
4、文档的标题。与之间的内容将显示在浏览器窗口的标题栏。,元素及元素属性1,元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。,什么是 HTML 标签,HTML 文档和 HTML 元素是通过 HTML 标签进行标记的 HTML 标签由开始标签和结束标签组成 开始标签是被括号包围的元素名 结束标签是被括号包围的斜杠和元素名 某些 HTML 元素没有结束标签，比如 注释：开始标签的英文翻译是 start tag 或 opening tag，结束标签的英文翻译是 end tag 或 closing tag。,HTML 标题,HTML 标题（
5、Heading）是通过 - 等标签进行定义的。 实例 This is a heading This is a heading This is a heading,练习,在刚才的html文档中，“这是我的主页”设置成h1的标题。,HTML 链接,HTML 链接是通过 标签进行定义的。 实例 This is a link,练习,为“这是我的主页”这个标题添加一个链接,HTML 图像,HTML 图像是通过 标签进行定义的。 实例 ,练习,在刚才的标题之后添加一张图片,其他HTML标签,http:/ 各个标签的介绍,HTML 元素,HTML 元素指的是从开始标签（start tag）到结束标签（end
6、 tag）的所有代码。,HTML 元素语法,HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 大多数 HTML 元素可拥有属性,HTML 样式,style 属性用于改变 HTML 元素的样式。 This text is in Verdana and red This text is in Times and blue style 属性的作用： 提供了一种改变所有 HTML 元素的样式的通用方法。,HTML CSS,如何使用样式 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：外部样式表 当样式需要被
7、应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。,HTML CSS,内部样式表 当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 标签定义内部样式表。body background-color: red p margin-left: 20px 内联样式 当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。This is a paragraph ,练习,给index.html写
8、一个外部样式表，命名为index.css,并将它们关联起来,HTML 4.0 标准属性,HTML 标签可拥有属性。 这里列出的属性是通用于每个标签的核心属性。,核心属性 (Core Attributes),以下标签不提供下面的属性：base、head、html、meta、param、script、style 以及 title 元素。,练习,给标题定义一个核心属性class，叫title。给图片定义一个核心属性id叫image,本章要点,文本格式标记 文本修饰标记（字体标记） 列表标记 超链接标记 图像,HTML标记基础,2.什么是标记？ 标记是网页文档中的一些有特定意义的符号。这些符号指明如何
9、显示文档中的内容。 标记可以具有相应属性即各种参数，如size、color、 text、 width和noshade等 。 例如： ,网页中添加文本的方法,文本格式标记是网页中定义文本格式的标记 1）直接写文本； 2）用段落标记格式化文本，各段落文本将分行显示； 3）用标题标记格式化文本，作用：定义第n号标题字体，n=16，n值越大，字越小；文本将变为粗体显示，可看成特殊的段落标记； 4) 用预格式化标记格式化文本，标记内的文本将按原来的格式显示，保留文本中的所有空格、换行和定位符；,直接写文本, 电子商务专业学习 网页设计课程概述 电子商务专业学习网页设计的意义 电子商务顾名思义就是在int
10、ernet上做生意， 商品展示，广告宣传、发布 ,用段落标记格式化文本, 电子商务顾名思义就是在internet上做生意，商品展示，广告宣传、发布供求信息等活动实现的途径就是网页。 因此学习网页设计技术是从事电子商务活动的基石。,练习,给index.html添加一个段落，段落的内容为“欢迎来到无锡。欢迎来到无锡快度信息技术有限公司。”,文本的强制换行,电子商务顾名思义就是在internet上做生意，商品展示，广告宣传、发布 供求信息等活动实现的途径就是网页。强制不换行标记，常用于一串数字,文本中的空格,标记(除外)内字符前的空格浏览器将全部忽略，字符与字符间的空格浏览器将只保留一个空格显示，回
11、车视为一个空格，块级元素之间忽略所有空格。如果要输入多个空格或需要在字符之前输入空格需在源代码中插入（表示一个半角空格）。 行内元素可看成一个字符,文本中的转义字符,在HTML源代码中，有些字符有特别的含义，比如小于号“ , ”符号 在DW的设计视图中输入这些特殊字符，DW会自动在代码视图添加它们对应的转义字符,综合练习1,分段换行与预格式 以下是直接写文本的情况：星期一、星期二、星期三、星期四、星期五、星期六、星期日。以下是使用了三个换行标记的情况：星期一、星期二、星期三、星期四、星期五、星期六、星期日。以下使用分段标记（分为两段）：星期一、星期二、星期三、星期四、星期五、星期六、星期日。以
12、下使用预格式：星期一、星期二、星期三、星期四、星期五、星期六、星期日。 ,水平线标记,标记是在HTML文档中加入一条水平线，它可以直接使用，具有size、color、width和noshade属性。size是设置水平线的厚度，而width是设定水平线的宽度，默认单位是像素。noshade属性用来加入一条没有阴影的水平线。 ,文本修饰标记,文本修饰标记是对文本的外观进行修饰的标记，如让文字变色，加大，变粗体，添加下划线等。 1）font标记：定义文字的各种属性。 例： 注意：文本修饰标记没有align属性 (说明）,加粗、倾斜与下划线标记,2）加粗、倾斜与下划线的定义标记（b、i、u） 使用加粗
13、、倾斜与下划线标记（b、i、u）的组合，可对文本文字进一步修饰。如：此处以红色五号字粗体显示,列表标记,为了合理地组织文本，网页中常常要用到列表。在HTML中可以使用的列表标记有无序列表、有序列表和定义列表三种。 无序列表(Unordered List) , 有序列表(Ordered List) , 定义列表(Defined List) , , ,嵌套的无序列表示例,文章CSS教程 DOM教程XML教程参考XHTMLXMLCSS,有序列表(Ordered List),文章CSS教程 DOM教程XML教程Flash教程,定义列表(Defined List),湖南城市 长沙 衡阳 常德湖北城市 武
14、汉 襄樊 宜昌 ,练习,在index.html中添加一个定义列表：“无锡有哪些区：滨湖区，崇安区，惠山区，北塘区”,超链接标记,超链接是网页的基本元素，网页正是通过超链接而相互链接组织成一个网站，并将internet上的各个网站联系在一起。浏览者通过超链接选择阅读路径。 超链接是通过URL（统一资源定位器）来定位目标信息的。URL包括4部分：网络协议、域名或IP地址、路径和文件名。 URL分为绝对URL和相对URL,超链接的种类根据源对象划分,1) 用文本做超链接：首页 2) 用图像做超链接：3) 文本图像混合做链接： 格力空调1型该方法在商品展示的网站上较常用。,使用图像做超链接后，图像会自
15、动增加边框，可设置边框为0去掉,超链接的种类根据源对象划分2,4) 热区链接：使用map在图像上定义一幅地图，地图上可包含多个热区，每个热区用area单标记定义，area的shape属性定义了热区的形状，coords定义了热区的坐标点，href定义了热区链接的文件。同时img标记用usemap指明用了哪幅地图,超链接的种类根据href的取值,1) 链接到其他网页或文件（jpg, rar等） 内部链接返回首页 外部链接 网易网站 下载链接点击下载 2) 电子邮件链接 给我留言,如果IE不能打开该文件，则会弹出文件下载的对话框,超链接的种类根据href的取值2,3) 锚链接（链接到页面中某一指定的
16、位置） 当网页内容很长，需要进行页内跳转链接时，就需要定义锚点和锚点链接，锚点可使用name属性或id属性定义。 也可以链接到其他网页某个锚点处 4) 空链接和脚本链接: ,超链接的打开方式（target属性的取值）,在本窗口打开：_self （target的默认值） 在新窗口打开：_blank 在父窗口打开： _parent 将链接的文件载入到父框架 在整个窗口打开：_top：将链接的文件载入到整个浏览器窗口中，并删除所有框架 _parent、_top仅仅在网页被嵌入到其他网页中有效，如框架中的网页，所以这两种取值用得很少。,超链接的title属性,title属性在很多标记里都有，其作用是在
17、鼠标停留在该元素上时显示设置的说明文字 如格力太阳能喜获,超链接制作的原则,1) 可以使用相对链接尽量不要使用绝对链接，如/index.htm 而不是http:/ 2) 链接目标尽可能简单 如http:/，而不是http:/ title属性是“翱客网主页”,链接名字叫“翱客网主页”，要求在新窗口中打开。 在index.html中新建一个邮箱链接，链接的地址是“”，链接名字为“”。,6. 表格标记 （用于制作表格或网页结构）（1）（创建一个表格）（2）和（创建表格中的每一行和每一格）（3）（创建表格头） 。 例2-7 用表格标记创建下列表格。,HTML基础,表格标记示例意大利 英格兰 西班牙 ,
18、HTML基础,cellpadding设置格子边框与其内容之间的大小；valign是垂直对齐方式 ； colspan设置一个格子跨占的列数；rowspan设置一个格子跨占的行数。, AC米兰 佛罗伦萨 曼联 纽卡斯尔 巴塞罗那 皇家社会 ,HTML基础, 尤文图斯 桑普多利亚 利物浦 阿申纳 皇家马德里 ,HTML基础, 拉齐奥 国际米兰 切尔西 米德尔斯堡 马德里竞技 ,HTML基础,演示,练习,在index.html中新建一个表格,7. 表单标记（用于制作对话框） （1）（表单开始和结束标记）（2）（输入区标记）（3）（列表框标记）（4） （多行文本框标记）分别介绍如下： （1）标记用来创建
19、一个表单， 也即定义表单的开始和结束位置，在标记对之间 的一切都属于表单的内容。,HTML基础,（2）标记用来定义一个用户输入区，用户可在其中输入信息。此标记必须放在标记对之间。标记中共提供文本框、按钮、复选框、单选钮等八种类型的输入区域 。例如：,HTML基础,（3）标记用来创建一个下拉列表框或可以复选的列表框。此标记对用于标记之间。具有multiple、name和size属性。例如：请选择最喜欢的男歌星:刘德华张学友郭富城黎明,HTML基础,标记指定列表框中的一个选项，此标记具有selected和value属性。value指定选项值，这个值要传送到服务器上。服务器正是通过调用区域的名字的v
20、alue属性来获得该区域选中的数据项的。,（4）标记创建可以输入多行的文本框，此标记对用于标记对之间。有name、cols和rows属性。 name 、cols和rows属性分别用来设置文本框的名称、列数和行数。列与行以字符数为单位。例如：,HTML基础,例2-8 建立一个输入密码，以及具有确认和重输按钮的表单。请输入密码：,练习,8.其他常用标记 （1）空格标记 建立HTML源文件时，若用空格键输入多个空格，都将被视为一个。因此，如果想要输入多个空格时，必须用多个标记 。（2）原始排版有效标记和若要使HTML源文件保留原始的文件排版方式（如：Enter表示换行等），只需在该文本前加入标记以及在文本结束后加上标记，即可使浏览器显示文件原始排版方式。,HTML基础,例如：在HTML源文件中使用空格标记窗里窗外,HTML基础,演示,
