用html4绘制海豚,HTML4/5

HTML

概述

超文本标记语言，最基础的网络语言

发展历史

HTML1.0

在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准)

HTML 2.0

1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时

HTML 3.2

1997年1月14日，W3C推荐标准

HTML 4.0

1997年12月18日，W3C推荐标准

HTML 4.01(微小改进)

1999年12月24日，W3C推荐标准

ISO/IEC 15445:2000(“ISO HTML”)

2000年5月15日发布，基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准。

XHTML1.0

发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布。

XHTML 1.1

于2001年5月31日发布，W3C推荐标准。

XHTML 2.0

W3C工作草案。

HTML4.01

是常见的版本。

HTML 5

2014年10月28日，W3C推荐标准

从XHTML 1.x的更新版，基于HTML 5草案。

HTML相关联盟

W3C (World Wide Web Consortium)

万维网联盟 官方组织

WHATWG (Web Hypertext Application Technology Working Group)

Web 超文本应用技术工作组

HTML5

HTML+CSS3+JavaScript+API

html5是一致性检查,没有有效性检查

支持HTML5的浏览器

IE9+,Firefox,Opear,Safari,Chrome,猎豹,UC,遨游,海豚,百度

HTML5推广网站

http://www.html5cn.org/

http://www.html5china.com/

http://www.mhtml5.com/

HTML5对HTML4删除了哪些标签

新的文档类型声明(DTD)

新增的HTML5标签

删除的HTML标签

重新定义的HTML标签

崭新的页面布局

新的文档类型声明(DTD)

/

新增的HTML5标签

(块状元素)有意义的div

新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好

标记定义一篇文章

标记定义一个页面或一个区域的头部

标记定义导航链接

标记定义一个区域

标记定义页面内容部分的侧边栏

标记定义文件中一个区块的相关信息

标记定义一组媒体内容以及它们的标题

标记定义figure元素的标题

标记定义一个页面或者一个区域的底部

标记定义一个对话框(会话框)类似微信(谷歌不支持)

多媒体交互标签

标记定义一个视频

标记定义音频内容

标记定义媒体资源

标记定义图片

标记定义外部的可交互的内容或插件比如flash

Web应用标签

menu命令列表标签FF(嵌入系统)-目前浏览器不支持

menu标记定义一个命令按钮-目前浏览器不支持

状态标签(实时状态显示:气压/气温C/O)

状态标签(实时过程:安装/加载 C/F/O)

为input标记定义一个下拉列表,配合optionF/O

标记定义一个元素的详细内容,配合dt,dd,C

注释标签

标记定义 注释或音标

告诉那些不支持ruby元素的浏览器如何去显示,专门用来注释括号

标记定义对ruby的注释内容文本

其它标签

标记定义表单里一个生成的键值(加密信息传送)O/F

标记定义有标记的文本(黄色选中状态)

标记定义一些输出类型,计算表单结果配合oninput事件

标记定义一个日期/时间 目前所有主流浏览器都不支持

删除的HTML标签

纯表现的元素

basefont,big,center,font,s,strike,tt,u

对可用性产生负面影响的元素

frame,frameset,noframes

产生混淆的元素

acronym,appliet,isindex,dir

重新定义的HTML标签

代表内联文本，通常是粗体，没有传递表示重要的意思

代表内联文本，通常是斜体，没有传递表示重要的意思

可以同details与figure一同使用，定义包含文本，dialog也可以 可以同details与figure一同使用，汇总细节，dialog也可用

---

表示主题结束，而不是水平线，虽然显示相同

表示小字体，例如打印注释或者法律条款

表示重要性而不是强调符号

重新定义的HTML标签

浏览器之间的差异

对相应的css/html标签的渲染不同

对JavaScript的支持不同

基本使用

header {height: 150px;background: red;}

div {margin-top: 10px;height: 700px;} /*div必须要有告诉,否则margin-top无效*/

section{height: 700px;background: green;width: 70%; float: left;}

aside{height: 700px; width: 28%;background: yellow; float: right;}

footer {height: 100px;background: yellowgreen;clear: both;margin-top: 10px;}

常用的网络名词

1.WWW 万维网(资料空间)

2.HTTP 超文本传输协议

3.URL 网址，路径 统一资源定位器

三、浏览器的种类

HTML代码是通过浏览器加载解析的

1.IE 6/7/8/9/10

2.火狐 MozillaFirefox

3.谷歌 chrome

4.苹果 safra

5.欧朋

四、什么是网页文件

当看到后缀命为.html或者.htm结尾的的文件时就是网页文件

五、显示扩展名

1.打开任意文件夹

2.点击组织

3.文件夹和搜素选项

4.查看

5.隐藏已知文件类型的扩展名

六、HTML的语法

1.单标记

eg:

1.没有属性 eg:

2.有属性 eg:< hr color="red"/>

PS：

---

是水平线

