html概述笔记,HTML学习笔记（1）——HTML概述

一、Web入门

4.文件名中大小写敏感，不能处理空格，用横线-；

5.网站结构：

6.文件路径：

如显示一个照片，src中放照片的路径：

..上级    /下级

My test page>

>

7.HTML和CSS基础：

跟着MDN-HTML概述教程写的小demo:

index.html:

My test page

文具

• 铅笔
• 书包
• 橡皮

和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，人们可以用它来选择性地为 HTML 元素添加样式。举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，可以这样写 CSS

style.css:

html {

font-size: 10px;

font-family: 'Open Sans',sans-serif;

background-color: brown;

}

body {

width: 600px;

margin: 0 auto;

background-color: aqua;

padding: 0 20px 20px 20px ;

border: 5px solid black;

}

h1 {

font-size: 60px;

text-align: center;

margin: 0;

padding: 20px 0;

color: blueviolet;

text-shadow: 3px 3px 1px black;

}

p,li {

font-size: 16px;

line-height: 2;

letter-spacing: 1px;

}

img {

display: block;

width: 400px;

margin: 0 auto;

}

main.js:

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

myImage.onclick = function(){

let mySrc = myImage.getAttribute('src');

if(mySrc === 'images/img-1.jpg'){

myImage.setAttribute('src','images/img-2.jpg');

}

else{

myImage.setAttribute('src','images/img-1.jpg');

}

}

function setHeading(name){

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

myHeading.textContent = name + "Cool！"

}

function setUserName(){

let myName = prompt('请输入你的名字');

localStorage.setItem('name',myName);

setHeading(myName);

}

let storedName = localStorage.getItem('name');

if(!storedName){

setUserName();

}else{

setHeading(storedName);

}

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

myButton.onclick = setUserName;