牛客HTML专项练习【错题+知识点辨析】(持续更新中)

因为HTML基础中关于标签元素的细节还是很多的，自己按照文档完全来看的话，一个是找不到复习重点，另一个还是很容易会再次遗忘，所以我借着牛客HTML专项练习来加强一下我对HTML的理解。

题目要求整个页面背景色为红色：

（1）排除A和B，因为A改变的字体颜色；B改变的不一定是整个页面的范围

（2）C错在改变的是div的背景色，而div里面没有内容，无法撑开，相当于height=0，背景色都显示不出来，更别说整个页面了

Web Storage实际上由两部分组成：sessionStorage与localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。（相当于网页关闭，存储的数据也消失了）

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。（网页的一些主题设置，重新打开网页后，主题依然存在）

判断是行内元素还是块级元素可以看一下元素后面的文字会不会换行，如果换行了，说明这个元素要独占一行，是块级元素，那如果仍然紧跟在元素后面，那元素就是行内元素。

A.img是行内元素 C.strong/span是行内元素 D.a是行内元素

position: absolute; // 绝对定位,脱离文档流,相对浏览器来进行定位

float: right; // 右浮动,脱离文档流

position: fixed; // 固定定位,脱离文档流

position: relative; // 相对定位,根据自身原来所在位置来进行定位,不脱离文档流

col-xs-*用于小于768的手机屏幕

A：<h1> - <h6> 标签表示 HTML 标题，默认加粗

B：<caption> 标签表示表格标题，标题一般被居中表格之上，但不加粗文本

C：<em> 标签表示强调内容，显示为斜体，但不加粗文本

D：<th> 标签表示表格的表头，默认加粗文本

这里面需要记住：

p标签不能嵌套块级元素

a标签不能嵌套<a>标签

组合选择时，我们要把css层叠样式权重值相加，权重值大的意味着优先级高：

style（行内）：1000

#id：100

.class：10

element：1

废除的元素

1、能用css代替的元素 basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为画面展示服务的，HTML5中提倡把画面展示性功能放在css中统一编辑。

2、不再使用frame框架

frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的符合页面的形式，删除以上这三个标签。

3、只有部分浏览器支持的元素

applet、bgsound、blink、marquee等标签。

slideUp()和slideDown()都是jQuery函数

slideUp()通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。

slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。

所谓动态HTML（Dynamic HTML，简称DHTML），其实并不是一门新的语言，它只是HTML、CSS和客户端脚本的一种集成，即一个页面中包括html+css+javascript（或其它客户端脚本），其中css和客户端脚本是直接在页面上写而不是链接上相关文件。DHTML不是一种技术、标准或规范，只是一种将目前已有的网页技术、语言标准整合运用，制作出能在下载后仍然能实时变换页面元素效果的网页设计概念。

A. id为纯数字

B. 括号和标签名有空格

C.如果一个<li>元素之后紧跟另一个<li>元素，或在父元素中没有其他更多内容，则结束标签可以省略

D. input应放最前

IndexdDB 是 HTML5 的本地存储，把一些数据存储到浏览器（客户端）中，当与网络断开时，可以从浏览器中读取数据，用来做一些离线应用。

Cookie 通过在客户端 ( 浏览器 ) 记录信息确定用户身份，最大为 4 kb 。

url 参数用的是 get 方法，从服务器上获取数据，大小不能大于 2 kb 。

Session 是服务器端使用的一种记录客户端状态的机制。

post 是向服务器传送数据，数据量较大。

local Storage 也是 HTML5 的本地存储，将数据保存在客户端中（一般是永久的）。

D DOCTYPE文档类型的声明，就是告诉浏览器使用哪种规范来解释这个文档中的规范。如果没有它，浏览器会使用怪异模式 DOCTYPE声明必须在HTML文档的第一行，位于<html>标签之前

所有的浏览器都有两种模式：怪异模式和严格模式（也有人叫标准模式）。

IE 6 for Windows/mac, Mozilla, Safari和Opera 都实现了这两种模式，但是IE 6以下版本永远定在了怪异模式。

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。属性值 application/x-www-form-urlencoded 在发送前编码所有字符（默认） multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。 text/plain 空格转换为 "+" 加号，但不对特殊字符编码。

1、getContent ：获取内容

2、getContext：返回一个用于在画布上绘图的环境。

3、request.getContextPath()可以返回当前页面所在的应用的名字;

getGraphics：Java里面的方法。public Graphics getGraphics()。为组件创建一个图形上下文。如果组件当前是不可显示的，则此方法返回 null。 public void paint(Graphics g)绘制此组件。

4、Canvas 对象的方法就是 getContext()

发送到客户端的只有图片形式的验证码，服务器端保存cookie对应的图形验证码的正确文本。客户端表单提交时到服务器端验证。

出于安全性考虑，一般在服务器端验证表单！

触发一个盒子的BFC 弥补margin塌陷

position：absolute；

display：inline-block；

float：left/right

overflow：hidden；

浏览器渲染过程：

1.解析HTML，生成DOM树，解析CSS，生成CSSOM树。

2.将DOM树和CSSOM树结合，生成渲染树（Render tree）。

3.Layout（回流）：根据生成的渲染树，进行回流，得到节点的几何信息。

4.Painting（重绘）：根据渲染树以及回流得到的节点，获取绝对像素。

5.Display：将像素发给GPU，展示在页面上

表格建立将运用<table>、<th>（table head）、<tr>（table row)、<td>（table data）四个标记，<table>标记用于标识一个表格组件，一个表格组成是由数个横行（<tr>）、单元格（<td>）与标题单元格（<th>）子组件所组成。

