泷羽sec学习打卡-html基础

声明
学习视频来自B站UP主泷羽sec,如涉及侵权马上删除文章笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负

关于云技术基础的那些事儿-捕获帅照

html基础

什么是html？

HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页和网上信息的标准标记语言。它是万维网（World Wide Web）的基础，用于定义网页的结构和内容。HTML 使用一系列的元素（称为标签）来告诉浏览器如何显示内容。
htmo有哪些基础构成？
标签和元素：

HTML 文档由一系列的元素组成，这些元素告诉浏览器如何显示内容。元素由标签包围，例如

和

之间的文本会被浏览器显示为一个段落。
属性：

标签可以有属性，属性提供了有关 HTML 元素的额外信息。例如，<a href="http://www.example.com"> 中的 href 属性指定了链接的目标 URL。

结构：

HTML 文档通常包含、和三个主要部分。标签包裹整个 HTML 文档，包含文档的元数据（如标题和链接到 CSS 文件），而包含文档的可见内容。
语义化标签：

HTML5 引入了许多新的语义化标签，如

、

使用标签可以创建超链接，允许用户在不同的页面或网站之间导航。
图像和多媒体：

通过标签可以嵌入图像，而和标签可以嵌入视频和音频内容。
表单和输入：

HTML 提供了标签和一系列输入类型（如、和），用于创建用户可以填写的表单。
CSS 和 JavaScript：

HTML 可以与 CSS（层叠样式表）和 JavaScript 一起使用，CSS 用于控制网页的布局和样式，而 JavaScript 用于添加交互性和动态功能。
可访问性：

HTML 提供了一些属性和元素，如 alt 属性用于图像，aria 属性用于提高网页内容的可访问性。

常用的html标签

**文档结构标签：**

<html>：定义整个 HTML 文档。
<head>：包含文档的元数据，如 <title>、<link>（用于链接 CSS）、<script>（用于链接 JavaScript）等。
<title>：定义文档的标题，显示在浏览器标签页上。
<body>：包含文档的可见内容。

文本内容标签：

<p>：定义一个段落。
<h1> 至 <h6>：定义标题，<h1> 是最高级别的标题，<h6> 是最低级别的标题。
<strong> 或 <b>：定义粗体文本，<strong> 还带有强调的语义意义。
<em> 或 <i>：定义斜体文本，<em> 还带有强调的语义意义。
<mark>：定义标记或高亮文本。
<small>：定义小号文本。
<del>：定义删除线文本。
<ins>：定义插入的文本。
<pre>：定义预格式化的文本，通常用于显示代码。
链接和导航标签：
<a>：定义超链接，用于链接到另一个页面或站点。
<link>：在 <head> 中使用，用于链接外部 CSS 文件。

列表标签：

<ul>：定义无序列表。
<ol>：定义有序列表。
<li>：定义列表项。
表格标签：

<table>：定义表格。
<tr>：定义表格中的行。
<th>：定义表格中的表头单元格。
<td>：定义表格中的单元格。

表单标签：

<form>：定义一个表单，用于用户输入。
<input>：定义输入字段，可以有不同的类型，如 text、radio、checkbox、submit 等。
<label>：定义 <input> 元素的标签。
<button>：定义一个按钮。
图像和多媒体标签：

<img>：定义图像。
<video>：定义视频。
<audio>：定义音频。

分组内容标签：

<div>：用于对 HTML 文档中的块级内容进行分组。
<span>：用于对 HTML 文档中的内联内容进行分组。
语义化标签：

<header>：定义文档或部分内容的页眉。
<footer>：定义文档或部分内容的页脚。
<section>：定义文档中的一个区段。
<article>：定义独立的内容区块。
<nav>：定义导航链接的部分。

其他常用标签：

<br>：定义换行。
<hr>：定义水平线。

html示例

**文档结构标签**

<html>：根元素，所有HTML元素的容器。
html
<html>
  <head>
    <!-- 头部信息 -->
  </head>
  <body>
    <!-- 网页内容 -->
  </body>
</html>
**头部信息标签**

<head>：包含文档的元（meta）数据。
<title>：定义文档的标题。
html
<head>
  <title>我的网页</title>
</head>
**内容标签**

<h1> 到 <h6>：定义标题，<h1> 是最高级别的标题。
html
<h1>这是主标题</h1>
<h2>这是副标题</h2>
<p>：定义段落。
html
<p>这是一个段落。</p>
<br>：插入换行。
html
这是一个段落。<br>这是另一个段落。
<hr>：插入水平线。
html
<hr>
<div>：定义文档中的分区或节。
html
<div>这是一个分区</div>
<span>：定义行内的分区（容器）。
html
<span>这是一个行内分区</span>
**链接标签**

