首页/新闻资讯/正文详情

HTML学习总结

发布时间:2026/11/3 0:18:12 来源:云帆数科 栏目:资讯中心
HTML学习总结
created: 2026-06-13tags: [html, css, 总结]HTML 学习总结从零到能面试一、基础概念HTML 是什么全称HyperText Markup Language超文本标记语言不是编程语言是标记语言——给内容贴标签三个角色HTML骨架 CSS装修 JS水电智能最简页面骨架!DOCTYPEhtml← 声明 HTML5html← 根容器head← 配置区用户看不到title标题/title← 浏览器标签栏显示的文字/headbody← 内容区用户看到的东西 页面内容/body/htmlhead 里的标配metacharsetUTF-8← 不乱码metanameviewportcontentwidthdevice-width, initial-scale1.0← 手机正常显示title标题/title← 标签栏 搜索结果标题linkrelstylesheethrefstyle.css← 引入 CSS二、标签基础标签分类类型特点例子成对标签开始内容/结束p文字/p自闭合标签一个标签搞定imgbrhrinput块级 vs 行内面试常考块级block行内inline位置独占一行在一行内宽高可设置生效设置无效由内容决定默认宽度父容器 100%内容宽度典型标签div, p, h1~h6, ul, lispan, a, strong, em, label三、常用标签一览标题h1~h6h1 最大、最重要每页只用一次不要跳级h1 → h3 不好段落pHTML 里回车换行无效要换行用brstrong 加粗 语义重要b 只有加粗链接a href...面试重点href 目标地址target_blank 新标签页打开relnoopener 安全设置配合_blank使用图片img面试重点src 图片路径alt 替代文字必填alt 两个作用图片裂了显示文字 读屏软件读给盲人列表ulli 无序列表圆点olli 有序列表数字容器div 块级容器包一组内容span 行内容器包一小段文字语义标签面试常问headernavmainsectionarticleasidefooter好处SEO 更好 无障碍更好 代码更清晰四、表单面试必考formaction/submitmethodPOSTlabelforusername用户名/labelinputtypetextidusernamenameusernamerequiredbuttontypesubmit提交/button/formlabel 的 for → input 的 id重要forusername和idusername关联点击文字 → 输入框聚焦用户体验 无障碍GET vs POST面试必考GETPOST数据在哪URL 里?namexxx请求体看不见安全公开较安全适合搜索、查数据登录、提交数据input 常用 typetextpasswordemailnumbercheckboxradiofilehiddensubmitinput 常用属性placeholderrequireddisabledreadonlynamevaluemaxlength五、script 标签加载方式scriptsrcapp.js/script← 阻塞下载执行都卡住 HTMLscriptsrcapp.jsdefer/script← 不阻塞HTML 解析完按顺序执行scriptsrcapp.jsasync/script← 不阻塞下载完立即执行顺序不定默认deferasync下载阻塞 HTML✅ 阻塞❌ 不阻塞❌ 不阻塞执行时机下载完就执行HTML 全解析完下载完就执行顺序按顺序按顺序不保证六、四种加载方式对解析与渲染的影响流程图0001020304050607080910HTML解析过程下载 script.js下载 async.js下载 defer.js下载 style.css─ 执行 script.js─ 执行 async.js打断解析─ 渲染开始等CSS到位─ 执行 defer.js解析完才执行HTML解析默认 script阻塞async script下载不阻塞执行可能阻塞defer script完全不阻塞link CSS下载不阻塞渲染等CSS浏览器加载时间线四种方式对比表④ link CSS读到 link relstylesheet hrefstyle.css 开始下载并行▶️ HTML解析继续 下载完✅ DOM 构建完 CSSOM 构建完 合成渲染树 渲染到屏幕③ defer script延迟读到 script srcapp.js defer 开始下载并行▶️ HTML解析继续 下载完暂存✅ HTML解析完⚙️ 按顺序执行 defer 脚本② async script异步是如果HTML没解析完如果HTML已解析完读到 script srcapp.js async 开始下载并行▶️ HTML解析继续下载完⚙️ 执行 app.js⏸ 打断解析▶️ 解析继续✅ 无事发生① 默认 script阻塞读到 script srcapp.js⏸ HTML解析暂停 下载 app.js⚙️ 执行 app.js▶️ HTML解析继续一句话总结加载方式下载阻塞解析执行阻塞解析渲染等它默认 script✅ 阻塞✅ 阻塞✅ 等async script❌ 不阻塞✅ 可能打断❌ 不等defer script❌ 不阻塞❌ 不阻塞等解析完❌ 不等link CSS❌ 不阻塞—✅ 必须等防白屏八、link 标签引入 CSSlinkrelstylesheethrefstyle.cssrel relation关系relstylesheet 这是一个样式表放head里尽早开始下载下载不阻塞 HTML 解析但渲染必须等 CSS 加载完防 FOUCimport不如link好串行下载更慢九、解析 vs 渲染解析Parsing渲染Rendering做什么读 HTML 文本变数据结构把数据结构画到屏幕用户看到❌ 看不到✅ 看到了类比读菜谱炒菜摆盘十、面试高频考点速览HTML 语义化标签有哪些好处src vs href 区别script 的 defer 和 async 区别块级 vs 行内区别GET vs POST 区别label 的 for 属性作用HTML5 新增了哪些东西为什么放 head 而不是 bodyimg 的 alt 属性有什么用有什么用

