02 前端基础（JS中的console，元素选择与CSS样式）

本来以为是零基础，但其实一上来就Html、CSS、JS三者一起开工，当然每个部分只涉及到基础部分。感觉还是学到一些之前忽视的知识点。

主要的知识点包括：

序号	内容
1	Html页面的基本结构。head，body等有固定格式。meta之类的中有一个可适应页面大小调整的参数等。这块后面确认下。
2	JS中的consule.log。
3	CSS的理解，层叠的样式加载。
4	对象object，windows，document。整个页面就是一个windows，然后里面又有更小的对象。对象就又会有属性。属性下面有会有参数（最后这点是自己理解的）。
5	vs code的live server插件（保存即展示，这个功能还是很赞的）。 具体方法：添加live server，右键代码页面选择 open with live server。 可以将vs code的自动保存功能打开，文件-auto save。
6	vs code中的自动格式优化，也是用了一个插件：prettier-code formatter。

---

（但vs code中的插件应用貌似都有个大bug，就是安装了后的设置、易用性太差。没人手把手教的话，自己摸索太费时间，从这个角度不看好vs code，以后还是尝试换一个其他的编程ide）。

1：JS中的console.log

之前没了解过JS，只知道是用来负责页面交互的，而且可以非常方便地嵌套进Html页面。
例如可以通过下面的方式来选择对应的元素并进行展示。

<script>
    //读取title并且直接换成新的内容
    console.log(document.title);
    document.title = "如何使用JS脚本访问HMTL";
    //但并非所有内容都可以直接选择，于是需要通过id、类、tagname等来进行选择。例如：
    const ele = document.getElementById("title-id");
    console.log(ele);
    ele.style.backgroundColor = "yellow";
    const eles = document.getElementsByClassName("title-class");
    console.log(eles[1]);
    const p = document.getElementsByTagName("p");
    console.log(p[1]);
    // 也可以直接使用css选择器来获取。貌似之前一直无法实现，最近的版本才可以实现，很实用。
    // 获取满足条件的第一个，只返回一个
    let y = document.querySelector(".title-class");
    //   返回满足条件的全部元素
    y = document.querySelectorAll(".title-class.bgcolor");
</script>

2：CSS的样式，这个地方涉及到元素的选择

主要有三种模式。

a-style模式，直嵌套到元素内部。例如：

<h2 style="color: red">学习就是一个不断磨练的过程</h2>

b-class模式，将多个元素通过一个class来进行“统领”，这样就可以一次性让多个元素的格式进行定义或改变了。

<style>
  .table-var {
    color:yellow;
  }
</style>
<p class="table-var">姓名是什么？</p>
<p class="table-var">年龄是多少？</p>

c-id模式，给一个元素一个id号，然后来进行选择和调用。最好id有唯一性。

<style>
  #table-name {
    color:yellow;
  }
</style>
<p id="table-name">姓名是什么？</p>

3：不同的样式具有先后次序。

元素选择器优先级小于类选择器, 但是又小于id选择器
tag < class < id < 内嵌（最后这个是否这样后面需要验证下）