logo资料库

web前端基础学习笔记.docx

第1页 / 共32页
第2页 / 共32页
第3页 / 共32页
第4页 / 共32页
第5页 / 共32页
第6页 / 共32页
第7页 / 共32页
第8页 / 共32页
资料共32页,剩余部分请下载后查看
一、HTML
1、HTML简介
1.1、网站和网页
1.2、HTML介绍
1.3、HTML标签的语法
1.4、标签的分类
2、HTML常用标签
2.1、HTML结构
2.2、文本标签
2.3、图片标签
2.4、超链接
2.5、列表
2.6、表格
2.7、刷新/跳转
2.8、滚动
2.9、表单
2.10、头标签
2.11、框架
2.12、其他标签
2.13、发布站点(补充)
2.14、自动检测访问设备
2.15、自动跳转
二、CSS
1、CSS基础
2.1、CSS简介
2.2、CSS和HTML的结合方式
2.3、CSS选择器
2.4、CSS样式优先级
2、CSS常用属性
2.1、文字修饰
2.2、文本修饰
2.3、盒子模型
2.4、定位
2.5、层叠顺序
2.6、列表样式
2.7、元素溢出
2.8、圆角
2.9、滚动
2.10、盒子模型
三、JavaScript
1、JavaScript简介
1.1、什么是JavaScript
1.2、JavaScript的特点
1.3、JavaScript和Java的区别
1.4、JavaScript的组成
2、JavaScript用法
2.1、js和html的结合方式
2.2、JavaScript输出
2.3、JavaScript语法
2.4、JavaScript数据类型
2.5、JavaScript变量
2.6、运算符
2.7、JavaScript的流程控制
3、JavaScript数组
3.1、数组的声明
3.2、常用属性
3.3、常用方法
4、函数
4.1、函数的声明
4.2、方法重载
4.3、闭包
4.4、回调函数
5、JavaScript事件
5.1、鼠标事件
5.2、键盘事件
5.3、表单事件
5.4、剪贴板事件
6、JavaScript对象
6.1、创建对象
6.2、String对象
6.3、Date对象
6.4、Math对象
6.5、Number对象
6.6、JavaScript全局函数
7、Browser对象
7.1、Window对象
7.2、Navigator对象
7.3、Screen对象
7.4、History对象
7.5、Location对象
8、DOM对象
8.1、DOM简介
8.2、解析HTML文档
8.3、DHTML介绍
8.4、document对象
8.5、Element元素对象
8.6、Node对象
8.7、操作dom树
一、HTML 1、HTML 简介 1.1、网站和网页 网页是使用 HTML 标记语言编写的一个文件,描述同一范畴内的信息或数据 组成的网页集合,称为网站。 1.2、HTML 介绍 超文本标记语言:  超文本:超出了纯文本的范围,比如,图、声、像、文字样式颜色的修 改;  标记:即标签,使用某种标签来表示某种特定的意义,举例: <标签名> ,标签名是预定义的英文;  语言:是属于计算机编程的范畴,属于编程语言; 1.3、HTML 标签的语法 可以在开始标签名后面添加属性,以此来设置文本样式,属性的语法 <标签名 属性名=”属性值” 属性名=”属性值” ……> 文本 1.4、标签的分类  单标签:只有一个标签,一般把结尾的斜杠放到标签内的最后面;  双标签:有开始,有结尾,属性设置在开始标签内; 2、HTML 常用标签 2.1、HTML 结构
2.2、文本标签  文本修饰 font:修饰文字内容,属性:color、size、face; b:字体加粗; s:删除线; i:斜体; sub:下标; sup:上标; strong:强调;  段落 h(1-6):标题标签; p:段落; hr:分割线,属性:size(高度)、width(宽度)、color、align; center:内容居中 2.3、图片标签 img:图片,属性:src(路径)、width、height、border(边框)、title(鼠标悬 停提示)、alt(图片描述); 2.4、超链接 a:超链接标签,属性:href(网址)、target(打开方式)、title(鼠标悬停提 示)、name(定位锚点),功能:链接网络资源、本地定位;
2.5、列表 ul-li:无序列表,属性:type(符号的样式); ol-li:有序列表,属性:type、start、value; dl-dt-dd:自定义列表; 2.6、表格 table:表格根标签,属性:border(边框)、width、height、align; tr:一行; td:一列,属性:rowspan(合并行)、colspan(合并列); th:标题; 2.7、刷新/跳转 2.8、滚动 This is a slide effect 2.9、表单 文本框: 密码框: 单选按钮: 女 复选框:
敲代码 编程 Java 文本域: 下拉框: 文件选择器: 日期选择器: 颜色选择器: 数字输入框: 带数据的输入框:
提交按钮: 重置按钮: 2.10、头标签 title:标题; meta:配置信息,属性:name; link:引入外部文件; 在 title 里添加图标: script:JavaScript 脚本程序; style:css 代码; base:对超链接的全局设置; 2.11、框架 iframe:内联框架 frameset-frame:使用该框架结构时,要删除 body 标签;
2.12、其他标签 pre:原文输出; code:在页面中添加代码; video:添加视频; embed:添加音频; 2.13、发布站点(补充) 必要元素:服务器、域名 步骤:  申请域名和服务器  解析域名  把域名绑定到服务器上  使用 FTP 上传项目  完成 网站前台:是给用户展示网站信息的界面; 网站后台:是网站管理员对网站数据做增删改查的操作界面; 2.14、自动检测访问设备 2.15、自动跳转 选择器 { 属性名:属性值; 属性名:属性值; …… } 2.2、CSS 和 HTML 的结合方式  在 HTML 标签中的 style 属性里添加 CSS 代码;  在头标签中添加  在头标签中使用标签导入外部 CSS 文件: 2.3、CSS 选择器  使用标签名作为选择器;
 使用 HTML 标签中的 class 属性作为选择器: p.a{ color: red; }  使用 HTML 标签中的 id 属性作为选择器: #test{color: pink; }  CSS 选择器的优先级: HTML 标签中的 style 属性 >  扩展选择器: id 选择器 > class 选择器 > 标签选择器  关联选择器:当 HTML 标签之间存在嵌套关系时

选择器:p font{}  组合选择器:要对 HTML 中多个标签设置同样的样式,

选择器:p,font{}  伪元素选择器:是 HTML 预定义好的元素 /*未被访问过*/ a:link{ color: black; } /*鼠标悬停*/ a:hover{ color: red; } /*点击鼠标,没有释放时*/ a:active{ color: darkmagenta; } /*访问过后*/
分享到:
收藏