tft每日頭條

 > 教育

 > html常見面試題及答案

html常見面試題及答案

教育 更新时间:2024-11-27 10:26:10

上一節我們學會了錨點定位,從上到下的會用了,那麼從底部往上會用了嗎?比如底部有一個返回頂部的按鈕,要求點擊後回到頁面的頂部。我們寫代碼來嘗試下。先看看效果:

html常見面試題及答案(轉行測試開發-HTML)1

點擊紅框裡的段落四,返回到頁面頂部。

html常見面試題及答案(轉行測試開發-HTML)2

成功了,我們來看看代碼是怎麼寫的吧

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>20210822_九</title>

</head>

<body>

<h1 id="top">标題一</h1>

<h2>标題二</h2><br>

<a href = "#life">标題三(有錨點)</a><br>

<h4>标題四</h4>

<p>段落一</p>

1.今天天氣特别好<br>

1.今天天氣特别好<br>

1.今天天氣特别好<br>

1.今天天氣特别好<br>

1.今天天氣特别好<br>

1.今天天氣特别好<br>

1.今天天氣特别好<br>

1.今天天氣特别好<br>

1.今天天氣特别好<br>

<p>段落二</p>

2.今天下雨了<br>

2.今天下雨了<br>

2.今天下雨了<br>

2.今天下雨了<br>

2.今天下雨了<br>

2.今天下雨了<br>

2.今天下雨了<br>

2.今天下雨了<br>

2.今天下雨了<br>

2.今天下雨了<br>

<h5>錨點要跳轉到的标簽</h5>

<p>段落三</p>

3.生活有點甜,錨點會來這一段,相信我<br>

3.生活有點甜,錨點會來這一段,相信我<br>

3.生活有點甜,錨點會來這一段,相信我<br>

3.生活有點甜,錨點會來這一段,相信我<br>

3.生活有點甜,錨點會來這一段,相信我<br>

3.生活有點甜,錨點會來這一段,相信我<br>

3.生活有點甜,錨點會來這一段,相信我<br>

3.生活有點甜,錨點會來這一段,相信我<br>

3.生活有點甜,錨點會來這一段,相信我<br>

<p id="life"><a href="#top">段落四</a></p>

4.你懂個p

</body>

</html>

其中,底部标簽段落定義為:

html常見面試題及答案(轉行測試開發-HTML)3

頂部id可以定義為:

html常見面試題及答案(轉行測試開發-HTML)4

這樣,就可以跳轉了

接着,我們說下注釋标簽: 需要寫一些便于閱讀和理解的文檔說明,但是又不需要顯示在前端頁面中。這種情況就需要使用注釋标簽了

樣式為: <!-- 注釋文字-->

4.你懂個p

<!--已經到底了-->

這時候雙擊html文件,注釋不展示在前端。使用 ctrl / 就可以添加注釋了

最後,我們說下特殊字符

在HTML中我們怎麼輸入空格呢?直接點擊鍵盤上的空格,其實是不行的。

html常見面試題及答案(轉行測試開發-HTML)5

看下效果

html常見面試題及答案(轉行測試開發-HTML)6

隻展示了一個空格,多個的沒有展示

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>20210822_十</title>

</head>

<body>

我們 是 好人

</body>

</html>

如果想要展示多個空格,我們應該怎麼處理呢?

使用  ;可以達到這個效果

html常見面試題及答案(轉行測試開發-HTML)7

來看下代碼:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>20210822_十</title>

</head>

<body>

我們 是 好人

</body>

</html>

還有哪些特殊符号呢?

< < > >

看下效果:

html常見面試題及答案(轉行測試開發-HTML)8

看下代碼:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>20210822_十</title>

</head>

<body>

我們 是 好人

<p>這是一個 <段落> </p>

</body>

</html>

好的,今天先到這裡吧

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关教育资讯推荐

热门教育资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved