Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 亚洲和欧美毛片久久久久,亚洲一区二区三区四区五区 ,亚洲国产精品久久久久666 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          HTML常用布局標簽：提升網頁顏值！不可不知的HTML布局技巧全解析
          
        
           
          
	
	
          
		
                        
          HTML的世界里，一切都是由容器和內容構成的。容器，就如同一個個盒子，用來裝載各種元素；而內容，則是這些盒子里的珍寶。理解了這一點，我們就邁出了探索HTML布局的第一步。
          在HTML中，布局標簽主要用于控制頁面的結構和樣式。本文將介紹一些常用的布局標簽及其使用方法，并通過代碼示例進行演示。
          一、理解布局的重要性
          布局在我們前端開發中擔任什么樣的角色呢？想象一下，你面前有一堆散亂的積木，無序地堆放在那里。
          而你的任務，就是將這些積木按照圖紙拼裝成一個精美的模型。HTML布局標簽的作用就像那張圖紙，它指導瀏覽器如何正確、有序地顯示內容和元素，確保網頁的結構和外觀既美觀又實用。
          下面我們就來看看在HTML中常用的基礎布局標簽有哪些，如何使用這些布局標簽完成我們的開發目標。
          二、常用的布局標簽
          1、div標簽
          div標簽是一個塊級元素，它獨占一行，用于對頁面進行區域劃分。它可以包含其他HTML元素，如文本、圖片、鏈接等。通過CSS樣式可以設置div的布局和樣式。
          示例代碼：
          <!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>
</head>
<body>

<div>這是一個div元素

</div>

</body>
</html>

          運行結果：
          2、span標簽
          span標簽是一個內聯元素，它不獨占一行，用于對文本進行區域劃分。它主要用于對文本進行樣式設置，如字體、顏色等。與div類似，span也可以包含其他HTML元素。
          示例代碼：
          <!DOCTYPE html>
<html>
<head>
<style>
  .text {
    color: blue;
    font-size: 20px;
  }
</style>
</head>
<body>

<p>這是一個<span>span元素</span>。</p>

</body>
</html>

          運行結果：
          3、table標簽
          table標簽用于創建表格，它包含多個tr（行）元素，每個tr元素包含多個td（單元格）或th（表頭單元格）元素。
          <table> 定義一個表格，<tr> 定義表格中的行，而 <td> 則定義單元格。通過這三個標簽，我們可以創建出整齊劃一的數據表，讓信息的展示更加直觀明了。
          需要注意的是：
          • <table>和</table>標記著表格的開始和結束。
          • <tr>和</tr>標記著行的開始和結束，幾組表示該表格有幾行。
          • <td>和</td>標記著單元格的開始和結束，表示這一行中有幾列。
          示例代碼：
          <!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
    border: 1px solid black;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>
</body>
</html>

          運行結果：
          4、form標簽
          <form>標簽的主要作用是定義一個用于用戶輸入的HTML表單。這個表單可以包含各種輸入元素，如文本字段、復選框、單選按鈕、提交按鈕等。
          <form>元素可以包含以下一個或多個表單元素：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>和<output>等。
          示例代碼：
          <!DOCTYPE html>
<html>
<head>
<style>
  form {
    display: flex;
    flex-direction: column;
  }
</style>
</head>
<body>

<form>
  <label for="username">用戶名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密碼：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
</form>

</body>
</html>

          運行結果：
          5、列表標簽
          1）無序列表
          • 指沒有順序的列表項目
          • 始于<ul>標簽，每個列表項始于<li>
          • type屬性有三個選項：disc實心圓、circle空心圓、square小方塊。 默認屬性是disc實心圓。
          示例代碼：
          <!DOCTYPE html>
<htmml>
<head>
<meta charst = "UTF-8">
<title>html--無序列表</title>
</head>
<body>
<ul>
<li>默認的無序列表</li>
<li>默認的無序列表</li>
<li>默認的無序列表</li>
</ul>
<ul>
<li type = "circle">添加circle屬性</li>
<li type = "circle">添加circle屬性</li>
<li type = "circle">添加circle屬性</li>
</ul>
<ul>
<li type = "square">添加square屬性</li>
<li type = "square">添加square屬性</li>
<li type = "squaare">添加square屬性</li>
</ul>
</body>
</html>

          運行結果：

          也可以使用CSS list-style-type屬性定義html無序列表樣式。
          想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！「鏈接」
          2）有序列表
          • 指按照字母或數字等順序排列的列表項目。
          • 其結果是帶有前后順序之分的編號,如果插入和刪除一個列表項，編號會自動調整。
          • 始于<ol>標簽，每個列表項始于<li>。
          示例代碼：
          <ol>
<li>默認的有序列表</li>
<li>默認的有序列表</li>
<li>默認的有序列表</li>
</ol>
<ol type = "a" start = "2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
<li value ="20">第四項</li>
</ol>
<ol type = "Ⅰ" start = "2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
</ol>

          運行結果：

          同樣也可以使用CSS list-style-type屬性定義html有序列表樣式。
          3）自定義列表
          • 自定義列表不僅僅是一列項目，而是項目及其注釋的組合。
          • 以<dl>標簽開始。每個自定義列表項以<dt>開始。每個自定義列表項的定義以<dd>開始。
          • 用于對術語或名詞進行解釋和描述，自定義列表的列表項前沒有任何項目符號。
            基本語法：
          <dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>

