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是可以的)
相关文章
|
4天前
|
人工智能 测试技术 API
一线工程师 2025 总结:LLM 只用了不到 10%,剩下 90% 卡在哪?
2025年,LLM能力爆发,但多数企业仅用到其10%。真正瓶颈不在模型强弱,而在工程落地:延迟不可控、并发崩溃、换模成本高、成本失控成常态。当LLM从“工具”变为“基础设施”,中转层与系统稳定性成为关键。释放剩余90%潜力,需扎实的架构设计与工程治理。
|
17天前
|
数据可视化 安全 测试技术
Anthropic 开源 Bloom:基于 LLM 的自动化行为评估框架
Anthropic推出开源框架Bloom,可自动化评估大语言模型是否阿谀奉承、有政治倾向或绕过监管等行为。不同于传统基准,Bloom基于配置动态生成测试场景,支持多模型、多样化评估,并提供可视化分析,助力模型安全与对齐研究。(237字)
103 12
Anthropic 开源 Bloom:基于 LLM 的自动化行为评估框架
|
3天前
|
人工智能 JSON 自然语言处理
【2026最新最全】从零开始学 Trae:我的第一个贪吃蛇小游戏实战
Trae是字节跳动推出的AI原生代码编辑器,支持智能补全、自动修Bug、多语言开发,集成doubao、DeepSeek等大模型,提供国内版与国际版,助力开发者高效编程。
104 8
|
5天前
|
人工智能 API 开发者
2026年 AI LLM API 开发趋势:技术、架构与应用深度探讨
2026年,LLM API已成为企业开发核心。本文详解API调用、Prompt工程、多轮对话与流式输出,结合聚合平台如poloapi.top,助力开发者高效构建AI应用,把握技术前沿。
|
7天前
|
域名解析 网络协议 Linux
Linux网络基础完全指南(小白也能看懂的网络入门教程)
本教程系统讲解Linux网络基础,涵盖IP地址、子网掩码、网关、DNS等核心概念,介绍ifconfig、ip、ping等常用命令及网络配置文件的使用方法,助力掌握Linux网络配置技能。
230 117
|
12天前
|
存储 监控 安全
📤 史上最全阿里云OSS图床搭建指南:告别本地存储,加速网站访问
阿里云OSS图床助力网站性能飞跃:图片加载从4.2秒缩至1.1秒,月流量成本降35%。结合CDN加速与智能优化,实现高速、安全、低成本的图片存储与分发,提升用户体验,释放创作潜能。
|
2天前
|
缓存 API Python
Python 3.9+ 新特性:字典合并的优雅之道
Python 3.9+ 新特性:字典合并的优雅之道
232 137