02-前端基础

1. HTML基础

• HTML是用来控制网页的结构的，由于语法比较简单，但是功能标签过多，在此处不做记录，推荐上W3CSchool进行系统性学习

2. CSS基础

2.1 CSS导入方式

• 内联样式:在标签内部使用style属性,属性值是css属性键值对

<div style ="color:red" >hello css!</div>

• 内部样式:定义style标签,在标签内部定义css样式

<div style ="color:red" >hello css!</div>
<style type="text/css">
    div{
        color:red;
    }
</style>

• 外部样式:定义link标签,引入外部的css文件

<link rel = "stylesheet" href="precss.css">

2.2 CSS选择器

• 元素选择器:元素名称{color:red;},例如div{color:red},将该页面下的所有div元素都设置上该style
• id选择器:#id属性值{color:red;},例如<div id= "name">hello world!</div>
• 类选择器:.class属性值{color:red;}

.cls{color:red;}
<div class ="cls"> hello world!</div>

2.3 CSS属性

参考W3CSchool

3.javascript

3.1 自定义对象的写法

var person = {
    name:"zhangsan",
    age:23,
    eat:function (){
        console.log("I am eating");
    }
}

3.2 BOM(Browser Object Model)对象–浏览器模型对象

• javascript将浏览器的各个组成部分封装为对象
  • Window浏览器窗口对象
  • Navigator浏览器对象
  • screen屏幕对象
  • History历史记录对象
  • Location地址栏对象

//案例实现:循环打印1,2
function outOne(){
    console.log(1);
}
function outTwo(){
    console.log(2);
}
var count = 0;
setInterval(function () {
    if(count%2 == 0){
        outTwo();
    }else{
        outOne();
    }
    count++;
},1000)

history.go();//前进到历史列表的上一个url
history.back();//后退到历史列表的上一个url
console.log(location.href);//获取当前url

3.3 DOM(Document Object Model)文档对象模型

• 将标记语言的各个组成部分封装为对象

  • Document:整个文档对象
  • Element:元素对象
  • Attribute:属性对象
  • Text:文本对象
  • Comment:注释对象

• DOM本身是对HTML/CSS文件的一个抽象,通过该抽象可以通过js对HTML/CSS进行修改

  • 改变HTML元素的内容
  • 改变HTML元素的样式(CSS)
  • 对HTML-DOM事件做出反映
  • 添加和删除HTML元素

<p id = "demo">
    js改变文本内容
</p>
<script>
    function(){
        document.getElementById("demo").innerHTML="hello javaScript";
    }
</script>

3.4 事件监听

• 事件:HTML事件指的是发生在HTML元素上的事情
  • 按钮被点击了
  • 鼠标移动了元素之上
  • 按下键盘按键
  • js可以侦测到HTML的事件的发生
• 事件绑定的方法

    <input type="button" onclick="outOne()" id = "test">
    document.getElementById("test").onclick = function () {
    outOne();
}