HTML的文档结构、HTML元素三大属性、css&js的选择器

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" />解释

作用:设置视口,用于响应式开发

<meta /> 标签用于设置元信息。
viewport 设备的屏幕
width=device-width
width属性控制设备的宽度。
假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
maximum-scale=1.0 最大缩放比例为1:1。
user-scalable=no 禁用用户触屏缩放网页功能。

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的title
console.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，false
console.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];

总结：

HTML的文档结构
js脚本获取html文档中的元素
元素三大属性：style id class
css选择器：id class 标签选择器
js选择器：id class 标签通过css选择器获取