Download presentation
Presentation is loading. Please wait.
1
HTML5全栈开发序列课程 《前端入门》之HTML入门 余鹏作品
2
主要内容 HTML的历史 基本结构 photoshop的基本使用
3
HTML 历史 HTML：Hyper Text Markup Language
W3C: 万维网联盟创建于1994年，是Web技术领域最具权 威和影响力的国际中立性技术标准机构,到目前为止，W3C 已发布了200多项影响深远的Web技术标准及实施指南 WHATWG(Web Hypertext Application Technology Working Group) 网页超文本应用技术工作小组 HTML5 XHTML2.0 XHTML1.1 WHATWG: 网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。 中文名网页超文本应用技术工作小组外文名Web Hypertext Application Technology Working Group外语缩写WHATWG 历史 WHATWG成立的原因是W3C意图放弃HTML，而力图发展XML（可扩展标记记语言下的一个子集）技术。 WHATWG邮件列表公布于 , 在Opera–Mozilla宣布加入后的2天 便否决了由万维网联盟（W3C）成员在W3C工作室的Web标准 , Mozilla Foundation, Apple, Opera Software 建议 W3C跟随WHATWG’的HTML5， 将新的HTML（标准通用标记语言下的一个应用）命名为"HTML5" , 新的HTML工作组采纳了他们的建议。 XHTML1.0 HTML4.01 HTML4.0 HTML3.2 HTML2.0
4
HTML基本结构 <!DOCTYPE html> <html> <head>
<meta charset="utf-8"/> <title>无标题文档</title> </head> <body> 我的第一个网页 </body> </html> 网页头部 主体部分 <HTML>…</HTML>标签标记着 HTML 文档的开始和结束
5
DOCTYPE声明 <!DOCTYPE html> ！文档类型，一个文档类型标记是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。此声明为HTML5标准。 DTD：文档类型定义(Document Type Definition)是一套为了进行程序间的数据交换而建立的关于标记符的语法规则。 文档模式有如下作用： （1）告知浏览器使用怎样的html或者xhtml规范来解析html文档 （2）对浏览器的渲染模式产生影响 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
6
<title>标签 …… <title>家用电器排行榜</title>
7
<meta>标签 <meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 <meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <meta name="keywords" content="育知同创" /> <meta name="description" content="育知同创是国内最大的……" /> 搜索关键字 内容描述 网页字符编码 <meta charset="UTF-8"> gbk\big5\iso
8
HTML基本语法 HTML由标签组成，标签分为：常规标签和空标签。 1、常规标签（双标签）
<标签 [属性=“属性值” 属性=“属性值”]>内容</标签> 2、空标签（单标签） <标签 [属性=“属性值”] /> 说明： 1.写在<>中的第一个单词叫做标记，标签，元素。 2.标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内。 3.一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序。 4.空标记没有结束标签，用“/”代替。
9
Photoshop的使用 我们的网页从无到有是怎样的一个过程呢？
首先由网页设计师设计出效果图，然后使用HTML这门语言将设计师设 计出来的效果图生成网页格式。 效果图中即有文字也有图片，我们得将图片从效果图中分离出来。那 使用那种软件进行分离呢？就是PHOTOSHOP（简称PS）进行切图。
10
网页的常见的图片格式及特点 Gif 支持透明、支持动画是一种只能存储256种颜色的有损压缩的图片格式，所以gif格式的图片不适 合作为照片，它适合做对颜色要求不高的图形。 Jpg 不支持透明、不支持动画是可以存储上千上种颜色的有损压缩的图片格式，所以jpg格式的图片适 合做网页上摄影图片。 Png 支持透明、不支持动画是可以存储上千上万种颜色的无损压缩的图片格式。 各方面比较 大小比较：通常地，PNG ≈ JPG > GIF 透明性：PNG > GIF > JPG 色彩丰富程度：JPG > PNG >GIF 兼容程度：GIF ≈ JPG > PNG
11
Photoshop的使用
12
使用Photoshop切图 使用切片工具切图
17
Photoshop的常用快捷键 保存 CTRL+S 剪切 CTRL+X 复制 CTRL+C 粘贴 CTRL+V 全选 CTRL+A
自由变换 CTRL+T 放大 CTRL+ + 缩小 CTRL+ - 显示标尺 CTRL+R 临时使用抓手工具 【空格】 自由变换 【Ctrl】+【T】 显示/隐藏“信息”面板 【F8】 取消选区：Ctrl+D
18
育知同创：yztcedu.com HTML5全栈开发学习QQ群：
Similar presentations
