網頁編程：如何在HTML中插入一條水平線？

天的主題是網頁編程中的水平線。

同學們好，今天我來分享一些免費的少兒編程知識。只要每天堅持學習一行代碼，你也可以成為編程高手！今天我們要學習如何在HTML中插入一條水平線，使用的是HR標簽。HR是一個自閉合標簽，雖然它沒有標準的屬性，但我們可以通過CSS來控制它的外觀。

先來看看我們的實例效果。在頁面上，兩行文字被一條直線分開。這條直線就是HR標簽，效果已經展示出來了?，F在我們來看看實現的代碼。HR標簽的寫法非常簡單，但在最開始的時候，它有四個屬性，現在已經不被標準支持了。盡管如此，我們仍然可以使用它。

今天的實例中，我們已經將這些標簽加入到了代碼中。如果你感興趣，可以查看下方的代碼。按下空格鍵可以看到過時的屬性不會被智能提示，但這并不影響代碼的正確性。將注釋取消后保存，然后回到瀏覽器刷新，可以看到屬性仍然有效。線條的高度為3，寬度為400，并且居中顯示。取消陰影后，線條將變為純色。

這只是一個演示，你可以參考一下。從這個示例中，我們可以看到，HR標簽的寬度是根據頁面寬度自動調整的。當它的寬度達到整個瀏覽器時，它會自動換行。既然屬性已經過時了，那么我們如何通過HTML來控制外觀呢？CSS是我們今天要學習的內容。

先取消注釋的代碼，讓HTML失效，然后保存。回到瀏覽器刷新，就可以看到線條變成了藍色。

今天的分享就到這里，希望各位同學可以試著寫三遍，不需要看視頻也可以掌握這個技巧。如果你需要案例和相關文檔，可以向我咨詢。

我們下期再見，想學習編程的同學記得關注哦。

TML/CSS部分

1、什么是盒子模型？

在網頁中，一個元素占有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分占有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。

2、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea

塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img

3、CSS實現垂直水平居中

一道經典的問題，實現方法有很多種，以下是其中一種實現：

HTML結構：

CSS：

4、簡述一下src與href的區別

href 是指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用于超鏈接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。

5、什么是CSS Hack?

一般來說是針對不同的瀏覽器寫不同的CSS,就是 CSS Hack。

IE瀏覽器Hack一般又分為三種，條件Hack、屬性級Hack、選擇符Hack（詳細參考CSS文檔：css文檔）。例如：

6、簡述同步和異步的區別

同步是阻塞模式，異步是非阻塞模式。

同步就是指一個進程在執行某個請求的時候，若該請求需要一段時間才能返回信息，那么這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；

異步是指進程不需要一直等下去，而是繼續執行下面的操作，不管其他進程的狀態。當有消息返回時系統會通知進程進行處理，這樣可以提高執行的效率。

7、px和em的區別

px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，并且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

8、什么叫優雅降級和漸進增強？

漸進增強 progressive enhancement：

針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 graceful degradation：

一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

區別：

a. 優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給

b. 漸進增強則是從一個非?；A的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要

c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶

9、瀏覽器的內核分別是什么?

IE: trident內核

Firefox：gecko內核

Safari：webkit內核

Opera：以前是presto內核，Opera現已改用Google Chrome的Blink內核

Chrome：Blink(基于webkit，Google與Opera Software共同開發)

最后

想了解更多前端開發者面試相關歡迎評論區留言或私信我！

關注公眾號：fkdcxy 瘋狂的程序員丶面試真題，大廠面經，大牛指點，提升基礎知識！

html標題,水平線,注釋

html標題(heading)是通過<h1>....<h6>標簽來定義的.

根據重要性排列,<h1>定義最大的標題,<h6>定義最小的標題

<html>

<head>

<title>愛你的阿平</title>

</head>

<body>

</body>

</html>

在線咨詢

上一篇：PHP基礎知識講座：第2課，如何在HTML頁面中嵌入PHP代碼
下一篇：HTML添加背景音樂(embed、audio)

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

網頁編程：如何在HTML中插入一條水平線？

最后

您的項目需求