HTML基础强化

简介: HTML是网页的结构基础,类似文档框架,通过标签构建内容结构。Web标准由结构(HTML/XHTML)、表现(CSS)和行为(DOM/ECMAScript)三部分组成,强调三者分离。W3C规范要求代码语义化、标签闭合、命名规范。HTML5新增语义标签如header、nav、article等,提升可读性与SEO。布局方式多样,支持多种元素分类与嵌套规则。

1.如何理解HTML?

  1. HTML类似于一份word“文档”
  2. 描述文档的“结构”
  3. 有区块和大纲

2.对WEB标准的理解?

Web标准是由一系列标准组合而成。一个网页主要由三部分组成:结构层、表现层和行为层。

对应的标准也分三方面:

  • 结构化标准语言主要包括XHTML和HTML以及XML,
  • 表现层标准语言主要包括CSS,
  • 行为标准主要包括对象模型,DOM、ECMAScript等

2.1 结构层标准

结构化标准语言,就是W3C规定的主要包括HTML和XHTML以及XML,在页面body里面我们写入的标签都是为了页面的结构。

  1. 标签的书写,需要开始和结束。单便签除外;
  2. 块级元素不能放在p标签里面。li内可以包含div标签。
  3. 块元素里面可以放在块和内联,特殊的 p和 h1—h6里面不要放块元素,li和div可以放很多。因为这两个标签,本身就有容器的属性
  4. 内联里面要放内联,不要放块。(嵌套关系)
  5. 结构与表现分离
  6. 命名一定要规范

2.2 表现层标准

表现标准语言主要包括CSS(Cascading Style Sheets)层叠式样式表,通过CSS样式表,W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言,通过CSS样式可以是页面的结构标签更具美感。

  1.   尽可能使用外部引入的方式,达到分离的目的
  2.   CSS选择器,优先级
  3.   代码简洁

2.3 行为层标准

行为是指页面和用户具有一定的交互,同时页面结构或者表现发生变化,标准主要包括对象模型(如W3C DOM)、ECMAScript并要求这三部分分离。

  • DOM是Document Object Model文档对象模型的缩写。DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突,给予web设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对像。
  • ECMAScript是ECMA(EuropeanComputer Manufacturers Association)制定的标准脚本语言(JAVAScript)

3.对W3C的认识?

W3C对web标准提出了规范化的要求,也就是在实际编程中的一些代码规范。

主要包含如下几点:

3.1 对于结构的要求

  • 1)标签字母要小写
  • 2)标签要闭合
  • 3)标签不允许随意嵌套

3.2 对于css和js的要求

  • 1)尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块,符合规范。同时提高页面渲染速度,提高用户的体验。
  • 2)样式尽量少用行间样式表,使结构与表现分离,标签的id和class等属性命名要做到见文知义,标签越少,加载越快,用户体验提高,代码维护简单,便于改版。
  • 3)不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性。

4.什么是前端语义化?

[!NOTE]
语义化就是是让机器可以读懂内容,web页面的解析是由搜索引擎来进行搜索,机器来解析。

4.1 标签是有语义的

h1~h6、thead、ul、ol等标签,初期的语义化标签:程序员利用HTML标签的id和class属性,进一步对HTML标签进行描述,如对页脚HTML标签添加如id="footer"或者class="footer"的属性(值)(使用有语义的对于需要声明的变量和class,id)

4.2 HTML5的语义标签

w3C采用了header/footer; section(章节、页眉、页脚)/article(内容区域); nav导航;aside 不重要的内容;em(emphasize)/strong增强; i(icon)制作图标

5.谈一下页面布局架构?

  • CSS布局:table布局,float布局,flex布局(瀑布流布局),inline-block布局
  • 三大框架,页面架构

6.HTML的版本问题?

  1. HTML4/4.0.1(SGML)(标签允许不结束)
  2. XHTML(XML)(标签必须结束,属性必须带引号,属性必须有值,标签属性必须有值)
  3. HTML5(类似于HTML4的写法)

[!NOTE]
关键点:HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言

7.HTML5新增的内容有哪些?

  1. 新的区块标签:section,article,nav,aside
  2. 表单增强:日期、时间、搜索(修改type的类型实现);表单验证;placeholder
  3. 语义增强:header/footer; section/article; nav导航;aside 不重要的内容;em(emphasize)/strong增强; i(icon)制作图标

