HTML讲解.ppt
《HTML讲解.ppt》由会员分享,可在线阅读,更多相关《HTML讲解.ppt(70页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、HTML讲解讲解硅谷动力网络学院硅谷动力网络学院专业铸造品质专业铸造品质 知识成就未来知识成就未来-硅谷动力网络学院硅谷动力网络学院作者仅授权硅谷动力网络学院发表该系列教程,版权归作者本人与网络学院拥有.任何个人与网站转载请联系HTML概念概念pHTML(Hyper Text Markup Language 超文本标识语言)超文本标识语言)是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档。HTML文档的编写方法文档的编写方法1.手工直接编写记事本等,存成手工直接编写记事本等,存成.htm.html格式格式2.使用可视化使用可视化HTML编编 辑辑 器器Fron
2、tpage、Dreamweaver等等3.由由Web 服务器(服务器(或称或称HTTP 服务器)服务器)一一 方实时动态地生成。方实时动态地生成。网页文件命名网页文件命名1.*.htm或或*.html2.无空格无空格3.无特殊符号(例如无特殊符号(例如&符号),只可以有符号),只可以有下划线下划线“_”,只可以为英文、数字,只可以为英文、数字4.区分大小写区分大小写5.首页文件名默认为:首页文件名默认为:index.htm 或或 index.html练习练习p自己新建一个自己新建一个index.html文档文档HTML 文件结构文件结构.p元素:是元素:是HTML语言的基本部分。元素总语言的基
3、本部分。元素总是成对出现,每一对元素一般都有一个开是成对出现,每一对元素一般都有一个开始的标记(如始的标记(如),也有一个结束),也有一个结束的标记(如的标记(如)。元素的标记要用)。元素的标记要用一对尖括号括起来,并且结束的标记总是一对尖括号括起来,并且结束的标记总是在开始的标记前加一个斜杠。在开始的标记前加一个斜杠。HTML 文件结构文件结构(Document Structures)l l l ll l HTML HTML 文件的正文文件的正文文件的正文文件的正文l l 第一张网页(第一张网页(01.html)my first page This is my first homepage!
4、练习练习p在刚才新建的在刚才新建的html文档中写入文档中写入title是是“我我的主页的主页”,body是是“这是我的主页这是我的主页”。基本组成部分基本组成部分HTML元素属性元素属性pHTML元素可以有自己的相关属性,每一元素可以有自己的相关属性,每一个属性还可以由我们网页编制者赋一定的个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的值。元素属性出现在元素的内内,并且,并且和元素名之间有和元素名之间有一个空格一个空格分隔;属性值用分隔;属性值用“”引起来。引起来。第二张网页(第二张网页(02.htm)my first page This is my first homepag
5、e!HTML基本结构的基本结构的有关元素和元素属性有关元素和元素属性pHEAD元素元素1 元素出现在文档的开头部分。元素出现在文档的开头部分。与与之间的内容不会在浏览之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特器的文档窗口显示,但是其间的元素有特殊重要的意义。殊重要的意义。p 元素定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。元素及元素属性元素及元素属性1p元素表明是元素表明是HTML文档的主体部文档的主体部分。在分。在与与之间,通常都会之间,通常都会有很多其它元素;这些元素和元素属性构有很多其它元素;这些元素和元素属性构成成HTML文档的主体部分。文档的主体部分
6、。什么是什么是 HTML 标签标签pHTML 文档和 HTML 元素是通过 HTML 标签进行标记的pHTML 标签由开始标签和结束标签组成p开始标签是被括号包围的元素名p结束标签是被括号包围的斜杠和元素名p某些 HTML 元素没有结束标签,比如 p注释:注释:开始标签的英文翻译是 start tag 或 opening tag,结束标签的英文翻译是 end tag 或 closing tag。HTML 标题标题pHTML 标题(Heading)是通过 -等标签进行定义的。p实例实例pThis is a heading This is a heading This is a heading练习
7、练习p在刚才的在刚才的html文档中,文档中,“这是我的主页这是我的主页”设置成设置成h1的标题。的标题。HTML 链接链接pHTML 链接是通过 标签进行定义的。p实例实例pThis is a link练习练习p为为“这是我的主页这是我的主页”这个标题添加一个链这个标题添加一个链接接HTML 图像图像pHTML 图像是通过 标签进行定义的。p实例实例p练习练习p在刚才的标题之后添加一张图片在刚才的标题之后添加一张图片其他其他HTML标签标签phttp:/ 元素元素pHTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。HTML 元素语法元素语法pHTML
8、 元素以开始标签开始标签起始pHTML 元素以结束标签结束标签终止p元素的内容元素的内容是开始标签与结束标签之间的内容p大多数 HTML 元素可拥有属性属性HTML 样式样式pstyle 属性用于改变 HTML 元素的样式。pThis text is in Verdana and redpThis text is in Times and bluepstyle 属性的作用:p提供了一种改变所有提供了一种改变所有 HTML 元素的样式元素的样式的通用方法。的通用方法。HTML CSSp如何使用样式如何使用样式p当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样
9、式表:p外部样式表外部样式表p当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。p HTML CSSp内部样式表内部样式表p当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 标签定义内部样式表。p body background-color:red p margin-left:20px p内联样式内联样式p当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。p Thi
10、s is a paragraph 练习练习p给给index.html写一个外部样式表,命名为写一个外部样式表,命名为index.css,并将它们关联起来并将它们关联起来HTML 4.0 标准属性标准属性pHTML 标签可拥有属性。p这里列出的属性是通用于每个标签的核心属性。核心属性核心属性(Core Attributes)p以下标签不提供下面的属性:base、head、html、meta、param、script、style 以及 title 元素。属性属性值描述描述classclassname规定元素的类名(classname)idid规定元素的唯一 idstylestyle_definit
11、ion规定元素的行内样式(inline style)titletext规定元素的额外信息(可在工具提示中显示)练习练习p给标题定义一个核心属性给标题定义一个核心属性class,叫,叫title。给图片定义一个核心属性给图片定义一个核心属性id叫叫image本章要点本章要点p文本格式标记文本格式标记p文本修饰标记(字体标记)文本修饰标记(字体标记)p列表标记列表标记 p超链接标记超链接标记p图像图像HTML标记基础标记基础p2.什么是标记?什么是标记?标记是网页文档中的一些有特定意义的符号。标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。这些符号指明如何显示文档中的内容
12、。标记可以具有相应属性即各种参数,如标记可以具有相应属性即各种参数,如size、color、text、width和和noshade等等。例如:例如:网页中添加文本的方法网页中添加文本的方法 文本格式标记是网页中定义文本格式的标记文本格式标记是网页中定义文本格式的标记1)直接写文本;)直接写文本;2)用段落标记)用段落标记格式化文本,各段落格式化文本,各段落文本将分行显示;文本将分行显示;3)用标题标记)用标题标记格式化文本,作用:格式化文本,作用:定义第定义第n号标题字体,号标题字体,n=16,n值越大,字越小;值越大,字越小;文本将变为粗体显示,可看成特殊的段落标记;文本将变为粗体显示,可看
13、成特殊的段落标记;4)用预格式化标记用预格式化标记格式化文本,格式化文本,标记内的文本将按原来的格式显示,保留文本标记内的文本将按原来的格式显示,保留文本中的所有空格、换行和定位符;中的所有空格、换行和定位符;直接写文本直接写文本 电子商务专业学习电子商务专业学习 网页网页设计课程概述设计课程概述电子商务专业学习网页设计的意义电子商务专业学习网页设计的意义电子商务顾名思义就是在电子商务顾名思义就是在internet上做生意,上做生意,商品展示,广告宣传、发布商品展示,广告宣传、发布用段落标记用段落标记格式化文本格式化文本 电子商务顾名思义就是电子商务顾名思义就是在在int
14、ernet上做生意,商品展示,广告宣上做生意,商品展示,广告宣传、发布供求信息等活动实现的途径就是传、发布供求信息等活动实现的途径就是网页。网页。因此学习网页设计技术是从事电子商务因此学习网页设计技术是从事电子商务活动的基石。活动的基石。练习练习p给给index.html添加一个段落,段落的内容添加一个段落,段落的内容为为“欢迎来到无锡。欢迎来到无锡快度信欢迎来到无锡。欢迎来到无锡快度信息技术有限公司。息技术有限公司。”文本的强制换行文本的强制换行电子商务顾名思义就是在电子商务顾名思义就是在internet上做生意,上做生意,商品展示,广告宣传、发布商品展示,广告宣传、发布供求信息等活动实现的
15、途径就是网页。供求信息等活动实现的途径就是网页。p强制不换行标记强制不换行标记,常,常用于一串数字用于一串数字 文本中的空格文本中的空格p标记标记(除外除外)内内字符前的空格字符前的空格浏览器浏览器将全部忽略,将全部忽略,字符与字符间的空格字符与字符间的空格浏览器浏览器将只保留一个空格显示,将只保留一个空格显示,回车回车视为一个空视为一个空格,块级元素之间忽略所有空格。如果要格,块级元素之间忽略所有空格。如果要输入多个空格或需要在字符之前输入空格输入多个空格或需要在字符之前输入空格需在源代码中插入需在源代码中插入 (表示一个半角(表示一个半角空格)。空格)。p行内元素可看
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML 讲解
限制150内