Day1 前端语言串讲

1.前端基础三件套（HTML CSS Javascript）

比喻：Html-人的骨骼 CSS-人的皮肤 JS-人的肌肉三者缺一不可

2.JS发展历程

1995年出现，2015年里程碑：ES6出现

3.JS的基本语法

1.六大基本类型：

String、Number、Boolean、Null、Undefined、Symbol

2.Object

let Obj = {
    name:"张三",
    birth:2000,
    address:"福建"
    calculateAge:function(){
        //计算年龄
        }
    }
复制代码

3.function

//创建函数并传入形参
function(num1,num2){
    //求和
    let sum = num1,num2
    return =sum
}
//调用函数传入实参
function(1,2)
复制代码

4.CSS in HTML

//内联样式
<p style="color:blue;">ABCDE</p>
//外联样式
<head>
    <style>
        body{
            background-color:blue;
        }
        p{
            color:yellow;
        }
    </style>
</head>
//引入样式
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
复制代码

Javascript in HTML

事件流： 指的是事件完整执行过程中的流动路径

事件捕获

从DOM的根元素开始去执行对应的事件(从外到里) 事件捕获需要写对应代码才能看到效果

事件冒泡

当一个元素的事件被触发时，同样的事件将会再该元素的所以祖先元素中依次被触发左边为事件捕获，右边为事件冒泡

获取HTML元素

1.原生DOM操作：

<div class="box"></div>
const box = document.querySelector('.box')
复制代码

首先，在需要获取HTML内容的元素上添加ref属性，例如：

<template>
  <div ref="myDiv">
    <p>This is some HTML content.</p>
  </div>
</template>
复制代码

接下来，在Vue的methods中定义一个方法来获取该元素的innerHTML，例如：

methods: {
  getContent() {
    const content = this.$refs.myDiv.innerHTML;
    console.log(content);
  }
}
复制代码

这个方法使用了Vue的$refs对象来获取ref为myDiv的元素，然后使用innerHTML属性获取该元素的HTML内容。最后，可以将获取到的内容输出到控制台中进行查看。

HTML冷知识

HTML只是应该标记语言

HTML的标签分类

形式分类: 按标签形式，html标签可以分为双标签和单标签。单标签比较少，只有几个，
比如：br，hr，input，img，link
功能分类:
文字标签：i, u, sub, sup, s, font
结构标签：html, head, title, body, div, span, br, hr, h1~h6, pre, blockquote
连接标签：a， link
图像标签：img
列表标签：ul， ol， li， dl， dt，dd
表格标签：table， tr， td， th， caption， thead， tbody， tfoot
表单标签：form， input， select， option， textarea，button，
其他： meta， style， script，

语义化标签

代码结构清晰，方便阅读，有利于团队合作开发。
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
有利于搜索引擎优化（SEO）。

前端语言串讲 | 青训营