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 的作用
1 html, body, div, span, applet, object, iframe,
2 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3 a, abbr, acronym, address, big, cite, code,
4 del, dfn, em, img, ins, kbd, q, s, samp,
5 small, strike, strong, sub, sup, tt, var,
6 b, u, i, center,
7 dl, dt, dd, ol, ul, li,
8 fieldset, form, label, legend,
9 table, caption, tbody, tfoot, thead, tr, th, td,
10 article, aside, canvas, details, embed,
11 figure, figcaption, footer, header, hgroup,
12 menu, nav, output, ruby, section, summary,
13 time, mark, audio, video {
14 margin: 0;
15 padding: 0;
16 border: 0;
17 font-size: 100%;
18 font: inherit;
19 vertical-align: baseline;
20 }
21 article, aside, details, figcaption, figure,
22 footer, header, hgroup, menu, nav, section {
23 display: block;
24 }
25 body {
26 line-height: 1;
27 }
28 ol, ul {
29 list-style: none;
30 }
31 blockquote, q {
32 quotes: none;
33 }
34 blockquote:before, blockquote:after,
35 q:before, q:after {
36 content: '';
37 content: none;
38 }
39 table {
40 border-collapse: collapse;
41 border-spacing: 0;
42 }
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>
HTML基础强化的更多相关文章
- C#基础强化-进程操作
using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...
- C#基础强化-继承与多态
/** 特性: 单根性:一个子类只能有一个父类 传递性:爷爷类 爹类 儿子类 里氏转换 1.子类可以赋值给父类 2.如果父类装的是子类对象,则可以将这个父类转换为对应的子类 ...
- java基础强化——深入理解反射
目录 1.从Spring容器的核心谈起 2. 反射技术初探 2.1 什么是反射技术 2.2 类结构信息和java对象的映射 3 Class对象的获取及需要注意的地方 4. 运行时反射获取类的结构信息 ...
- java基础强化——深入理解java注解(附简单ORM功能实现)
目录 1.什么是注解 2. 注解的结构以及如何在运行时读取注解 2.1 注解的组成 2.2 注解的类层级结构 2.3 如何在运行时获得注解信息 3.几种元注解介绍 3.1 @Retention 3.2 ...
- CSS基础强化
1. 浮动引起元素变成行内块元素-display:inline-block <div style="width: 400px;height: 200px;"> < ...
- 深度强化学习资料（视频+PPT+PDF下载）
https://blog.csdn.net/Mbx8X9u/article/details/80780459 课程主页:http://rll.berkeley.edu/deeprlcourse/ 所有 ...
- 《Android第一行代码》笔记
学习Android开发差点儿相同有两年时间了.期间也做了大大小小的一些项目.近来抽出闲暇想把Android基础强化一下,之前在网上看到了郭霖郭大神的几篇博客.从中受益不少.于是花了近一周时间看完了郭神 ...
- C#知识点汇总
核心技术课程 编程基础强化练习.面向过程编程(变量.if.for.while.函数.类型转换.枚举 .数组.重载.值类型.引用类型.ref.out.字符串).面向对象编程(类.继承 .接口.异常.索引 ...
- 《Java面试全解析》505道面试题详解
<Java面试全解析>是我在 GitChat 发布的一门电子书,全书总共有 15 万字和 505 道 Java 面试题解析,目前来说应该是最实用和最全的 Java 面试题解析了. 我本人是 ...
随机推荐
- 01-mysql必知必会
概述 主键:唯一区分表中每个行(不可重复,不允许null mysql:基于客户-服务器的数据库系统 使用mysql mysql是部署在主机上的,可以通过ssh建立mysql连接 # 显示数据库 sho ...
- Java基础系列（20）- while循环
循环结构 while循环 do-循环 for循环 在java5中引入了一种主要用于数组的增强型for循环 while循环 while是最基本的循环,它的结构为 while(布尔表达式){ //循环内容 ...
- Docker系列（4）- run的流程和docker原理
回顾HelloWorld流程 底层工作原理 Docker是怎么工作的? Docker是一个Client-Server结构的系统,Docker的守护进程运行在宿主机上.通过Socket从客户端访问 Do ...
- python多线程与_thread模块
进程与线程 1.进程:计算机程序只是存储在磁盘中的可执行二进制(或其他类型)的文件.只有把他们加载到内存中并被操作系统调用,才具有其生命周期.进程则是一个执行中的程序.每个进程都拥有自己的地址空间,内 ...
- re.findall用法
其中,re.findall() 函数可以遍历匹配,可以获取字符串中所有匹配的字符串,返回一个列表. 在python源代码中,展示如下: 搜索string,返回一个顺序访问每一个匹配结果(Match对象 ...
- Ybt#452-序列合并【期望dp】
正题 题目链接:https://www.ybtoj.com.cn/contest/113/problem/2 题目大意 一个空序列,每次往末尾加入一个\([1,m]\)中的随机一个数.如果末尾两个数相 ...
- 使用 Vue 脚手架，为什么要学 webpack？
先问大家一个很简单的问题: vue init webpack prjectName 与 vue create projectName 有什么区别呢? 它们是 Vue-cli 2 和 Vue-cli3 ...
- 数值计算：四阶龙格-库塔法 for 二阶微分方程
引言 考虑存在以下二阶偏微分方程 \[\begin{align} f_2 \cdot \ddot{X(t)}+f_1 \cdot \dot{X(t)} +f_0 \cdot {X(t)} =F(t) ...
- 我惊了！CompletableFuture居然有性能问题！
你好呀,我是歪歪. 国庆的时候闲来无事,就随手写了一点之前说的比赛的代码,目标就是保住前 100 混个大赛的文化衫就行了. 现在还混在前 50 的队伍里面,稳的一比. 其实我觉得大家做柔性负载均衡那题 ...
- HC(Histogram-based Contrast) 基于直方图对比度的显著性
HC(Histogram-based Contrast) 基于直方图对比度的显著性 来源于: 2011, Global contrast based salient region detection, ...