初學HTML

什麼是HTML

HTML 是用來描述網頁的一種語言。
HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述

HTML 實例

<!DOCTYPE html>       #聲明文檔類型，
<html lang="en">      #是所有標籤的容器，lang表示語言，表示整個文檔的內容以什麼語言爲主  
<head>                 #頁面結構的頭部，包含輔助顯示的標籤
    <meta charset="UTF-8"> 
    <title>Title</title>     #頁面的標題，在標題欄顯示的內容
</head>
<body>                      頁面結構的主體，包含在頁面中顯示的標籤

</body>
</html>
<!DOCTYPE>:設置當前文檔使用的標準，建議使用HTML5的類型，
HTML標籤：用於包裹頁面上所有的其他標籤
head標籤：用於存放title，meta，base，style，script，link標籤，這些標籤都是用來輔助顯示的標籤，每個head標籤必須有一個title標籤
body標籤：用於存放所有的頁面上的結構標籤
title標籤：用於設置頁面的標題、同時提高SEO的權重
meta標籤：設置頁面上的字符集（編碼格式），utf-8,gb2312
<!--註釋內容-->:HTML註釋，給代碼添加的代碼說明性的文字，或者使一些沒有必要去掉它的作用
語義化：是指用合理HTML標籤以及特有的屬性去格式化文檔內容

HTML 標籤

1.HTML 標題

HTML 標題是通過 <h1> - <h6> 等標籤進行定義的。

實例

<h1>這是一個標題</h1>
<h2>這是一個標題</h2>
<h3>這是一個標題</h3>

親自試一試

2.HTML 段落

HTML 段落是通過 <p> 標籤進行定義的。
實例

<p>這是一個段落。</p>
<p>這是另外一個段落。</p>

親自試一試

3.HTML 鏈接

HTML 鏈接是通過標籤<a> 來定義的。

<a href="https://www.baidu.com/">這是一個鏈接</a>

提示: 在 href 屬性中指定鏈接的地址。

<!--a標籤的跨頁面進行定位-->
	 <a  id="zjm" href="11.html#iii" target="_blank"><h1>......</h1></a>
    <!--href=目標頁面的路徑,a標籤中一定要有內容,target屬性設置的是，a標籤的跳轉方式，
   默認值爲_self，不保留當前頁面，跳轉；_blank，保留當前頁面，打開一個新的窗口進行跳轉-->
   
    <a href="#zjm">點我</a>
上面的a標籤的id爲zjm，如果我點擊‘點我’，頁面會定位到上面的a標籤，

親自試一試

4.HTML 圖像

HTML 圖像是通過 <img> 標籤進行定義的。
實例

<img src="圖片地址.jpg" alt="這是圖片" title="某某圖片" width="700" height="700" />
 <!--src=圖片的路徑，alt=圖片的描述，在圖片加載失敗後顯示，
    title=圖片描述，在鼠標懸停在圖片上時會顯示-->
通過width，height來設置寬和高，，若只設定一個，會自動等比例縮放，src的路徑又分爲兩種：網頁上的一個圖片路徑和本地的一個圖片路徑

還可以複製網頁圖片的地址

<img src="https://www.baidu.com/img/pc_2e4ef5c71eaa9e3a3ed7fa3a388ec733.png" />

親自試一試

5.HTML 其他

<br>  #換行
<!--水平線--><hr> #就是單獨個一個水平線

親自試一試

HTML特殊字符

&nbsp;    #空格            &deg;   		#°    
&gt;      #>               &plusmn; 	#±   
&lt;      #<               &divide;	 	#÷   
&amp;     #&               &times; 		#乘號  
&yen;     #¥               &sup2; 		#²平方    
&copy;    #版權標識©       &sup3; 		#³立方     
&reg;     #註冊

親自試一試

HTML列表

<ul type="">      #無序列表，type裏面可以給參數，circle，square，，，，代表每行前面的圖形
        <!--unorder list，有ul標籤，就必須有li標籤，而且只能有li標籤-->
        <li>蘋果</li>
        <li>香蕉</li>
        <li><h1>西瓜</h1></li>
    </ul>
    <hr>
    <ol type="" start="">         #有序列表，type的參數有1，a，A，i，I，代表以那種數字來排序
        <!--order list-->
        <li>一等獎</li>
        <li>二等獎</li>
        <li>三等獎</li>
    </ol>
    <hr>
    <dl>
        <!--definition list-->       #自定義列表，存在明顯的從屬關係
        <dt>手機品牌</dt>
        <dd>蘋果</dd>
        <dd>三星</dd>
        <dd>小米</dd>
        <dt>電腦品牌</dt>
        <dd>蘋果</dd>
        <dd>三星</dd>
        <dd>小米</dd>
    </dl>

