前台html_css_js极速入门.pptVIP

网站开发技术实战培训---第一课：前台html css js极速入门 课程内容 1、Html、css、js简要介绍（5min） 2、Html基本语法结构介绍（5min） 3、Html标签元素样式及布局定位举例（15min） 4、Html与css：内容与样式分离（10min） 5、javascript动态修改样式举例（5min） 6、Jquery动作绑定举例（5min） 7、实战1：huodong.ustc.edu.cn首页制作（35min） 8、实战2：制作有透明背景的弹出框（10min） 1、前台Html、css、js简要介绍 HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 1、前台Html、css、js简要介绍 CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 1、前台Html、css、js简要介绍 JavaScript概述 JavaScript 被设计用来向 HTML 页面添加交互行为。 JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。 JavaScript 由数行可执行计算机代码组成。 JavaScript 通常被直接嵌入 HTML 页面。 JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。 1、前台Html、css、js简要介绍 关系 Html控制 要输出哪些内容 ，并给内容打上标签 Css通过html的标签来控制输出内容的样式和位置 Js可动态修改样式或html中的标签及内容：即动作 Html ? 显示什么内容 Css ? 内容显示成什么样子 Js ? 动作：不同情况下不一样的内容和样子 2、 Html基本语法结构介绍 html基本格式 标签名 属性标签包含的内容/标签名 例如： div style=“color:red;”你好！秋/div 浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容： 2、 Html基本语法结构介绍 html head tittle标题/tittle …… /head body div 内容1 /div h1 内容2 /h1 p 内容3 /p …… /body /html html 与 /html 之间：网页全部信息 head 与 /head 之间：网页说明信息 tittle 与 /tittle 之间：浏览器标题 body 与 /body 之间：可见的网页内容 2、 Html基本语法结构介绍 3、Html元素样式及布局定位举例 先讲规则原理， 再用代码写出符合规则的布局和样式 常用规则和代码均极其简单 不以书上标准名词讲解， 采用通俗、俗气的名词叫法， 先让大家能理解，能写， 然后大家再去看书，去系统、规范学习，去提高技能 3、Html元素样式及布局定位举例 要显示的内容必须放在 body 中。 Body是个大硬盒子， 盒子中可以放其它盒子 盒子中可以放袋子 盒子是硬的，有长宽高属性，默认独占一行 袋子是软的，袋子没有长宽高属性，不独占一行 袋子中不能放盒子（标准中规定），但浏览器多支持此非正规写法，建议不要常用 Display可以使标签元素在 盒子和袋子间改变 Display ：block块元素（盒子），inline内联元素（袋子）；各种标签默认的display属性不同 Float可以使块级元素（盒子）不独占一行 Html元素样式及布局定位举例 开始例子， 边做边学 后面ppt作为提示和讲解属性用 3、Html元素样式及布局定位举例 盒子的主要属性： 宽（width）高（height）边框（border）外边距（margin）内边距（padding）背景（background）内部内容样式（对齐方式 字体 颜色 等 ） 设置的宽高仅仅是是 content的宽高 （ ie6及以前是全部的宽高，即外部虚线部分包含的区间 宽高） 设置的背景是包含 padding 和 content的部分的背景 3、Html元素样式及布局定位举例 袋子的主要属性： 没有宽高属性， 没有上下边距， 没有内部内容的对齐方式