在HTML中,大多數元素都被定義為塊級元素或內聯元素。
塊級元素通常會獨立成行,而內聯元素會并排顯示。
在我們學過的元素中,
塊級元素如:<h> <p> <table>這些。
內聯元素如<td><a><img>
下面我們通過練習來直觀看看他們的區別。
塊級元素展示,代碼如下:
<body>
<h1>第一個網頁</h1><hr><h2>表格元素</h2><hr>
<p>塊級元素與內聯元素</p>
<p>零基礎自學網頁制作</p>
<table border="1" width="50%">
<thead>
<tr>
<td colspan="2">表格的頭部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的腳部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格標題</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
如圖:
內聯元素展示如下
示例代碼:這段代碼被我放在了</table>后面。
<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">殲20戰斗機</a>
<img src="img/戰斗機/image3.jpg" width = "200px"/>
效果如圖:
其中,<img>標簽中的width屬性規定了圖片的寬度為200px,也就是200像素。
HTML中,如果只對圖片的寬或高進行數值指定,那么未指定的數值會隨著指定數值進行等比例縮放!
熟知html元素是塊級還是內聯對以后進行頁面布局有一定的指導意義。
<div>與<span>標簽
為了方便開發者對頁面內容進行布局和調整,html開發者為html加入了專門的區塊元素<div></div>。
<div></div>是一個塊級元素,大家可以把它理解為一個容器,它本身是不會顯示在頁面上的。
比如這個!
筆者第一個漫畫作品
如果拋開畫面內容,我們看到的是一堆對畫面進行分割的方格子。像這樣
<div></div>元素的作用就是對頁面進行了這樣的分割。
實際上我們的頁面布局都是基于這樣思路進行分割的,只是頁面上不會像漫畫一樣顯示外邊框而已。例如:
強制為其添加邊框分割:
大家看明白了嗎?<div></div>就是用來對頁面進行分割劃區域的。
通過給<div>標簽設置不同的id屬性,可以在css文件中對不同<div>區塊中的所有信息進行統一調整樣式的操作。
這是對塊級元素整體改變樣式的方法。
但是,如果我們想對一個塊級元素中的不同文字或圖片這些內聯元素進行單獨操作怎么做呢?
html開發者為我們提供了<span></span>這樣的內聯標簽。比如我們對<p>我有一個夢想</p>這個段落元素中的"夢想"兩個字進行變化顏色的操作,我們可以這樣寫:
<p>我有一個<span>夢想</span></p>
通過對<span>指定不同的id或class屬性在CSS文件中對"夢想"二字進行改變顏色的操作而不會影響段落元素中的其他文字。
今天的內容結束了,下一次我們建立一個新的頁面來簡單看看<div>元素的基本用法。
喜歡的小伙伴請關注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!
HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作
HTML是什么?——零基礎自學網頁制作
第一個HTML頁面如何寫?——零基礎自學網頁制作
HTML頁面中head標簽有啥用?——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作
使用HTML添加表格1(基本元素)——零基礎自學網頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作
使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作
HTML表單4(form的action、method屬性)——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
1、打開格式工廠,在格式工廠頁面左邊一欄選擇“所有轉到AVI”。
2、添加需要截取的視頻文件,點擊“確定”。
3、右鍵選擇“選項”,在彈出的窗口左下角截取片段,設置開始時間和結束時間,設置好后點“確定”。
再重新 點擊“開始”,轉換后就是你想要的片段了。
TML+PHP超在視頻切片上傳,前端HTML5,VUE2,VUE3,React,JS,JQ。純HTML方式不太好實現,因為沒有提供切片API,視頻大概有1G,10G,50G左右,高清,超清視頻都有。
PHP切片,分片,切割,分塊,分段,大文件,超大文件斷點續傳。刷新續傳。關機續傳,重啟續傳。前端用的是HTML
VUE,React都用了HTML5的API,也就是chrome提供的切片API,小文件可以。
前端HTML5,JS,JQ,VUE2,VUE3,React,
后端PHP5,PHP6,PHP7,PHP8,ThinkPHP,
服務器支持Linux,Windows,macOS,CentOS,中標麒麟,銀河麒麟,統信,龍芯,華為鯤鵬,
數據庫支持MySQL,達夢數據庫,人大金倉
需要提供前端源碼,后端源碼,控件源碼
需要提供7*24小時技術支持,長期技術支持,長期維護服務
需要提供手機,QQ,微信,企業微信,電子郵箱等聯系方式
需要支持包含IE在內的全部瀏覽器
終端需要支持Windows,macOS,Linux,信創國產化環境,中標麒麟,銀河麒麟,統信UOS,龍芯,華為
功能需要支持10G,50G,100G大文件上傳和斷點續傳,刷新續傳,重啟續傳
支持超大文件分片,分段,分塊,分割上傳下載,斷點續傳
支持文件夾上傳,下載斷點續傳,支持文件夾層級結構,層級結構信息保存到數據庫,下載的時候同樣保留層級結構
支持加密上傳,下載加密,端到端加密,國密SM4加密算法,數據加密傳輸,傳輸過程中要保證數據是加密的。
版本:6.5.40
代碼:https://gitee.com/xproer/up6-php/tree/6.5.40/
安裝環境
PHP:7.2.14
調整塊大小
NOSQL
NOSQL不需要任何配置,可以直接訪問測試
SQL
創建數據庫
您可以直接復制腳本進行創建
配置數據庫連接
6.安裝依賴
訪問頁面進行測試
數據表中的數據
相關參考:
文件保存位置
php5教程
*請認真填寫需求信息,我們會在24小時內與您取得聯系。