【前端知识体系-HTML相关】HTML基础知识强化总结
1.如何理解HTML？
- HTML类似于一份word“文档”
- 描述文档的“结构”
- 有区块和大纲
2.对WEB标准的理解？
Web标准是由一系列标准组合而成。一个网页主要由三部分组成：结构层、表现层和行为层。
对应的标准也分三方面：
- 结构化标准语言主要包括XHTML和HTML以及XML，
- 表现层标准语言主要包括CSS，
- 行为标准主要包括对象模型，DOM、ECMAScript等
2.1 结构层标准
结构化标准语言，就是W3C规定的主要包括HTML和XHTML以及XML，在页面body里面我们写入的标签都是为了页面的结构。
- 标签的书写，需要开始和结束。单便签除外；
- 块级元素不能放在p标签里面。li内可以包含div标签。
- 块元素里面可以放在块和内联，特殊的 p和 h1—h6里面不要放块元素，li和div可以放很多。因为这两个标签，本身就有容器的属性
- 内联里面要放内联，不要放块。（嵌套关系）
- 结构与表现分离
- 命名一定要规范
2.2 表现层标准
表现标准语言主要包括CSS（Cascading Style Sheets）层叠式样式表，通过CSS样式表，W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言，通过CSS样式可以是页面的结构标签更具美感。
- 尽可能使用外部引入的方式，达到分离的目的
- 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的版本问题？
- HTML4/4.0.1(SGML)(标签允许不结束)
- XHTML(XML)（标签必须结束，属性必须带引号，属性必须有值，标签属性必须有值）
- HTML5（类似于HTML4的写法）
[!NOTE]
关键点：HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
7.HTML5新增的内容有哪些？
- 新的区块标签：section,article,nav,aside
- 表单增强：日期、时间、搜索（修改type的类型实现）；表单验证；placeholder
- 语义增强：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嵌套关系？
- 块级元素可以包含行内元素
- 块级元素不一定能包含块级元素(p标签不能包含div标签)
- 行内元素“一般”不能包含块级元素（a包含div是可以的）
10.HTML的默认样式？
- 默认样式的意义
- 默认样式代理的问题
- 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标签吗？
- form标签可以使用submit, reset
- 使用form可以直接一次性获取所有的form窗体的数据属性
- 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="登录"> <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="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function login() {
$.ajax({
//几个参数需要注意一下
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: "/users/login" ,//url
data: $('#form1').serialize(),
success: function (result) {
console.log(result);//打印服务端返回的数据(调试用)
if (result.resultCode == 200) {
alert("SUCCESS");
}
;
},
error : function() {
alert("异常！");
}
});
}
</script>
</head>
<body>
<div id="form-div">
<form id="form1" onsubmit="return false" action="##" 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="button" value="登录" onclick="login()"> <input type="reset" value="重置"></p>
</form>
</div>
</body>
</html>
[!NOTE]
扩展思考：Form表单提交数据给一个非同源的网址，如在A网址(http://www.A.com)上直接向B网站(http://www.B.com)发送数据请求, 为什么不会触发浏览器的同源策略限制呢？
【前端知识体系-HTML相关】HTML基础知识强化总结的更多相关文章
- Atitit 知识图谱解决方案：提供完整知识体系架构的搜索与知识结果overview
Atitit 知识图谱解决方案:提供完整知识体系架构的搜索与知识结果overview 知识图谱的表示和在搜索中的展1 提升Google搜索效果3 1.找到最想要的信息.3 2.提供最全面的摘要.4 ...
- 前端知识体系-NodeJS相关】NodeJS基础知识全面总结
NodeJS基础知识 1. Node的全局对象和全局变量 1.1 全局对象:所有模块都可以调用的 global:表示Node所在的全局环境,类似于浏览器的window对象. process:该对象表示 ...
- C/C++知识总结 二 C/C++基础知识
C/C++基础知识 C/C++基本格式说明 C/C++基本常识说明 C/C++基本格式说明 C语言基本格式 #include<stdio.h> //预处理文件 int main() //自 ...
- 【前端知识体系-JS相关】JS基础知识总结
1 变量类型和计算 1.1 值类型和引用类型的区别? 值类型:每个变量都会存储各自的值.不会相互影响 引用类型:不同变量的指针执行了同一个对象(数组,对象,函数) 1.2 typeof可以及检测的数据 ...
- 【前端知识体系-CSS相关】CSS基础知识强化
1.CSS样式(选择器)的优先级? 1.1 权重的计算规则 第一优先级:无条件优先的属性只需要在属性后面使用!important.它会覆盖页面内任何位置定义的元素样式.(ie6支持上有些bug). 第 ...
- 【前端知识体系-JS相关】对移动端和Hybrid开发的理解？
1.hybrid是什么,为何使用hybrid呢? 概念: hybrid就是前端和客户端的混合开发 需要前端开发人员和客户端开发人员配合完成 某些环节也可能会涉及到server端 大前端:网页.APP. ...
- 【前端知识体系-JS相关】10分钟搞定JavaScript正则表达式高频考点
1.正则表达式基础 1.1 创建正则表达式 1.1.1 使用一个正则表达式字面量 const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi; 1.1.2 调用RegExp对象的构 ...
- 【前端知识体系-JS相关】深入理解MVVM和VUE
1. v-bind和v-model的区别? v-bind用来绑定数据和属性以及表达式,缩写为':' v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 2. Vue 中三要素的是 ...
- 【前端知识体系-CSS相关】CSS工程化方案
1.如何解决CSS的模块化问题? 使用Less,Sass等CSS预处理器 使用PostCSS插件(postcss-import/precss) 使用webpack处理CSS(css-loader + ...
随机推荐
- Python requests库的使用（二）
1.请求异常处理 请求异常类型: 请求超时处理(timeout): 实现代码: import requestsfrom requests import exceptions #引入exc ...
- shiro加密算法
第一节的时候我介绍过,shiro有很多加密算法,如md5和sha,而且还支持加盐,使得密码的解析变得更有难度,更好的保障了数据的安全性. 这里我们要介绍的是md5算法,因为比较常用.首先我们来看看md ...
- 深入理解Java对象
深入理解Java对象(理清关系) 1.对象的创建过程: 所有创建过程如下所示: new 类名 根据new的参数在常量池中定位一个类的符号引用. 如果没有找到这个符号引用,说明类还没有被加载,则进行类的 ...
- 高性能TcpServer(C#) - 6.代码下载
高性能TcpServer(C#) - 1.网络通信协议 高性能TcpServer(C#) - 2.创建高性能Socket服务器SocketAsyncEventArgs的实现(IOCP) 高性能TcpS ...
- 解决Ubuntu在虚拟机窗口不能自适应
试了很多办法这个好用 相信很多人在装虚拟机的时候,遇到了窗口过小不能自适应的问题.我也是查了好多资料,都说安装Vmware Tools即可解决,还有说修改分辨率也可以.两种方法亲测无效. Vmware ...
- 程序员代码面试指南 IT名企算法与数据结构题目最优解
原文链接 这是一本程序员面试宝典!书中对IT名企代码面试各类题目的最优解进行了总结,并提供了相关代码实现.针对当前程序员面试缺乏权威题目汇总这一痛点,本书选取将近200道真实出现过的经典代码面试题,帮 ...
- unsigned int数据类型最大数
#include <stdio.h> int main() { unsigned , b = ; ) { a++; } printf( ); unsigned ; do { n = n / ...
- 201871010101-陈来弟《面向对象程序设计（Java）》第十二周学习总结
201871010101-陈来弟<面向对象程序设计(Java)>第十二周学习总结 实验十 集合与GUI初步 实验时间 2019-11-14 第一部分 理论部分 1.(1) 用户界面 ...
- 201871010124-王生涛《面向对象程序设计（java）》第十四周学习总结
项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...
- 多线程(四)多线程同步_Critical Section临界区
临界区是指一个小代码段,在代码能够执行前,它必须独占对某些共享资源的访问权.和使用mutex一样,它们都是以原子操作方式来对共享资源进行访问. 临界区又叫关键代码段,与上一篇的mutex互斥体实现的功 ...