前端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个小项目巩固知识。

相关推荐
2401_881244402 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆3 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子6 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain913 分钟前
Gradle 8.11.1的升级之旅
前端
一拳不是超人23 分钟前
PWA渐进式Web应用技术深度解析
前端·pwa
KaneLogger25 分钟前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能
zwjapple7 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20209 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem10 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊10 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php