HTML4/5
2017-10-10 本文已影响32人
帅哥_刷哥
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)
<!DOCTYPE html> / <!doctype html>
新增的HTML5标签
(块状元素)有意义的div
新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好
<article> 标记定义一篇文章
<header> 标记定义一个页面或一个区域的头部
<nav> 标记定义导航链接
<section> 标记定义一个区域
<aside> 标记定义页面内容部分的侧边栏
<hgroup> 标记定义文件中一个区块的相关信息
<figure> 标记定义一组媒体内容以及它们的标题
<figcaption> 标记定义figure元素的标题
<footer> 标记定义一个页面或者一个区域的底部
<dialog> 标记定义一个对话框(会话框)类似微信(谷歌不支持)
多媒体交互标签
<video> 标记定义一个视频
<audio> 标记定义音频内容
<source> 标记定义媒体资源
<canvas> 标记定义图片
<embed> 标记定义外部的可交互的内容或插件比如flash
Web应用标签
<menu> 命令列表-目前浏览器不支持
<menuitem> menu命令列表标签FF(嵌入系统)-目前浏览器不支持
<command> menu标记定义一个命令按钮-目前浏览器不支持
<meter> 状态标签(实时状态显示:气压/气温C/O)
<progress> 状态标签(实时过程:安装/加载 C/F/O)
<datalist> 为input标记定义一个下拉列表,配合optionF/O
<details> 标记定义一个元素的详细内容,配合dt,dd,C
注释标签
<ruby> 标记定义 注释或音标
<rp> 告诉那些不支持ruby元素的浏览器如何去显示,专门用来注释括号
<rt> 标记定义对ruby的注释内容文本
其它标签
<keygen> 标记定义表单里一个生成的键值(加密信息传送)O/F
<mark> 标记定义有标记的文本(黄色选中状态)
<output> 标记定义一些输出类型,计算表单结果配合oninput事件
<time> 标记定义一个日期/时间 目前所有主流浏览器都不支持
删除的HTML标签
纯表现的元素
basefont,big,center,font,s,strike,tt,u
对可用性产生负面影响的元素
frame,frameset,noframes
产生混淆的元素
acronym,appliet,isindex,dir
重新定义的HTML标签
<b> 代表内联文本，通常是粗体，没有传递表示重要的意思
<i> 代表内联文本，通常是斜体，没有传递表示重要的意思
<dd> 可以同details与figure一同使用，定义包含文本，dialog也可以
<dt> 可以同details与figure一同使用，汇总细节，dialog也可用
<hr> 表示主题结束，而不是水平线，虽然显示相同
<menu> 重新定义用户界面的菜单，配合command或者menuitem使用
<small> 表示小字体，例如打印注释或者法律条款
<strong> 表示重要性而不是强调符号
重新定义的HTML标签
浏览器之间的差异
对相应的css/html标签的渲染不同
对JavaScript的支持不同
基本使用
<body>
<header></header>
<div>
<section></section>
<aside></aside>
</div>
<footer></footer>
</body>
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:<br/>
1.没有属性<标签名/> eg:<br/>
2.有属性<标签名 属性名="属性值"/> eg:< hr color="red"/>
PS：<hr/>是水平线
2.双标记
<开始标记></结束标记> eg:<title></title>
1.没有属性
<开始标记></结束标记> eg:<title></title>
2.有属性
<开始标记 属性名="属性值"></结束标记> eg:<font color="red"></font>
PS:属性不区分先后顺序
PS：所有的 标点符号必须在英文输入法状态下书写
PS：文件或文件夹名尽量使用英文或者拼音命名
PS:html是一门不严谨的语言，不区分大小写，但是我们一定要遵循XHTML的书写规范
<font color="red" size="7">HELLO WORD</font><br/>
<hr align="left" size="10" width="50" color="pink"/>
<font color="blue" size="5">HELLO WORD</font>
七、 HTML的骨架（结构）
<html>
<head>
<title>html的骨架</title>
</head>
<body>
<font color="blue" size="5">hello word</font>
</body>
</html>
八、常用标记
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的作用 文档声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
让所有浏览器遵循一个规范显示页面
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
设置框架与框架间的保留的空白距离。
用例：
<frameset cols="40%,,">
意思是：第一个框架占整个浏览器窗口的40%,剩下的空间平均分配给另外两个框架。
<frameset cols=",,,*">
意思是：浏览器窗口等分为四部分。
二、frame
- 属性
①name
设置框架名称。此为必须设置的属性。
②src
设置此框架要显示的网页名称或路径。此为必须设置的属性。
③scrolling
设置是否要显示滚动条。设定值为auto, yes, no。
④bordercolor
设置框架的边框颜色。
⑤frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
⑥noresize
设置框架大小是否能手动调节。
⑦marginwidth
设置框架边界和其中内容之间的宽度。
⑧marginhight
设置框架边界和其中内容之间的高度。
⑨width
设置框架宽度。
⑩height
设置框架高度。 - 用例
<frame src="???" name="topFrame" scrolling="No" noresize="noresize" marginwidth="10" marginhight="10" width="400" height="800" />
三、iframe
是浮动的框架（frame），其常用属性与frame类似，其他的主要有以下（相同的就不列举了）
- 属性
①align
设置垂直或水平对齐方式
②allowTransparency
设置或获取对象是否可为透明。 - 用例
<iframe name="123" align="middle" marginwidth="0" marginheight=0 src="???" frameborder="0" scrolling="no" width="776" height="2500"></iframe>
注意：
iframe标签与frameset、frame标签的验证方法不同，是XHTML 1.0 Transitional。且iframe是放在body标签之内，而frameset、frame是放在body标签之外。
【说明】
<noframes></noframes>标志对也是放在<frameset></frameset>标志对之间，用来在那些不支持框架的浏览器中显示文本或图像信息。
在此标志对之间先紧跟<body></body>标志对，然后才可以使用我们熟悉的任何标志。
