一、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;