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

相关推荐
GISer_Jing1 分钟前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆1 分钟前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding1 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机1 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人2 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
翻滚吧键盘2 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。3 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)3 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~3 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中3 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互