Web入门

追梦ing～

已于 2024-04-07 17:20:14 修改

阅读量533

点赞数 8

文章标签： html 前端

于 2024-04-01 18:33:32 首次发布

本文链接：https://blog.csdn.net/qq_52269784/article/details/137226914

版权

一、HTML基础

1、HTML文档

<html></html>——<html> 元素。该元素包含整个页面的所有内容。
<head></head>——<head> 元素。所有那些你加到页面中，且不向用户展示的页面内容，都以这个元素为容器。其中包含诸如提供给搜索引擎的关键字和页面描述、用于设置页面样式的 CSS、字符集声明等等。
<body></body>——<body> 元素。该元素包含期望让用户在访问页面时看到的全部内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

2、列表

无序列表（Unordered List）用一个 <ul> 元素包围。
有序列表（Ordered List）用一个 <ol> 元素包围。

3、链接

<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla Manifesto</a>

二、CSS基础

1、CSS规则集

如果要同时修改多个属性，将它们用分号隔开
选择多种类型的元素，用逗号分开，并为它们添加一组相同的样式

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

p,
li,
h1 {
  color: red;
}

2、字体和文本

html {
  font-size: 10px; /* px 表示“像素（pixel）”: 基础字号为 10 像素 */
  font-family: "Open Sans", sans-serif; /* 这应该是你从 Google Fonts 得到的其余输出。 */
}

h1 {
  font-size: 60px;
  text-align: center;
}

p,
li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}

3、常用属性

padding（内边距）：是指内容周围的空间。在下面的例子中，它是段落文本周围的空间。
border（边框）：是紧接着内边距的线。
margin（外边距）：是围绕元素边界外侧的空间。
width：元素的宽度
background-color：元素内容和内边距底下的颜色
color：元素内容（通常是文本）的颜色
text-shadow：为元素内的文本设置阴影
display：设置元素的显示模式

举例：

body {
  width: 600px;
  margin: 0 auto;
  background-color: #ff9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

三、JavaScript 基础

1、变量

变量是存储值的容器。要声明一个变量，先输入关键字 let 或 var，然后输入合适的名称；变量定义后可以进行赋值：

let myVariable = "李雷";

2、函数

let myVariable = document.querySelector("h1");
alert("hello!");//在浏览器窗口内弹出一个警告框，并为其提供一个字符串参数

3、事件

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是点击事件，鼠标的点击操作会触发该事件。

document.querySelector("html").addEventListener("click", function () {
  alert("别戳我，我怕疼。");
});

4、举例

添加一个图像切换器

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");
  }
};

参考资料：web 入门 - 学习 Web 开发 | MDN (mozilla.org)