相关推荐

​精学C++第一站​ 从命名空间到引用:C++入门核心语法全梳理(13000字长文)
​精学C++第一站​ 从命名空间到引用:C++入门核心语法全梳理(13000字长文)

系列文章目录 精学C系列 1 精学C第一站 感谢佬们支持! 目录 系列文章目录 前言一、C关键字二、命名空间 命名空间的嵌套 命名空间的名字 命名空间的使用三、C输入输出四、缺省参数 概念 缺省参数的分类 … · 2026/11/1 1:36:17

Infer:快速拦住空指针和资源泄漏的静态分析工具
Infer:快速拦住空指针和资源泄漏的静态分析工具

Infer:快速拦住空指针和资源泄漏的静态分析工具 【免费下载链接】infer A static analyzer for Java, C, C, and Objective-C 项目地址: https://gitcode.com/gh_mirrors/infer/infer Infer 覆盖 Java、C、C 和 Objective-C 的静态分析工具,编译前… · 2026/11/1 1:36:17

可白嫖源码---课程设计--毕业设计--springboot高校学科竞赛管理系统[编号:project18952](案例分析)
可白嫖源码---课程设计--毕业设计--springboot高校学科竞赛管理系统[编号:project18952](案例分析)

本文仅展示核心实现逻辑与部分代码片段,完整项目源码、配套文档、数据库脚本内容较多,篇幅有限无法全部放出。 有需要完整资源的同学,可以在评论区留言【资料或领源码】,我会一 一回复站内私信,发送完整文件摘 要本系… · 2026/11/1 1:36:17

LLM文本水印技术:自适应μ参数实现版权保护
LLM文本水印技术:自适应μ参数实现版权保护

1. 项目背景与核心挑战 在大型语言模型(Large Language Models, LLMs)快速发展的当下,如何保护模型输出内容的版权归属成为亟待解决的关键问题。传统数字水印技术主要针对图像、视频等多媒体内容,而文本水印面临着独特挑战:如何在保持语义连贯… · 2026/11/3 14:23:21

中国地级市新房房价数据分析与应用指南
中国地级市新房房价数据分析与应用指南

1. 数据背景与价值解析 2019-2025年我国地级市逐月新房房价数据集是一套具有重要研究价值的空间经济数据资产。作为反映区域经济发展水平的晴雨表,这类数据具有三个典型特征: 时空双重维度 :覆盖全国300余个地级行政区,按月颗粒… · 2026/11/3 14:23:21

多模态数据融合在房颤诊断中的AI应用研究
多模态数据融合在房颤诊断中的AI应用研究

1. 项目背景与临床痛点心房颤动(AF)是最常见的心律失常类型,全球患病率约1-2%。传统诊断主要依赖心电图检查,但存在两大临床痛点:一是阵发性房颤患者发作不规律,常规心电图难以捕捉;二是现有生物… · 2026/11/3 14:23:21

人形机器人核心技术解析与商业化落地趋势
人形机器人核心技术解析与商业化落地趋势

1. 人形机器人产业现状与春晚效应解析2024年央视春晚的舞台上,某科技公司的人形机器人方阵表演成为现象级话题。这群身高1.6米的机器人以0.5毫米重复定位精度完成了集体舞蹈动作,其同步误差控制在8毫秒内,这个看似简单的表演背后是伺服控制、… · 2026/11/3 14:23:21

职场年度总结:数据可视化与深度反思方法论
职场年度总结:数据可视化与深度反思方法论

1. 项目概述:年度总结的价值与意义每到岁末年初,写年度总结已经成为许多职场人士和创业者的固定动作。这份"2025年度总结:在坚持与突破中前行"看似简单,实则蕴含着个人成长与职业发展的深刻思考。作为从业十余年的职业顾… · 2026/11/3 14:23:21

Paperclip:轻量级AI工作流胶合层设计与Node.js+React落地实践
Paperclip:轻量级AI工作流胶合层设计与Node.js+React落地实践

1. 项目概述:Paperclip 不是回形针,而是一个被严重误读的 AI 工程实践入口“Paperclip”这个词在中文技术社区里,最近半年正经历一场诡异的语义漂移。它不再指代办公桌上那个弯折金属丝制成的物理小物件,而是悄然演变成一个高频混… · 2026/11/3 14:22:20

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/2 13:10:28

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 6:04:24

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 5:52:46

STM32F411RE与MAX14431实现SPI隔离:工业现场抗共模干扰实战
STM32F411RE与MAX14431实现SPI隔离:工业现场抗共模干扰实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 1:01:59

ESP32+大模型AI硬件开发:从Demo到产品的8个工程问题
ESP32+大模型AI硬件开发:从Demo到产品的8个工程问题

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 1:01:59

基于MAX14431BAEE+与PIC18F85J10的SPI隔离方案设计与实践
基于MAX14431BAEE+与PIC18F85J10的SPI隔离方案设计与实践

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 1:01:59

双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试
双极步进电机控制实战:DRV8818PWPR与PIC18F86K22驱动调试

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/2 13:10:28

STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析
STM32F207ZG + DRV8818PWPR 步进电机驱动实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 6:04:24

DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案
DRV8818PWPR+dsPIC30F4013工业级双极步进电机控制方案

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/3 5:52:46

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码