前端html、css基础的基础

HTML与CSS基础入门指南

一、HTML基础

HTML(超文本标记语言)是网页的骨架,通过标签定义内容结构。每个HTML文档以<!DOCTYPE html>开头,包含<html>根标签,内部分为<head>(存放元信息)和<body>(显示内容)两部分。

常用标签示例:

html

复制

xml 复制代码
<h1>主标题</h1>    <!-- 标题标签 -->
<p>这是一个段落</p> <!-- 段落标签 -->
<ul>               <!-- 无序列表 -->
  <li>项目1</li>
  <li>项目2</li>
</ul>
<img src="image.jpg" alt="图片描述"> <!-- 图片标签 -->
<a href="https://example.com">链接</a> <!-- 超链接 -->

运行 HTML

二、CSS基础

CSS(层叠样式表)用于美化网页,通过选择器定位元素并设置样式。常用三种引入方式:内联样式、内部样式表(推荐)和外部.css文件。

基本语法:

css

复制

css 复制代码
选择器 {
  属性: 值;
}

常用选择器:

css

复制

css 复制代码
h1 { color: blue; }          /* 标签选择器 */
.content { font-size: 16px; } /* 类选择器 */
#header { background: #eee; } /* ID选择器 */

常见样式属性:

  • 文字:color, font-size, font-family
  • 布局:margin, padding, width
  • 背景:background-color, background-image

三、实践示例

html

复制

xml 复制代码
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial;
      margin: 20px;
    }
    .article {
      border: 1px solid #ddd;
      padding: 15px;
    }
    .highlight {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="article">
    <h1>网页设计入门</h1>
    <p class="highlight">关键知识点:</p>
    <ul>
      <li>HTML构建结构</li>
      <li>CSS添加样式</li>
    </ul>
  </div>
</body>
</html>

运行 HTML

四、学习建议

  1. 使用浏览器开发者工具(F12)实时调试
  2. 通过MDN文档查询标签/属性用法
  3. 从简单布局开始实践,逐步增加复杂度

掌握HTML和CSS基础后,可继续学习响应式设计、Flexbox布局等进阶内容。网页开发需要持续练习,建议每周完成1-2个小项目巩固知识。

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python
袁煦丞8 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作