HTML & CSS & JavaScript复习
目录
HTML
HTML概述
HTML（超文本标记语言，Hyper Text Markup Language）是一种描述性标记语言，用来描述页面内容的显示方式；
HTML文件是一种纯文本文件，以“.html”或“.htm”为后缀。
HTML的基本组成单位是元素，语法结构如下：
[code]<标签> 内容 <标签>
HTML文档结构:
[code]<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>网页标题</title> </head> <body> 网页主题部分 </body> </html>
HEAD元素
<head>中可以包含以下子元素：<title>、<meta>、<base>、<link>、<script>以及<style>等
文本元素
内容标题：<h1><h2><h3><h4><h5><h6>
文本修饰:<font>文本字体样式、<b>加粗、<i>斜体、<sup>上标、<sub>下标、<strong>加粗、<big>小字体、<small>大字体
特殊字符: 空格、<小于号、>大于号、&le小于等于、&ge大于等于、©版权号
文档结构元素
段落标签：<p> 内容 </p>
换行标签：<br />
水平线标签：<hr />
列表元素
有序列表：
[code]<ol> <li>列表项 1</li> <li>列表项 2</li> ...... </ol>
无序列表：
[code]<ul type="类型"> <li>列表项 1</li> <li>列表项 2</li> ...... </ul >
定义列表：
[code]<dl> <!-- 第1项开始 --> <dt>标题 1</dt > <dd>描述 1</dd> <!-- 第1项结束 --> <!-- 第2项开始 --> <dt>标题 2</dt > <dd>描述 2</dd> <!-- 第2项结束 --> <!-- 第3项开始 --> ...... <!-- 第3项结束 --> </dl >
div与span标签
<div>块级元素，作用于某一特定区域
<span>行级元素，作用于特定文本
URL（统一资源定位符）
URL包含3个关键部分：协议、主机地址和文件路径
例：http://www.itshixun.com/web/index.html 其中http://为协议，www.itshixun.com为主机地址，/web/index.html为文件路径
绝对路径：一个完整的路径。例：http://www.itshixun.com/movie/index.html
相对路径：非完整路径。访问形式有统一目录、子目录、父目录、根目录
图像标签
[code]<img src="url" alt="" .../>
src：图像地址，可以是就对URL，也可以是相对URL
alt：图像的文本描述，浏览器无法显示图像时，该文本作为图像的替代
heigth：指定图像的高度，可以是固定值，也可以是百分比
width：指定图像的宽度，可以是固定值，也可以是百分比
align：图像的对齐方式：top bottom middle left right
border：指定图像边框的宽度
超链接标签
[code]<a href="url" name=" " target=" ">链接内容</a>
常见的超链接类型：文本链接、锚点链接、图像链接、图像热区链接、Email链接、JavaScript链接、空链接
锚链接：
[code]<a id="myAnchor">这里是我创建的锚点位置</a> <!--推荐使用--> <a name="otherAnchor">这里是我创建的锚点位置</a> <a href="#myAnchor">链接到锚点位置</a>
跨页面的锚点链接：href属性由“目标页面的绝对路径（或相对路径）”+“#”+“目标锚点名称”构成
[code]<a href="/chapter01/anchorLinkDemo.html#myAnchor">锚点位置</a>
JavaScript链接：
[code]<body>
<a href="JavaScript:alert('你好，欢迎来到Web前端设计课堂');">
JavaScript链接，弹出提醒信息。
</a>
<a href="JavaScript:void(0);" onClick="alert('欢迎来到Web前端设计课堂');">
JavaScript链接，弹出提醒信息。
</a>
</body>
target属性可以改变目标文档的显示窗口
CSS
CSS概述
样式是CSS的基本单元，每个样式包含两部分内容：
选择器：用于指明网页中那些元素应用此样式。
声明：每个声明由属性和属性值两部分构成，并以英文分号（;）结束
CSS基本格式：
CSS样式有以下三种格式：内嵌样式、内部样式和外部样式。
链接外部样式表
在HTML中<link>标签用于将文档与外部资源进行关联，经常用于链接网页的外部样式表.
<link type="text/css" rel="stylesheet" href="url" />
[code]<html> <head> <title>链接外部样式表的使用</title> <link type="text/css" rel="stylesheet" href="css/style.css" /> </head> <body> <h1>链接外部样式表的使用</h1> <hr/ > </body> </html>
样式表的优先级
下列是一份优先级逐级增加的选择器列表：
- 通用选择器（*）
- 元素(类型)选择器
- 类选择器
- 属性选择器
- 伪类
- ID 选择器
- 内联样式
- !important 规则例外
解释：
1. 内联样式表的权值最高 1000；
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
CSS选择器
1、基本选择器
- 通用选择器 *{ } *{ font-size:12px; color:red;}
- 标签选择器 p{ font-family:楷体; }
- 类选择器 .classname{ property1:value; … }
- ID选择器 #idValue{ property1:value; … }
选择器之间也存在优先顺序，优先级从高到低分别是：“ID选择器>类选择器>标签选择器>通用选择器”
2、组合选择器
- 多元素选择器 p,div {font-size:14px; color:blue; }
- 后代选择器 div p {background-color:#CCC; }
- 子选择器 div > p {font-weight:bold;border: solid 2px #066;}
- 相邻兄弟选择器 selector1 + selector2 + ... {... }
- 普通兄弟选择器 元素与元素之间不必直接紧随；选择器之间使用波浪号（~）隔开。
3、属性选择器
- 存在选择器
- 相等选择器
- 包含选择器
- 连字符选择器
4、伪类选择器
伪类以冒号（：）开始，在类型选择符与冒号之间不能出现空白，冒号之后也不能出现空白。
CSS样式属性
文本属性
字体属性
背景属性
分类属性
盒子模型
盒子模型是由内容（content）、边框（border）、内边距(padding)和外边距(margin)四部分组成。
JavaScript
JavaScript简介
JavaScript是一种脚本语言，可以直接嵌入HTML页面之中，当用户在浏览器中预览该页面时，浏览器会解释并执行其中的JavaScript脚本
JavaScript是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的客户端脚本语言，其特点如下：
- 解释性
- 嵌套在HTML中
- 弱数据类型
- 跨平台
- 基于对象
- 基于事件驱动
JavaScript使用形式
在页面中使用JavaScript脚本的形式有以下三种：
行内JavaScript脚本
[code]<body>
<h1>校园评选活动</h1>
<img src="images/girl1.jpg" onclick="alert('你选择了一号种子选手')"/>
<img src="images/girl2.jpg" onclick="alert('你选择了二号种子选手')"/>
<img src="images/girl3.jpg" onclick="alert('你选择了三号种子选手')"/>
<a href="javascript:alert('请等待评选结果，谢谢');">查看评选结果</a>
</body>
内部JavaScript脚本
[code]<head>
<script type="text/javascript">
alert("head中的JavaScript");
</script>
</head>
<body>
<script type="text/javascript">
alert("body中的JavaScript");
</script>
</body>
外部JavaScript脚本
[code] <script type="text/javascript" src="js/test.js"></script>
基本语法
标识符：用来命名变量、函数或循环中的标签，命名规范如下：
标识第一个字母必须是字母、下划线、或美元符号
标识符区分字母的大小写，推荐使用小写形式或骆驼命名法
标识符由数字、字母、下划线（_）、美元符号（$）构成
标识符不能与JavaScript中的关键字相同
关键字：是指JavaScript中预先定义的、有特别意义的标识符。
数据类型：
变量：JavaScript中的变量是弱数据类型，使用var对变量进行声明
注释
单行注释：
[code]//注释内容
多行注释：/* 注释内容 */
[code]/* 工资统计函数 * base：基本工资 * bonus：奖金 */
运算符
- 赋值运算符
- 算术运算符
- 比较运算符
- 逻辑运算符
- 三元运算符
流程控制
分支结构（if和switch）
循环结构（while、do while和for等）
break、continue、return等转移语句
函数
在JavaScript中，函数可分为预定义函数和用户自定义函数。
预定义函数：
自定义函数
1、命名函数：函数是由函数定义和函数调用两部分组成。在使用函数时，应先定义函数，然后再进行调用。
[code]function funcName([parameters]){
statementes;
[return expression];
}
2、匿名函数
[code]function ([parameters]){
statementes;
[return expression];
};
<script type="text/javascript">
var f=function(user){
alert("欢迎"+user+"来到漫步时尚广场");
}
var test=f;
f("admin");
test("admin");
</script>
3、对象函数
4、自调用函数：函数本身不会自动执行，只有调用时才会被执行，在JavaScript中，提供了一种自调用函数，将函数的定义与调用一并实现。
[code](function([parameters]){
statementes;
[return 表达式];
}) ([params]);
<script type="text/javascript">
var user=“admin";
(function(userData){
alert("欢迎"+ userData +"来到漫步时尚广场");
})(user);
</script>
- 点赞 1
- 收藏
- 分享
- 文章举报
luoriwang
发布了2 篇原创文章 · 获赞 1 · 访问量 32
私信
关注
- html+css复习之第2篇 | javascript
- Web前端知识复习（HTML，CSS，JavaScript）
- CSS、JavaScript、html相关知识复习（不定期更新，注定逻辑混乱毫无章法，不适合做入门资料纯当业余吐槽）
- 不水好好学——HTML、CSS、Javascript之间的联系
- HTML&CSS&Javascript基础
- HTML+CSS+javaScript基础知识（四）
- HTML/CSS/Javascript代码在线压缩、格式化(美化)工具
- html、css、javaScript练习题
- 利用html、css、javascript、php同时交互数据库制作的注册登录界面
- Web 建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 区别
- HTML,CSS和JAVASCRIPT入门经典 笔记(二)
- HTML+CSS+Javascript 实现简单计算器
- html+css+jQuery+JavaScript实现tab自动切换功能
- 实现Javascript/css与HTML的分离
- 了解HTML、CSS、JavaScript的使用和关系
- 【HTML+CSS+JavaScript】网页实战开发笔记之一——HTML的头部信息里你不知道的事
- HTML、XML、CSS、JavaScript、JSP注释详解
- HTML、javascript与CSS
- HTML/CSS/Javascript代码在线压缩、格式化(美化)工具
- 剔除html中style,javascript,css代码