前端基础（HTML+CSS+JS)_新建一个html,css,js的前端代码-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_87202881/article/details/145225877

前端基础

引言

前端技术栈

关注的方面：美观，功能，安全，性能，无障碍，安全，体验

前端边界：jsnode electron,react Native ,web RTC,webGL ,WebASSEMBLY

HTML 速通

Hyper Text Markup Language

是 HTML 文档的文档类型声明（DOCTYPE Declaration），它的作用是告诉浏览器这个文档使用的是哪种 HTML 版本，以便正确地渲染内容。

DOM树

标题<h>1-6
列表

first
second
third

first
second
third

start

first

second

third

链接

wangzhi

超链接
输入：

<input placeholder="please enter your name">

<input type = "range">

<input type="number" min="1" max="10">

标签

apple banana

展示了两个复选框（checkbox），它们可以独立选择。默认情况下，第一个复选框未选中，第二个复选框已选中（通过 checked 属性）。

footbal basketball

你的代码中展示了两个单选按钮（radio），它们属于同一个分组（通过 name="sport" 属性指定）。由于它们有相同的 name 属性，用户在选择时只能选中一个。

key clock others

提供的代码展示了一个下拉选择框（<select>），包含三个选项：key、clock 和 others。以下是对你的代码的完整示例改进和优化。

Enter a name (you can select from the suggestions):

代码展示了一个 datalist 元素，它可以为输入框提供可选的建议列表。以下是如何将其与输入框结合使用的完整示例：这样就类似于搜索文框

标签：<blockquote>

**标签**：

• 用于引用长段落的内容，并通过 cite 属性标明引用的来源。

天才并不是自生自长……

2. <cite> 标签：

• 用于标记书名、文章标题等。

我最喜欢的一本书是小王子。

<q> 标签：

• 用于标记行内引用。

在第一章，我们讲过字符串是不可变量。

4. <code> 标签：

• 用于标记代码片段。

const声明创建一个只读的常量。

5. <pre> 标签：

• 保持内容的格式化输出（包括空格和换行）。


const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

内容划分

语义化

HTML语义化 是指在编写HTML代码时，通过使用具有明确含义的标签来结构化网页内容，使代码具有更好的可读性和可维护性，同时帮助浏览器、开发者、搜索引擎更准确地理解网页内容的结构和含义。

为什么需要HTML语义化？

1. 提升代码可读性：

• 让开发者通过标签的名称就能直观地理解内容的用途。

• 方便团队协作和后续维护。

2. 增强SEO（搜索引擎优化）：

• 语义化标签帮助搜索引擎更准确地抓取和理解网页内容，提高网页排名。

3. 改进无障碍支持：

• 辅助技术（如屏幕阅读器）可以更好地解析网页内容，提升对残障用户的友好程度。

4. 更好的样式和行为分离：

• 语义化标签可以更容易被CSS和JavaScript针对性地应用样式或功能。

这样会更好理解每一个部分是什么意思

CSS

CSS（Cascading Style Sheets，层叠样式表）是一种用来控制网页外观和布局的语言，它用于与HTML搭配，为网页添加样式，使其更加美观和易用。

CSS的作用

1. 控制样式：

• 改变文字颜色、大小、字体等。

• 设置背景颜色、图片等。

2. 布局设计：

• 通过盒模型、弹性布局（Flexbox）、网格布局（Grid）等，创建复杂的网页布局。

3. 响应式设计：

• 利用媒体查询（Media Query）适配不同设备屏幕尺寸。

4. 行为分离：

• 将内容（HTML）与样式（CSS）分离，提升网页的可维护性。

组成

在页面中使用css

外链

一般是将样式写在单独的.css文件中，然后在html页面中通过<link>标签使用

主要是实现样式与html分离，代码结构清晰

可以复用同一个css文件到多个html页面

更易于维护

下面是一个例子

Hey!buddy!

This is a paragraph styled with external CSS.
```
h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

p {
    color: gray;
    font-size: 16px;
    line-height: 1.5;
}
```
嵌入

将CSS代码直接写在HTML文档的 <style> 标签中，通常位于 <head> 部分。
- 优点：
  - 试用于页面特定的样式需求
  - 不需要额外css文件，方便快速测试
