tft每日頭條

 > 生活

 > html中給元素添加陰影的屬性是

html中給元素添加陰影的屬性是

生活 更新时间:2025-02-05 09:42:32

這次繼續學習《第四章 文本》的内容,包括div元素的作用、自閉合标簽、塊元素和行内元素的區别與聯系、網頁中特殊符号的輸入方法。

學無止境,樂在其中。關注我,一起進步!

1、div分區标簽

div是division的縮寫,分區的意思。如果把html文件比喻成一座小城,那麼div就是小區,p元素等就是樓房。用div标簽把p元素等分類,有兩個好處:一、提高代碼可讀性,二、便于用CSS控制元素外觀。div元素的使用示例如下:

html中給元素添加陰影的屬性是(HTML學習筆記5div元素作用)1

2、自閉合标簽

html中的一般标簽都有開始和結束兩個部分(如<p> </p>),可以在其中插入其它标簽。自閉合标簽隻有一個部分,它的内部不能再插入其它标簽和文字。常見的自閉合标簽如下:

<meta/>定義網頁信息

<link/>引入外部CSS文件

<br/>換行标簽

<hr/>水平線标簽

<img/>圖片标簽

<input/>表單标簽

小發現:自閉合标簽中的斜線不寫也能正常顯示,如<br>也能正常換行。

3、塊元素(block)和行内元素(inline)

(1)塊元素在浏覽器顯示時獨占一行,其内部可以容納其它塊元素和行内元素。常見的塊元素有:

h1~h6标題元素

p段落元素

div分區元素

hr水平線

ol有序列表

ul無序列表

(2)行内元素在浏覽器顯示時可以與其它行内元素處于同一行,其内部可以容納其它行内元素,不能容納塊元素。常見的行内元素有:

strong粗體元素

em斜體元素

sup上标元素

a超鍊接元素

(3)塊元素與行内元素的本質區别是:塊元素定義的是顯示的實體(文字、圖片等),行内元素定義的是實體的外觀和性質(文字的粗細、位置、下劃線等)。塊元素和行内元素的代碼示例和顯示效果如下:

html中給元素添加陰影的屬性是(HTML學習筆記5div元素作用)2

html中給元素添加陰影的屬性是(HTML學習筆記5div元素作用)3

4、網頁中的特殊符号怎麼輸入

網頁中的特殊符号有對應的代碼表示法,開頭都是“&”,結尾都是“;”注意這是英語格式下的分号。

(1)易輸入的符号

html中給元素添加陰影的屬性是(HTML學習筆記5div元素作用)4

(2)難輸入的符号,代碼和顯示效果如下圖:

html中給元素添加陰影的屬性是(HTML學習筆記5div元素作用)5

5、編程作業——實現本章開頭的網頁效果

代碼如下:

<!DOCTYPE html>

<html>

<head>

<!--定義頁面編碼方式-->

<meta charset="utf-8"/>

<title>第四章編程作業</title>

</head>

<body>

<div>

<h1>各科小常識</h1>

</div>

<div>

<h3>語文</h3>

<p> 三國演義是中國四大古典名著之一,元末明初小說家羅貫中所著,是中國第一部章回體曆史演義小說,描寫了從東漢末年到西晉初年近100年的曆史風雲。</p>

</div>

<hr>

<div>

<h3>數學</h3>

<p> 勾股定理,對于直角三角形有:a<sup>2</sup> b<sup>2</sup>=c<sup>2</sup>。</p>

</div>

<hr>

<div>

<h3>英語</h3>

<p> No pain, no gain.</p>

</div>

<hr>

<div>

<h3>化學</h3>

<p> H<sub>2</sub>SO<sub>4</sub>是一種重要的化工原料,可用于制作化肥、洗滌劑等。</p>

</div>

<hr>

<div>

<h3>經濟</h3>

<p> 版權符号©<br> 注冊商标®</p>

</div>

</body>

</html>

html中給元素添加陰影的屬性是(HTML學習筆記5div元素作用)6

html中給元素添加陰影的屬性是(HTML學習筆記5div元素作用)7

顯示效果如下:

html中給元素添加陰影的屬性是(HTML學習筆記5div元素作用)8

這一章要記憶的内容比較多,需要多花不少時間去熟練。另外增加了一些概念理解,例如div分區标簽的作用,自閉合标簽的概念,塊元素與行内元素的區别和聯系,而且強化了HTML語義化的實踐。對這些内容的理解都比标簽本身重要

,

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

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

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