HTML的第二周

前言
HTML的部分標簽
- - - - 1.html的表格
      - 2.html的串列
      - 3.html的區塊
      - 4.html的布局
      - 5.html的表單
      - 6.html的字符物體
總結

前言

愿世界美好與你，環環相扣

第二周學習HTML了，對于學習到的一切感覺到有趣，想在這里與大家分享一下，

HTML的部分標簽

1.html的表格

HTML的最終目的是創造一個供用戶使用的網頁，所以由各種標簽來滿足這種需求，這里我們來介紹一下HTML的表格標簽，

每一個表格都需要從標簽開始，table 英文翻譯為桌子，桌子為一個平面，在這個平面中，我們可以放上我們的表格組件，組成一個表格，
其中，我們要對自己要放入的組件，進行了解：

< tr > （行）：table row；
< td > （表格資料）：table data ；
< th > (表頭） table heading ；
< caption > (標題） caption；（在所有的< tr >上)

表格若不規定邊框屬性，表格將不顯示邊框，邊框屬性為 border （英文為邊境的意思，這里參考為邊框，）
具體應用樣例為：
<table border="1">在我們table中宣告，告訴它我們的要求，
這里建議大家如果要設定無邊框模式，那么最好設定格式為< table border =“0” >，
相信大家對于 Excel中的合并表格，都有印象，其中 合并列 的英文為 colspan ，這個colspan正是HTML中的一個屬性，也是合并的意思，通過加入這個屬性，可以實作多個單元格的合并，具體樣例為:

<table border="1">
<caption>2020年問卷調查</caption>
<tr>
 <th>性別</th>
 <th colspan="2">姓名（前姓，后名）</th>
</tr>
<tr>
<td>男</td>
<td>王</td>
<td>xx</td>
</tr>
<tr>
<td>女</td>
<td>王</td>
<td>xx</td>
</tr>
</table>

編譯后效果為：
在這里插入圖片描述

表格中還可以進行表格的相互嵌套，類似套娃，大家可以自行了解，或者嘗試（套娃），
單元格與內容和單元格的距離不是一成不變的，可以通過加入屬性來進行調控，

單元格與內容之間的內容可以通過 cellpadding 屬性來控制；
< table cellpadding=“10” > 其中的數值代表空格的多少；
單元格與單元格之間的間隔可以通過 cellspacing 屬性來控制；
< table cellspacing=“10” >其中的數值同樣代表空格的多少；

白白的表格看上去會不會讓用戶看上去太單調呢？
不要擔心，HTML 中會讓滿足你的

標簽< colgroup >用于對表格中的列進行組合，以便對其進行格式化(注意是列)；
通過< colgroup >可以對表格進行屬性定義，從而實作美觀
可以通過結合CSS可以調節更多屬性；
具體樣例為：

<table border="1" cellpadding="10">
<caption>2020年問卷調查</caption>
<colgroup>
<col span="1" style="background-color:blue">
<col span="1" style="background-color:yellow">
<col span="1" style="background-color:red">
<tr>
 <th>性別</th>
 <th>姓</th>
 <th>名</th>
</tr>
<tr>
<th>男</th>
<th>王</th>
<th>xx</th>
</tr>
<tr>
<th>女</th>
<th>王</th>
<th>xx</th>
</tr>
</table>

樣例執行為：
在這里插入圖片描述
8. 剛才演示了背景顏色的改變，那么想必大家都很好奇，其他的能不能改變呢？比如我想讓文字顏色也進行變化，能不能做到呢？
答案當然是可以的，這樣就需要靠我們的標簽< thead > ，< tbody >，< tfoot >來實作了！

大家可以從標簽的名字中看出它們代表表格的頭（表頭），身體（主體），腳（頁腳）；
< thead >、< tbody > 和 < tfoot > 元素默認不會影響表格的布局；
代碼樣例如下：

<head>
<meta charset="utf-8">
<title>一顆小小星</title>
<style type="text/css">
thead {color:blue;}
tbody {color:red;}
tfoot {color:green;}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>班級</th>
<th>人數</th>
</tr>
<thead>
<tfoot>
<tr>
<th>總人數</th>
<th>5</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>一班</td>
<td>2</td>
</tr>
<tr>
<td>二班</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>

樣例演示為：
在這里插入圖片描述

上述標簽只能定義表頭，主體，頁腳的屬性，但是結合CSS的話就可以對對應的單元格進行屬性限定，
學習CSS

2.html的串列

HTML支持有序，無序以及自定義序列；
有序串列（ordered list ) < ol >
1. xxx
2. xxxx
3. xxxxx

<ol>
<li>xxx</li>
<li>xxxx</li>
<li>xxxxx</li>
</ol>

可以通過type屬性來更換有序串列的樣式；
例：< ol type=‘a’ > 小寫字母序列；
3. 無序串列（unordered list) < ul >

<ul>
<li>x</li>
<li>xx</li>
<li>xxx</li>
</ul>

也可通過type屬性來進行調控；
4. 自定義串列（definition list ) < dl >，每個自定義串列項以< dt >開始，每個自定義串列項的開始以< dd >開始，

<h4>這是一個自定義序列</h4>
<dl>
<dt>男性</dt>
<dd>!!!強壯</dd>
<dt>女性</dt>
<dd>!!!美麗</dd>
</dl>

演示樣例為：
在這里插入圖片描述

3.html的區塊

html可以通過< dis > 和 < span >將元素組合起來；
< div >是塊級元素，塊級元素在瀏覽器中顯示的時候，通常會以新行來開始和結束；< div >是其他標簽的一個容器，是整體網頁的一部分積木；
< span >是行內元素，可作為文本的容器；
最簡單的應用為：

<html>
<body>
<h4>這是一個不加修飾的標題</h4>
<p>這是一個不加修飾的段落</p>
<div style="color:#00FF00">
<h4>這是一個經過修飾的標題</h4>
<p>這是一個經過修飾的段落</p>
</div>
<body>
<html>

具體樣例為：
在這里插入圖片描述
5. 可以通過對< span >應用樣式來達到改變樣式的目的；
簡單樣例為：

<p>電視劇里的美女都有<span style="color:blue">卡哇伊的大眼睛</span>和<span style="color:red">大長腿</span>

樣例實作為：在這里插入圖片描述

4.html的布局

有了基礎零件積木 (< div >)，那么我們就可以用我們的積木來搭建我們所希望的城堡；
下面演示一個樣例：

<!DODTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一顆小小星</title>
</head>
<body>
<div style="width:500px;text-align:center;">
<div style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">一個多彩的網頁標題</h1></div></div>
<div style="background-color:#FFD700;height:200px;width:100px;float:left;">
			<b>選單</b></br>
			xx</br>
			xxx</br>
			xxxx</div>
<div style="background-color:#EEEEEE;height:200px;width:400px;float:left;">內容在這啊</div>		
	
<div style="background-color:#FFA500;clear:both;text-align:center;">
一顆小小星</div>

樣例結果為：
在這里插入圖片描述
使用< div >插入各種屬性，就可以進行操作，使頁面變得更美觀；

5.html的表單

我們創造網頁，是供用戶使用的，那么如果用戶想要輸入資料那么應該怎么辦呢？

表單需要使用表單標簽< form > ，以及輸入標簽< input > ;
加以型別屬性 type 來設定，例如：

< input type=“text” >(文本域）
< input type=“password” > (密碼欄位）
< input type=“radio” > (單選按鈕）
< input type=“checkbox” >(復選框）
< input type=“submit” >(提交按鈕）

文本域樣例：

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密碼樣例：

<form>
Password: <input type="password" name="mimi">
</form>

單選選項樣例：

<form>
<input type="radio" name="1" value="男">男<br>
<input type="radio" name="1" value="女">女
</form>

多選選項樣例：

<form>
<input type="checkbox" name="1" value="1">你身體苗條</br>
<input type="checkbox" name="1" value="2">你身高180
</form>

提交按鈕選項樣例：

<form>
<input type="sumbit"  value="提交">
</form>

6.html的字符物體

HTML 中的預留字符必須被替換為字符物體，一些在鍵盤上找不到的字符也可以使用字符物體來替換；

在HTML中某些字符是不能使用的，例如：<(小于號），>(大于號），因為瀏覽器會誤認為標簽，
那么如果我們必須要表示這些字符的話，那么就需要物體字符來實作了；
部分物體字符如下：

總結

上面就是我對于我HTML的學習總結，經驗淺談，希望能給大家在學習HTML的學習中提供幫助，在學習程序中，我感覺到了它的樂趣，HTML的標簽都有著自己對應的英文單詞和短語，如果去了解這些標簽，以及屬性對應的英文，那么對于HTML的學習會有很大的幫助，

感謝大家的觀看

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/226866.html

標籤：python

上一篇：C語言結構體淺見

下一篇：用Python爬取日向、櫻坂成員blog中的JPG檔案的url并將其下載到本地