- 缺点
  - 样式与html混合，降低可读性与可维护性
  - 无法复用到其他页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embedded CSS</title>
    <style>    <!--这里就是实现的内嵌了-->
        h1 {
            color: green;
            font-size: 24px;
            text-align: center;
        }

        p {
            color: black;
            font-size: 14px;
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph styled with embedded CSS.</p>
</body>
</html>

内联

将样式直接写在HTML元素的 style 属性中。

优点：

• 适用于单独调整某个元素的样式。

• 立即生效，无需额外的CSS文件或样式块。

缺点：

• 破坏了内容和样式的分离。

• 代码冗长，不适合大规模样式控制。

• 无法复用，降低代码维护性。

Hello, World!

This is a paragraph styled with inline CSS.

所以我个人推荐用外联，因为外联确实更清楚

工作布置。

css选择器

1. 通配选择器 (*)

描述：

通配选择器选中页面中的所有元素。

特点：

• 应用于全局样式初始化。

• 通配选择器的性能开销较大，尽量避免频繁使用。

* {
    margin: 0;
    padding: 0;
}

效果：

• 去掉所有HTML元素的默认外边距（margin）和内边距（padding）。

• 常用于CSS reset（重置样式表）或初始化。

场景：

• 在项目开始时统一重置浏览器的默认样式。

• 调试时快速查看未被特殊样式覆盖的默认效果。

2. 元素选择器

描述：

直接使用HTML标签名称选择页面中的所有该类型的元素。

特点：

• 简单直观。

• 适用于为某一类标签设置全局样式。

• 优先级低，容易被其他选择器覆盖。

p {
    color: blue;
    line-height: 1.5;
}

效果：

• 将所有段落（<p>）文字设置为蓝色，并增加行高。

场景：

• 为段落、标题、表格、按钮等标签设置通用样式。

• 如 body 元素中设置全局字体：

body {
    font-family: Arial, sans-serif;
}

3. 类选择器 (.)

描述：

通过类名（class）选择HTML元素。类选择器使用 . 前缀。

特点：

• 一个类名可以应用于多个元素。

• 支持组合多个类名，具有高灵活性。

• 优先级比元素选择器高，但低于ID选择器。

.box {
    background: yellow;
    border: 1px solid black;
    padding: 10px;
}

这是在css里面呈现的

现在下面这个是在html里面实现的

<div class="box">This is a box.</div>

4. ID选择器 (#)

描述：

通过ID选择器选中具有特定 id 属性的元素。ID选择器使用 # 前缀。

特点：

• 选择器唯一，应用于单个HTML元素。

• 优先级高于类选择器。

• 不推荐频繁使用，因为ID的唯一性限制了其复用性。

在css里面

#header {
    font-size: 20px;
    color: white;
    background-color: black;
    padding: 15px;
}

对应的html

<div id="header">This is the header.</div>

注意：

• 同一页面中，一个ID只能出现一次：

<div id="unique-id"></div> <!-- 合法 -->
<div id="unique-id"></div> <!-- 非法，重复ID -->

CSS属性选择器

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

• 第一个链接：<a href="#top"> 表示锚点链接，用于跳转到页面顶部。

• 第二个链接：<a href="a.jpg"> 表示超链接，用于查看图片。

CSS 部分

属性选择器 a[href^="#"]

a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
}

[href^="#"]：

• 选择器 ^= 用于选择 href 属性值以 # 开头的 <a> 元素。

• 在本例中，匹配的是 <a href="#top">。

1. color: #f54767;：

设置文字颜色为粉红色（#f54767）。

2. background: 0 center/1em url(...) no-repeat;：

• 设置背景图片为 arrow-up.png，背景图片居中对齐（center）。

• 使用 1em 设置背景图片的大小。

• 不重复显示背景图片（no-repeat）。

3. padding-left: 1.1em;：

为左侧添加1.1em的内边距，使文字与背景图片保持间距。

a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
}

• [href$=".jpg"]：

• 选择器 $= 用于选择 href 属性值以 .jpg 结尾的 <a> 元素。

• 在本例中，匹配的是 <a href="a.jpg">。

• 样式解释：

1. color: deepskyblue;：

设置文字颜色为天蓝色。

2. background: 0 center/1em url(...) no-repeat;：

• 设置背景图片为 image3.png，图片居中对齐。

• 使用 1em 设置背景图片的大小。

• 背景图片不重复显示。

3. padding-left: 1.2em;：

为左侧添加1.2em的内边距，使文字与背景图片保持间距。

组合选择器

1）直接组合

语法：

A B

说明：

选择满足条件的 B 元素，前提是它是 A 元素的后代（可以是子元素，也可以是更深层的嵌套）。

示例：

nav a {
    color: blue;
}

解释：选择所有 nav 标签中的后代 a 标签（超链接），并将其文字颜色设置为蓝色。

2)后代组合

语法：

A > B

说明：

选择满足条件的 B 元素，前提是它是 A 元素的直接子元素。

示例：

section > p {
    color: red;
}

• 解释：选择所有 section 标签下直接嵌套的 p 标签，将其文字颜色设置为红色。

区别：

• 与直接组合（A B）相比，后代组合只能选中一级子元素，不会匹配更深层的嵌套。

3. 相邻兄弟选择器（A + B）

语法：

A + B

说明：

选择满足条件的 B 元素，前提是它紧接在 A 元素之后，且两者是同级兄弟。

示例：

h2 + p {
    font-size: 18px;
}

• 解释：选择所有紧接在 h2 标签后面的 p 标签，将其字体大小设置为18px。

4. 通用兄弟选择器（A ~ B）

语法：

A ~ B

说明：

选择满足条件的 B 元素，前提是它位于 A 元素之后，且两者是同级兄弟。

示例：\

h2 ～ p {
    color: gray;
}

• 解释：选择 h2 标签之后的所有 p 标签，将其文字颜色设置为灰色。

HTML

<nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
</nav>
<section>
    <p>First paragraph inside section.</p>
    <div>
        <p>Nested paragraph inside div.</p>
    </div>
</section>
<h2>Header 2</h2>
<p>Paragraph directly after h2.</p>
<p>Another paragraph after h2.</p>

css

/* 直接组合：选择 nav 下的所有 a 标签 */
nav a {
    color: blue;
}

/* 后代组合：选择 section 下的直接子元素 p */
section > p {
    color: red;
}

/* 相邻兄弟选择器：选择 h2 后紧邻的 p */
h2 + p {
    font-weight: bold;
}

/* 通用兄弟选择器：选择 h2 后的所有 p */
h2 ~ p {
    color: gray;
}