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,还有哪些前端开发技术?

相关推荐
带娃的IT创业者1 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost2 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11062 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白2 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学3 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽3 小时前
【初学】调试 MCP Server
前端·mcp
四月_h4 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate4 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
行者..................5 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js
小爱同学_6 小时前
一次面试让我重新认识了 Cursor
前端·面试·程序员