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是可以的）

10.HTML的默认样式？

  1. 默认样式的意义
  2. 默认样式代理的问题
  3. 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标签吗？

  1. form标签可以使用submit, reset
  2. 使用form可以直接一次性获取所有的form窗体的数据属性
  3. 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="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()">&nbsp;<input type="reset" value="重置"></p>

    </form>

</div>

</body>

</html>

HTML基础强化的更多相关文章

  1. C#基础强化-进程操作

    using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...

  2. C#基础强化-继承与多态

    /**  特性:    单根性:一个子类只能有一个父类    传递性:爷爷类 爹类 儿子类  里氏转换    1.子类可以赋值给父类    2.如果父类装的是子类对象,则可以将这个父类转换为对应的子类 ...

  3. java基础强化——深入理解反射

    目录 1.从Spring容器的核心谈起 2. 反射技术初探 2.1 什么是反射技术 2.2 类结构信息和java对象的映射 3 Class对象的获取及需要注意的地方 4. 运行时反射获取类的结构信息 ...

  4. java基础强化——深入理解java注解(附简单ORM功能实现)

    目录 1.什么是注解 2. 注解的结构以及如何在运行时读取注解 2.1 注解的组成 2.2 注解的类层级结构 2.3 如何在运行时获得注解信息 3.几种元注解介绍 3.1 @Retention 3.2 ...

  5. CSS基础强化

    1. 浮动引起元素变成行内块元素-display:inline-block <div style="width: 400px;height: 200px;"> < ...

  6. 深度强化学习资料（视频+PPT+PDF下载）

    https://blog.csdn.net/Mbx8X9u/article/details/80780459 课程主页:http://rll.berkeley.edu/deeprlcourse/ 所有 ...

  7. 《Android第一行代码》笔记

    学习Android开发差点儿相同有两年时间了.期间也做了大大小小的一些项目.近来抽出闲暇想把Android基础强化一下,之前在网上看到了郭霖郭大神的几篇博客.从中受益不少.于是花了近一周时间看完了郭神 ...

  8. C#知识点汇总

    核心技术课程 编程基础强化练习.面向过程编程(变量.if.for.while.函数.类型转换.枚举 .数组.重载.值类型.引用类型.ref.out.字符串).面向对象编程(类.继承 .接口.异常.索引 ...

  9. 《Java面试全解析》505道面试题详解

    <Java面试全解析>是我在 GitChat 发布的一门电子书,全书总共有 15 万字和 505 道 Java 面试题解析,目前来说应该是最实用和最全的 Java 面试题解析了. 我本人是 ...

随机推荐

  1. 一起学习PHP中断言函数的使用

    原来一直以为断言相关的函数是 PHPUnit 这些单元测试组件提供的,在阅读手册后才发现,这个 assert() 断言函数是 PHP 本身就自带的一个函数.也就是说,我们在代码中进行简单的测试的时候是 ...

  2. 用Python做了个奇奇怪怪的打篮球游戏

    一.前言 准备编写一个篮球游戏,运动员带球跑,跳起投篮.在每帧图片中包括运动员和篮球,使用多帧图片,实现运动员运球跑动的效果. 运动员运球跑动作每帧图形的宽和高可能不同,例如,跨一大步,和两腿并拢,其 ...

  3. Promise源码实现与测试

    const PENDING = 'pending', FULFILLED = 'fulfilled', REJECTED = 'rejected' class MyPromise { construc ...

  4. JDK1.8源码(三)——java.lang.String类

    一.概述 1.介绍 String是一个final类,不可被继承,代表不可变的字符序列,是一个类类型的变量.Java程序中的所有字符串字面量(如"abc")都作为此类的实例实现,&q ...

  5. Appium调试分析方法

    在使用appium做自动化测试的时候,发现用例报错,如何排查原因? 查看appium日志 appium日志大概是分为以下部分 culr命令调试 在理解appium协议的基础上,可以直接用shell发送 ...

  6. c++ class里面成员和分配内存问题

    慢慢开始学c++啦,记录学习的大体过程 class中神奇的内存(sizeof) 1.内存补齐 便于管理类(生成的对象)的内存,类总内存总是为最大成员字节大小的倍数,不足的会进行内存补齐 类的整体内存就 ...

  7. 巧用优先队列：重载运算符在STL优先队列中的应用

    前言 写优先队列优化dijkstra的时候,需要放进优先队列的常常有数值和编号两类,以下介绍让编号捆绑数值放入优先队列的几种方法. 由于过程比较简单,记住代码即可,下面不再讲解,只附上代码,请读者自行 ...

  8. 缓冲区溢出利用与ShellCode编写

    一.实验目的 熟悉编写shellCode的流程 掌握缓冲区溢出的利用 二.实验环境 系统环境:Windows环境 软件环境:C++ ,缓冲区溢出文件链接 三.实验原理 要实施一次有效的缓冲区溢出攻击, ...

  9. Serverless 在编程教育中的实践

    说起Serverless这个词,我想大家应该都不陌生,那么Serverless这个词到底是什么意思?Serverless到底能解决什么问题?可能很多朋友还没有深刻的体会和体感,这篇文章我就和大家一起聊 ...

  10. React实现组件全屏化

    介绍 本文基于React+antd,给大家演示一个完整的全屏demo. 起因是开发今天给我提了一个sql编辑器输入框比较小,不支持放大,不太方便.希望能够全屏显示,联想到自己以后可能也会需要,便研究并 ...