MDN-html+css+js

CSS

id选择器 #my-id
类选择器 .my-class
属性选择器 img[src]  拥有特点属性得元素   <img src="myimage.png">

align-content: center;
元素内容中心对齐
https://www.runoob.com/try/playit.php?f=playcss_align-content&preval=center

margin: 0 auto;   2个值  前者上下,后者左右;
margin: 10px 50px 20px;  3个  上 (右左) 下
margin: 10px 50px 20px 0;  4个值  上右下左

/* 全局值 */
margin: inherit;
margin: initial;
margin: unset;

水平居中
在现代浏览器中实现水平居中，可以使用 display: flex; justify-content: center;。

不过，在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中，上述代码并不会生效。此时要实现在父元素中居中，可使用 margin: 0 auto;。

阴影

text-shadow: 3px 3px 1px black;
box-shadow: 3px 3px 1px black;  前两个参数设置x,y轴阴影方向  x,y都为正 则方向为右和下  第三个参数为模糊半径

第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。
第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。
第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。

图片是内联元素,不具备body块级元素的一些属性 比如margin: 0 auto;
因此,需要将内联元素img修改为块级元素
img {
    display: block;
    margin: 0 auto;
}

JS

数据类型
字符串,数字,布尔值, 数组,对象

内置函数

document.querySelector('h1'); 选择某个节点

作用域

注：return 语句告诉浏览器当前函数返回 result 变量。这是一点很有必要，因为函数内定义的变量只能在函数内使用。这叫做变量的 作用域。（详见 变量作用域。）

事件

// 匿名函数写法
document.querySelector('html').onclick = function() {
    alert('别戳我，我怕疼。');
}

// 相当于
let myhtml = document.querySelector('h1');
myhtml.onclick = function() {};

实现图片转换器功能

let myImage = document.querySelector('img');

myImage.onclick = function() {
    let mySrc = myImage.getAttribute('src');
    if (mySrc === './static/images/firefox.jpg') {
        myImage.setAttribute('src', './static/images/employee_head_man.png')
    } else {
        
        myImage.setAttribute('src', './static/images/firefox.jpg')
    }
}

切换用户功能(打开网页时输入用户,点击切换按钮,修改用户名)

let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1')

function setUserName() {
    let myName = prompt('请输入你的名字.');
    localStorage.setItem('name', myName);
    myHeading.textContent = 'Mozilla 酷毙了,' + myName;
}

if(!localStorage.getItem('name')) {
    setUserName();
} else {
    let storeNamed = localStorage.getItem('name');
    myHeading.textContent = 'Mozilla 酷毙了,' + storeNamed;
}
myButton.onclick = function() {
    setUserName();
}

扩展判断是否为null or空 ,回到输入用户名

let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1')

function setUserName() {
    let myName = prompt('请输入你的名字.');
    if (!myName || myName ===null) {
        setUserName();
    } else {
        localStorage.setItem('name', myName);
        myHeading.textContent = 'Mozilla 酷毙了,' + myName;
    }
    
    
}

if(!localStorage.getItem('name')) {
    setUserName();
} else {
    let storeNamed = localStorage.getItem('name');
    myHeading.textContent = 'Mozilla 酷毙了,' + storeNamed;
}
myButton.onclick = function() {
    setUserName();
}