前端学习——html篇

原创

已于 2025-08-30 16:21:53 修改 · 798 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #html

于 2025-08-30 16:12:57 首次发布

前端学习——html篇

结构
header(figure、nav)
main(唯一、主要内容)
footer（address）
form
table
svg
注意
效果图

结构

<!DOCTYPE html>
<html lang="zh-CN">
<head></head>
<body>
   <header></header>
   <main>
       <section></section>
   </main>
   <footer></footer>
</body>
</html>

header(figure、nav)

<header>
      <h1>Welcome to Mr. Whiskers' Blog Page!</h1>
      <figure>
        <img
          src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"
          alt="a cat peacefully sleeping"
        />
        <figcaption>Mr. Whiskers Sleeping</figcaption>
      </figure>
      <nav>
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#posts">Posts</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
 </header>

main(唯一、主要内容)

<main>
      <section id="about">
        <h2>About</h2>
        <p>
          Hi there! I'm Jane Doe, a passionate writer who finds endless inspiration in the antics of my beloved cat, Mr. Whiskers.
        </p>
        <p>
          His playful nature and boundless energy keeps me on my toes. I love him so much.
        </p>
      </section>
  </main>

footer（address）

<footer>
      <section id="contact">
        <h2>Contact</h2>
        <address

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

puyu2017

关注关注

14
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端学习——css——flexbox篇

puyu2017的博客

09-11

776

本文摘要： Flexbox是一种强大的CSS布局模型，围绕容器(Container)和项目(Item)的父子关系展开。核心概念包括主轴和交叉轴的双轴系统，通过flex-direction可调整主轴方向。容器属性如flex-wrap、justify-content和align-items控制项目排列、对齐和换行；项目属性如flex、order和align-self使单个元素控制更灵活。典型案例展示如何使用flex:1实现等分卡片布局。Flexbox简化了响应式设计，无需复杂计算即可实现多种布局需求。

参与评论您还未登录，请先登录后发表或查看评论

速通前端篇 —— HTML

我要学编程的博客

11-16

1万+

HTML的介绍、如何创建HTML文件、HTML文件的基本结构、HTML标签：title标签，标题标签，段落标签，换行标签，图片标签，超链接，表格标签，表单标签，无语义标签列表标签、、综合练习

前端学习——页面布局

weixin_51748707的博客

05-20

3200

1.常见的五种布局方式 1.静态布局：给页面元素设置固定的宽度和高度，单位用px，当窗口缩小，会出现滚动条，拉动滚动条显示被遮挡内容。优点：设计简单。缺点：对于不同尺寸屏幕的兼容性不好，特别是移动端。 2.流式布局：元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。优点：页面元素宽高可以自适应调整。缺点：屏幕尺度跨度过大的情况下，页面不能正常显示。 3.自适应布局：屏幕尺寸或分辨率变化时，页面元素会跟着变化。缺点：页面元素不会随着窗口大小的调整而发生变化

Web前端开发——HTML教程

zhryyds的博客

10-12

661

本篇文章详细总结了前端网页开发的三大必备语言之一：HTML，内容精炼且易懂，适合新手学习

前端学习——CSS布局

qq_42355032的博客

06-30

1455

CSS页面布局技术允许拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。正常布局流是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。下面布局技术会覆盖默认的布局行为：在 css 中实现页面布局的主要方法是设定属性的值。此属性允许我们更改默认的显示方式。正常流中的所有内容都有一个display的值，用作元素的默认行为方式。更改默认显示行为。例如，元素默认为，这意味着在我们的英文文档中，列表项显示为一个在另一个之下。如果我们将显示值更改为，它们将显示在彼此旁

前端学习1——HTML学习

weixin_47322076的博客

01-02

476

前言跟着b站上的pink老师一起学习前端，个人做的一些总结。提示：以下是本篇文章正文内容，下面案例可供参考一、HTML基础知识 1.1 Web标准的构成结构 HTML 表现 CSS 行为 Javascrip 1.2 <title>标签 —— 内容显示在网页名称 <title>第一个页面</title> 1.3 使用工具：vscode ！+Tab键快速生成页面骨架结构 1.4 安装插件扩展工具名称 ...

前端技巧——性能优化篇

小二丶的博客

04-30

1091

前端技巧——性能优化篇

网页制作基础学习——HTML+CSS常用代码

热门推荐

北辰的博客

02-01

4万+

HTML（HyperText Markup Language）,即超文本标记语言，是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。

2018年前端学习心得——总结篇

PINGER007的博客

01-07

2197

学习 2018年，确定了人生的职业规划，开启了前端之路。基础不存在的，本科所了解的HTML标签和简单CSS样式早就不存在了。下面简单总结一下这一年的收获与进步。自我学习（3个月）：前端基础知识，在图书馆随意借书看了好几本（无营养）。感觉CSS3+DOM操作没有太大问题了，其实还是一个未入门的小垃圾。。。感觉这是入门前端初学者的通病，没有在一个大的平台来看待前端的发展及良好的学习路线。多看知乎...