8.HTML的元素分类?

  • 块级元素block(方块形状,占据一整行):div ul ol li dl dt dd h1 h2 h3 h4…p
  • 行内元素inline(一行中的某个位置):a b span img input select strong(强调的语气)
  • inline-block(行内,有宽高属性):selection

[!NOTE]
行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素:br、meta、hr、link、input、img

9.HTML嵌套关系?

  1. 块级元素可以包含行内元素
  2. 块级元素不一定能包含块级元素(p标签不能包含div标签)
  3. 行内元素“一般”不能包含块级元素(a包含div是可以的)
相关文章
|
13天前
|
Kubernetes 安全 API
Kubernetes API 扩展与安全:别让谁都能对集群“下手”
Kubernetes API 扩展与安全:别让谁都能对集群“下手”
98 15
|
29天前
|
存储 缓存 调度
阿里云Tair KVCache仿真分析:高精度的计算和缓存模拟设计与实现
在大模型推理迈向“智能体时代”的今天,KVCache 已从性能优化手段升级为系统级基础设施,“显存内缓存”模式在长上下文、多轮交互等场景下难以为继,而“以存代算”的多级 KVCache 架构虽突破了容量瓶颈,却引入了一个由模型结构、硬件平台、推理引擎与缓存策略等因素交织而成的高维配置空间。如何在满足 SLO(如延迟、吞吐等服务等级目标)的前提下,找到“时延–吞吐–成本”的最优平衡点,成为规模化部署的核心挑战。
457 38
阿里云Tair KVCache仿真分析:高精度的计算和缓存模拟设计与实现
|
11天前
|
数据采集 自然语言处理 监控
大模型应用:情感分析模型微调深度分析:从基础预测到性能优化.6
本文系统讲解中文情感分析模型微调后的深度评估方法,涵盖微调流程、预测置信度分析、混淆矩阵可视化、错误模式挖掘及系统性偏差诊断,强调超越准确率的可解释性分析,助力构建可靠、鲁棒的AI系统。
139 13
|
1月前
|
人工智能 安全 API
Nacos 安全护栏:MCP、Agent、配置全维防护,重塑 AI Registry 安全边界
Nacos安全新标杆:精细鉴权、无感灰度、全量审计!
671 66
|
22天前
|
数据采集 人工智能 JSON
90%的大模型微调失败,都栽在数据集上!从零搭建高质量数据集保姆级指南
90%的大模型微调失败源于数据集问题!本文从零拆解高质量数据集搭建全流程,涵盖需求分析、数据采集清洗、标注结构化、质量校验到格式转换7大步骤,结合美妆文案等实例,手把手教你避开常见坑。实现精准风格定制,让模型真正“学得会、用得好”。
|
30天前
|
人工智能 JSON 自然语言处理
【2026最新最全】从零开始学 Trae:我的第一个贪吃蛇小游戏实战
Trae是字节跳动推出的AI原生代码编辑器,支持智能补全、自动修Bug、多语言开发,集成doubao、DeepSeek等大模型,提供国内版与国际版,助力开发者高效编程。
357 8
|
30天前
|
存储 人工智能
什么是QR二维码 ?
QR码是由Denso Wave于1994年发明的二维条码,具高容量、强纠错、易识别等特点,广泛应用于移动支付、票务、物流、数字护照等领域。其结构包含定位、对齐、时序图案及数据区,支持数字、字母、字节、汉字等编码模式,结合智能手机发展,已成为数字化生活的重要工具。
512 6
|
30天前
|
前端开发 Java Linux
微服务技术栈——生产环境发布管理
本文介绍大型团队中多环境发布流程及自动化部署方案。涵盖DEV、TEST、PRE、PROD各环境职责,并对比Linux原生、Jenkins+K8S自动化部署模式,以及基于Skywalking的日志排查实践,提升发布效率与系统稳定性。
|
23天前
|
人工智能 运维 监控
进阶指南:BrowserUse + AgentRun Sandbox 最佳实践
本文将深入讲解 BrowserUse 框架集成、提供类 Manus Agent 的代码示例、Sandbox 高级生命周期管理、性能优化与生产部署策略。涵盖连接池设计、安全控制、可观测性建设及成本优化方案,助力构建高效、稳定、可扩展的 AI 浏览器自动化系统。
419 47