效果圖：

親自試一試

HTML表格

		border 表格邊框的寬度
        width 表格的高度
        height 表格的高度
        cellspacing 邊框之間的間歇
        cellpadding 表格中的單元格中的內容跟邊框的距離
        align 水平位置，left center right

<table border="1" width="500" height="300" cellpadding="10" cellspacing="2" align="center">
        <caption><h1>帥哥排行</h1></caption>
        <thead>
            <tr>
                <th>序號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tfoot>
            <tr align="center">
                <td >總結</td>
                <td colspan="3"></td>
                <!--rowspan='2'  表示獨佔列的2個單元格
                colspan = '2' 表示獨佔行的2個單元格-->
            </tr>
        </tfoot>
        <tbody>
             <tr align="center">
            <td>1</td>
            <td >彭于晏</td>
            <td>男</td>
            <td>49</td>
        </tr>
        <tr align="center">
            <td>2</td>
            <td>劉德華</td>
            <td>男</td>
            <td>55</td>
        </tr>
        <tr align="center">
            <td>3</td>
            <td>周杰倫</td>
            <td>男</td>
            <td>45</td>
        </tr>
        </tbody>
<!--table 表格
    tr 行
    td 行內的單元格
    th 表頭
    caption 表的標題
    thead 容納表的表頭
    tbody 容納表的主體內容
    tfoot 容納表的尾巴，一般不出現-->
    </table>

效果圖

親自試一試

HTML表單

表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、複選框(checkboxes)等等。

1.<form> 元素

HTML 表單用於收集用戶輸入。<form> 元素定義 HTML 表單：

<form>
.
input 元素
.
</form>

HTML 表單包含表單元素。
表單元素指的是不同類型的 input 元素、複選框、單選按鈕、提交按鈕等等。

2.<input> 元素

<input> 元素是最重要的表單元素。
<input> 元素有很多形態，根據不同的 type 屬性。

類型	描述
text	定義常規文本輸入。
radio	定義單選按鈕輸入（選擇多個選擇之一）
submit	定義提交按鈕（提交表單）

文本輸入

多數情況下被用到的表單標籤是輸入標籤（<input>）。
輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下：

文本域

文本域通過<input type=“text”> 標籤來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。

<form>

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

注意:表單本身並不可見。同時，在大多數瀏覽器中，文本域的默認寬度是 20 個字符。
親自試一試

密碼字段

密碼字段通過標籤<input type=“password”> 來定義:

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

注意:密碼字段字符不會明文顯示，而是以星號或圓點替代。
親自試一試

單選按鈕輸入

<input type=“radio”> 定義單選按鈕。
單選按鈕允許用戶在有限數量的選項中選擇其中之一：
實例

<form>
	<input type="radio" name="sex" value="male">選項一
	<br>
	<input type="radio" name="sex" value="female">選項二
</form>

親自試一試

複選框

<input type=“checkbox”> 定義了複選框. 用戶需要從若干給定的選擇中選取一個或若干選項。

<form>
	<input type="checkbox" name="vehicle" value="Bike">選項一
	<br>
	<input type="checkbox" name="vehicle" value="Car">選項二
</form>

親自試一試

提交按鈕

<input type=“submit”> 定義了提交按鈕.
當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。:

<form name="input" action="html_form_action.php" method="get">
	Username: <input type="text" name="user">
	<input type="submit" value="Submit">
</form>

親自試一試

文件框:

定義文件選擇字段和 “瀏覽…” 按鈕，供文件上傳：

<input type="file"> <br>

親自試一試

下拉框

	<select id='checkedLevel' style="width:120px;height:28px;" >
　　　　<option value="1">選項1</option>
　　　　<option value="2">選項1</option>
　　　　<option value="3">選項1</option>
　　　　<option value="4">選項1</option>
　　　　<option value="5">選項1</option>
　　　　<option value="6">選項1</option>
　　　　<option value="7">選項1</option>                                                                                                                                                           
　　</select>

