技術文章 » 2020-08-09

2020-08-09

2020-08-09 12:19:17

一、選擇題(每題2分)
1、在HTML中，要定義一個空鏈接使用的標記是？
A、   
B、   
C、  
D、

2、以下對html的描述不正確的是？
A、html是一種超文件標示語言，標籤不能交叉巢狀使用；不能在html中插入特殊標籤，比如：img
B、html是一種超文件標示語言，標籤可以交叉巢狀使用，可以在html中插入特殊標籤，比如：img
C、html是一種超文件標示語言，大小寫不敏感，標籤可以交叉巢狀使用
D、html是一種超文件標示語言，大小寫敏感，標籤可以交叉巢狀使用

3、以下哪個標籤可以實現強制換行？
A、br
B、dr
C、hr
D、dl

4、在HTML中，若實現點選超鏈接，如何彈出一個新的網頁視窗？
A、百度
B、百度
C、百度
D、百度

5、在HTML中，下面 下麪不屬於HTML文件的基本組成部分的是？
A、
B、
C、

6、下列CSS程式碼中有幾處語法錯誤？
&○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○li {font-size:12px , color:666666○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○ }
A、1
B、2
C、3
D、4

7、下列在HTML文件中插入樣式表的方式，優先順序最高的是？
A、外部link引入
B、style屬性
C、外部https://blog.csdn.net/jsbjx/article/details/@import引入
D、style標籤

8、實現效果：鏈接字型顏色爲紅色，無下劃線，當滑鼠移過時顯示下劃線。以下選項正確的是？
A、a:link{color:red○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○} a:hover{text-decoration:underline○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○}
B、a{color:red○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○text-decoration:none○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○} a:hover{text-decoration:overline○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○}
C、a{text-decoration:underline○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○} a:hover{color:red○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○text-decoration:none○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○}
D、a{color:red○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○text-decoration:none○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○} a:hover{text-decoration:underline○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○}

9、下列關於CSS中盒子模型說法錯誤的是？
A、padding代表盒子與其他盒子之間的距離
B、border代表盒子的邊框
C、可以通過box-sizing屬性設定不同的盒子模型：W3C標準盒子、邊框盒子
D、盒子模型是頁面佈局的基礎，它包括外邊距、邊框、內邊距以及元素的內容

10、下面 下麪程式碼中，段落p標籤內文字最終顯示的顏色是？

移動互聯方向

A、#F00
B、#00F
C、#666
D、#333


           style屬性：1000
		id：100
		class/僞類/屬性：10
		元素/僞元素：1

	特性值越大，優先順序越高；特性值相同時，越靠下的優先順序越高

二、填空題（每題4分）

  1. html中的註釋爲___,CSS中的註釋爲____/* 註釋 */。
    2.表格中合併單元格的屬性爲___span_____，定義表格與內容間距的屬性爲____padding____，列合併的屬性爲________，行合併的屬性爲________。
    3.表單中單選框爲_____radio ，複選框爲___checkbox ，單行文字方塊爲____text ，檔案上傳按鈕爲___submit ，多行文字方塊爲___textarea，下拉式選單爲
    4.form表單中定義表單提交方式的屬性爲    ____，其常見的屬性值爲________和________。屬性________表示當提交表單時，向何處發送表單數據。
    5、css中盒子模型有___________盒子 和 ____________盒子；通過____________屬性修改盒子模型；給__________盒子設定寬度時，設定的寬度值直接設定給盒子的寬度；

三、簡答題(每題5分)
1、簡述塊級元素在父元素的居中方法有哪些？
1.給父元素設定：
display: flex○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
justify-content: center○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
align-items: center○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
2.給父元素設定display:flex○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
給子元素直接設定：margin:auto
3.給父元素設定一個定位屬性，給子元素設定一個絕對定位；然後給子元素所有配合屬性設定0px；並且給子元素設定margin:auto

	4.給父級元素設定定位屬性，子元素設定絕對定位；
	將子元素的top:50%○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○left:50%○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
	再配合使用margin-top:-height/2○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
	margin-left:-width/2○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○

2、清除浮動的方式有哪些？
clear:left/right/both
1.在浮動元素之後新增一個塊級元素,給塊級元素設定清除浮動