Web前端开发技术——HTML5、CSS3、JavaScript

2301_79690805的博客

04-22

2103

Web前端开发技术——HTML5、CSS3、JavaScript

从零开始学WEB前端——HTML实战练习

2401_87029603的博客

09-10

1190

作为一个合格的程序员，熟练的掌握开发工具是必不可少的。这里给大家稍微的讲解一下前端常用的开发工具。VSCode：插件众多，拓展性强；适用于绝大部分前端开发Sublime Text：界面简洁，轻量级启动快速。HBuilder：国产前端开发工具，非常不错的软件，在开发微信小程序和手机APP上非常好用。WebStorm：jetbrains公司旗下的JavaScript开发工具，适合在前端工程化的项目中使用。Dreamweaver：曾经以PS+DW+FW称霸网页领域，号称网页三剑客。

web前端基础知识——HTML常用标签篇

01-08

二、HTML常用标签的学习： head标签头标签 title标签显示在网页的选项卡区域 body标签显示网页的所有内容 meta标签信息标签 charset=utf-8 meta 标签在head里面标注当前网页的编码格式 utf-8

Web前端开发——HTML快速入门

岁岁岁平安的博客

07-04

482

本篇博客是作者自主开始学习关于JavaWeb的相关知识。这篇博客的主要内容是关于Web前端的HTML的一个快速入门...

React大模型网站-流式推送markdown转换问题以及开启 rehype-raw,rehype-sanitize,remark-gfm等插件的使用

m0_61998604的博客

12-04

857

本文介绍了在React大模型网站中实现流式推送Markdown转换的方法，重点讲解了ReactMarkdown库及其配套插件的使用。主要内容包括：1）ReactMarkdown基础用法；2）通过rehype-raw插件支持HTML标签渲染；3）使用rehype-sanitize防止XSS攻击；4）利用remark-gfm支持GitHub风格的Markdown语法；5）给出了完整的流式渲染实现方案，包含SSE推送、内容累积和实时更新等关键技术。文章还提供了完整的代码示例，帮助开发者快速实现安全可靠的Markd

50、【Ubuntu】【Gitlab】拉出内网 Web 服务：http.server 单/多线程分析（二）

HIT_Weston的博客

12-04

957

本文分析了Python的http.server模块在单线程和多线程模式下的性能表现。通过测试发现，单线程模式下（Python<3.7）并发请求会被阻塞，后发请求需要等待前一个请求完成；而多线程模式下（Python≥3.7）可以同时处理多个请求。作者通过slow_server.py脚本模拟耗时操作，使用time curl命令测试响应时间，验证了线程模型的差异。文章还指出Python 3.7是一个重要分水岭，官方将默认命令行服务器升级为多线程以提升用户体验。技术细节参考了CPython源码，并提供了Git

47、【Ubuntu】【Gitlab】拉出内网 Web 服务：Nginx 事件驱动分析（一）

HIT_Weston的博客

12-01

1008

本文分析了Python的http.server模块与Nginx在Web服务架构上的本质区别。作者指出http.server仅适用于开发测试，而GitLab等完整Web应用需要Nginx的高性能架构。重点阐述了Nginx的事件驱动模型：通过epoll实现异步非阻塞I/O，单线程可处理上万并发连接，避免了传统多线程的资源消耗。文章还展示了Nginx的C语言伪代码实现逻辑，说明其"不轮询、无阻塞、仅处理活跃连接"的核心机制。最后预告将继续深入分析Nginx配置优化等内容。

ruoyi集成camunda实现bpmn在线设计器

xrl2012的专栏

12-03

868

摘要：本文介绍了如何在RuoYi-Vue2前端集成Camunda BPMN在线设计器，实现流程建模功能。通过npm安装bpmn-js等依赖包，配置vue.config.js解决转译和别名问题，并提供了测试页面代码示例。页面包含导入/导出XML/SVG、流程检查、部署等功能，支持BPMN流程设计器的初始化和基本操作。环境要求包括JDK 1.8+、MySQL 5.7+、Node 23+等。完整方案可参考若依工作流。

前端仿真驱动创新：西门子FLOEFD的行业价值与应用指南

anscos的博客

12-05

511

西门子Simcenter FLOEFD作为嵌入CAD的CFD解决方案，精准击中了现代研发“高效迭代、精准预判”的核心需求，其技术革新与应用实践为多行业带来了研发模式的重构，成为高端装备设计不可或缺的核心工具。西门子FLOEFD以“CAD原生、智能高效、多场协同”为核心，打破了设计与仿真的壁垒，尤其适配新能源、电子、增材制造等快速迭代的行业。其价值不仅在于缩短研发周期、降低试验成本，更在于推动工程师将“仿真思维”融入设计全流程，实现从“经验驱动”到“数据驱动”的转型。

前端项目 npm 镜像使用的顺序，和优先级顺序