菜单 搜索
首页 前端知识 前端基础-HTML&CSS

前端基础-HTML&CSS

2024-06-22 01:06:21 前端知识 前端哥 864 881 我要收藏

一. 结构_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. 类选择器 

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

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

使用步骤：

  1. 定义类选择器 .类名 {}
  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. 定位

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

步骤：

  1. 设置定位模式
  2. 设置边偏移（元素位置：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>
复制

转载请注明出处或者链接地址：https://www.qianduange.cn//article/13255.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！