<a>：定义超链接。
html
<a href="https://www.example.com">访问示例网站</a>
**图片标签**

<img>：定义图像。
html
<img src="image.jpg" alt="描述">
**列表标签**

<ul>：定义无序列表。
<li>：定义列表项。
html
<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul>
<ol>：定义有序列表。
html
<ol>
  <li>项目1</li>
  <li>项目2</li>
</ol>
<dl>：定义定义列表。
<dt>：定义定义列表中的术语。
<dd>：定义定义列表中的描述。
html
<dl>
  <dt>术语1</dt>
  <dd>描述1</dd>
  <dt>术语2</dt>
  <dd>描述2</dd>
</dl>
**表格标签**

<table>：定义表格。
<tr>：定义表格中的行。
<th>：定义表格中的表头单元格。
<td>：定义表格中的单元格。
html
<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table>
**表单标签**

<form>：定义表单。
html
<form action="/submit-form" method="post">
  <!-- 表单元素 -->
</form>
<input>：定义输入控件。
html
<input type="text" name="username">
<button>：定义按钮。
html
<button type="submit">提交</button>

css基础

什么是css呢？

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述 HTML 或 XML 文档的表现形式的语言。CSS 负责网页的视觉布局和外观，它允许开发者控制网页上的元素如何显示在浏览器中。
以下是 CSS 的一些关键特性和用途：

选择器：

CSS 使用选择器来定位 HTML 文档中的元素，并为其应用样式。常见的选择器包括标签选择器（如 p 用于所有

标签）、类选择器（如 .myclass 用于所有带有 class=“myclass” 属性的元素）、ID 选择器（如 #myid 用于具有 id=“myid” 属性的特定元素）等。
属性和值：

CSS 通过属性和值对来定义样式。例如，color: blue; 将文本颜色设置为蓝色。属性是您想要改变的样式特征，而值是应用于该属性的具体样式。
盒模型：

CSS 盒模型是设计和布局网页内容的基础。每个 HTML 元素都被渲染为一个矩形盒子，包括内容区域、内边距（padding）、边框（border）和外边距（margin）。
定位：

CSS 提供了多种定位机制，包括静态定位（默认）、相对定位、绝对定位、固定定位和粘性定位，允许开发者精确控制元素在页面上的位置。
布局：

CSS 布局技术包括传统的浮动（floats）、定位（position）和现代的 Flexbox 和 Grid 系统，它们提供了灵活的布局解决方案，使得响应式设计和复杂页面布局变得简单。
响应式设计：

通过使用媒体查询（media queries），CSS 可以根据不同设备的特性（如屏幕尺寸和分辨率）应用不同的样式，从而实现响应式设计。
动画和过渡：

CSS 允许创建动画和过渡效果，无需使用 JavaScript。@keyframes 规则可以定义复杂的动画序列，而过渡（transitions）可以平滑地在状态之间切换。
伪类和伪元素：

CSS 伪类（如 :hover、:active、:focus）和伪元素（如 ::before、::after）允许开发者为元素的不同状态或部分添加特殊的样式。
层叠和继承：

CSS 的“层叠”特性允许多个样式规则影响同一个元素，浏览器会根据特定的规则来确定最终的样式。继承允许某些属性从父元素传递到子元素。
预处理器：

预处理器（如 Sass 和 Less）扩展了 CSS 的功能，允许使用变量、嵌套规则、混合（mixins）和函数等高级功能，使 CSS 更易于维护和扩展。

常见的css标签

标签选择器：

选择所有 <p> 标签的元素。
css
p {
    color: red;
    font-size: 16px;
}

类选择器：

选择所有具有 class="highlight" 的元素。
css
.highlight {
    background-color: yellow;
}

ID选择器：

选择具有 id="header" 的元素。
css
#header {
    font-size: 24px;
    color: blue;
}

属性选择器：

选择所有 type="text" 的 <input> 元素。
css
input[type="text"] {
    border: 1px solid #ccc;
}

伪类选择器：

选择所有被鼠标悬停的 <a> 标签元素。
css
a:hover {
    color: green;
}

伪元素选择器：

选择所有 <p> 标签元素的第一个字母。
css
p::first-letter {
    font-size: 24px;
}

后代选择器：

