前端基础-HTML&CSS

一. 结构_HTML

1. Web 标准

结构（摆放内容）：HTML
样式（美化内容）：CSS
行为（动作）：JavaScript

2. HTML概念

HTML：超文本标记语言，HTML是用作描述Web网页内容语言，使用HTML描述的文件需要通过web浏览器显示出效果。文件后缀为 .html

开发工具：VS Code

下载地址: Download Visual Studio Code - Mac, Linux, Windows

常用插件:

预览效果：浏览器

下载地址: Google Chrome 网络浏览器

3. 谷歌浏览器

打开浏览器 → 右键检查（F12）→ 显示/隐藏设备工具栏 → 刷新

4. VS Code 工具使用

4.1. 打开文件夹

为了方便统一管理项目文件，通常将文件放到一个文件夹，直接在 VS Code 中打开

方法一：文件 → 打开文件夹 → 浏览 → 选择文件夹

方法二：选中目标文件夹，拖拽至 VS Code

4.2. 安装插件

扩展 → 搜索 → 安装(install) → 重启 VS Code

4.3. 新建HTML文件

新建文件 → 输入文件名称及后缀 → 回车 → 空白 HTML 文件 → ! 生成HTML模板代码（HTML骨架结构）

4.4. 默认代码

html：整个网页
head：网页头部，放给浏览器看的信息，例如：CSS
title：网页标题
body：网页主体，放给用户看的信息，例如：图片、文字等等
meta-viewport：网页视口，移动端网页适配，规定网页宽度等于当前手机分辨率宽度
meta-charset：网页字符编码，UTF8为国际编码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页标题</title>
</head>
<body>	
  网页内容，给用户看的信息
</body>
</html>

5. 文本相关标签

标题： h1-h6
段落：p
加粗：strong

6. 布局通用标签

div：换行显示
span：一行显示

<div>div标签</div>
<div>div标签</div>
<span>span标签</span>
<span>span标签</span>

7. 超链接标签

作用：页面跳转

标签名：a（双标签）

属性：

设置跳转地址：href="跳转地址"
新窗口跳转：target="_blank"

<a href="http://www.baidu.com">跳转到百度</a>
<a href="./02-文本相关标签.html">跳转到本地文件</a>
<a href="#">不知道跳转地址，使用空链接</a>

8. 图片标签

标签名：img（单标签）

属性如下：

属性	作用
src	图像路径
alt	替换文本

<img src="./images/1.jpg" alt="这是一只猫">

9. 表单标签

input：表单
button：按钮

标签名：input（单标签）

属性：

type=""，属性值不同，表单功能不同
placeholder：提示文本
name：表单名称

type属性值如下：

type 属性值	说明
text	文本框
password	密码框
radio	单选框
checkbox	复选框（多选框）

 <form action="#">
    <div>
      <label for="name">姓名: </label>
      <input id="name" type="text" placeholder="请输入姓名">
    </div>
    <div>
      <label for="password">密码: </label>
      <input id="password" type="password" placeholder="请输入密码">
    </div>
    <div>
      <label>性别: </label>
      <input type="radio" name="gender" value="男">男
      <input type="radio" name="gender" value="女">女
    </div>
    <div>
      <label>爱好: </label>
      <input type="checkbox" name="hobby" value="足球">足球
      <input type="checkbox" name="hobby" value="篮球">篮球
      <input type="checkbox" name="hobby" value="羽毛球">羽毛球
    </div>
    <div>
      <label for="intro">自我介绍: </label>
      <textarea name="intro" id="intro" cols="20" rows="10"></textarea>
    </div>
    <div>
      <input type="submit" value="登录">
      <input type="reset" value="重置">
    </div>
</form>

二. 样式_CSS

CSS：层叠样式表，是一种样式表语言，用来描述html文档的呈现方式。

1. 引入方式

常用引入方式有两种：行内样式表、内部样式表和外部样式表。

1.1. 行内样式表

作用：书写少量CSS代码，学习测试时使用

书写位置：标签内部的style属性中

CSS写法：style="属性名1: 属性值; 属性名2: 属性值;"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div style="background-color: red; color: aqua;">测试行内样式</div>
</body>
</html>

1.2. 内部样式表

作用：书写少量CSS代码，学习测试时使用

书写位置：title 标签下方添加 style 双标签，style标签里面写CSS代码

