【学习课件】第一章HTML概述与基本标签(理论)
第1章 HTML基础
描述
设置文本为上标格式
设置文本为下标格式
设置打字机风格字体的文本
以强调形式格式化文本，通常显示为斜体
格式化地址信息，将文本设置为斜体字
格式化需强调显示效果的文字，通常显示为斜体+粗体
将文字排版按原格式显示，即把原文件中的空格、回车、换行等表现出来
1.3.5 超链接标签
属性 href name title target
（5）HTML标签中可以放置各种属性。例：<h1 align="center">标题 1</h1>
（6）在HTML源代码中的注释。<!-- 要注释的内容 --> 注释语句只出 现在源代码中，不会在浏览器中显示。
1.2.3 HTML的标签及属性
基本语法： 成对标签 <标签名 属性1="值" 属性2="值"
属性3="值" …>内容</标签名> 单独标签 <标签名 属性1="值" 属性2="值"
属性3="值" …>
范例代码 1.3.html
<html> <head> <title>世侨国贸公寓</title> <meta http-equiv="Content-Type" content="text/html; charset= gb2312"> <style type="text/css"> <!— p,td{font-size:9pt; line-height:16px} .style1 {color: #FFFFFF} --> </style> </head> <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin= "0" marginwidth="0"
HTML简介 ppt课件
第四节、HTML编辑软件
Adobe Dreamweaver
Adobe Dreamweaver，简称“DW”，中文名称 "梦想编织者"，是美国MACROMEDIA公司开发的集网页 制作和管理网站于一身的所见即所得网页编辑器，DW是 第一套针对专业网页设计师特别发展的视觉化网页开发工 具，利用它可以轻而易举地制作出跨越平台限制和跨越浏 览器限制的充满动感的网页。
浏览器
IE
火狐
谷歌
Opera
Safari
内核
Trident
Gecko
Blink
Presto
Webkit
优点
不用安装
兼容性最好， 可以装插件
速度快，页面 体验好
安全，速度快
速度快，尤其 表现在图片视 频上
缺点
加载慢，不算 第一次打开慢 兼容性较差 安全
兼容问题很差 对中文网站支 持欠缺
各大浏览器所占市场比重（市场份额）
2001年 (W3C) XHTML 1.1
HTML5 未 来
1997年 (W3C) HTML 4.0
HTML 2.0
万维网联盟
W3C（万维网联盟）创建于1994年，是Web技术领域最具权威和 影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多 项影响深远的Web技术标准及实施指南。HTML语言就是以W3C的标准 发布的。
➢<title>网页标题</title>——打开网页页面的标题，标题内容就是<title></title>标签内书写 对的内容
➢<body></body>——网页的具体内容代码部分，定义了网页文档的主体。body 元素包含文 档的所有内容（比如文本、超链接、图像、表格和列表等等。）
第1章 HTML简介.ppt
上一页 下一页 目录 本节 结束
1.4 网页技术概况
以目前的网页技术来说，大致可分为三个方面来加以说明。 ⑴ 静态网页（HTML、CSS） ⑵ 网页美工（Flash、Fireworks） ⑶ 动态网页（JavaScript/VBScript、ASP） 动态网页是让网页能够依照用户的需求做出动态响应的技术。 所谓的静态网页，是指这个网页不论在何时从何地浏览，都 将显示相同的画面与内容，且用户仅能浏览，无法提供信息给 网站，让网站响应用户的需求。 静态网页是用HTML编写，保存时扩展名需使用.htm或.html。 静态网页只能单纯地在网页中展示文字与图片，它是所有网页 的基础技术。整个网页的主要内容与网页的显示控制，都必须 利用HTML实现。
资源，如另外一个网页、一个声音文件、网页的另一个段落 或者是万维网中的任何资源等等，而且这些资源均可以存放 在任何一个服务器上。在浏览网页时，如果你用鼠标单击超 链接，那么就会跳转到超链接所指向的资源，就可从Web上 下载新的信息。在网页中，一个超链接可以是一些文字也可 以是一幅图画。而且这些文字在浏览器中显示出来时一般是 带有下划线的彩色文字。判断网页中的某个对象是否是超链 接有个简单的方法，即当鼠标光标箭头移动到这个文字或图 像时，如果是超链接，浏览器便会改变光标为一只手的形状。
除了URL的这种寻址作用外，在使用超文本链接 时，即将一个文件链接到另一个文件时，也必须 使用URL。
上一页 下一页 目录 本节 结束
3．网站（Web site） 网站是一个存放在网络服务器上的完整信息的
集合体。它包含一个或多个网页，这些网页以一 定的方式链接在一起，成为一个整体，用来描述 一组完整的信息或达到某种期望的宣传效果。
5．主页（Home page） 主页，也可以称之为首页，它既是一个单独的网页，
html讲解ppt
<html>
<head> <title>标题</title>
</head>
<body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6>
</body>
</html>
实例
<html> <head> <title>设置页面背景</title> </head> <body bgcolor="blue"> </body>
</html>
text属性
• 设置页面中文字显示的颜色 • 可以使用颜色单词，也可以使用十六进制 颜色值
实例
<html> <head>
<title>设置页面背景</title> </head> <body bgcolor="blue" text="white"> 页面文字颜色 </body> </html>
属性
属性
• 在标记和属性之间有个空格（如果有一个 或多个已存在的属性，就与前一个属性之 间有一个空格） • 属性后面紧跟着一个“=”符号. •有一个属性值，由一对双引号“ ”括起来
《html教程讲义》课件
一、HTML简介1.1 HTML的定义HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。
1.2 HTML的作用HTML用于描述网页的结构和内容，使得浏览器能够展示具有特定格式的文本、、图片等。
1.3 HTML的发展历程HTML 1.0（1993年）HTML 2.0（1995年）HTML 4.01（1997年）XHTML 1.0（2000年）HTML5（2014年）二、HTML文档结构2.1 基本结构<!DOCTYPE ><><head><meta charset="UTF-8"><>文档</></head><body><h1>一级</h1><p>段落内容</p><!-更多的标签和内容 --></body></>2.2 标签分类语义化标签：`<header>`、`<nav>`、`<section>`、`<article>`、`<footer>`等功能性标签：`<div>`、`<span>`等三、文本格式与排版3.1 标签`<h1>`～`<h6>`：依次表示一级到六级3.2 段落标签`<p>`：表示一个段落3.3 换行与清除浮动`<br>`：表示换行`<wbr>`：表示单词换行`<clear>`：清除浮动3.4 字符实体`<>&"`：分别表示小于号、大于号、引号四、图片与4.1 图片标签`<img>`：表示图片<img src="图片地址" alt="图片描述" width="宽度" height="高度"> 4.2 标签`<a>`：表示<a href="地址" target="_blank">文本</a>4.3 锚点`<a name="锚点名称">`：表示锚点`<a href="锚点名称">`：到锚点五、列表与表格5.1 无序列表`<ul>`：无序列表`<li>`：列表项5.2 有序列表`<ol>`：有序列表`<li>`：列表项5.3 定义列表`<dl>`：定义列表`<dt>`：定义`<dd>`：定义描述5.4 表格`<table>`：表格`<tr>`：表格行`<td>`：单元格`<th>`：表头单元格六、表单与数据验证6.1 表单标签`<form>`：表单`<input>`：输入框`<textarea>`：文本域`<select>`：下拉菜单`<option>`：下拉菜单选项6.2 数据验证`required`：必填字段`pattern`：正则表达式验证`minlength`、`maxlength`：字符长度限制`type="e"、type="number"、type=""：输入类型限制七、CSS样式7.1 内联样式在HTML标签内使用`style`属性添加样式7.2 内部样式表在`<head>`标签内使用`<style>`标签添加样式7.3 外部样式表使用`.css`文件作为样式表，通过`<link>`标签引入7.4 CSS选择器标签选择器：`h1 { }`类选择器：`.classname { }`ID选择器：`idname { }`属性选择器：`[attribute="value"] { }`八、盒子模型与布局8.1 盒子模型`margin`：外边距`border`：边框`padding`：内边距`width`、`height`：宽度和高度8.2 布局方式标准流布局浮动布局：`float`属性定位布局：`position`属性弹性盒模型（Flexbox）：`display: flex;`九、响应式设计9.1 媒体查询使用`media`查询不同设备屏幕大小时的样式9.2 移动端布局使用百分比、视口单位（vw、vh）、rem等实现响应式布局9.3 图片响应式使用`<picture>`标签或`srcset`属性实现图片响应式十、HTML5新特性10.1 视频与音频`<video>`：视频`<audio>`：音频10.2 画布（Canvas）`<canvas>`：绘制图形、动画等10.3 Web存储`localStorage`：本地存储`sessionStorage`：会话存储10.4 离线应用与缓存使用`manifest`文件实现离线应用10.5 其他新特性`<nav>`、`<section>`、`<article>`等语义化标签`<input type="e">`、`<input type="number">`等新输入类型`<dialog>`：对话框重点和难点解析HTML的基本结构和标签分类文本格式与排版，如、段落、换行等图片与的使用，包括图片标签和锚点列表与表格的创建和应用表单与数据验证，如必填字段、正则表达式验证等CSS样式的基础知识，包括内联样式、内部样式表和外部样式表盒子模型、布局方式以及响应式设计的基本概念HTML5的新特性，如视频与音频、画布、Web存储等HTML5的新特性，如离线应用、Web存储等，这些内容需要一定的实践和理解CSS的高级应用，如伪类、过渡、动画等，这些内容需要对CSS 有深入的了解表单的数据验证，如何使用JavaScript进行复杂的验证，需要对JavaScript有一定的了解。
HTML基础ppt课件
15
2.1 head容器的标记
3．meta元素 格式：
<meta name="text" http-equiv="text" content="text“ />
第1章 HTML基础
1
第1章 HTML基础
1 HTML文档结构 2 HTML基本标记的使用 3 超链接标记 4 HTML表格 5 HTML表单
2
1 HTML文档结构
在互联网中传送的文档，绝大部分使 用超文本标记语言编写，这些文档称为 HTML文档。
在基本HTML文档中，只允许两种元 素存在：一种是HTML标记，另一种则是 普通文本。
18
2.1 head容器的标记
5．script元素 格式：
<script type=“text/javascript”> 脚本语言代码段
3
1 HTML文档结构
HTML文档的组成结构如下：
4
1 HTML文档结构
一个完整的HTML文档通常由以下三部分组成：
1．HTML标记 格式：<html> … </html>
2．头部信息 格式：<head> … </head>
3．文本主体 格式：<body> … </body>
5
1 HTML文档结构
11
2.1 head容器的标记
HTML代码简介 PPT课件
• <a href=“” target=_blank title="新浪站点链接"> 新浪站点链接</a>
• </body>
• </html>
显示结果
1.25
© 2009
HTML代码简介
• 链接到email地址 • 在网站中，你经常会看到“联系我们”
的链接，一点击这个链接，就会触发你 的邮件客户端，比如Outlook Express， 然后显示一个新建mail的窗口。用<a>可 以实现这样的功能。
பைடு நூலகம்
1.26
© 2009
HTML代码简介
• <html>
• <body>
• <a href="biaoti.htm">这是一个链接 </a><br>
• <a href="" target=_blank title="新浪站点链接">新浪站 点链接</a>
• <a href = "mailto:info@">联系新 浪</a>
HTML代码简介
HTML注释
• 在HTML文件里，你可以写代码注释，解 释说明你的代码，这样有助于你和他人 日后能够更好地理解你的代码。
• 注释可以写在<!--和-->之间。浏览器是 忽略注释的，你不会在HTML正文中看到 你的注释。
• <!-- This is a comment -->
1.15
HTML绝对路径(Absolute Path)
HTML基础知识及相关标签的用法27页PPT
任务三 认识HTML标签
行的控制
段(Paragraph) (可以看作是空行) <p></p> 换行 <br> 空白占位符
实例：d.html
陕西新华电脑软件学校-电子商务教研组 ©版权所有
21
任务三 认识HTML标签
标尺线
<hr size = #>：设定线宽 <hr width=#>：设定线长 <hr align=#>：设定对齐方式 #=left, right <hr color=#> ：设定线的颜色
6
任务二 HTML基本语法
HTML标签格式
格式一 <标签名>内容</标签名> 格式二 <标签名 属性名="属性值">内容</标签名> 格式三
<标签名/>
陕西新华电脑软件学校-电子商务教研组 ©版权所有
7
任务三 认识HTML标签
HTML基本结构
<html> <head> <title></title> <meta/> </head> <body> HTML 文件的正文</ body > </html >
11
任务三 认识HTML标签
<meta>元素
用来标记文档的作者 <meta name="author" content=“your name"> 用来标记你的页面的解码方式 <meta http-equiv=“Content-Type”
HTML基础教程《一》PPT课件
HTML建议WEB浏览器应该如何显示和排列信息，并 不能精确定义格式，因此在不同的浏览器中显示的 HTML文件效果会不同。
HTML文件时一种纯文本文件，通常以.htm or .html 作为文件扩展名。可以用各种类型的工具来创建或者 处理HTML页面，如记事本、写字板、FrontPage 、 Dreamweaver等。
HTML 文档 = 网页
HTML 文档描述网页 HTML 文档包含 HTML 标签和纯文本
5
HTML 简介
Web 浏览器的作用是读取 HTML 文档，并以网页的形 式显示出它们。浏览器不会显示 HTML 标签，而是使用 标签来解释页面的内容：
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> 例子解释 <html> 与 </html> 之间的文本描述网页 <body> 与 </body> 之间的文本是可见的页面内容 <h1> 与 </h1> 之间的文本被显示为标题 <p> 与 </p> 之间的文本被显示为段落
7. HTML 段落
7. HTML 颜色
8. HTML 格式化
8. HTML 颜色值
9. HTML 样式
9. HTML 颜色名
4
HTML 简介
什么是 HTML？ HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language)
Html入门PPT课件
_blank 新窗口打开 _self 当前窗口打开
HTML注释语法 <!--注释的内容--> Html代码 <!--链接结束-->
例属性指定链接地址
HTML 元素的嵌套
• HTML 文档由嵌套的 HTML 元素构成。 • 大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
例1： <html> <body> <p>This is my first paragraph.</p> </body> </html>
<_blank">链到</a>代码解读：
（1）这是一个典型的A链接元素。 （2）以<a>标签开始 </a>标签结束 定义了一个A链接元素。 （3）这个A链接元素有三个属性href title target，写在开始标签里<a>，而不是写是结束
文本是头信息开始
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网页标题</title>
文档标题
</head>
文本是头信息结束 ，不显示
<body>
正文开始
这里是网页内容
</body> </html>
HTML基础教程ppt课件
基本组成部分—— 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使用16进制的RGB颜色值对颜色进 行控制。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
常见颜色的代码
颜色
黑色 银色 红色 蓝色 白色 黄色 绿色 海蓝色
颜色名和RGB值
Black=”#000000” Silver=”#c0c0c0” Red=”#ff0000” Blue=”#0000ff” White=”#ffffff” Yellow=”ffff00” Green=”#00ff00” Aqua=”#00ffff”
HTML基本结构的 有关元素和元素属性
HEAD元素——1 <head>元素出现在文档的开头部分。 <head>与</head>之间的内容不会在浏览 器的文档窗口显示，但是其间的元素有特 殊重要的意义。 <title>
<title>元素定义HTML文档的标题。<title>与 </title>之间的内容将显示在浏览器窗口的标题 栏。
html课件
块级元素从上到下、行内元素从左到右依次排列的布局方式。
文档流布局
通过设置元素的float属性，使元素脱离文档流并向左或向右浮动，常用于实现文字环绕效果。
浮动布局
通过设置元素的position属性，可以精确控制元素在页面上的位置，包括相对定位、绝对定位和固定定位等。
定位布局
掌握CSS的基本语法，包括选择器、属性和值的写法，以及样式的优先级规则。
使用浏览器前缀
针对不同浏览器使用特定的CSS前缀，确保样式在不同浏览器中的兼容性。
渐进增强与优雅降级
根据浏览器支持情况，提供基本的功能和样式，逐步增强用户体验。
使用Polyfill
针对某些浏览器不支持的HTML5、CSS3特性，引入Polyfill库进行兼容处理。
测试与调试
使用多种浏览器进行测试，及时发现问题并进行修复。
图像处理
06
HTML页面优化与兼容性处理
压缩HTML、CSS和JavaScript文件：通过压缩代码，减少文件大小，提高页面加载速度。
使用CDN加速：通过CDN服务分发资源，减轻服务器压力，提高用户访问速度。
优化图片：压缩图片、使用WebP格式、设置合适的图片尺寸等，降低图片加载时间。
减少HTTP请求：合并多个CSS和JavaScript文件，减少浏览器发起的HTTP请求数量。
CSS语法
颜色与背景
字体与文本
学习如何设置元素的颜色、背景色、背景图片等样式，以及渐变、阴影等高级效果。
学习如何设置文本的字体、大小、颜色、行高等样式，以及文本装饰、对齐等效果。
03
02
01
选择器优先级
了解选择器优先级的规则，包括内联样式、ID选择器、类选择器、元素选择器等之间的优先级关系。
第1课HTML语言(一)PPT课件
4. HTML文件的基本结构
HTML文件是一种纯文本格式的文件，HTML文件包 括头部（head）和主体（body）。文件的基本结构为：
<HTML> <HEAD> <TITLE> 网页的标题 </TITLE> </HEAD> <BODY> 网页的内容 </BODY>
</HTML>
16
说明： ① HTML文件以<HTML>开头，以</HTML>结尾。 ② <HEAD>…</HEAD>：表示这是网页的头部，用 来说明文件命名和与文件本身的相关信息。可以包括 网页的标题部分：<TITLE>…</TITLE>。 ③ <BODY>…</BODY>：表示网页的主体即正文部 分。 ④ HTML语言并不要求在书写时缩进，但为了程序 的易读性，建议网页设计制作者使标记的首尾对齐， 内部的内容向右缩进几格。
<标记> 受标记影响的内容 </标记> <标记 />
12
说明： ① 每个标记都用“<”（小于号）和“>”（大于
号）围住，如<P>，<Table>，以表示这是HTML代码而 非普通文本。注意，“<”与标记名之间不能留有空格 或其它字符。
② 在标记名前加上符号“/”便是其结束标记， 表示这种标记内容的结束，如</FONT>。标记也有不用 </标记>结尾的，称之为单标记。
10
② 文字与图形资料：是指要提供给浏览信息的人 阅读的内容。WWW显示的图形一般都以独立文件的形式 存在，如果要显示图形（图形文件要用其他程序建 立），就必须用特殊的标记指向图形文件。
[互联网]HTML新手入门.ppt
![[互联网]HTML新手入门.ppt](https://img.taocdn.com/s3/m/b42e033652ea551810a6876d.png)
<P align = 对齐方式> 文字 </P>
3．换行标记<BR>
2.2 常用标记（03.html）
4．横线标记 格式：<HR width = 宽度 color = 颜色>
5．文本缩排标记 格式：<Blockquote> 文字 </Blockquote>
2.2.5 字体属性标记
2.1 HTML概述
2.1.1 什么是HTML
HTML是一种标记语言每一个网页元素通 常由开始标记（start tag）、结束标记（end tag ） ， 以 及 夹 在 这 两 个 标 记 中 的 内 容 所 组 成 。 主要由“属性名称 = 属性值”的方式来设定元 素的属性。
一个HTML元素的形式可表示为：
标记 <B>…</B> <I>…</I> <U>…</U> <SUP>…</SUP> <SUB>…</SUB> <STRIKE>…</STRIKE> <ADDRESS>…</ADDRESS> <EM>…</EM> <STRONG>…<STRONG>
描述 将文字设置为粗体字 将文字设置为斜体字 设置为带有下划线的文字 设置为位于右上角的上标文字 设置为位于右下角的下标文字 设置为带有删除线的文字 标明其间的文字为地址内容 强调其间的文字（通常为斜体） 强调其间的文字（通常为黑体）
2.2 特殊字符标记
字符
对应字符标记
对应十进制编码标记