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月前
|
前端开发 Java Linux
微服务技术栈——生产环境发布管理
本文介绍大型团队中多环境发布流程及自动化部署方案。涵盖DEV、TEST、PRE、PROD各环境职责,并对比Linux原生、Jenkins+K8S自动化部署模式,以及基于Skywalking的日志排查实践,提升发布效率与系统稳定性。
|
云栖大会 开发者
收到阿里云【乘风者计划】博主证书和奖励
收到阿里云【乘风者计划】博主证书和奖励 2023年2月对我来说是一个很好的开端,因为我在1号就收到了阿里云寄给我的【乘风者计划】博主证书和奖励。好兆头啊! 我收到的是我获得的【技术博主】【星级博主】【专家博主】三个的奖品和证书,一快给我寄过来哒!
3252 2
收到阿里云【乘风者计划】博主证书和奖励
|
4月前
|
Java 应用服务中间件 微服务
SpringBoot
Spring Boot是Spring框架的扩展,旨在简化Spring应用的初始搭建和开发过程。它通过自动配置、内嵌服务器、起步依赖等特性,减少繁琐的配置,实现快速开发与部署,提升开发者效率,是现代Java开发尤其是微服务架构的重要工具。
 SpringBoot
|
4月前
|
机器学习/深度学习 自然语言处理 安全
2026年语音机器人技术架构解析与企业选型指南
随着AI技术发展,语音机器人已广泛应用于政务、医疗、企业服务等领域。本文从技术架构、核心指标、场景适配等维度,系统解析语音机器人选型关键,助力企业科学决策,推动智能化升级。
|
4月前
|
存储 人工智能
什么是QR二维码 ?
QR码是由Denso Wave于1994年发明的二维条码,具高容量、强纠错、易识别等特点,广泛应用于移动支付、票务、物流、数字护照等领域。其结构包含定位、对齐、时序图案及数据区,支持数字、字母、字节、汉字等编码模式,结合智能手机发展,已成为数字化生活的重要工具。
2126 6
|
4月前
|
传感器 安全 机器人
2026年移动机器人技术架构与选型方法论
随着AI技术发展,移动机器人广泛应用于物流、制造、服务、医疗等领域。本文从技术架构、性能指标、场景适配出发,系统梳理选型方法论,涵盖导航精度、交互能力、续航负载等核心参数,结合仓储搬运、柔性装配、商业接待、医疗康养四大场景需求,提出“五步决策法”,助力科学选型。
|
4月前
|
弹性计算 Linux 网络安全
2026阿里云购买云服务器流程及注意事项(新用户指南)
在数字化场景中,个人和企业部署网站、APP 时,常需要依托服务器。相比逐渐被淘汰的虚拟主机和成本较高的独立服务器,云服务器凭借弹性扩展、性价比高的优势成为主流。阿里云 ECS(弹性计算服务)地域节点丰富、配置灵活,但新手容易在地域、实例规格等选择上感到困惑。下面结合最新信息,梳理阿里云服务器的购买流程和核心配置要点,帮助新手高效完成选购。
|
4月前
|
存储 弹性计算 网络安全
阿里云新手必看:2026年云服务器购买全流程与配置选型指南
对阿里云新手来说,选云服务器不用追求高配置,核心是 “匹配需求、控制成本、简化操作”,重点关注 “选购买路径、配核心参数、搭基础环境” 这三方面。下面结合实操经验,给新手梳理清晰的选型框架,帮大家快速选到合适的服务器。
|
4月前
|
人工智能 自然语言处理 供应链
全面解析 RPA 机器人:核心逻辑、行业场景、实战案例与发展趋势
RPA机器人是企业数字化转型的“隐形助手”,通过模拟人工操作,自动完成重复性工作。它无需改造系统,高效连接各类软件,广泛应用于金融、制造、医疗、政务等领域,大幅提升效率、降低成本、减少差错。随着AI融合,RPA正从“工具”进化为“智能员工”,实现自然语言交互、自主决策。未来,人人可用的“全民自动化”时代即将到来。
1034 2
|
4月前
|
弹性计算 关系型数据库 数据库
阿里云服务器最新活动价格:新用户专享u2a实例和新老用户同享云服务器活动价格参考
阿里云最新活动价格参考,目前在阿里云的活动中,新用户专享的通用算力型u2a实例云服务器,例如2核4G配置新用户购买价格为504.60元/1年起。新老用户同享经济型e实例和AMD旗舰9代计算型c9a、通用型g9a、内存型r9a实例云服务器,例如经济型e实例2核4G配置活动价格为599.93元/1年起,计算型c9a实例4核8G活动价格为3459.05元/1年起。本文为大家整理汇总了2026年截至目前,阿里云新用户专享u2a实例云服务器活动价格和新老用户同享的经济型e及计算型c9a等实例规格云服务器的活动价格,以供大家参考。