웹 프런트 엔드 필기 시험 문제 은행 HTML 장

몇 가지 웹 프런트엔드 인터뷰(필기 시험) 문제를 요약했습니다. 이 글에서는 먼저 필기 시험 문제의 HTML 부분(답변 포함)을 여러분과 공유하겠습니다. 당신은 몇 명이나 정답을 맞힐 수 있나요?

관련 권장사항: "웹 프런트엔드 필기 시험 문제 은행 - CSS 장"

Q1: <keygen></keygen>이 올바른 HTML5 태그인가요? <keygen></keygen> 是正确的HTML5标签吗？

A：是。

<keygen></keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。是HTML5 标签。

Q2：<bdo></bdo> 标签是否可以改变文本方向？

A：可以。

<bdo></bdo>标签覆盖默认的文本方向。

<bdo dir="rtl">Here is some text</bdo>

Q3：下列HTML代码是否正确？

<figure>
    <img src="/static/imghwm/default1.png"  data-src="myimage.jpg"  class="lazy"   alt="My image">
    <figcaption>
        <p>This is my self portrait.</p>
    </figcaption>
</figure>

A：正确

<figure></figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。使用<figcaption></figcaption>元素为figure添加标题（caption）。

Q4：哪种情况下应该使用small标签？当你想在h1 标题后创建副标题？还是当在footer里面增加版权信息？

A：small标签一般使用场景是在版权信息和法律文本里使用，也可以在标题里使用标注附加信息（bootstrap中可见），但不可以用来创建副标题。

The HTML Small Element (<small></small>) makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size. In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation.

Q5：在一个结构良好的web网页里，多个h1标签会不利于SEO吗？

A：不影响。

According to Matt Cutts (lead of Google's webspam team and the de facto expert on these things), using multiple

tags is fine, as long as you're not abusing it (like sticking your whole page in an

and using CSS to style it back to normal size). That would likely have no effect, and might trigger a penalty, as it looks spammy.

If you have multiple headings and it would be natural to use multiple

's, then go for it.

摘自：http://www.quora.com/Does-using-multiple-h1-tags-on-a-page-affect-search-engine-rankings

Q6：如果你有一个搜索结果页面，你想高亮搜索的关键词。什么HTML 标签可以使用?

A：<mark></mark> 标签表现高亮文本。

The HTML <mark></mark>

A: 네. <keygen></keygen> 태그는 양식에 사용할 키 쌍 생성기 필드를 지정합니다. 양식이 제출되면 개인 키는 로컬에 저장되고 공개 키는 서버로 전송됩니다. HTML5 태그입니다.

Q2: <bdo></bdo> 태그로 텍스트 방향을 변경할 수 있나요?

A: 네. <bdo></bdo> 태그는 기본 텍스트 방향을 재정의합니다.

<article>
    <h1 id="Hello-nbsp-World">Hello World</h1>
    <style scoped>
        p {
            color: #FF0;
        }
    </style>
    <p>This is my text</p>
</article>
<article>
    <h1 id="This-nbsp-is-nbsp-awesome">This is awesome</h1>
    <p>I am some other text</p>
</article>

Q3: 다음 HTML 코드가 맞나요?

<article>
    <a href="#">
        <h1 id="Hello">Hello</h1>
        <p>I am some text</p>
    </a>
</article>

A: 올바른<figure></figure> 태그는 독립적인 스트림 콘텐츠(이미지, 차트, 사진, 코드 등)를 지정합니다. 그림 요소의 내용은 주요 내용과 관련이 있어야 하며, 제거해도 문서 흐름에 영향을 주지 않아야 합니다. 그림에 캡션을 추가하려면 <figcaption></figcaption> 요소를 사용하세요.

Q4: 작은 태그는 어떤 상황에서 사용해야 하나요? h1 제목 뒤에 자막을 만들고 싶을 때? 아니면 바닥글에 저작권 정보를 추가해야 하나요? A: 작은 태그는 일반적으로 저작권 정보 및 법률 텍스트에 사용됩니다. 제목에 추가 정보를 표시하는 데에도 사용할 수 있지만(부트스트랩에 표시됨) 자막을 만드는 데에는 사용할 수 없습니다.

HTML 작은 요소(<small></small>)는 텍스트 글꼴 크기를 브라우저의 최소 크기까지 한 단계 더 작게 만듭니다(예: 큰에서 중간으로 또는 작은에서 x-작은 크기로). 글꼴 크기 HTML5에서 이 요소는 스타일 표시와 관계없이 저작권 및 법적 텍스트를 포함하여 보조 설명과 작은 인쇄물을 나타내도록 용도가 변경되었습니다.

Q5: 잘 구성된 웹 페이지에서는 여러 개의 h1 태그가 있습니다. SEO에 좋지 않은가요?

A: 영향은 없습니다. Matt Cutts(Google 웹스팸 팀의 리더이자 사실상 이러한 문제의 전문가)에 따르면, 남용하지 않는 한 여러 개의

태그를 사용하는 것은 괜찮습니다(예: 전체 페이지를

CSS를 사용하여 다시 일반 크기로 설정) 효과가 없을 가능성이 높으며 스팸처럼 보일 수 있습니다.

제목이 여러 개이고 <를 여러 개 사용하는 것이 당연합니다. ;h1>'을 선택한 다음 시도해 보세요.

출처: http://www.quora.com/Does-using-multiple-h1-tags-on-a-page-affect-search-engine-rankings

Q6: 검색결과 페이지가 있는 경우 검색 키워드를 강조표시하고 싶습니다. 어떤 HTML 태그를 사용할 수 있나요?

🎜A: <mark></mark> 태그는 강조 표시된 텍스트를 표시합니다. 🎜🎜🎜HTML <mark></mark> 요소는 강조 표시된 텍스트, 즉 특정 컨텍스트와의 관련성으로 인해 참조 목적으로 표시된 일련의 텍스트를 나타냅니다. 검색된 단어의 모든 인스턴스를 강조 표시하기 위해 검색 결과를 표시합니다.🎜🎜🎜🎜🎜Q7: 다음 코드에서 범위 속성은 무엇을 합니까? 🎜🎜🎜

<img src="/static/imghwm/default1.png"  data-src="mypic.jpg"  class="lazy"     style="max-width:90%" alt="My picture">

🎜A: 범위가 지정된 속성은 부울 속성입니다. 이 속성을 사용하면 스타일 요소의 상위 요소와 해당 하위 요소에만 스타일이 적용됩니다. 🎜🎜🎜🎜Q8: HTML5는 블록 수준 하이퍼링크를 지원합니까? 예: 🎜🎜🎜

<div style="display: none;">
    <img src="/static/imghwm/default1.png"  data-src="mypic.jpg"  class="lazy"   alt="My photo">
</div>

🎜A: 지원합니다. 🎜🎜HTML5의 요소는 하이퍼링크로 작동하며 모든 인라인 요소와 블록 수준 요소를 지원합니다. 🎜🎜🎜🎜Q9: 다음 HTML 코드가 로드되면 새 HTTP 요청이 트리거됩니까? 🎜🎜🎜

<head>
    <link href="main1.css" rel="stylesheet">
    <script>
        alert(&#39;Hello World&#39;);
    </script>
</head>

🎜A: 예🎜🎜🎜🎜Q10: 다음 HTML 코드가 로드되면 새 HTTP 요청이 트리거됩니까? 🎜🎜🎜

<head>
    <link href="main1.css" rel="stylesheet">
    <link href="main2.css" rel="stylesheet">
</head>

🎜A: 네! 🎜🎜🎜🎜Q11: main1.css가 Alert('Hello world')에서 로드되고 컴파일됩니까?🎜🎜🎜

<head>
    <link href="main1.css" rel="stylesheet">
</head>
<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <link href="main2.css" rel="stylesheet">
</body>

🎜A: 예! 🎜🎜🎜🎜Q12: main2.css를 얻기 전에 main1을 다운로드하고 구문 분석해야 합니까? 🎜🎜🎜rrreee🎜A: 아니요!🎜🎜🎜🎜Q13: 단락 1이 로드된 후에 main2.css가 로드되고 컴파일됩니까? 🎜🎜🎜rrreee🎜A: 응!🎜

【관련 추천: html 동영상 튜토리얼, 웹 프론트엔드】

위 내용은 웹 프런트 엔드 필기 시험 문제 은행 HTML 장의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!