基础的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="http://www.w3school.com.cn">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="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
<link rel="prerender" href="https://example.com/about.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世界

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("http://www.w3school.com.cn","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 http://stackoverflow.com/a/8024294/271577
    _getPropertyNames: 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;
    }
};

weixin_43869192

发布了24 篇原创文章 · 获赞 8 · 访问量 1万+

私信关注

猜你喜欢