<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
</dl>

<dl>即“definition list（定義列表）”，
<dt>即“definition term（定義名詞）”，
而<dd>即“definition description（定義描述）”。

          示例代碼：
          <dl>
<dt>計算機</dt>
<dd>用來計算的儀器</dd>

<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置</dd>
</dl>

          運行結果：

          以上就是HTML中常用的布局標簽及其使用方法。在實際開發中，還可以結合CSS和JavaScript來實現更復雜的布局和交互效果。
          掌握了這些HTML常用布局標簽，你已經擁有了構建網頁的基礎工具。記住，好的布局不僅需要技術，更需要創意和對細節的關注。現在，打開你的代碼編輯器，開始你的布局設計之旅吧！
          表標簽
          在html中列表分為無序列表、有序列表和自定義列表（項目列表）。接下來就看看他們有什么不同吧！
          作用：如果說table標簽是用來顯示數據的，那么列表標簽就是用來進行html頁面布局的。
          • 無序列表
          語法：
          <ul>
	<li></li>  
</ul>
          <ul></ul>標簽中只能且必須嵌套<li></li>標簽。li標簽之間沒有先后順序，是并列存在的。li標簽里可以容納文本、數據、圖片、超鏈接等內容。跟table一樣，列表標簽也自帶樣式屬性，但為了代碼統一，我們還是會使用css來設置。
          代碼示例：
          <h2>無序列表：</h2>
    <ul>
        <li>蘋果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>
          運行界面：
          • 有序列表
          語法：
          <ol>
 	<li></li> 
 </ol>
          <ol></ol>標簽里面只能嵌套<li></li>標簽，在這里li標簽是有順序的。
          代碼示例：
          <h2>有序列表：</h2>
    <ol>
        <li>蘋果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ol>
          運行界面：
          • 自定義列表
          語法：
          <dl>
	<dt></dt>
	<dd></dd>
</dl>
          <dl></dl>標簽：定義列表
          <dt></dt>標簽：列表標題
          <dd></dd>標簽：列表內容
          一個dd標簽是對dt標簽標題的說明。這兩個標簽中可以包含任何標簽。
          代碼示例：
          <h2>自定義列表：</h2>
    <!-- dl：外層標簽  dt：項目標題  dd：項目內容 -->
    <dl>
        <dt>水果種類</dt>
        <dd>蘋果</dd>
        <dd>橘子</dd>
        <dd>香蕉</dd>
    </dl>
          運行界面：

          表單標簽
          作用：收集用戶信息。一般用在注冊界面等。
          組成：一個完整的表單中包含表單域（整個填寫界面所有信息）、表單控件（表單元素）和提示信息（表單控件的提示作用）3個部分。
          • 表單域
          表單域：是一個包含表單元素的區域。
          <form>標簽用于定義表單域，實現用戶信息的收集和傳遞。
          作用：將其區域范圍內的信息收集并傳送給服務器。
          語法：
          <form action=”url地址” method=”提交方式” name=”表單域名稱”>
各種表單控件
</form>
          注：action：url地址，指定接收并處理表單數據的服務器程序的url地址。
          method：用于設置表單數據的提交方式。
          method=”get”：提交數據時，地址欄可查看到數據。數據量少且安全級別不高時使用。
          method=”post”：提交數據時，地址欄數據是加密的。
          name：表單域的名稱。用于區分同一頁面下的不同表單域。
          • 表單控件
          1.input輸入表單元素：
          語法：<input type=””>，依據type屬性值不同區分不同控件。
          文本框：<input type=”text”>。單行輸入字段，默認寬度20個字符。輸入的文字可見。
          密碼框：<input type=”password”>。輸入內容默認不可見。
          單選框：<input type=”radio”>，默認情況下選中后無法取消。
          注：為實現多選一狀態，需要將所有的單選框控件具有同一個name名。
          復選框：<input type=”checkbox”>，選中后可以更改可以取消。
          提交按鈕：<input type=”submit”>，默認按鈕中的提示文字是提交，可以通過value值進行更改內容。點擊提交按鈕后會把表單數據發送到服務器。
          重置按鈕：<input type=”reset”>，默認按鈕中的提示文字是重置，可以通過value值進行更改內容。點擊后會清楚表單中的所有數據。
          普通按鈕：<input type=”button”>
          文件域：<input type=”file”>，用來選擇文件，一般適用于文件上傳。
          label標簽：標注標簽，配合input控件一起使用
          作用：綁定表單控件，擴大點擊范圍。
          當點擊label標簽的內容時，系統會自動選中該表單控件。
          代碼示例：
          <h1>label標簽</h1>
    <form>
        <label for="text">用戶名：</label>
        <input type="text" name="用戶名" id="text"><br>
        <label for="password">密碼：</label>
        <input type="password" id="password"><br>
        <label for="男">男</label>
        <input type="radio" name="sex" id="男">
        <label for="女">女</label>
        <input type="radio" name="sex" id="女"><br>
    </form>
          運行界面：
          Input控件屬性：
          name:用戶自定義，提示input元素的名稱。給后臺工作人員的提示。
          value：用戶自定義，提示input元素的內容值。給后臺的提示。在文本框控件中會顯示該內容，單選框和復選框則顯示不出來。
          checked：默認選中狀態。主要用于單選按鈕和復選按鈕中。
          maxlength：正整數，規定輸入字段中的字符最大長度。
          input代碼示例：
          <h2>表單標簽</h2>
    <form>
        用戶名：<input type="text" maxlength="15" value="請輸入用戶名"><br>
        密  碼：<input type="password"><br>
        性  別：<input type="radio" name="sex" value="男">男   
				<input type="radio" name="sex" value="女">女<br>
        愛  好：<input type="checkbox" name="like" value="swim">游泳 
				<input type="checkbox" name="like" value="健身">健身 
        <input type="checkbox" name="like" value="run">跑步<br>
        <input type="submit">   
        <input type="reset"><br>
        <input type="submit" value="注冊">
        <input type="reset" value="清空"><br>
        <!-- 后期結合js搭配使用 -->
        <!-- 按鈕選框在默認情況下是沒有文字內容的，需要添加value值設置文字內容 -->
        <input type="button" value="獲取短信驗證碼"><br>
        上傳頭像：<input type="file">
    </form>
          運行界面：
          2.select下拉表單元素：
          使用場景：地址選擇、職業分類、學校分類等。
          select標簽：定義下拉列表。
          語法：
          <select>
	<option></option>  
