1、1讲 html 介绍 html 运行原理Html + css 四天Html是什么1. html (hypertext mark-uplanguage)是 超文本标记语言, 主要的用处是做网页, 可以在网页上显示 文字、图像、视频、声音 标记=元素简单说明一下动态网页的示意图:Html历史1999 html- xhtml (xhtml 可以理解成就是 html的加强版) -xml|2008 html5.0u W3c的介绍是一个制定标准的组织 ( 比如 给 html ,xhtml ,css ,xml , wml制定标准) 不同的浏览器，去访问同一个网页，可能看到的效果是有差别!-hackHtml的
2、运行原理Hello.htmlHtml的运行有两种方式Html文件的基本结构1.本地运行所谓本地运行就是直接用 浏览器打开2讲 html 运行原理 html 文件基本结构 html 元素和属性2. 远程访问l 何为协议? 计算机互相通信(网络)的规则. ftp smtp pop http远程访问的原理示意图: 这里我们涉及到 http协议，这里我们没有深入讲解， 但是这是一个非常重要的知识点.Html的基本结构内容说明1. 标记通常是成对出现 2. 单标记 案例:Demo1.htm横看成林远近高低各不同不知庐山真面目面试: 请问后缀 html 和 htm 有什么区别?答: 1. 如果一个网站有
3、index.html 和 index.htm 默认情况下，优先访问 .html3. htm 后缀是为了兼容以前的 dos 系统 8.3的命名规范3讲 符号实体 url 说明 超链接 发送电邮html符号实体说明：当我们在网页中有一些特殊字符时候，可以考虑使用字符实体(char entity)超链接的案例:*连接到a.html跳转到百度联系管理员4讲 图像 表格 实际应用-菜谱 课堂练习-课程表图片:Html的表格元素在以前对网页布局要求不高的情况下，使用 table 布局(即使用表格来显示数据，同时用于布局)快速入门:12324539103910应用案例 ：1. 确定行代码 如下:123245
4、39103910菜谱素菜青草茄子花椒扁豆小炒韭菜白豆腐荤菜清蒸龙鱼香肉丝小炒肉 水煮肉片课堂练习:5讲 无序列表 有序列表 框架俺第一个实例成绩表项目上课休息星期星期一星期二星期三星期四星期五星期六星期日上午语文数学英语英语物理计算机休息数学数学地理历史化学计算机化学语文体育计算机英语计算机政治英语体育历史地理计算机1下午语文数学英语英语物理计算机休息数学数学地理历史化学计算机无序列表案例:代码:英雄精武门西游记 type 可以取 disc 、 circle 、 square有序列表代码:卢俊义吴用林冲 type 用于指定用什么来显示,start 表示从第几开始计算.6讲 浮动窗口 表单及表单
5、控件Frameset框架集用途主要是用于分割显示多个页面 framest 和 frame 配合使用，一般讲是用于后台页面快速入门:代码A2.html 页面用于保护其它页面 该页面不能有 body和 body体b.html周杰伦齐秦 target 属性值有四个_blank : 表示打开一个全新的页面_self: 替换本页面_top:_parent:* 还有一个就是在 target 值中直接写对应的那个 frame 的名字.c.html:歌词大全其它页面Frameset的综合小案例:结构示意图:案例All.htmlTop.htmlLeft.html青花瓷当兵的人Right.html歌词大全晚上的练
6、习:1. 按照笔记走一遍2. 作业2.1做一个自己的网页，显示自己的基本信息：姓名、性别等（注意使用文本格式标记，要做得好看啊） ，并显示自己的照片（图象的标记还记得吗？）2.2. 普通邮箱Iframe的使用有时我们需要，在一个含有的页面嵌入另外一个页面，形成画中画的效果,怎么处理-iframe 元素(浮动窗口)入门案例Iframe.htmlhello,world连接到taobao连接到 kk.html表单元素为什么需要 ？看一个图:从上图可以看出，我们需要把一些数据提交给服务器处理,比如注册用户,发帖,这样就需要使用到表单元素( 常见 输入框、单选框、复选框、文本域、密码框、上传文件。 。
7、。)基本结构一般说，表单元素通常是被 包含起来的Abc:U:入门案例:Login.html登录页面用户名:密 码:Ok.htmlOk,登录成功原理图:请考虑： 如果我们希望偷偷的提交数据,不要影响节目效果，可以考虑使用隐藏域7讲 表单及表单控件25 秒前 上传下载附件 (27.43 KB)案例代码:表单元素您最喜欢哪些城市:北京上海伦敦您的性别是:男女隐藏域的使用下拉列表请选择您的出生地:四川北京西藏上传文件课堂练习:8讲 多媒体页面 标签汇总 地图映射多媒体我的电影网站照着 html文档，我们对 html在加强一把图像映射技术:案例:9讲 多标签汇总 线包字效果 测试题代码: 审核状态已经审
8、核没有审核全部10讲 div+css 开山篇Div+css 是什么?Div+css 是一种目前比较流行的网页布局技术Div 来存放需要显示的数据(文字，图表) , css 就是用来指定怎样显示， 从而做到数据和显示相互的效果原理图如下 ：有时后，我们也可能把 css直接嵌入到 html文件中，这种方式称为内联 css基本语法:选择器属性: 属性值;我们可以简单的这样理解 div+css:div 是用于存放内容(文字,图片,元素)的容器。css 是用于指定放在 div中的内容如何显示,包括这些内容的位置和外观.快速入门案例(体验案例)Demo.htmlcss入门小案例My.css.style1/
9、*宽度 */width: 400px;height: 300px; /*一定要写一个分号*/background-color:silver;border:1px solid red;margin-left:400px;margin-top:250px;padding-top:20px;padding-left:40px;网页设计的三个时期 table 网页设计 table+css 网页设计 div+css 网页设计11讲 初识 css 类选择器 id 选择器 html 选择器css使用必要性1. 可以很好的统一网站的显示风格.css使用的基本语法选择器属性1: 属性值;属性2: 属性值;.Ht
10、ml文件:栏目一栏目二栏目三栏目四栏目五Css文件 ：/*.s1 用术语 类选择器*/.s1color: blue;font-size: 30px;font-style:italic;text-decoration:underline;.s2color:yellow;font-size:12px;.s3color:blue;font-style:italic;.s4color:green;font-weight:bold;.s5color:#9C3131;Css必要性2 可以使用滤镜a:link imgfilter:gray;a:hover imgfilter:“;Css中 常用 的四种选择器
11、1. 类选择器(class 选择器)基本使用.类选择器属性名: 属性值;.2. id选择器基本使用#id选择器属性名: 属性值;.案例:/*id选择器的使用*/#id1background-color:silver;font-size:40px;3. html元素选择器某个 html元素属性名:属性值;TablePButton/对 html元素样式分类P:cls需求人员(技术+行业背景)财务软件(php,c+)-用友4. 通配符选择器 css 文件可以使用在各种文件(php,html,jsp,asp)*12讲 通配符选择器 父子选择器1. 通配符选择器 css 文件可以使用在各种文件(php,
12、html,jsp,asp)*案例:再比如，我们希望所有的超链接(1)默认样式是 黑色，24px,没有下划线(2)当鼠标移动到超链接时，自动出现下划线(3)点击后,超链接变成 红色。这又该怎么实现呢? test.htmla:linkcolor:black;text-decoration:none;font-size:24px;a:hovertext-decoration:underline;font-size:40px;color:green;a:visitedcolor:red;/*对同一中 html元素分类*/p.cls1color:blue;font-size:30px;p.cls2col
13、or:red;font-size:20px;通配符选取器该选择器可以用到所有的 html元素,但是其优先权最低*属性名:属性值;. 四个选取器优先权Id选择器 class 选择器 html 选择器 通配符选则器了解-细节-深入了解-应用项目选择器的细节问题!1. 父子选择器使用:/*父子选择器*/#id1 spancolor:red;font-style:italic; 上面选择器的含义是:在 id 选择器为 id1 的子 元素 span 的样式就是。 。 。 。xxxxxX xx#id1 span span color:green;#id1 span span acolor:blue;通过上面总结: 父子选择器可以有多级(但是在实际开发中不要过三层) 父子选择器有严格的层级关系13讲 选择器使用细节 块元素和行内元素 盒子模型 盒子模型经典应用通过上面总结:
