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. java.lang.NullPointerException: Attempt to invoke virtual method 'int com.example.xxx.Json.NewsBean.getError_code()' on a null object reference错误解决

    AS在运行的过程中出现了错误: java.lang.NullPointerException: Attempt to invoke virtual method 'int com.example.xx ...

  2. 使用Java操作Excel表格

    目录 一.配置第三方库 二.使用Apache POI API 1. 打开Excel文件 2. 选择对应的sheet 3. Sheet接口的基本使用 3.1 获取开头行和结束行 3.2 获取Row对象 ...

  3. springboot 配置 application.properties相关

    springboot 有读取外部配置文件的方法,如下优先级: 第一种是在jar包的同一目录下建一个config文件夹,然后把配置文件放到这个文件夹下.第二种是直接把配置文件放到jar包的同级目录.第三 ...

  4. jenkins+requests+pytest+allure持续集成

    环境搭建参考:https://www.jianshu.com/p/fc39030d057f 总体流程:

  5. PolarDB PostgreSQL DDL同步原理

    概述 在共享存储一写多读的架构下,数据文件实际上只有一份.得益于多版本机制,不同节点的读写实际上并不会冲突.但是有一些数据操作不具有多版本机制,其中比较有代表性的就是文件操作.多版本机制仅限于文件内的 ...

  6. CF235C-Cyclical Quest【SAM】

    正题 题目链接:https://www.luogu.com.cn/problem/CF235C 题目大意 一个文本串\(s\).询问\(n\)个匹配的本质不同的循环同构在文本串中出现了几次. 解题思路 ...

  7. P3643-[APIO2016]划艇【dp】

    正题 题目链接:https://www.luogu.com.cn/problem/P3643 题目大意 求有多少个\(n\)个数的序列\(x\)满足,\(x_i\in \{0\}\cup[a_i,b_ ...

  8. YbtOJ#791-子集最值【三维偏序】

    正题 题目链接:http://www.ybtoj.com.cn/contest/123/problem/1 题目大意 给出\(3\)个长度为\(n\)的排列\(A,B,C\).然后一个下标集合\(S\ ...

  9. 怒肝 Linux 学习路线，这回不难

    Linux 学习路线 by 鱼皮. 原创不易,请勿抄袭,违者必究! 大家好,我是鱼皮,又花 1 周肝出了 Linux 学习资料全家桶,包括学习路线.命令手册.视频.书籍.文档.实战教程.社区.工具.大 ...

  10. IPtable防火墙概念介绍

    1.iptables安全优化 1.不配外网,做代理转发或者防火墙映射 2.并发过大,不建议开启防火墙 2.防火墙的工作流程: 按照配置规则的顺序自上而下,从前到后进行过滤 如果匹配上新规则,表明是阻止 ...