2.双标记

结束标记> eg:

1.没有属性

结束标记> eg:

2.有属性

结束标记> eg:

PS:属性不区分先后顺序

PS：所有的 标点符号必须在英文输入法状态下书写

PS：文件或文件夹名尽量使用英文或者拼音命名

PS:html是一门不严谨的语言，不区分大小写，但是我们一定要遵循XHTML的书写规范

HELLO WORD

---

HELLO WORD

七、 HTML的骨架(结构)

html的骨架

hello word

八、常用标记

1. font 控制文字 color size

2. br 换行

3. hr 水平线 color width 宽度 align 对齐方式 size 高度

4. h1-h6 标题标记 align ps：h标记不是用来控制文字大小的，h1在一个页面中尽量只出现一次

5. p 段落标记 align

6. b i u del 加粗 倾斜 下划线 删除线

7. blockquote 缩排 缩进

8. center 居中

9. strong 加粗 含有语义或者语气 起强调作用 便于SEO搜索引擎优化

10. em 倾斜 含有语义或者语气

ps：当你听到html标签，html标记，html元素，html节点时都是一个意思

九、DW设置

1. 设计器改为经典

2. 修改字号 编辑---> 首选参数 ---> 字体

3. 代码提示 编辑---> 首选参数 ---> 代码提示 ---> 选择第二个

新建完成后出现的页面是设计，我们要点击代码才会出现我们想要的页面

十、特殊字符

1. 空格

2. > > 大于号

3. < < 小于号

4. © 版权

5. ® 注册

十一、网页基本要素

1. 文字

2. 图片

3. 链接

十二、插入图片


img的属性

1. alt 替换图片文本，当图片不能正常显示时

2. title 图片标题

3. width/height 宽/高

4. border 边框

5. hspace 图片左右空白

6. vspace 图片上下空白

十三、 body里的属性

1. bgcolor 背景色

2. background 背景图片

十四、doctype的作用 文档声明

让所有浏览器遵循一个规范显示页面

ps: doctype可以减少兼容性问题浏览器之间的

十五、图片的类型

1. jpg 不支持透明和动画，有1670万种颜色，图片格式大，加载慢 照片

2. gif 支持透明和动画， 有256种颜色，图片格式小，加载快 logo 小图标

3. png 支持透明不支持动画， 有256种-1670万种颜色， png8 png24 png32

ps：png8=gif在IE6下图片背景不会透明，解决办法使用JS代码

4. tiff 印刷格式 注意：绝对不允许出现在网页中！ 图片格式超大

frame，是网页开发必须掌握的知识。例如后台架构、局部刷新，页面分割，都是frame的用途表现，尤其是后台页面制作，使用frame会给用户带来非常舒适的使用感受。

frame知识点包括(frameset标签、frame标签、iframe标签)

frameset 在html5中已经废弃了。

frame在html5中已经废弃了。

iframe 在html5中 可以使用。

一、frameset

属性

①border

设置框架的边框粗细。

②bordercolor

设置框架的边框颜色。

③frameborder

设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。

④cols

纵向分割页面。其数值表示方法有三种：“30%、30(或者30px)、”；数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%；“30”表示该区域横向宽度为30像素；“”表示该区域占用余下页面空间。例如：cols="25%,200," 表示将页面分为三部分，左面部分占页面30%，中间横向宽度为200像素，页面余下的作为右面部分。

⑤rows

横向分割页面。数值表示方法与意义与cols相同。

⑥framespacing

设置框架与框架间的保留的空白距离。

用例：

意思是：第一个框架占整个浏览器窗口的40%,剩下的空间平均分配给另外两个框架。

意思是：浏览器窗口等分为四部分。

二、frame

属性

①name

设置框架名称。此为必须设置的属性。

②src

设置此框架要显示的网页名称或路径。此为必须设置的属性。

③scrolling

设置是否要显示滚动条。设定值为auto, yes, no。

④bordercolor

设置框架的边框颜色。

⑤frameborder

设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。

⑥noresize

设置框架大小是否能手动调节。

⑦marginwidth

设置框架边界和其中内容之间的宽度。

⑧marginhight

设置框架边界和其中内容之间的高度。

⑨width

设置框架宽度。

⑩height

设置框架高度。

用例

三、iframe

是浮动的框架(frame)，其常用属性与frame类似，其他的主要有以下(相同的就不列举了)

属性

①align

设置垂直或水平对齐方式

②allowTransparency

设置或获取对象是否可为透明。

用例

注意：

iframe标签与frameset、frame标签的验证方法不同，是XHTML 1.0 Transitional。且iframe是放在body标签之内，而frameset、frame是放在body标签之外。

【说明】

标志对也是放在

标志对之间，用来在那些不支持框架的浏览器中显示文本或图像信息。

在此标志对之间先紧跟

标志对，然后才可以使用我们熟悉的任何标志。