</select>
          代碼示例：
          <h1>下拉表單</h1>
    <form>
        <label for="adress">籍貫：</label>
        <select name="" id="">
            <option value="">北京</option>
            <option value="">河北</option>
            <option value="">上海</option>
            <option value="">廣州</option>
            <option value="">深圳</option>
        </select>
    </form>
          運行界面：
          3.textrea文本域表單控件
          使用場景：留言、介紹、評論等。
          語法：
          <textrea rows=”” cols=””>文本內容</textrea>
          跟文本框控件不同，它是多行文本輸入框，可以自行設定行數以及一行容納多少字數。
          rows=“每行可輸入的字符數”，
          cols=“顯示的行數”。
          這兩個樣式屬性實際開發中大多使用css就可以改變操作。
          代碼示例：
          <h1>文本域表單元素</h1>
    <form action="">
        <label for="textrea">今日反饋：</label><br>
        <textarea name="" id="" cols="15" rows="10">今日反饋</textarea>
    </form>
          運行界面：
          關于HTML基礎內容就學習到這里了，明天練習一個綜合案例。對了，現在跟學的是黑馬前端的pink老師發布的基礎視頻，明天做的案例按照老師講解的案例去做。
          SS列表屬性作用如下：
          • 設置不同的列表項標記為有序列表
          • 同的列表項標記為無序列表
          • 設置列表項標記為圖像
          列表
          在HTML中，有兩種類型的列表：
          • 無序列表 - 列表項標記用特殊圖形（如小黑點、小方框等）
          • 有序列表 - 列表項的標記有數字或字母
          使用CSS，可以列出進一步的樣式，并可用圖像作列表項標記。
          不同的列表項標記
          list-style-type屬性指定列表項標記的類型是：

          無序列表

          （1）編輯代碼
          打開記事本，編寫代碼，并保存為HTML格式文件。代碼如下。


          （2)在瀏覽器中瀏覽效果
          在瀏覽器中瀏覽效果如圖所示。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产午夜精品一区二区三区漫画|
国产伦精品一区二区三区免费下载|
极品尤物一区二区三区|
在线|一区二区三区|
无码精品一区二区三区在线|
精品一区二区三区视频|
亚洲午夜精品一区二区麻豆|
久久国产精品最新一区|
国产一区二区三区高清视频|
视频在线一区二区三区|
国产视频一区二区|
日本免费一区二区三区最新|
精品少妇人妻AV一区二区|
精品日韩亚洲AV无码一区二区三区|
亚洲男人的天堂一区二区|
国产在线一区二区三区在线|
精品一区二区久久久久久久网精|
激情内射亚洲一区二区三区爱妻|
国产精品丝袜一区二区三区|
熟女性饥渴一区二区三区|
国产成人高清精品一区二区三区|
国产一区二区三区免费视频|
精品国产日韩亚洲一区91|
在线免费视频一区|
日韩精品一区二区三区视频|
日韩精品一区二区午夜成人版|
福利视频一区二区牛牛
|
国产裸体歌舞一区二区|
精品日韩在线视频一区二区三区|
国产在线步兵一区二区三区|
一区二区高清在线|
亚洲啪啪综合AV一区|
精品国产日韩亚洲一区|
国产免费一区二区三区不卡
|
国产香蕉一区二区精品视频|
亚洲码一区二区三区|
乱码人妻一区二区三区|
高清一区二区在线观看|
香蕉免费看一区二区三区|
国产精品视频一区二区三区四|
久久久久无码国产精品一区|