2.給所有浮動元素的父元素設定::after{
	content:''○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
	clear:left○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
	display:block○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○

3、塊級元素有哪些？行內元素有哪些？行內元素與塊級元素分別有什麼特點？
塊級元素
div、h1~h5、p、html、body、ul、li
1) 獨佔一行
2) 預設寬度爲100%，預設高度由子元素或者內容決定
3) 可以爲其指定寬高 style=「width:○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○height:○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○」

行內元素
    span、a、img、strong、i
    1) 與其他行內元素共用一行
    2) 預設寬高由內容決定
    3) 不能爲其指定寬和高
    4) 行內元素中不可以巢狀塊元素，但塊元素中可以巢狀行內元素

4、簡述父子級外邊距合併問題的幾種解決方案？
1.給父元素新增邊框屬性
2.將本應該設定給子元素的margin設定給父元素的padding
3.給父級或者子級新增float屬性
4.給父級或者子級新增position: absolute○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
5.給父元素或者子元素新增display: inline-block○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
6.給父級元素新增overflow: hidden○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○

5、簡述html中引入css的方式有哪些？並說明區別；
1.行內樣式
style屬性

 	2.內聯樣式
 		style標籤中
 	3.外部引入
 		建議：link標籤
 		https://blog.csdn.net/jsbjx/article/details/@import url()

 優先順序：
 	行內樣式》內聯樣式=外部引入


              1) 所屬範圍
    https://blog.csdn.net/jsbjx/article/details/@import是 CSS 的語法，只能匯入樣式
    link是 HTML 的標籤，不僅可以載入 CSS 檔案，還可以定義 rel 屬性
        rel="stylesheet"表示呼叫外部樣式表

             2) 載入順序
    頁面載入時，link標籤引入的 CSS 被同時載入
    https://blog.csdn.net/jsbjx/article/details/@import引入的 CSS 將在頁面載入完畢後被載入

            3) 相容性區別
    https://blog.csdn.net/jsbjx/article/details/@import需要IE5+
    link標籤，不存在相容性問題

6、簡述將原生代碼提交至gitee的步驟

7、簡述設定元素的隱藏和顯示的兩種方式？區別是什麼？
display:
none○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○:元素的隱藏,
隱藏元素所佔據的空間
block○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○元素的顯示

  visibility:
hidden:元素的隱藏；
	相當於修改了元素的透明度，不隱藏元素空間
visible：元素的顯示

8、用css程式碼實現輪播圖？









             div.outer{
        width: 300px○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
        height: 100px○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
        border: 1px solid red○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
        margin: 0px auto○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
        overflow: hidden○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
    }
    div.imgs{
        width: 1500px○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
        height: 100px○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
        background-color: rosybrown○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
        animation-name: move○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
        animation-duration: 10s○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
        animation-iteration-count: infinite○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
        animation-timing-function: steps(5)○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
    }
    div.imgs div{
        width: 300px○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
        height: 100px○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
        color: #000○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
        font-size: 30px○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
        float: left○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○

    }
    https://blog.csdn.net/jsbjx/article/details/@keyframes move{
        from{margin-left: 0px○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○

        }
        to{
            margin-left: -1500px○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
        }
    }

9、請寫出至少10個文字樣式屬性？
color:字型顏色
font-size:大小
font:weitht:粗細
text-indent:首行縮排
text-decrotion:新增下劃線
text-transform:改變字型大小寫
font-family:字型
word-spacing
letter-spacing
word-break:
word-wrap:
overflow:
hidden○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
scroll○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○
width
height
max-width
max-height
min-width
min-height

10、請寫出至少5個html5中的新增屬性？至少5個html5中的新增標籤？

 屬性
                    type
                        date    日期
                        datetime-local 	日期時間控制元件
                        time 	時間控制元件
                        number 	數位控制元件（只能輸入數位）
                        range 	範圍控制元件（通過控制條可以調整取值）
                        search 	搜尋控制元件
                        tel 	電話控制元件
                        url 	地址控制元件
                        color 	顏色控制元件
                        email  	email控制元件                                                                                             header(頭)
					nav
					article（主體）
					section (部分)
					footer（腳）
                                                                                             video
                                                                                                audio

11、html中的錨點如何定義？舉例說明

12、請寫出css屬性中設定顏色值的幾種方式？
1.關鍵字
2.rgb(r,g,b)○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○0-255之間
3.rgba(r,g,b,a)○○https://blog.csdn.net/jsbjx/article/details/@0$https://blog.csdn.net/jsbjx/article/details/@○○a:0-1取值；0代表完全透明 1代表完全不透明
4.16進位制的顏色值