當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html:(40):块级元素和内联块级元素

發布時間：2023/12/10 编程问答 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 html:(40):块级元素和内联块级元素小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.下表列出了內聯元素和塊級元素的主要區別

html中內聯元素和塊級元素的區別
塊級元素	行內元素
獨占一行,默認情況下，其寬度自動填滿其父元素寬度	相鄰的行內元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內容而變化
可以設置width，height屬性	行內元素設置width，height屬性無效
可以設置margin和padding屬性	行內元素起邊距作用的只有margin-left、margin-right、padding-left、padding-right，其它屬性不會起邊距效果。
對應于display:block	對應于display:inline；

2.按字母順序排列塊級元素主要有

<address>????????定義地址
<caption>????????定義表格標題
<dd>????????定義列表中定義條目
<div>????????定義文檔中的分區或節
<dl>????????定義列表
<dt>????????定義列表中的項目
<fieldset>????????定義一個框架集
<form>????????創建表單元素
<h1><h2><h3><h4><h5><h6>????????標題元素
<hr>????????水平線
<legend>????????給fieldset元素定義標題
<li>????????定義列表項目
<noframes>????????為那些不支持框架的瀏覽器顯示文本，放置于frameset標簽內
<noscript>????????為那些不支持腳本的瀏覽器顯示文本
<ol>????????有序列表
<ul>????????無序列表
<p>????????定義段落
<pre>????????定義預格式化文本
<table>????????定義表格
<tbody>????????定義表格主體
<td>????????表格中的標準單元格
<tr>????????表格中的行
<tfoot>????????表格中的頁腳
<th>????????定義表頭單元格
<thead>????????定義表格的表頭

3.內聯元素有

<a>????????可定義錨以及超鏈接
<abbr>????????表示一個縮寫形式
<acronym>????????表示只取title中首字母的縮寫形式
<b>????????字體加粗
<bdo>????????可覆蓋默認的文本方向
<big>????????大號字體加粗
<br>????????換行
<cite>????????引用進行定義
<code>????????定義計算機代碼文本
<dfn>????????定義一個定義項目
<em>????????定義為強調的內容
<i>????????斜體文本效果
<img>????????向網頁中嵌入一張圖像
<input>????????輸入框
<kbd>????????定義鍵盤文本
<label>????????為input進行標記/標注
<q>????????定義短的引用

<s> ? ?表示不準確不相關，卻不應當給予刪除的內容

<samp>????????定義樣本文本

<select>????????定義單選或者多選菜單
<small>????????呈現小號字體效果
<span>????????組合文檔中的行內元素
<strong>????????語氣更強的強調內容
<sub>????????定義下標文本
<sup>????????定義上標文本
<textarea>????????多行文本輸入控件
<tt>????????打字機或者等寬的文本效果
<var>????????定義變量

<input>和<img>都是行內元素，但是它們是可以設置寬和高的。這里就涉及到可替換元素和不可替換元素。

替換元素就是瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。

?例如瀏覽器會根據<img>標簽的src屬性的值來讀取圖片信息并顯示出來，而如果查看html代碼，則看不到圖片的實際內容；又例如根據<input>標簽的type屬性來決定是顯示輸入框，還是單選按鈕等。?html中的<img>、<input>、<textarea>、<select>、<object>都是替換元素。這些元素往往沒有實際的內容，即是一個空元素，例如：?<img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" />?瀏覽器會根據元素的標簽類型和屬性來顯示這些元素。可替換元素也在其顯示中生成了框。?

不可替換元素?html 的大多數元素是不可替換元素，即其內容直接表現給用戶端（例如瀏覽器）。

例如：?<p>段落的內容</p>?段落<p>是一個不可替換元素，文字“段落的內容”全被顯示。

Demo

<html>

<head>

<style>

???#div1{

???????background-color: red;?????

???????border: 1px solid black;

???????display: inline;

???????margin: 100px;//內聯元素只有左右外邊距有效

? ?? width: 100px;//內聯元素寬高是有內容決定的

?????? height: 100px;//內聯元素寬高是有內容決定的，line-height也可以設置高度

?? }

?? #div2{

?????? width: 100px;

?????? height: 100px;

?????? background-color: green;

? ?? margin: 100px;

?? }

</style>

</head>

??? <body>

??????? <div id="div1">12345</div>

??????? <div id="div2">122</div>

??? </body>

</html>

總結

以上是生活随笔為你收集整理的html:(40):块级元素和内联块级元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： matlab 棍,双足机器人行走棍图怎么
下一篇： java学习（76）：GUL单选按钮和复