親自試一試

多行文本

單行文本框只能夠輸入一行內容，textarea多行文本框可以輸入多行文本。
多行文本框用textarea標籤創建，而不是input標籤。
通常用於需要輸入較多內容的需求。

<textarea rows="5" cols="20"  maxlength="10" name="message">
	多行文本框的內容多行文本框的內容多行文本框的內容多行文本框的內容多行文本框的內容多	行文本框的內容多行文本框的內容
</textarea>

上面代碼演示了簡單多行文本框的應用。

特別說明：name屬性是必須的，否則後臺無法接收提交的表單數據。

單行文本框還有其他屬性，下面分別做一下介紹：

（1）.rows：規定多行文本框的行數。

（2）.cols：規定多行文本框的列數。

（3）.disabled：規定多行文本域是否可用。

（3）.form（HTML5）：規定多行文本域所屬的一個或多個表單。

（4）.maxlength：規定文本域可以輸入的最大字符數。

（5）.placeholder（HTML5）：提供一種提示，描述所期待的值。

（6）.readonly：設置文本域爲只讀。

（7）.required（HTML5）：規定文本域內容是必填的。

（8）.autofocus（HTML5）：規定文本域在頁面加載後自動獲取焦點。

（9）.wrap:（HTML5）：規定當在表單中提交時，文本區域中的文本如何換行。

特別說明：此文本框不能夠使用value屬性規定它的初始值。
https://www.softwhy.com/article-537-1.html

親自試一試

按鈕

<form>
	<input type= "button"  value="普通按鈕">
	<input type= "reset" value="重置按鈕"><!--用於還原用戶的輸入--> 
	<input type= "submit" value= "提交按鈕"><!--點擊該按鈕，將會跳轉到form的action 中的頁面-->
</form>

親自試一試

HTML <button> 標籤(按鈕)

實例
以下代碼標記了一個按鈕：

<button type="button">按鈕</button>

<button>標籤的屬性

autofocus：按鈕獲得焦點，值爲：autofocus；
disabled：禁用該按鈕，值爲：disabled；
form：關聯一個或多個表單，值爲：表單的id屬性值；
formaction：提交表單時向何處發送表單數據，將覆蓋form標籤中的action屬性，需與 - type=“submit” 配合使用，值爲：地址；
formenctype：向服務器發送表單數據之前如何對其進行編碼，將覆蓋form表單中的enctype屬性，需與type="submit"配合使用，只可以是：multipart/form-data、text/plain等；
formmethod：用於發送表單數據的HTTP方法，將覆蓋form標籤中的method屬性，需與type="submit"配合使用，值可以是：get、post；
formnovalidate：規定提交表單時不進行驗證，將覆蓋form標籤中的novalidate屬性，需與type="submit"配合使用，值爲：formnovalidate；
formtarget：規定在何處打開目標，將覆蓋form標籤中的target屬性，需與type="submit"配合使用，值可以爲：_blank、_self、_parent、_top、framename；
name：按鈕的名稱，值爲：自定義；
type：按鈕的類型，只可以是：button、reset、submit；
value：按鈕的初始值，值爲：自定義；
四、實例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>html中
	<button>
		按鈕標籤詳細介紹
	</title>
</head>
<body bgcolor="burlywood">
	<button type="button">
		普通按鈕
	</button><br><br>
	<button type="submit">
		提交按鈕
	</button><br><br>
	<button type="reset">
		重置按鈕
	</button>
</body>
</html>

初學HTML（學習筆記）

初學HTML

文章目錄

什麼是HTML

HTML 實例

HTML 標籤

1.HTML 標題

2.HTML 段落

3.HTML 鏈接

4.HTML 圖像

5.HTML 其他

HTML特殊字符

HTML列表

HTML表格

HTML表單

1.<form> 元素

2.<input> 元素

文本輸入

文本域

密碼字段

單選按鈕輸入

複選框

提交按鈕

文件框:

下拉框

多行文本

按鈕

HTML <button> 標籤(按鈕)

Java實現讀取txt文件數據並導入數據庫

Python打包exe，以及解決閃退

Java JDBC通用操作基類（MySQL）數據庫

雲數據庫，服務器數據庫如何配置MySQL遠程連接？

初學JavaScript（學習筆記）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結