a标签没有设置href属性时是不能获取到焦点的

1、给div标签设置contenteditable属性可以达到input标签的效果还能轻松的自定义样式

2、tabtext =：

"-1" ：元素是可聚焦的，但是不能通过 tab 导航来访问到该元素，可以通过js获取 "0" （默认）：元素是可聚焦的，可以通过 tab 导航来聚焦到该元素，它的相对顺序是当前处于的DOM结构来决定的大于 0 ：元素是可聚焦的，可以通过 tab 导航来访问到该元素；它的相对顺序按照 tabindex 的数值递增而滞后获焦（先获取值小的）。如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前DOM中的先后顺序决定

3、获得/失去焦点一般对于文本框而言

initial-scale: viewport 的初始缩放级别（0-10之间的正数，1表示无缩放）

minimum-scale: viewport 能缩放的最小值（0-10之间的正数）

maximum-scale: viewport 能缩放的最大值（0-10之间的正数）

user-scalable: 是否可以手动缩放（yes or no）

UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，又称万国码。UTF-8使用1~4字节为每个字符编码。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。

GBK是汉字编码，是双字节码，可表示繁体字和简体字。

visibility hidden 本身就暂居元素空间，所以改变其可见性，不会影响空间结构，造成重排

metadata content包括：base、link、meta、noscript、template、style、script、title等

link是HTML方式， @import是CSS方式

link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC(文档样式短暂失效)

link可以通过rel="alternate stylesheet"指定候选样式

浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式

@import必须在样式规则之前，可以在css文件中引用其他文件

ABCD

iframe可用在以下几个场景中：

1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。 2：ajax上传文件。 3：加载别的网站内容，例如google广告，网站流量分析。

4：在上传图片时，不用flash实现无刷新。

5：跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。

CSS 百分比参照问题

参照父元素宽度的元素：padding margin width text-indent
参照父元素高度的元素：height
参照父元素属性:font-size line-height
特殊：相对定位的时候，top(bottom) left(right)参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度

Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。

在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。例如， <input type="text"></input> 的闭标签是无效的 HTML。

在 HTML 中有以下这些空元素： <area><base> <col><colgroup>when the span is present <command><embed><hr><img><input><keygen><link>

没有 display:visible 属性

display:none 不渲染

没有 display:hidden 属性

牛客HTML专项练习【错题+知识点辨析】(持续更新中)相关推荐

【牛客网java练习错题笔记】 --Java基础打卡day002
[牛客网java练习错题笔记] --Java基础打卡day002 1 根据以下代码段,正确的是 2 在Java中,在同一包内,类Cat里面有个公共方法sleep(),该方法有static修饰,所以可以 ...
leetcode贪心算法题集锦（持续更新中）
leetcode贪心算法题集锦 leetcode贪心算法题集锦(持续更新中).python 和C++编写. 文章目录 leetcode贪心算法题集锦一.贪心算法 1.盛最多水的容器 2.买股票的最佳 ...
计算错题集（有错误就加入错题集，持续更新）
VASP计算错题集万事开头难,学习第一性原理计算的一年中碰到了很多让我困惑的问题,在这里总结整理出来(随时更新),防止师弟师妹们陷入困惑,真的很让人头大,并且超级费时间,希望能帮助避雷!如果师弟 ...
web安全相关知识点（持续更新中）
WEB安全知识点,最近学习WEB安全做的一些知识点笔记 **1.什么是Whois查询 2.备案信息是什么 3.如何使用Google进行敏感信息查询 4.Burp Suite是一个什么工具 5.如何进行 ...
iOS中容易混淆的知识点（持续更新中）
1.成员变量和属性的区别 @interface Person : NSObject {NSString *_sex; } @property (nonatomic, copy) NSString *n ...
覆盖所有面试知识点，持续更新中
我所接触的Android开发者,百分之九十五以上都遇到了以下几点致命弱点! 如果这些问题也是阻止你升职加薪,跳槽大厂的阻碍. 那么我确信可以帮你突破瓶颈! 应届坎坷求职路一个广州非985/211普 ...
python金融量化初体验——2020年“大湾区杯”金融数学建模比赛A题《大湾区指数增强策略》刷题总结（持续更新中）
目录 1.前言 2.准备工作 (1)题目分析: 提供的数据集问题 3.解题思路: (1)第一问解题思路 4.代码实现 (1)第一题部分代码 1.前言之前和男朋友一起学完了数据挖掘的相关框架,决定要 ...
七龙珠C语言题目,龙珠最强之战最全题库答案持续更新中
龙珠最强之战题库有哪些题?答案是什么?游戏中会有很多题目需要我们去回答,所以小编就为大家整理了下答案,下面由第一手游网小编为大家带来最全题库吧! 龙珠最强之战最全题库当悟空杀**克大魔王后,各家媒体 ...
逻辑综合知识点总结持续更新中...
逻辑综合什么是逻辑综合 compile elaboration 术语表 Onset Offset Dont'care(DCset) Boolean space(B^n) TFI TFO logic ...
java面试的题积累【持续更新中......】
1.hashmp的实现原理,hash冲突如何解决. hashmp的实现原理:HashMap 采用一种所谓的"Hash 算法"来决定每个元素的存储位置.当程序执行 map.put( ...

牛客HTML专项练习【错题+知识点辨析】(持续更新中)

CSS 百分比参照问题

牛客HTML专项练习【错题+知识点辨析】(持续更新中)相关推荐

最新文章

热门文章