HTML+css的基本运用

HTML(超文本标记语言)

HTML 是用于构建网页结构的基础语言,它使用 ** 标签(Tags)** 来定义页面元素。以下是一些核心概念:

1. 基本结构

html

预览

xml 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>
  • <!DOCTYPE html>:声明文档类型为 HTML5
  • <html>:根标签,包含整个网页
  • <head>:包含元数据(字符编码、页面标题等)
  • <body>:包含可见的页面内容

2. 常用标签

  • 标题<h1><h6>(重要性递减)
  • 段落<p>
  • 列表 :无序列表<ul>+ 列表项<li>
  • 链接<a href="URL">链接文本</a>
  • 图片<img src="图片地址" alt="描述">
  • 容器<div>(块级容器)和<span>(行内容器)

CSS(层叠样式表)

CSS 用于美化 HTML 元素,控制它们的外观和布局。以下是核心概念:

1. 样式应用方式

CSS 可以通过三种方式应用到 HTML:

  1. 内联样式 :直接在 HTML 标签中使用style属性
  2. 内部样式表 :在<head>标签中使用<style>标签
  3. 外部样式表:链接外部.css 文件(示例中使用的是内部样式表)

2. 基本语法

css

css 复制代码
选择器 {
    属性: 值;
    属性: 值;
}
  • 选择器 :指定要样式化的 HTML 元素(如h1, .container
  • 属性和值 :定义具体的样式(如color: red;, font-size: 16px;

3. 常用选择器

  • 元素选择器 :直接使用标签名(如p, h1
  • 类选择器 :使用.后跟类名(如.container
  • ID 选择器 :使用#后跟 ID 名(如#main-content

示例代码详解

HTML 部分

html

预览

xml 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML+CSS基础示例</title>
    <!-- CSS样式表 -->
</head>
<body>
    <div class="container">
        <h1>HTML与CSS基础示例</h1>
        
        <p>这是一个展示HTML和CSS基本运用的示例页面...</p>
        
        <img src="https://picsum.photos/800/400" alt="示例图片">
        
        <!-- 更多内容... -->
    </div>
</body>
</html>

关键点:

  1. <meta charset="UTF-8">:确保中文正常显示
  2. <meta name="viewport">:响应式设计基础
  3. <div class="container">:使用类选择器应用样式
  4. 图片使用占位图服务(picsum.photos)

CSS 部分

css

css 复制代码
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
}
  • 设置全局字体、边距和背景色

css

css 复制代码
h1 {
    color: #333;
    text-align: center;
    text-decoration: underline;
}
  • 标题居中并添加下划线

css

css 复制代码
.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
  • 创建居中容器,添加圆角和阴影效果

css

css 复制代码
button:hover {
    background-color: #45a049;
}
  • 使用伪类:hover实现按钮悬停效果

核心概念总结

  1. 盒模型(Box Model) :每个 HTML 元素都是一个矩形盒子,包含内容区、内边距(padding)、边框(border)和外边距(margin)

  2. 响应式设计 :使用max-width和相对单位(如百分比)使页面适应不同屏幕尺寸

  3. 层叠原则:CSS 样式优先级由选择器特异性、位置和!important 决定

  4. 盒阴影和圆角 :使用box-shadowborder-radius创建现代 UI 效果

你可以通过修改示例代码中的 CSS 属性来观察不同的效果,例如改变颜色、调整边距或修改按钮样式。

分享

上述代码中各部分代码的作用分别是什么?

介绍一下其他美化HTML元素的CSS属性

除了HTML和CSS,还有哪些前端开发技术?

相关推荐
摸鱼仙人~9 分钟前
HttpServletRequest深度解析:Java Web开发的核心组件
java·开发语言·前端
索西引擎14 分钟前
【工程化】浅谈前端构建工具
前端·webpack·gulp·turbopack
ZzMemory18 分钟前
一文搞懂前端开发必备的导入导出方式
前端·面试·前端工程化
Stark_Tony18 分钟前
SystemUI开发
前端
愿天深海20 分钟前
Flutter 提取图像主色调 ColorScheme.fromImageProvider
android·前端·flutter
G等你下课25 分钟前
你还在 import { Button } from './components'?
前端·react.js
已读不回14325 分钟前
前端内存优化篇-防止长时间不操作内存累加(socket推送频繁项目非常有效)
前端
归于尽26 分钟前
别再堆重复代码了!React 高阶组件带你优雅偷懒
前端
PineappleCoder26 分钟前
React函数组件的"生活管家"——useEffect Hook详解
前端·react.js
呆呆的心28 分钟前
🚀 JavaScript 数组通关秘籍:从入门到精通的细节指南
前端·javascript