HTML的PPT
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
文本修饰标记
文本修饰标记是对文本的外观进行修饰的标记， 如让文字变色，加大，变粗体，添加下划线等。 1）font标记：定义文字的各种属性。 例：<font face="fontname" size= "n" color=
属性
class
id style title 值
描述
规定元素的类名 （classname） 规定元素的唯一 id 规定元素的行内样式 （inline style） 规定元素的额外信息（可 在工具提示中显示）
classname
id style_definiti on text
练习
给标题定义一个核心属性class，叫title。 给图片定义一个核心属性id叫image
专业铸造品质 知识成就未来-硅谷动力网络学院
HTML讲解
HTML概念
HTML（Hyper Text Markup Language 超文本标识语言）
是一种用来制作超文本文档的简单标记语言。 用HTML编写的超文本文档称为HTML文档。
HTML文档的编写方法
1. 手工直接编写记事本等，存成.htm .html 格式 2. 使用可视化HTML编 辑 器Frontpage、 Dreamweaver等 3. 由Web 服务器（ 或称HTTP 服务器） 一 方实时动态地生成。
练习
给index.html添加一个段落，段落的内容 为“欢迎来到苏州。欢迎来到苏州快度信 息技术有限公司。”
文本的强制换行<br />
电子商务顾名思义就是在internet上做生意， <br />商品展示，广告宣传、发布 供求信息等活动实现的途径就是网页。
强制不换行标记<nobr>……</nobr>，常 用于一串数字
当浏览器读到一个样式表，它就会按照这个样式表来对 文档进行格式化。有以下三种方式来插入样式表：
外部样式表 当样式需要被应用到很多页面的时候，外部样式表将是理想的选 择。使用外部样式表，你就可以通过更改一个文件来改变整个站 点的外观。 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
HEAD元素——1 <head>元素出现在文档的开头部分。 <head>与</head>之间的内容不会在浏览 器的文档窗口显示，但是其间的元素有特 殊重要的意义。 <title>
<title>元素定义HTML文档的标题。<title>与 </title>之间的内容将显示在浏览器窗口的标 题栏。
<body>元素及元素属性——1
HTML 链接
HTML 链接是通过 <a> 标签进行定义的 。 实例 <a href="http://www.baidu.com">This is a link</a>
练习
为“这是我的主页”这个标题添加一个链 接
HTML 图像
HTML 图像是通过 <img> 标签进行定义 的。 实例 <img src="w3school.jpg" width="104" height="142" />
HTML CSS
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。 你可以在 head 部分通过 <style> 标签定义内部样式表。 <head> <style type="text/css"> body {backgroundcolor: red} p {margin-left: 20px} </style> </head>
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联 样式。 使用内联样式的方法是在相关的标签中使用样 式属性。样式属性可以包含任何 CSS 属性。以下实例 显示出如何改变段落的颜色和左外边距。 <p style="color: red; margin-left: 20px"> This is a paragraph </p>
通常，一个字符实体是由三部分组成的： （1）一个“&”符号 （2）字符专用名称或者字符代号 （3）一个“;”符号 在DW的设计视图中输入这些特殊字符，DW会自动在代 码视图添加它们对应的转义字符
综合练习1
<html> <head> <title>分段换行与预格式</title> </head> <body> <h3>以下是直接写文本的情况：</h3> 星期一、星期二、星期三、星期四、 星期五、星期六、星期日。 <h3>以下是使用了三个换行标记的情况：</h3> 星期一、星期二、<br />星期三、星期四、<br/> 星期五、星期六、星期日。<br /> <h3>以下使用分段标记（分为两段）：</h3> <p>星期一、星期二、星期三、</p><p>星期四、 星期五、星期六、星期日。</p> <h3>以下使用预格式：</h3> <pre> 星期一、星期二、星期三、星期四、 星期五、星期六、星期日。 </pre> </body></html>
在HTML源代码中，有些字符有特别的含义， 比如小于号“<”就表示HTML 标记的开始， html源代码中的“<”是不会在浏览器中显示的， 如果要浏览器显示这些字符，就需要输出他们 对应的转义字符。 例如：<表示< , >表示> , "表示“ , &表示& , 表示空格等；
HTML 文件结构 (Document Structures)
<HTML>
<HEAD>
<title></title> <meta>
</HEAD> <BODY>
HTML 文件的正文
</BODY>
</HTML>
第一张网页（01.html）
<html> <head> <title>my first page</title> </head> <body> This is my first homepage! </body> </html>
文本中的空格
标记(<pre>除外)内字符前的空格浏览器 将全部忽略，字符与字符间的空格浏览器 将只保留一个空格显示，回车视为一个空 格，块级元素之间忽略所有空格。如果要 输入多个空格或需要在字符之前输入空格 需在源代码中插入 （表示一个半角 空格）。 行内元素可看成一个字符
文本中的转义字符
练习
在刚才的标题之后添加一张图片
其他HTML标签
http://www.w3school.com.cn/tags/index.as p 各个标签的介绍
HTML 元素
HTML 元素指的是从开始标签（start tag ）到结束标签（end tag）的所有代码。
HTML 元素语法
HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的 内容 大多数 HTML 元素可拥有属性
第二张网页（02.htm）
<html> <head> <title>my first page</title> </head> <body> <p align="center">This is my first homepage!</p> </body> </html>
HTML基本结构的 有关元素和元素属性
HTML 标题
HTML 标题（Heading）是通过 <h1> <h6> 等标签进行定义的。 实例 <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
练习
在刚才的html文档中，“这是我的主页” 设置成h1的标题。
水平线标记<hr />
<hr/>标记是在HTML文档中加入一条水 平线，它可以直接使用，具有size、color、 width和noshade属性。size是设置水平线 的厚度，而width是设定水平线的宽度， 默认单位是像素。noshade属性用来加入 一条没有阴影的水平线。 <hr size="3" width="85%" color =“red" noshade="noshade" align="center" />
练习
在刚才新建的html文档中写入title是“我 的主页”，body是“这是我的主页”。
基本组成部分—— HTML元素属性Baidu Nhomakorabea
HTML元素可以有自己的相关属性，每一 个属性还可以由我们网页编制者赋一定的 值。元素属性出现在元素的< >内，并且 和元素名之间有一个空格分隔；属性值用 “”引起来。
练习
给index.html写一个外部样式表，命名为 index.css,并将它们关联起来
HTML 4.0 标准属性
HTML 标签可拥有属性。 这里列出的属性是通用于每个标签的核心 属性。
核心属性 (Core Attributes)
以下标签不提供下面的属性：base、head、html、meta 、param、script、style 以及 title 元素。
网页中添加文本的方法
文本格式标记是网页中定义文本格式的标记 1）直接写文本； 2）用段落标记<p>……</p>格式化文本，各段落 文本将分行显示； 3）用标题标记<hn>……</hn>格式化文本，作用： 定义第n号标题字体，n=1~6，n值越大，字越 小；文本将变为粗体显示，可看成特殊的段落 标记； 4) 用预格式化标记<pre>……</pre>格式化文本， 标记内的文本将按原来的格式显示，保留文本 中的所有空格、换行和定位符；
<body>元素表明是HTML文档的主体部 分。在<body>与</body>之间，通常都会 有很多其它元素；这些元素和元素属性构 成HTML文档的主体部分。
什么是 HTML 标签
HTML 文档和 HTML 元素是通过 HTML 标签 进行标记的 HTML 标签由开始标签和结束标签组成 开始标签是被括号包围的元素名 结束标签是被括号包围的斜杠和元素名 某些 HTML 元素没有结束标签，比如 <br /> 注释：开始标签的英文翻译是 start tag 或 opening tag，结束标签的英文翻译是 end tag 或 closing tag。
直接写文本
<body> 电子商务专业学习 网页 设计课程概述 电子商务专业学习网页设计的意义 电子商务顾名思义就是在internet上做生意， 商品展示，广告宣传、发布 </body>
用段落标记<p>……</p>格式化文本
<p> 电子商务顾名思义就是 在internet上做生意，商品展示，广告宣 传、发布供求信息等活动实现的途径就是 网页。</p> <p>因此学习网页设计技术是从事电子商务 活动的基石。</p>
网页文件命名
1. *.htm或*.html 2. 无空格 3. 无特殊符号（例如&符号），只可以有 下划线“_”，只可以为英文、数字 4. 区分大小写 5. 首页文件名默认为：index.htm 或 index.html
练习
自己新建一个index.html文档
HTML 文件结构
<html>...</html> <head>...</head> <body>...</body> 元素：是HTML语言的基本部分。元素总 是成对出现，每一对元素一般都有一个开 始的标记（如<body>），也有一个结束 的标记（如</body>）。元素的标记要用 一对尖括号括起来，并且结束的标记总是 在开始的标记前加一个斜杠。
HTML 样式
style 属性用于改变 HTML 元素的样式。 This text is in Verdana and red
This text is in Times and blue
style 属性的作用： 提供了一种改变所有 HTML 元素的样式 的通用方法。
HTML CSS
如何使用样式
本章要点
文本格式标记 文本修饰标记（字体标记） 列表标记 超链接标记 图像
HTML标记基础
2.什么是标记？
标记是网页文档中的一些有特定意义的符号。 这些符号指明如何显示文档中的内容。 标记可以具有相应属性即各种参数，如size、 color、 text、 width和noshade等 。 例如：<p> <font size="+1" color="red"></font></p>