![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：完成的很不错, 代码也简洁, 不要缺课, 继续
Collection
Collection
HTML的文档结构
<!--文档类型--><!DOCTYPE html><!--根元素--><html><!--头元素--><head><!--head元素下包含的元素是元数据、如title、link、style、meta--><title>demo1</title><meat charset='utf-8'><meta> 标签用于设置元信息。<meta name="viewport" content="width=device-width, initial-scale=1.0" /></head><!--主体元素--><body><h2>HTML的结构demo</h2></body></html>
只要放在HTML中的内容就必须使用标签方式
<meta name="viewport" content="width=device-width, initial-scale=1.0" />解释
作用:设置视口,用于响应式开发
HTML两种元素类型
| 非空元素 | 双标签 | 例:<p>p标签</p> |
|---|---|---|
| 空元素 | 单标签 | 例:<image src='./images.png' alt='' /> |
使用js脚本获取html中的元素、修改元素
console.log：相当于打印输出（打印输出在控制台显示）
window对象是浏览器的全局对象
document是html的文档对象
理解：元素下只要还有子元素，母元素就是子元素的对象
一般获取HTML中的元素中时window是默认的所以不写也无所谓，直接以document开始即可
//获取（输出打印）浏览器全局window对象console.log（window）;//获取当前html的文档对象cnsole.log(window.document);//省略window的写法console.log(document);//获取文档类型console.log(document.doctype);//获取html根元素console.log(document.documentElement);//获取html头元素console.log(document.head);//获取html的编码console.log(document.charset);//获取html的titleconsole.log(document.title);//获取html的肢体body元素console.log(document.body);//获取到body元素后给它换一个背景颜色document.body.style.backgroundcolor = 'wheat';//获取css style样式表console.log(document.styleSheets);//如果有多个css style样式表通过索引获取自己想要的style样式表console.log(document.styleSheets[1]);//获取style样式表的类型console.log(document.styleSheets[1].type);//获取js脚本console.log(document.scripts);//获取到多个js脚本，通过索引获取到指定的js脚本console.log(document.scripts[2]);//获取当前正在执行的js脚本console.log(document.currentScript);//确认是否是获取的当前的正在执行的js脚本（使用索引获取到当前正在执行的js脚本作对比）输出返回布尔值，true，falseconsole.log(document.currentScript == document.scripts[2]);
元素的三大属性
id属性
class属性
style内联属性
注意：id属性一定要保证他的唯一性（就是不要出现id名称重名）
style(内联属性) > id（id属性） > class(类属性) >
style属性：给当前元素对象设置样式
id属性：给页面中的唯一id元素设置样式
class属性：给一类元素设置样式
给元素设置id属性例：id='名称自己起';给元素设置class属性例：class='名称自己起';给元素设置style属性例:<p style='color:red'>给p标签中的文字设置颜色样式为红色</p>
css中的选择器
标签选择器的优先级
元素、标签选择器 < 类选择器 < id选择器
1. 标签选择器（就是通过标签名称给元素设置样式）例：<style>p {color:red;}</style><p>通过标签选择器给p标签的文字设置颜色</p>2. class选择器（通过class类名给元素设置样式）style中class获取元素：.类名例：<style>.class_p {color:red;}</style><p class='class_p'>给p标签设置class选择器（也是设置class属性）</p>3. id选择器(通过id名称给元素设置样式)style样式中id获取元素：#id名例：<style>#id_p {color:red;}</style><p id='id_p'>给P标签设置id选择器（也是设置id属性）</p>
js中的选择器
const:在js中定义常量
let:在js中定义变量
id选择器document.getElementById(id名);例：document.getElementById(title_id);class选择器document.getElementsClassName(类名);例：document.getElementClassName(title_class);标签选择器document.getElementsByTagName("标签名");例：document.getElementTagName("p");通过css选择器来获取//querySelector获取单个document.querySelector("style中的id名书写方式/class改成class在style中的书写方式就行");例：document.querySelector(".title_id");//获取多个（通过索引的方式获取指定的元素样式）document.querySelectorAll("style中的id名书写方式/class改成class在style中的书写方式就行");例：document.querySelectorAll(".title_id")[1];
总结：
