基础的HTML+css+js"/>
基础的HTML+css+js
HTML
1.HTML 指的是?
您的回答:超文本标记语言(Hyper Text Markup Language)
2.Web 标准的制定者是?
您的回答:万维网联盟(W3C)
3.在下列的 HTML 中,哪个是最大的标题?
您的回答:<h1>
4.在下列的 HTML 中,哪个可以插入折行?
您的回答:<br>
5.在下列的 HTML 中,哪个可以添加背景颜色?
您的回答:<body bgcolor="yellow">
6.请选择产生粗体字的 HTML 标签:
您的回答:<b>
7.请选择产生斜体字的 HTML 标签:
您的回答:<i>
8.在下列的 HTML 中,哪个可以产生超链接?
您的回答:<a href="">W3School</a>
9.如何制作电子邮件链接?
您的回答:<a href="mailto:xxx@yyy">
10.如何在新窗口打开链接?
您的回答:<a href="url" target="_blank">
11.以下选项中,哪个全部都是表格标签?
您的回答:<table><tr><td>
12.请选择可以使单元格中的内容进行左对齐的正确 HTML 标签:
您的回答:<td align="left">
13.如何产生带有数字列表符号的列表?
您的回答:<ol>
14.如何产生带有圆点列表符号的列表?
您的回答:<ul>
15.在下列的 HTML 中,哪个可以产生复选框?
您的回答:<input type="checkbox">
16.在下列的 HTML 中,哪个可以产生文本框?
您的回答:<input type="text">
17.在下列的 HTML 中,哪个可以产生下拉列表?
您的回答:<select>
20.在下列的 HTML 中,哪个可以插入背景图像?
您的回答:<body background="background.gif">
21. 在html5中,input元素有required属性,会做必填提示,但是在safar浏览器中不起作用哦
你不知道的link标签
- link的五种特殊用法
<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/style.css" as="style" />
<link rel="preconnect" href="" />
<link rel="dns-prefetch" href="" />
<link rel="prerender" href=".html" />
- <link rel="preload">告诉浏览器尽快下载并缓存资源(例如脚本或样式表)。在加载页面几秒钟后需要该资源并希望加快速度时,这将很有帮助。
- 下载后,浏览器对资源不执行任何操作。不执行脚本,不应用样式表。它只是被缓存的,因此当其他需要它时,它立即可用。
- href属性指向要下载的资源,as可以是在浏览器下载的任何资源style、script、font
- <link rel="prefetch">要求浏览器在后台下载并缓存资源(例如脚本或样式表)。下载的优先级较低,因此不会干扰更重要的资源。当您知道在下一个页面上需要该资源,并且希望提前对其进行缓存时,这将很有帮助。
- 下载后,浏览器对资源不执行任何操作。不执行脚本,不应用样式表。它只是被缓存的,因此当其他需要它时,它立即可用。
- <link rel="preconnect">要求浏览器提前执行到域的连接。当您知道即将从该域下载某些内容,但又不知道确切内容,并且想加快初始连接速度时,这将很有用。
- 浏览器从新的第三方域检索内容时必须建立连接。(第三方域是与您的应用程序所托管的域不同的域。)当网站使用Google字体中的字体,从CDN加载React或从API服务器请求JSON响应时,可能会发生这种情况。
- 建立新的连接通常需要几百毫秒。每个域只需要一次,但是仍然需要时间。如果提前设置连接,则可以节省时间并更快地从该域中加载资源。
- 当您在第三方域上拥有重要的样式,脚本或图像,但您尚不知道资源URL时,它将为您提供帮助
- <link rel="dns-prefetch">要求浏览器预先执行域的DNS解析。当您知道即将连接到该域并且希望加快初始连接时,这将很有帮助。
- 当浏览器连接到新的第三方域时,必须执行DNS解析。(第三方域是与您的应用程序所托管的域不同的域。)当您的网站使用Google字体中的字体,从CDN加载React或从API服务器请求JSON响应时,可能会发生这种情况。
- 对于每个新域,解析DNS记录通常需要20-120毫秒左右。它仅影响从该域下载的第一个资源,但仍然很重要。如果提前执行DNS解析,则可以节省时间并更快地加载该资源。
- <link rel="prerender">要求浏览器加载URL并将其呈现在不可见的标签中。当用户单击指向该URL的链接时,应立即呈现该页面。当您确实确定用户接下来将访问特定页面并且想要更快地呈现它时,这将很有帮助。尽管(或由于?)其功能强大,但在2019年,<link rel="prerender">主要浏览器的支持不佳。
- dl是定义列表标签 4
CSS
1.CSS 指的是?
您的回答:Cascading Style Sheets
2.在以下的 HTML 中,哪个是正确引用外部样式表的方法?
您的回答:<link rel="stylesheet" type="text/css" href="mystyle.css">
3.在 HTML 文档中,引用外部样式表的正确位置是?
您的回答:<head> 部分
4.哪个 HTML 标签用于定义内部样式表?
您的回答:<style>
5.哪个 HTML 属性可用来定义内联样式?
您的回答:style
6.下列哪个选项的 CSS 语法是正确的?
您的回答:body {color: black}
7.如何在 CSS 文件中插入注释?
您的回答:/* this is a comment */
8.哪个属性可用于改变背景颜色?
您的回答:background-color:
9.如何为所有的 <h1> 元素添加背景颜色?
您的回答:h1 {background-color:#FFFFFF}
10.如何改变某个元素的文本颜色?
您的回答:color:
11.哪个 CSS 属性可控制文本的尺寸?
您的回答:font-size
12.在以下的 CSS 中,可使所有 <p> 元素变为粗体的正确语法是?
您的回答:p {font-weight:bold}
13.如何显示没有下划线的超链接?
您的回答:a {text-decoration:none}
15.如何改变元素的字体?
您的回答:font-family:
16.如何使文本变为粗体?
您的回答:font-weight:bold
17.如何显示这样一个边框:上边框 10 像素、下边框 5 像素、左边框 20 像素、右边框 1 像素?
您的回答:border-width:10px 1px 5px 20px
18.如何改变元素的左边距?
您的回答:margin-left:
19.请判断以下说法是否正确:如需定义元素内容与边框间的空间,可使用 padding 属性,并可使用负值?
您的回答:错误
20.如何产生带有正方形项目的列表?
您的回答:list-style-type: square
21.父元素设置overflow:hidden,可以清除子元素的浮动带来的影响
CSS世界
JS
1.我们可以在下列哪个 HTML 元素中放置 Javascript 代码?
您的回答:<script>
2.写 "Hello World" 的正确 Javascript 语法是?
您的回答:document.write("Hello World")
3.插入 Javacript 的正确位置是?
您的回答:<body> 部分和 <head> 部分均可
4.引用名为 "xxx.js" 的外部脚本的正确语法是?
您的回答:<script src="xxx.js">
5.外部脚本必须包含 <script> 标签吗?
您的回答:否
6.如何在警告框中写入 "Hello World"?
您的回答:alert("Hello World")
7.如何创建函数?
您的回答:function myFunction()
8.如何调用名为 "myFunction" 的函数?
您的回答:myFunction()
9.如何编写当 i 等于 5 时执行一些语句的条件语句?
您的回答:if (i==5)
10.如何编写当 i 不等于 5 时执行一些语句的条件语句?
您的回答:if (i != 5)
11.在 JavaScript 中,有多少种不同类型的循环?
您的回答:两种。for 循环和 while 循环
12.for 循环如何开始?
您的回答:for (i = 0; i <= 5; i++)
13.如何在 JavaScript 中添加注释?
您的回答://This is a comment
14.可插入多行注释的 JavaScript 语法是?
您的回答:/*This comment has more than one line*/
15.定义 JavaScript 数组的正确方法是?
您的回答:var txt = new Array("George","John","Thomas")
16.如何把 7.25 四舍五入为最接近的整数?
您的回答:Math.round(7.25)
17.如何求得 2 和 4 中最大的数?
您的回答:Math.max(2,4)
18.打开名为 "window2" 的新窗口的 JavaScript 语法是?
您的回答:window.open("","window2")
19.如何在浏览器的状态栏放入一条消息?
您的回答:window.status = "put your message here"
解释 :window.status 属性可设置或返回窗口状态栏中的文本。
20.如何获得客户端浏览器的名称?
您的回答:navigator.appName
解释 :window.navigator 对象包含有关访问者浏览器的信息。
Flex
flex父容器
- flex-direction:子项排列顺序。主轴方向
- row:默认值。主轴水平方向
- row-reverse:主轴水平方向,起点在右端
- column:主轴为垂直方向
- column-reverse:主轴为垂直方向,起点在下端
- flex-wrap:子项是否溢出换行
- nowrap:默认值,不换行
- wrap:换行,第一行在主轴开始方向
- wrap-reverse:换行,第一行在主轴结束方向
- flex-flow:flex-direction+flex-wrap的简写。默认值:row nowrap
- justify-content:主轴对齐方式
- flex-start:主轴开始方向。
- flex-end:主轴结束方向。
- center:主轴居中对齐。
- space-between:两端对齐,item的间隔相等
- space-around:每一个项目两側的间隔相等,项目之间间隔是项目与边框间隔的两倍
- align-items:侧轴对齐方式
- flex-start,flex-end,侧轴开始/结束方向对齐
- center:侧轴居中对齐
- baseline:项目第一行文字的基线对齐
- stretch:默认值。如果item无高度或高度为auto,将占满整个容器
- align-content:容器在側轴方向上有额外空间时,怎样排布一行(当容器仅仅有一行时它不起作用)
- flex-start/end,侧轴开始/结束方向对齐
- center,侧轴中心对齐
- space-between:侧轴两端对齐
- space-around:每根轴线两侧间隔相等
- stretch:默认值,占满整个侧轴
子项属性
- order:定义项目的排列顺序。数值越小越靠前
- flex-grow:定义项目的放大比例,默认0
- 如果全部项目的flex-grow属性都为1,他们将等分剩余空间
- flex-shrink定义项目的缩小比例,默认1,即如果空间不足,该项目将缩小
- 负值无效。如果全部项目的flex-shrink属性都为1,当空间不足时,他们将等比例缩小
- flex-basis再分配多余空间之前,项目占领的主轴空间。默认值auto
- flex:是flex-grow+shrink+basis的简写。默认值 0 1 auto
- align-self:单个项目有与其它项目不一样的側轴对齐方式,可覆盖align-items属性
js属性的可枚举性和所有权
- 使用 SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) > -1 时将发生判断操作。
- 使用 SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {}); 时将发生迭代操作。 (或使用 filter()、map() 等方法)
- // 转载自MDN Web
var SimplePropertyRetriever = {getOwnEnumerables: function(obj) {return this._getPropertyNames(obj, true, false, this._enumerable); // Or could use for..in filtered with hasOwnProperty or just this: return Object.keys(obj);},getOwnNonenumerables: function(obj) {return this._getPropertyNames(obj, true, false, this._notEnumerable);},getOwnEnumerablesAndNonenumerables: function(obj) {return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable); // Or just use: return Object.getOwnPropertyNames(obj);},getPrototypeEnumerables: function(obj) {return this._getPropertyNames(obj, false, true, this._enumerable);},getPrototypeNonenumerables: function(obj) {return this._getPropertyNames(obj, false, true, this._notEnumerable);},getPrototypeEnumerablesAndNonenumerables: function(obj) {return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);},getOwnAndPrototypeEnumerables: function(obj) {return this._getPropertyNames(obj, true, true, this._enumerable); // Or could use unfiltered for..in},getOwnAndPrototypeNonenumerables: function(obj) {return this._getPropertyNames(obj, true, true, this._notEnumerable);},getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) {return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);},// Private static property checker callbacks_enumerable: function(obj, prop) {return obj.propertyIsEnumerable(prop);},_notEnumerable: function(obj, prop) {return !obj.propertyIsEnumerable(prop);},_enumerableAndNotEnumerable: function(obj, prop) {return true;},// Inspired by : function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {var props = [];do {if (iterateSelfBool) {Object.getOwnPropertyNames(obj).forEach(function(prop) {if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) {props.push(prop);}});}if (!iteratePrototypeBool) {break;}iterateSelfBool = true;} while (obj = Object.getPrototypeOf(obj));return props;}
};
更多推荐
基础的HTML+css+js
发布评论