CSS写法：选择器 {属性名: 属性值;}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内部样式表</title>

  <style>
    p {
      color: red;
    }
  </style>
  
</head>
<body>
  <p>测试内部样式表</p>
</body>
</html>

1.3. 外部样式表

作用：书写大量CSS代码，开发时使用

使用步骤：

1.新建CSS文件（后缀.css）书写CSS代码

div {
  color: blue;
}

2.HTML使用link标签引入CSS文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外部样式表</title>

  <link rel="stylesheet" href="./my.css">

</head>
<body>
  
  <div>测试外部样式表</div>
  
</body>
</html>

2. 文本属性

属性名	描述	属性值
font-size	字体大小	单位px或vw
color	文字颜色
line-height	行高	单位px或vw
font-style	是否倾斜	none：不倾斜 Italic：倾斜
text-indent	文本缩进	em（当前字号大小）
text-decoration	文本修饰线	none：无 underline：下划线 line-through：删除线
font-weight	是否加粗	100~900

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本样式</title>
  <style>
    p {
      font-size: 20px;
      color: #f60;
      line-height: 40px;
      font-style: italic;
      text-indent: 2em;
      text-decoration: underline;
      text-decoration: line-through;
    }

    a {
      text-decoration: none;
    }

    strong {
      font-weight:900;
    }
  </style>
</head>
<body>
  <p>高山流水觅知音，以心相交，方成其久远。从合作修复巴黎圣母院，到共同保护西安秦始皇陵兵马俑，从互设文化中心到互办文化年、语言年，中法人文交流为世界文明互鉴作出表率。</p>
  <a href="#">超链接</a>
  <strong>这是strong标签</strong>
</body>
</html>

3. 选择器

作用：查找标签

3.1. 标签选择器

作用：已标签名命名的选择器

特点：为同名标签设置相同样式

p {}

3.2. 类选择器

作用：选中一个或多个目标标签设置样式

特点：差异化设置标签样式

使用步骤：

定义类选择器 .类名 {}
使用类选择器 class="类名"

<style>
  .textColor {
    color: red;
  }
</style>

<p>第一个段落标签</p>
<p class="textColor">第二个段落标签</p>
<p>第三个段落标签</p>

3.3. 后代选择器

作用：选中某个元素的后代元素

写法：父选择器子选择器 {CSS 属性}，父子选择器之间用空格隔开。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后代选择器</title>

  <style>
    div span {
      color: red;
    }
  </style>

</head>
<body>

  <span> span 标签</span>
  <div>
    <span>这是 div 的儿子 span</span >
  </div>

</body>
</html>

4. 布局相关属性

4.1. 盒子模型

4.1.1. 尺寸范围

属性	描述	值
width	宽度	单位：px/vw/百分比
height	高度	单位：px/vw/百分比
background-color	背景色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>尺寸范围</title>
  
  <style>
    div {
      width: 300px;
      height: 50vw;
      background-color: pink;
    }
  </style>

</head>
<body>
  <div>div标签</div>
</body>
</html>

4.1.2. 背景图

属性	描述	值
background-image	背景图	url(图片路径)
background-repeat	背景图平铺方式	默认平铺不平铺：no-repeat
background-size	背景图缩放	px/vw/百分比/关键词（cover、contain）
background-position	背景图位置	px/vw/百分比/方向英文单词（left、top、right、bottom、center）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景图</title>

  <style>
    div {
      width: 300px;
      height: 50vw;
      background-color: pink;
      background-image: url(./images/flower.png);
      /* 背景图平铺方式-不平铺 */
      background-repeat: no-repeat;
      /* 背景图缩放 */
      background-size: cover;
      background-size: 20%;
      /* 背景图位置 */
      background-position: 20vw center;
    }
  </style>

</head>
<body>
  <div>背景图</div>
</body>
</html>

4.1.3. 内外边距

内边距： padding

- 单值：四个方向相同
- 多值：从上开始顺时针赋值，无值的一侧与对面取值相同
- 单方向：padding-方向英文单词（left、top、right、bottom）
- 默认撑大盒子尺寸，需要配合box-sizing: border-box;进行内减

外边距：与padding设置方式相同（不需要内减）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内外边距</title>

  <style>
    div {
      width: 200px;
      height: 50vw;
      background-color: pink;

      /* 1. 内边距 */
      /* padding: 10vw; */
      /* 内边距：上 左右 下 */
      /* padding: 5vw 10vw 20vw; */
      padding-left: 10vw;
      padding-top: 20vw;
      /* 内减：加padding不会撑大盒子尺寸 */
      box-sizing: border-box;

      /* 2. 外边距 */
      /* margin: 10vw; */
      /* margin: 5vw 10vw 20vw; */
      margin-top: 20vw;
    }

  </style>

