文档-不带评论

标签

网页

字数

1966 字

阅读时间

9 分钟

设置

---
comment: false
---

网页基础

基础标记

类别	常用标签	用途
标题	h1~h6	定义页面标题层级
段落	p	段落文本
链接	a	超链接
图片	img	插入图片
列表	ul, ol, li	无序/有序列表
容器	div, span	页面分布和内容分布
表单	form, input, button	用户输入和交互
表格	table, tr, td	数据表格展示

1.标题标记

<hn align="对齐方式">标题文本</hn>
//其中n取值1-6，align为可选属性，用于指定标题的对齐方式(left,center,righe)
//xhtml不赞成使用h标注的align对齐属性，可使用style或是CSS设置

2.段落标记

<p align="对齐方式">段落文本</p>

3.水平线标记

<hr 属性="属性值"/>

4.文本样式标记

<font 属性="属性值">文本内容</font>
//XHTML不赞成使用<font>标记，可用CSS

button

<div> 和 <span>
div - 块级容器（Division）
作用：用来将网页内容分成不同的"块"或"区域"
特性：独占一行，像一个"大盒子"
类比：就像房间的隔断墙，把空间分成不同区域
span - 行内容器
作用：用来包裹文本中的某一部分
特性：不换行，像一个"小标签"
类比：就像在句子中用荧光笔标记几个词

语义化标签

标签	用途
header	页面或区域头部
nav	导航栏
main	页面主要内容
article	独立文章内容
section	内容区块
aside	侧边栏或附属内容
footer	页面底部
figure/figcaption	图片及其说明

什么是键值对？

在HTML开始标记中，可以通过“属性=”属性值””的方式为标记添加属性，其中“属性”和“属性值”是以“键值对”的形式出现的，所谓“键值对”,简单来说即为对“属性”设置“值”。 color="red”、width:200px;其中color和width即为“键值对”中的“键”(key),red与200px为“键值对”中的“值”(value)。

前端框架特殊标记

v-if / v-else - 条件渲染

<!-- 当 isLoggedIn 为 true 时显示 -->
<div v-if="isLoggedIn">
  <p>欢迎回来！</p>
</div>

<!-- 否则显示这个 -->
<div v-else>
  <p>请先登录</p>
</div>

v-show - 显示/隐藏

<div v-show="isVisible">
  这个元素会显示或隐藏(元素始终存在)
</div>

v-for - 循环渲染

<!-- 遍历数组 -->
<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</ul>

<!-- 遍历对象 -->
<div v-for="(value, key) in user">
  {{ key }}: {{ value }}
</div>

v-bind（简写 :）- 动态绑定属性

<!-- 完整写法 -->
<img v-bind:src="imageUrl" v-bind:alt="imageAlt" />

<!-- 简写（常用） -->
<img :src="imageUrl" :alt="imageAlt" />

<!-- 绑定 class -->
<div :class="{ active: isActive, 'text-danger': hasError }"></div>

<!-- 绑定样式 -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>

v-on（简写 @）- 事件监听

<!-- 完整写法 -->
<button v-on:click="handleClick">点击我</button>

<!-- 简写（常用） -->
<button @click="handleClick">点击我</button>

<!-- 带参数 -->
<button @click="deleteItem(item.id)">删除</button>

<!-- 键盘事件 -->
<input @keyup.enter="submit" />

<!-- 阻止默认行为 -->
<a @click.prevent="doSomething">链接</a>

v-model - 双向数据绑定

<!-- 输入框 -->
<input v-model="username" />

<!-- 复选框 -->
<input type="checkbox" v-model="agreeTerms" />

<!-- 单选框 -->
<input type="radio" v-model="selectedOption" value="A" />

<!-- 下拉框 -->
<select v-model="selectedCity">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
</select>

组件标签 ComponentName

<!-- 使用自定义组件 -->
<ToolCard 
  link="/path" 
  title="标题" 
  description="描述" 
/>

<!-- 你的项目中的实际例子 -->
<CardContainer>
  <ToolCard
    link="/笔记/Java基础/数据类型"
    title="数据类型"
    description="Java 数据类型详解"
  />
</CardContainer>

Toolcard内部组件

Vue

<template>
  <div class="tool-card" @click="navigate">
    <img :src="icon" :alt="title" />
    <h3>{{ title }}</h3>
    <p>{{ description }}</p>
  </div>
</template>

<script setup>
// 定义组件接收的属性
defineProps({
  link: String,
  icon: String,
  title: String,
  description: String
})

// 点击跳转方法
function navigate() {
  window.location.href = link
}
</script>

html

<!-- 当我们这么使用时 -->
<ToolCard
  link="/笔记/Java基础/数据类型"
  icon="/icons/hero.png"
  title="数据类型"
  description="Java 数据类型详解"
/>

Vue会自动吧link、icon、title、description传递给组件；:src="icon"会把图标路径设置到img标签

CSS基础

1.样式规则

基本语法

选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3}
选择器 {
  属性: 值;
  属性: 值;
}

引入CSS样式表

1、行内式

行内式通过标记的style属性来设置元素样式

html

<元素 style="属性: 值; 属性: 值;">内容</元素>

**示例：

html

<h1 style="color: red; font-size: 32px; text-align: center;">
  红色大标题
</h1>

<p style="color: blue; font-size: 16px; line-height: 1.6;">
  蓝色文字
</p>

<div style="background-color: #f0f0f0; padding: 20px; border-radius: 8px;">
  这是一个有背景色的盒子
</div>

2、内嵌式

内嵌式是将CSS代码集中写在HTML文档的<head> 头部标记中，并且用<style> 标记定义. 内嵌式样式结构分开更清晰，但是只对其所在的html页面生效，无法跨页面共享，同时会使文件变大，适合单页面使用。

html

<head>
<style type="text/css">
    选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
</style>
</head>

html

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 在这里写 CSS */
    h1 {
      color: red;
      font-size: 32px;
    }
    
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>标题</h1>
  <p>段落</p>
</body>
</html>

3、嵌入式

嵌入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/> 标记将外部样式表文件链接到HTML文档中。

<head>
<link href="CSS文件路径"type="text/css" rel="stylesheet"/>
<head>

在这个语法里，link 标记需要放在head 头部标记中，并且必须指定link 标记的三个属性 href 定义所链接外部样式表文件的URL type 定义所链接文档的类型 rel 定义当前文档和被链接文档之间的关系

创建CSS文件

Css

/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f5f5f5;
}

.card {
  background-color: white;
  padding: 20px;
  margin: 10px 0;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card h2 {
  color: #333;
}

.card:hover {
  transform: translateY(-2px);
}

#header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

在HTML中引入

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>外部样式表示例</title>
  
  <!-- 引入外部 CSS 文件 -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="header">
    <h1>我的网站</h1>
  </div>
  
  <div class="card">
    <h2>卡片标题</h2>
    <p>这是卡片内容</p>
  </div>
</body>
</html>

优先级规则

内联样式 > 内部样式表 > 外部样式表

html

<head>
  <!-- 外部样式表 -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- 内部样式表 -->
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <!-- 内联样式 -->
  <p style="color: red;">
    我会显示红色（内联样式优先级最高）
  </p>
</body>

2.基础选择器

元素选择器（标签名）

Css

/* 选择所有 p 标签 */
p {
  color: blue;  /*<p>文字蓝色</p>*/
  font-size: 16px;
}

/* 选择所有 h1 标签 */
h1 {
  color: red;/*<p>标题红色</p>*/
}

类选择器（. 点号）

Css

/* 选择 class="highlight" 的元素,这段文字带有黄色背景 */
.highlight {
  background-color: yellow;
  font-weight: bold;
}

/* 选择 class="card" 的元素 */
.card {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
}

Html

<!--同一个class可以用在多个元素上-->
<p class="highlight">这段文字有黄色背景</p>
<div class="card">这是一个卡片</div>
<p class="highlight">这段也有黄色背景</p>

贡献者

AOLeomeoww

文档-不带评论 ​

网页基础 ​

基础标记 ​

1.标题标记 ​

2.段落标记 ​

3.水平线标记 ​

4.文本样式标记 ​

语义化标签 ​

前端框架特殊标记 ​

v-if / v-else - 条件渲染 ​

v-show - 显示/隐藏 ​

v-for - 循环渲染 ​

v-bind（简写 :）- 动态绑定属性 ​

v-on（简写 @）- 事件监听 ​

v-model - 双向数据绑定 ​

组件标签 ComponentName ​

Toolcard内部组件 ​

CSS基础 ​

1.样式规则 ​

引入CSS样式表 ​

1、行内式 ​

2、内嵌式 ​

3、嵌入式 ​

2.基础选择器 ​

元素选择器（标签名） ​

类选择器（. 点号） ​

贡献者 ​

文档-不带评论

网页基础

基础标记

1.标题标记

2.段落标记

3.水平线标记

4.文本样式标记

语义化标签

前端框架特殊标记

v-if / v-else - 条件渲染

v-show - 显示/隐藏

v-for - 循环渲染

v-bind（简写 :）- 动态绑定属性

v-on（简写 @）- 事件监听

v-model - 双向数据绑定

组件标签 ComponentName

Toolcard内部组件

CSS基础

1.样式规则

引入CSS样式表

1、行内式

2、内嵌式

3、嵌入式

2.基础选择器

元素选择器（标签名）

类选择器（. 点号）

贡献者