day32（12.12):web页面组成：准备阶段html和DOM了解(上)

HTML
1.html是什么？
2.为啥要了解？

页面组成
常用HTML+CSS+java+script
HTML:
定义页面呈现的内容

CSS：
Cascading Style Sheets
控制你的网页该如何呈现。即布局设置
比如字体颜色、字体大小、在页面呈现的大小等。
Javascript：
如果你希望你的网页依据不同的情形做不同的事情呢？
需要一门编程语言。javascript就是其中一种。

HTML-标签对
一个标签（也叫元素）：标签名、属性、文本内容。
1.标签名：表示是什么内容？图片？按钮？文本输入？单选框？下拉列表？复文本域？段落？
2.属性：元素有什么特征？id?name?class?style?
3.文本内容：呈现在页面中的文字。也是元素的特征，独立于属性
比如：百度的页面 按F12

常见的元素：
html、head、body、div、p、img、a、input、button、iframe、select/option、extarea、h1
w3school学习地址：https://www.w3cshool.com.cn/html/index.asp

DOM对象&&Javascript
DOM（Document Object Mode）是定义了访问HTML文档的一套属性、方法和事件
本质：
网页与脚本语言沟通的桥梁
脚本语言通过DOM对象来访问html页面，从而改变文档的结构，样式和内容
当浏览器载入HTML文档，它就会成为document对象
HTML DOM独立于平台和编程语言
它可以被任何编程语言诸如Java、Javascript和VBScript使用。
HTML DOM树
javascript编程基础
1.变量的表达：var 变量名=值
列表：var he=[a,b,c,d] he[1]
字典：var hei={“name”:“value”,“sex”,“unknown”} hei.key
2.函数的表达：function 函数名（参数1，参数n）{函数体；return 值}
function add(a,b){c=a+b;return c;}
调用：add(11,22)
3.js的三种自带弹框：警告框、确认框、提示框

DOM对象操作页面：
两个顶级节点：
windows：表示当前打开的浏览器窗口。
document:表示窗口中显示的当前html页面。
Document对象是Windows对象的一部分，可通过windows、document属性对其进行访问。
1.查找元素、访问元素
元素的id属性：
document.getElementByle("")
元素的class属性：
document.getElementsByClassName()
元素的标签名：
document.getElementByTagName()
元素的name属性：
document.getElementByName()
css选择器：
document.querySelector(css)

2.修改元素的属性
获取属性：
1）document.getElementByXXX("").属性名
2）document.getElementByXXX("").getAttribute(属性名)
改变属性
1）document.getElementByXXX("").属性名=属性值
2）docuemnt.getElementByXXX("").属性名=属性值
改变样式
document.getElementByXXX("").style.样式名=样式值

3.事件
浏览器和用户事件-触发-执行js代码带来的不同的页面响应
例如：点击事件、输入事件、鼠标事件等

#页面加载完成事件
window.οnlοad=function(){
}