【前端知识体系】HTML基础知识强化总结，四大体系基础知识分享-计算机技术网

1.如何理解HTML？

2.对WEB标准的理解？

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

对应的标准也分三方面：

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

2.1 结构层标准

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

2.2 表现层标准

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

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的版本问题？

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

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

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

----想了解更多的html相关干货教程关注<计算机技术网(www.ctvol.com)!!>

9.HTML嵌套关系？

10.HTML的默认样式？

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标签吗？

11.1 Form表单提交

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>     <title>login test</title>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     <meta http-equiv="pragma" content="no-cache">     <meta http-equiv="cache-control" content="no-cache">     <meta http-equiv="expires" content="0">     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">     <meta http-equiv="description" content="login test">    </head> <body> <div id="form-div">     <form id="form1" action="/users/login" method="post">         <p>用户名：<input name="userName" type="text" id="txtUserName" tabindex="1" size="15" value=""/></p>         <p>密　码：<input name="password" type="password" id="TextBox2" tabindex="2" size="16" value=""/></p>         <p><input type="submit" value="登录">&nbsp<input type="reset" value="重置"></p>     </form> </div> </body> </html>

11.2 ajax提交

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>     <title>login test</title>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     <meta http-equiv="pragma" content="no-cache">     <meta http-equiv="cache-control" content="no-cache">     <meta http-equiv="expires" content="0">     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">     <meta http-equiv="description" content="ajax方式">     <script src="
                                                        本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304

本文章地址：https://www.ctvol.com/htm5ctutorials/111043.html

【前端知识体系】HTML基础知识强化总结，四大体系基础知识分享