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

相关推荐
南玖i1 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
excel2 小时前
Web发展与Vue.js导读
前端
YAY_tyy2 小时前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_4 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801465 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店6 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown6 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip7 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿8 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.9 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js