web 入门之我的第一个网站

html文件代码

<!DOCTYPE html>
<html>
  <head>
    <!-- 定义文档的头部信息 -->
    <meta charset="utf-8"> <!-- 设置字符集为 utf-8 -->
    <title>测试页面</title> <!-- 设置文档的标题 -->
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC" rel="stylesheet"> <!-- 引入 Google 字体 Noto Sans SC -->
    <link href="styles/style.css" rel="stylesheet"> <!-- 引入样式文件 styles/style.css-->
  </head>
  <body>
    <!-- 定义文档的身体部分 -->
    <h1>Mozilla 酷毙了！</h1> <!-- 定义一级标题 -->
    <img src="images/firefox-icon.png" alt="Firefox 标志：一只盘旋在地球上的火狐"> <!-- 插入图片，如果加载失败显示的文本为 Firefox 标志：一只盘旋在地球上的火狐 -->
    <p>Mozilla 是一个全球社区，这里聚集着来自五湖四海的</p> <!-- 定义段落 -->
    <ul> <!-- 定义无序列表 -->
      <li>技术人员</li>
      <li>思考者</li>
      <li>建造者</li>
    </ul>
    <p>我们致力于让 Internet 保持活力，保持畅通，人人皆可贡献，人人皆可创造。我们坚信：开放平台的协作对于人的发展至关重要，也决定着我们共同的未来。</p> <!-- 定义段落 -->
    <p>为了达成我们共同的理想，我们遵循一系列的价值观和理念，请参阅 <a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla 宣言</a>。</p> <!-- 定义段落，插入链接 -->
    <button>切换用户</button> <!-- 定义按钮元素 -->
    <script src="scripts/main.js" defer></script> <!-- 引入脚本文件 scripts/main.js，并延迟执行 -->
  </body>
</html>

css文件代码

/* 设置根元素字体大小为 10px，全站字体为 Noto Sans SC */
html {
  font-size: 10px;
  font-family: 'Noto Sans SC', sans-serif;
  /* 设置背景色为深蓝色 #00539F */
  background-color: #00539F;
}

/* 设置 body 元素的样式属性 */
body {
  /* 设置 body 宽度为 600px，水平居中 */
  width: 600px;
  margin: 0 auto;
  /* 设置背景色为橘黄色 #FF9500 */
  background-color: #FF9500;
  /* 设置上、右、下方向的内边距，下方向的内边距为 20px */
  padding: 0 20px 20px 20px;
  /* 设置边框，颜色为黑色，宽度为 5px */
  border: 5px solid black;
}

/* 设置一级标题样式 */
h1 {
  /* 设置字体大小为 60px */
  font-size: 60px;
  /* 设置在父元素中水平居中 */
  text-align: center;
  /* 设置上、下方向 padding 为 20px，左右为 0 */
  padding: 20px 0;
  /* 设置字体颜色为深蓝色 */
  color: #00539F;
  /* 在文字下方添加 3px 的黑色阴影*/
  text-shadow: 3px 3px 1px black;
}

/* 设置段落和列表项的样式 */
p, li {
  /* 设置字体大小为 16px */
  font-size: 16px;
  /* 设置行高为字体大小的两倍 */
  line-height: 2;
  /* 设置字母间距为 1px */
  letter-spacing: 1px;
}

/* 设置 img 图片元素的样式属性 */
img {
  /* 图片居中显示 */
  display: block;
  margin: 0 auto;
}
  • js文件代码
let myImage = document.querySelector('img');

myImage.onclick = function(){
	let mySrc = myImage.getAttribute('src');
	if(mySrc === 'images/firefox-icon.png'){
		myImage.setAttribute('src', 'images/firefox2.png');
	}else{
		myImage.setAttribute('src', 'images/firefox-icon.png');
	}
}

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.innerHTML = 'Mozilla 酷毙了，' + myName;
	}
}

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

myButton.onclick = function() {
   setUserName();
};

html文件中有用到引用图片，自己找俩用着就行了

posted @ 2023-03-13 19:47  淦丘比  阅读(35)  评论(0)    收藏  举报