1.1HTML基础强化

简介: HTML是网页的结构基础,类似Word文档,由块级与内联元素构成层级结构。Web标准分为结构(HTML/XHTML)、表现(CSS)和行为三层,强调分离与规范。W3C制定标准,要求标签小写、闭合、不乱嵌套,提倡语义化标签,提升可读性与SEO。CSS应外链引入,避免行间样式,JS也应外联。HTML5新增语义标签、表单类型与API,支持更丰富交互。页面布局历经table、float到flex发展。前端语义化让机器理解内容,通过合理标签与命名提升可维护性与用户体验。Ajax提交数据可不依赖form,但form在同源策略下仍可跨域提交,因其属于传统导航行为,不受AJAX同源限制影响。

1.如何理解HTML?

  1. HTML类似于一份word“文档”
  2. 描述文档的“结构”
  3. 有区块和大纲
    2.对WEB标准的理解?
    Web标准是由一系列标准组合而成。一个网页主要由三部分组成:结构层、表现层和行为层。
    对应的标准也分三方面:
    ● 结构化标准语言主要包括XHTML和HTML以及XML,
    ● 表现层标准语言主要包括CSS,
    ● 行为标准主要包括对象模型,DOM、ECMAScript等
    2.1 结构层标准
    结构化标准语言,就是W3C规定的主要包括HTML和XHTML以及XML,在页面body里面我们写入的标签都是为了页面的结构。
  4. 标签的书写,需要开始和结束。单便签除外;
  5. 块级元素不能放在p标签里面。li内可以包含div标签。
  6. 块元素里面可以放在块和内联,特殊的 p和 h1—h6里面不要放块元素,li和div可以放很多。因为这两个标签,本身就有容器的属性
  7. 内联里面要放内联,不要放块。(嵌套关系)
  8. 结构与表现分离
  9. 命名一定要规范
    2.2 表现层标准
    表现标准语言主要包括CSS(Cascading Style Sheets)层叠式样式表,通过CSS样式表,W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言,通过CSS样式可以是页面的结构标签更具美感。
  10. 尽可能使用外部引入的方式,达到分离的目的
  11. CSS选择器,优先级
  12. 代码简洁
    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的版本问题?
  13. HTML4/4.0.1(SGML)(标签允许不结束)
  14. XHTML(XML)(标签必须结束,属性必须带引号,属性必须有值,标签属性必须有值)
  15. HTML5(类似于HTML4的写法)
    [!NOTE]
    关键点:HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言
    7.HTML5新增的内容有哪些?
  16. 新的区块标签:section,article,nav,aside
  17. 表单增强:日期、时间、搜索(修改type的类型实现);表单验证;placeholder
  18. 语义增强: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嵌套关系?
  19. 块级元素可以包含行内元素
  20. 块级元素不一定能包含块级元素(p标签不能包含div标签)
  21. 行内元素“一般”不能包含块级元素(a包含div是可以的)
    10.HTML的默认样式?
  22. 默认样式的意义
  23. 默认样式代理的问题
  24. CSS Reset 的作用
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    11.使用ajax方式来提交数据可以不使用form标签吗?
  25. form标签可以使用submit, reset
  26. 使用form可以直接一次性获取所有的form窗体的数据属性
  27. form可以较好地实现表单验证等功能
    11.1 Form表单提交
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">













用户名:


密 码:


&nbsp





11.2 ajax提交
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
















用户名:


密 码:


 





[!NOTE]
扩展思考:Form表单提交数据给一个非同源的网址,如在A网址(http://www.A.com)上直接向B网站(http://www.B.com)发送数据请求, 为什么不会触发浏览器的同源策略限制呢?

相关文章
|
3月前
|
前端开发
前端开发 之 15个炫酷按钮特效上【附完整源码】
本篇文章内容展示了灯光效果按钮、拉链式展开按钮、毛玻璃式按钮等众多炫酷按钮特效,并给出了完整代码及注释
410 6
|
30天前
|
JSON 前端开发 测试技术
Kimi-k2.6 流式回包乱序后,我这样接入 ​D​М‌X​Α‌РΙ
kimi-k2.6 不止于聊天,其核心价值在于“可执行交付”:统一支持代码生成、长时程任务、Agent协作、文档→技能复用及多格式输出,具备工程级组合能力。它契合企业对“单模型多工位”的刚需——在研发、内容中台等场景中,稳定闭环完成需求拆解、编码、文档整理等多步任务。真正落地需依托DMXAPI网关实现标准化API集成,解决Web路径的不确定性,让模型能力成为可度量、可审计、可持续的生产基础执行层。(239字)
|
6月前
|
数据采集 人工智能 自然语言处理
2025数字人竞争力榜单发布:实时交互数字人全面进化
在数字经济迅速发展的背景下,2025年中国数字人企业的崛起为各行业带来了新的机遇与挑战。本文将深入分析不同数字人企业的特点与全栈技术的应用,提供选型指南,帮助企业识别合适的合作伙伴,从而提升市场竞争力,实现数字化转型与创新发展。
294 8
|
3月前
|
前端开发
前端开发 之 15个页面加载特效上【附完整源码】
本篇文章内容展示了彩球环绕加载、音乐波动加载、跷跷板加载等页面炫酷加载特效,并给出了完整的代码及注释
396 4
前端开发 之 15个页面加载特效上【附完整源码】
|
3月前
|
Shell C++ iOS开发
VS Code 如何更改默认终端?4种方法详解
本文详解VS Code中切换默认终端的4种方法:命令面板快速设置、启动配置文件图标直观操作、终端内命令即时切换、设置UI持久化配置,并附常见问题解答,助你高效定制开发环境。(239字)
860 1
|
4月前
|
存储 弹性计算 人工智能
2026年阿里云ECS云服务器部署OpenClaw(原Clawdbot)零基础喂饭级教程
在2026年AI Agent技术飞速普及的当下,OpenClaw(原Clawdbot,曾用名Moltbot)凭借开源免费、功能强大、生态完善的核心优势,成为零基础用户与中小企业搭建专属AI助手的首选工具。这款由开源社区主导研发的AI自动化代理框架,截至2026年2月,GitHub星标已突破18.8万,Fork数超3.3万,是年度增长最快的开源AI项目之一。与传统聊天机器人不同,OpenClaw具备“思考+执行”双重能力,可通过自然语言指令完成办公自动化、网页抓取、代码开发、内容创作、数据整理等各类复杂任务,搭配ClawHub技能市场的3000+款模块化技能插件,能轻松适配个人办公、团队协作、业
971 10
|
9月前
|
算法
三电平逆变器SVPWM控制(无解耦功能)与谐波分析
三电平逆变器的空间矢量脉宽调制(SVPWM)控制方法,重点分析在不使用解耦控制的情况下实现5%谐波含量的技术方案。我们将使用MATLAB/Simulink进行建模和仿真分析。
679 1
|
小程序 JavaScript
微信小程序的事件绑定方式
微信小程序的事件绑定方式
501 4
|
算法 机器人
|
设计模式 API 数据处理
TICK 中Kapacitor功能和使用说明
TICK 中Kapacitor功能和使用说明
573 2