html文档等于网页
HTML中文名超文本标记语言
html不是编程语言是标记语言
html可以使用标记标签展现网页
<html>文本描述网页</html>
<body>之间的文本是可见的页面内容</body>
CSS
css规则主要是由两个部分组成:选择器,以及一条或多条声明
比如:h1{ color:blue; font-size:20px;}
h1:选择器 color:属性 blue:属性值
元素分为块元素和内联元素(行元素) 两个元素可以转换,比如display:block/display:inline
在同一级别中要么是块元素,要么是行元素
行内元素不会由CSS决定,而是由其内容决定
比如
<div>
<p></p>
<a></a>
</div>(这种写法是错误的)
<style>
p.bottom{margin-bottom:25%;}
</style>
<body>
<p class="bottom">这是一段文字</p>
</body>
padding(填充)
定义的是元素内容和元素边框之间的空间,即上下左右的内边距
当padding(填充)内边距被清楚掉时,所释放的区域将会受到元素背景的填充
单独是用Padding填充时,可以单独改变上下左右的填充。
length:定义一个固定元素的填充(像素,PT,em 等)
%:也可以使用百分比进行填充
属性值写法分为四种padding:25px,50px,75px,100px;
上填充为25px
右填充为50px
下填充为75px
左填充为100px(写法顺序都是如此)
CSS分组嵌套
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
所有CSS的尺寸属性
height 设置元素的高度
line-height 设置行高
max-height 设置元素的最大高度
min-height 设置元素的最小高度
max-wight 设置元素的最大宽度
min-wight 设置元素的最小宽度
<style>
</style>
<body>
<p> 怎么了,你累了说好的幸福呢</p>
<div class="first">
<p>这是class first 给所有元素添加的样式</p>
<h1>这是指定的</h1>
</div>
</body>
CSS display(显示)与visibility(可见性)
dispaly属性设置一个元素应如何显示,visibility属性指定一个元素是可见还是隐藏
隐藏元素:display:none或者visibility:hidden
其中前者隐藏且不占据位置空间,后者虽然隐藏但是依旧占据位置空间
JS
JS必须在HTML中的<script></script>标签之间
脚本可以被放置在<body><head>部分中
如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript
<script>
document.write(<p> 怎么了你累了</p>)
Windows.alert(5+6);
</script>
JS的输出:
JS可以通过四种不同的方法输出数据
使用windows.alert()弹出警告框
使用document.write()方法将内容写到HTML文档中
使用innerHTML写入HTML元素中
使用console.log()写入到浏览器的控制台
document.getElementById("demo").innerHTML("文字");
document.getElementById("demo").innerHTML=5+5;
JS的变量
Javascript中使用关键字var定义变量,然后使用等号=为这个变量赋值
<p id="demo"></p>
<script>
var=length;
length=6;
document.getElementById("demo").innerHTML=length;
</script>
变量是一个名称,字面量是一个值
变量可以通过变量名访问 ,再指令式语言中变量通常是可变的,字面量是一个恒定的值
<p id="demo"></p>
<script>
var a=1;
b=2;
c=a+b;
document.getElementById("demo").innerHTML=c
</script>
变量是存储信息的容器
实例
var x=2;
var y=3;
var z=x+y;
就像代数那样
x=2
y=3
z=x+y
在代数中国,我们 使用字母(比如X)来保存值(比如2)
通过上面的表达式z=x+y,我们能够计算出z的值为5
在JAVASCRIPT中,这些字母我们成为变量
变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。
JS中有很多类型的运算符:
赋值,算术和位运算符= + - * /
条件,比较及逻辑运算符== != <>
当你向变量分配文本值的时候,应该用双引号或者单引号包围这个值
当你向变量赋的值是数值时,不要用引号包围
var pi=3.14
var name="Bill gates"
var answer=" yes i am"
用var声明变量 var name 但是这个变量值是空的(他没有值)
所以要给他赋值 用=
var x=2;
var y=3;
var z=x+y;
JS的数据类型
var length = 16; // Number通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值
Js中的是常见的驼峰命名法则
布尔(逻辑)只能有两个值:true 或 false。
JAVASCRIPT数组
var cars=new Array()"Audi","BMW","Volvo";
JS对象
对象由花括号分隔,在括号内部,对象的属性以名称和值对的形式(name:value)来定义。属性由逗号分隔;
var person={firstname:"john",lastname:"doe",}
语句 描述
break 用于跳出循环。
catch 语句块,在 try 语句块执行出错时执行 catch 语句块。
continue 跳过循环中的一个迭代。
do ... while 执行一个语句块,在条件语句为 true 时继续执行该语句块。
for 在条件语句为 true 时,可以将代码块执行指定的次数。
for ... in 用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。
function 定义一个函数
if ... else 用于基于不同的条件来执行不同的动作。
return 退出函数
switch 用于基于不同的条件来执行不同的动作。
throw 抛出(生成)错误 。
try 实现错误处理,与 catch 一同使用。
var 声明一个变量。
while 当条件语句为 true 时,执行语句块。