</head>
<body>
  <div>文字内容</div>
</body>
</html>

4.1.4. 边框线

四个方向相同边框： border: 尺寸线条样式线条颜色;

某个方向边框：border-方向英文单词: 尺寸线条样式线条颜色;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>边框线</title>

  <style>
    div {
      width: 200px;
      height: 50vw;
      background-color: pink;

      border: 1vw solid #f60;
      border-top: 3vw dashed #f00;
      border-right: 3vw dotted green;

      /* 内减：避免添加border撑大尺寸 */
      box-sizing: border-box;
    }
  </style>

</head>
<body>
  <div>边框线</div>
</body>
</html>

4.1.5. 圆角

属性：border-radius

取值：

单值：四个角圆角效果相同
多值：从左上角开始顺时针赋值，无值的一角与对角取值相同
正圆：50%（正方形）
胶囊：短边尺寸的一半（长方形）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圆角</title>

  <style>
    .div1 {
      width: 200px;
      height: 50vw;
      background-color: pink;
      border-radius: 10vw;
      border-radius: 1vw 3vw 5vw 10vw;
    }

    .div2 {
      width: 50vw;
      height: 50vw;
      background-color: orange;

      /* 正方形尺寸的50%为正圆 */
      border-radius: 50%;
    }

    .div3 {
      width: 60vw;
      height: 20vw;
      background-color: green;
      /* 长方形短边尺寸的一半为胶囊状圆角 */
      border-radius: 10vw;
    }
  </style>

</head>
<body>
  <div class="div1">圆角</div>
  <div class="div2">正圆</div>
  <div class="div3">胶囊</div>
</body>
</html>

4.2. Flex 布局

Flex 布局：浏览器推荐的布局方式，适合结构化布局，提供强大的空间分布和对齐能力。

属性	描述
display: flex;	设置Flex布局（父元素）
justify-content	主轴对齐方式
align-items	交叉轴对齐方式
align-self	单个子元素交叉轴对齐方式
flex	伸缩比
flex-wrap	换行

4.2.1. 布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex布局</title>
  <style>
    .father {
      width: 100%;
      height: 60vw;
      background-color: pink;

      /* 开启 Flex 布局 */
      display: flex;
      /* 主轴对齐方式 */
      justify-content: space-between;
      /* 交叉轴对齐方式 */
      align-items: center;
    }

    .two {
      /* 单个元素交叉轴对齐方式 */
      align-self: flex-end;
      /* 伸缩比 */
      flex: 1;
    }


    .father div {
      width: 20vw;
      height: 20vw;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="father">
    <div>1</div>
    <div class="two">2</div>
    <div>3</div>
  </div>
</body>
</html>

4.2.2. 多元素换行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 100%;
      height: 60vw;
      background-color: pink;

      display: flex;
      justify-content: space-between;

      /* 多元素换行 */
      flex-wrap: wrap;
    }

    .father div {
      width: 20vw;
      height: 20vw;
      background-color: orange;
    }
  </style>
</head>
<body>
  <div class="father">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
</body>
</html>

4.3. 定位

作用：实现元素层叠显示效果。

步骤：

设置定位模式
设置边偏移（元素位置：left、right、top、bottom）

属性及值	描述	特点
position: relative;	相对定位	占位；相对自身原有位置偏移
position: absolute;	绝对定位	不占位；相对已经定位的父元素偏移；没有定位的父元素则相对浏览器可视区进行偏移
z-index: 数字;	显示层级	取值为整数数字，取值越大显示层级越高

定位原则：子绝父相

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>定位</title>
  <style>
    .father {
      width: 80vw;
      height: 50vw;
      border: 1px solid #000;
      position: relative;
      left: 10vw;
    }

    .one {
      width: 20vw;
      height: 10vw;
      background-color: orange;
      position: absolute;
      left: 30vw;
      top: 20vw;
      z-index: 2;
    }

    .two {
      width: 20vw;
      height: 10vw;
      background-color: green;
      position: absolute;
      left: 35vw;
      top: 25vw;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="one">one</div>
    <div class="two">two</div>
  </div>
</body>
</html>