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是可以的)
相关文章
|
7月前
|
前端开发 Java Linux
微服务技术栈——生产环境发布管理
本文介绍大型团队中多环境发布流程及自动化部署方案。涵盖DEV、TEST、PRE、PROD各环境职责,并对比Linux原生、Jenkins+K8S自动化部署模式,以及基于Skywalking的日志排查实践,提升发布效率与系统稳定性。
|
2月前
|
供应链 API 开发者
电商平台api:1688 阿里巴巴平台商品详情全解析
本文深度解析1688商品详情全量数据结构(含阶梯价、MOQ、代发价、工厂信息等B2B特有字段),详解官方API(alibaba.product.get)调用与签名机制,提供Python实战采集代码,并对比淘宝、京东等主流平台接口差异,助力开发者高效构建B2B选品与供应链系统。(239字)
|
云栖大会 开发者
收到阿里云【乘风者计划】博主证书和奖励
收到阿里云【乘风者计划】博主证书和奖励 2023年2月对我来说是一个很好的开端,因为我在1号就收到了阿里云寄给我的【乘风者计划】博主证书和奖励。好兆头啊! 我收到的是我获得的【技术博主】【星级博主】【专家博主】三个的奖品和证书,一快给我寄过来哒!
3374 2
收到阿里云【乘风者计划】博主证书和奖励
|
存储 监控 算法
垃圾回收器、垃圾回收算法、空间分配担保、JVM调优、GC回收对象的过程
垃圾回收器、垃圾回收算法、空间分配担保、JVM调优、GC回收对象的过程
545 0
|
2月前
|
JSON Java API
1688店铺商品API开发指南
1688开放平台alibaba.product.list.get接口,支持企业认证账号分页获取商品ID、标题、价格、库存等核心数据(每页50条),助力商品管理与营销决策。需申请API权限,日调用限5000次,推荐使用官方SDK提升开发效率。(239字)
|
7月前
|
前端开发 JavaScript 安全
HTML 链接
HTML链接是网页导航的核心,通过`<a>`标签创建,利用href属性指向目标地址。可实现页面跳转、锚点定位、文件下载等,支持文本、图片等多种形式,并可通过target、rel、download等属性控制打开方式与行为,配合CSS和JavaScript增强交互体验。
1389 4
|
7月前
|
Java 应用服务中间件 微服务
SpringBoot
Spring Boot是Spring框架的扩展,旨在简化Spring应用的初始搭建和开发过程。它通过自动配置、内嵌服务器、起步依赖等特性,减少繁琐的配置,实现快速开发与部署,提升开发者效率,是现代Java开发尤其是微服务架构的重要工具。
 SpringBoot
|
9月前
|
人工智能 供应链 监控
1688运营实战指南:从入门到精通,全面提升店铺流量与转化
本指南系统梳理1688平台运营核心,涵盖流量获取、转化提升与数据驱动策略,助力商家构建专业店铺、优化商品信息、高效获客转化,实现B2B生意持续增长。
|
9月前
|
传感器 供应链 监控
1688商家必看:如何高效转化精准流量?四大核心策略深度解析
本文针对1688平台B2B商家流量转化难题,提出四大核心策略:优化商品基础提升信任、科学关联销售提高客单价、构建专业客服体系促进成交、打造差异化价值突破同质竞争。通过系统化运营与数据驱动,助力商家实现从“有流量”到“能成交”的高效转化闭环。
|
安全 机器人 API
【转】WordPress防垃圾评论:Akismet插件安装教程
Akismet 是 WordPress 官方推荐的反垃圾评论插件,由 Automattic 开发,全球安装量超 500 万次。它能智能识别并拦截垃圾评论与恶意链接,保护网站整洁与 SEO 排名。本文详解其安装、注册与配置步骤,助你轻松启用这一强大工具,为网站安全保驾护航。
411 5