选择所有在 <div> 元素内部的 <p> 标签元素。
css
div p {
    margin-left: 20px;
}

子代选择器：

选择所有直接在 <body> 元素内部的 <h2> 标签元素。
css
body > h2 {
    color: purple;
}

兄弟选择器：

选择所有紧接在 <h1> 元素之后的 <p> 标签元素。
css
h1 + p {
    font-style: italic;
}

通用选择器：

选择所有在 <body> 元素内部的元素。
css
body * {
    margin: 10px;
}

分组选择器：

为 <h1> 和 <h2> 标签元素应用相同的样式。
css
h1, h2 {
    font-family: Arial, sans-serif;
}

什么是JavaScript？

JavaScript（通常缩写为JS）是一种高级的、解释型的编程语言。它是一种多范式、动态类型、弱类型、原型继承的语言，广泛用于网页开发中，用于增强网页的交互性、动态性，实现客户端的页面行为。
JavaScript的关键特点：
**跨平台性：**JavaScript可以在多种环境下运行，包括浏览器和服务器（例如Node.js）。

**事件驱动：**JavaScript是事件驱动的语言，这意味着它能够响应用户操作、浏览器事件等。

**原型继承：**JavaScript使用基于原型的继承机制，而不是基于类的继承。

**异步编程：**JavaScript支持异步编程模式，如回调函数、Promises、async/await等。

**单线程与非阻塞I/O：**在浏览器中，JavaScript通常运行在单个线程上，但它支持事件循环和非阻塞I/O操作，这使得JavaScript可以执行非阻塞操作而不会冻结用户界面。

**ES6及更新版本的新特性：**随着ECMAScript 2015（ES6）及后续版本的发布，JavaScript引入了许多现代编程语言的特性，如箭头函数、类、模板字符串、解构赋值、模块、let和const声明等。

**DOM操作：**在浏览器环境中，JavaScript可以通过Document Object Model（DOM）API来操作网页内容，包括元素的创建、删除、修改等。

**BOM操作：**JavaScript还可以通过Browser Object Model（BOM）API与浏览器窗口进行交互，例如控制浏览器历史、获取视口尺寸等。

**AJAX和API调用：**JavaScript允许异步地从服务器获取数据，无需重新加载页面，这通过AJAX（Asynchronous JavaScript and XML）技术实现，现在更多的是通过Fetch API或XMLHttpRequest。

**框架和库：**有大量的JavaScript框架和库，如React、Angular、Vue.js等，它们提供了构建复杂用户界面和单页应用的工具。

JavaScript示例

**变量声明和基本数据类型：**

javascript
let message = "Hello, World!"; // 字符串
const pi = 3.14159; // 数字
let isPublished = true; // 布尔值
let now; // 未定义


**函数定义和调用：**

javascript
function greet(name) {
    alert("Hello, " + name);
}
greet("Alice");


**数组和循环：**

javascript
let fruits = ["Apple", "Banana", "Cherry"];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}


**对象和属性访问：**

javascript
let person = {
    firstName: "John",
    lastName: "Doe",
    age: 30
};
console.log(person.firstName + " " + person.lastName);


**条件语句：**

javascript
let score = 75;
if (score > 70) {
    console.log("Pass");
} else {
    console.log("Fail");
}


**事件处理：**

javascript
document.getElementById("myButton").onclick = function() {
    alert("Button clicked!");
};


**DOM 操作：**

javascript
document.getElementById("demo").innerHTML = "Hello JavaScript!";


**表单验证：**

javascript
function validateForm() {
    let x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
}


**JSON 和 AJAX：**

javascript
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        let response = JSON.parse(this.responseText);
        console.log(response);
    }
};
xhr.open("GET", "data.json", true);
xhr.send();


**Promise 和异步编程：**

javascript
function fetchData() {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open("GET", "data.json");
        xhr.onload = () => {
            if (xhr.status == 200) {
                resolve(JSON.parse(xhr.responseText));
            } else {
                reject(new Error('Request failed'));
            }
        };
        xhr.send();
    });
}
fetchData().then(data => {
    console.log(data);
}).catch(error => {
    console.error(error);
});


**ES6+ 新特性：**

javascript
let numbers = [1, 2, 3];
numbers.map(number => number * 2); // 使用箭头函数和 map 方法

好啦，这期只是前端的基础知识科普，实际前端的知识是很多的，毕竟前端是一个就业方向，是一个单独的领域，但是一个好后端一定既会后端也会前端，简称"会前端的后端"。