前端Web入门

Eros_ivo

已于 2023-10-08 17:06:17 修改

阅读量33

点赞数 1

分类专栏：前端文章标签：前端 html5 javascript css

于 2023-10-08 16:41:55 首次发布

本文链接：https://blog.csdn.net/Eros_ivo/article/details/133641553

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Web入门

提示：一个非常基础的html+css+js入门，适合对前端会一丢丢但是记不住基础内容的宝子们，本文参考摘录自mdn文档，可结合实例学习，仅供个人学习分享

一、HTML基础

前言：form表单暂未出现

1.HTML

HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

<p>My cat is very cute</p>

1).嵌套元素

<p>My cat is <strong>very</strong> cute.</p>

2).空元素

不包含任何内容的元素称为空元素。比如 <img>元素：

<img src="apifox-logo-64.png" alt="图片出错啦">

2.图像

<img src="apifox-logo-64.png" alt="图片出错啦">

src为图像文件路径的地址属性，alt是图像的描述内容，用于当图像不能被用户看见时显示

3.标记文本

1).标题

<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>

2).段落

<p>这是一个段落</p>

3).列表

无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个<ul>元素包围。
有序列表（Ordered List）中项目的顺序很重要，就像烹调指南。用一个 <ol>元素包围。
列表的每个项目用一个列表项目（List Item）元素 <li>包围。

<p>At Mozilla, we're a global community of</p>

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together…</p>

4).链接

<a href="https://www.baidu.com/">Mozilla Manifesto</a>

把属性的值设置为所需网址

二、CSS基础

1、CSS规则集

如果要同时修改多个属性，只需要将它们用分号隔开，就像这样：：

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

也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如：

p,
li,
h1 {
  color: red;
}

2、不同类型的选择器

选择器名称	选择的内容	示例
元素选择器（也称作标签或类型选择器）	所有指定类型的 HTML 元素	`p`选择 `<p>`
ID 选择器	具有特定 ID 的元素。单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID	`#my-id`选择`<p id="my-id">`或 `<a id="my-id">`
类选择器	具有特定类的元素。单一页面中，一个类可以有多个实例	`.my-class`选择 `<p class="my-class">`和 `<a class="my-class">`
属性选择器	拥有特定属性的元素	`img[src]`选择 `<img src="myimage.png">`但不是 `<img>`
伪类选择器	特定状态下的特定元素（比如鼠标指针悬停于链接之上）	`a:hover`选择仅在鼠标指针悬停在链接上时的`<a>`元素

选择器的种类远不止于此，更多信息请参阅 MDN 的选择器指南。

3.字体和文本

font-size：字号
font-family：字体
text-align：居左中右
line-height：行高
letter-spacing：字间距

html {
  font-size: 10px; /* 基础字号为 10 像素 */
  font-family: "Open Sans", sans-serif; /* font-family 属性指的是你想用于文本的字体 */
}

4.盒子模型

CSS 布局主要是基于盒子模型。在你的页面上占用空间的每个盒子都有类似的属性：

padding（内边距）：是指内容周围的空间。在下面的例子中，它是段落文本周围的空间。
border（边框）：是紧接着内边距的线。
margin（外边距）：是围绕元素边界外侧的空间。

5.文档体样式

body {
  width: 600px; /*强制页面永远保持 600 像素宽。*/
  margin: 0 auto; /*第一个值影响元素的上下方向（在这个例子中设置为 0）；第二个值影响左右方向。也可以使用一个、两个、三个或四个值*/
  background-color: #ff9500; 
  padding: 0 20px 20px 20px; /*给内边距设置了四个值来让内容四周产生一点空间*/
  border: 5px solid black;
}

6.图像居中

img {
  display: block;
  margin: 0 auto;
}

<body> 元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是行级元素，不具备块级元素的一些功能。所以为了使图像有外边距，我们必须使用display: block 给予其块级行为。

三、JavaScript基础

1.函数

document.querySelector 和 alert 是浏览器内置的函数，随时可用。

let myVariable = document.querySelector("h1");
alert("hello!");

自定义函数

function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

2.事件

点击事件

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

将事件与元素绑定有许多方法。在这里选用了元素，然后调用了它的 addEventListener() 方法，将事件名称（‘click’）以及其回调函数（当事件发生时，调用该函数）传入该函数中作为调用参数。

刚刚我们传递给 addEventListener() 的函数被称为匿名函数，因为它没有名字。匿名函数还有另一种我们称之为箭头函数的写法，箭头函数使用 () => 代替 function ()：

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

四、实例

一个简单的欢迎首页，可通过点击切换图片

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web入门</title>
  <link href="style.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />

</head>

<body>
  <h1>Mozilla is cool</h1>
  <img src="apifox-logo-64.png" alt="图片出错啦">
  <p>At Mozilla, we're a global community of</p>
  <ul>
    <li>technologists</li>
    <li>thinkers</li>
    <li>builders</li>
  </ul>
  <p>Read the <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a> to learn even more about
    the values and principles that guide the pursuit of our mission.
  </p>
  <button id="btn">a</button>
  <button id="welcome">切换用户</button>
  <script src="main.js"></script>
</body>

</html>

/* p,li {
  color: red;
  width: 500px;
  border: 1px solid black;
} */
html{
  font-size: 10px;
  font-family: "Open Sans",sans-serif;
  background-color: pink;
}

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

p,li{
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;  /* 字间距 */
}
/* 文档样式 */
body{
  width: 600px;
  margin: 0px auto;  /* 第一个值影响元素的上下方向；第二个值影响左右方向 */
  background-color: bisque;
  padding: 0px 20px 20px 20px;
  border: 5px solid yellow;  
}

h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539f;
  text-shadow: 3px 3px 1px black;  
}

img{
  display: block;  
  margin: 0 auto;
  width: 200px;
  height: 200px;
}

#btn{
  display: block;
  margin: 0 auto;
}

let myHeading = document.querySelector("h1")
myHeading.textContent = "Hello World"

//点击事件
document.getElementById("btn").addEventListener("click", () => {
  alert("啊~")
})

//点击切换图片
let img = document.querySelector("img")   //把 <img> 元素的引用存放在变量里
img.onclick = () => {
  let my = img.getAttribute("src")   //获取html元素属性值
  if (my === "apifox-logo-64.png") {
    img.setAttribute("src", "beauty.png")
  } else {
    img.setAttribute("src", "apifox-logo-64.png")
  }
}

//添加个性化欢迎页面
let myButton = document.getElementById("welcome")

function setUserName() {
  let myName = prompt("你的名字：")   //用户输入
  if (!myName) {
    setUserName()
  } else {
    localStorage.setItem("name", myName)  //存储在本地
    myHeading.textContent = "Love " + myName
  }
}

if (!localStorage.getItem("name")) {
  setUserName()
} else {
  let storageName = localStorage.getItem("name")
  myHeading.textContent = "Love " + storageName
}

myButton.onclick = () => {
  setUserName()
}
//数据清除
// localStorage.clear();