HTML--HTML入門篇(我想10分鐘入門HTML,可以,交給我吧)

我要正經的講一節課,咳咳!

在這裏插入圖片描述

HTML簡介(廢話)

        HTML稱爲超文本標記語言,是一種標識性的語言。它包括一系列標籤.通過這些標籤可以將網絡上的文檔格式統一,使分散的Internet資源連接爲一個邏輯整體。HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字,圖形、動畫、聲音、表格、鏈接等。

        超文本是一種組織信息的方式,它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中,也可能是其他文件,或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分佈在不同位置的信息資源用隨機方式進行連接,爲人們查找,檢索信息提供方便。

HTML書寫規範(HTML最小集)

以下最小的HTML最小集就是說,一個符合規則的HTML文件最小是這樣子的

<html> 				表示整個html 頁面的開始
	<head> 			頭信息
		<title>		標題</title> 標題
	</head>
	<body> 			body 是頁面的主體內容
					頁面主體內容
	</body>
</html> 			表示整個html 頁面的結束
<!-- 我是HTML註釋-->

HTML標籤

1.標籤的格式:

<標籤名>封裝的數據</標籤名>

2.標籤名大小寫不敏感。
3.標籤擁有自己的屬性。

  • 分爲基本屬性:bgcolor=“red” 可以修改簡單的樣式效果
  • 事件屬性: οnclick=“alert(‘你好!’);” 可以直接設置事件響應後的代碼。

4.標籤又分爲,單標籤和雙標籤。

  • 單標籤格式: <標籤名/> </br> 換行</hr> 水平線
  • 雙標籤格式: <標籤名> …封裝的數據…</標籤名>

5標籤的語法:

  • 雙標籤一定要結束
  • 標籤不能交叉嵌套
  • 屬性必須有值,屬性值必須加引號
  • 註釋不能嵌套

HTML常用標籤

知道常用的就行,一般在開發過程中,都是查閱需要的標籤。這點應付考試和入門絕對夠用!

1.HTML標題標籤:

標題(Heading)是通過 <h1> - <h6> 等標籤進行定義的。
<h1> 定義最大的標題。<h6> 定義最小的標題。

align: 屬性是對齊屬性

  • left: 左對齊(默認)
  • center: 劇中
  • right: 右對齊

標題1

標題2

標題3

標題4

標題5
標題6
標題7

這是以上內容的代碼

<h1 align="left">標題1</h1>
<h2 align="center">標題2</h2>
<h3 align="right">標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
<h7>標題7</h7>
2.HTML 段落標籤
段落是通過 <p> 標籤定義的。

我是第一段

我是第二段

很明顯,你看到了單獨兩段內容,我們給出源代碼
<p>我是第一段</p>
<p>我是第二段</p>
3.HTML font 字體標籤

font 標籤是字體標籤,它可以用來修改文本的字體,顏色,大小(尺寸)

  • color 屬性修改顏色
  • face 屬性修改字體
  • size 屬性修改文本大小

我是紅色黑體七號字

<font color="red" face="黑體" size="7">我是紅色黑體七號字</font>

其中還有別的屬性,就不推薦大家學了,因爲都淘汰了,還是使用CSS更佳。

4.HTML 超鏈接(鏈接)標籤

超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
<a>標籤是超鏈接</a>

  • href 屬性設置連接的地址
  • target 屬性設置哪個目標進行跳轉
  • _self 表示當前頁面(默認值)
  • _blank 表示打開新頁面來進行跳轉

你可以先點擊以下標籤感受一下,我下文將會給出介紹。
百度

百度直接跳轉

百度新標籤跳轉

如果你沒感受出有什麼差別,那麼一定是你的瀏覽器設置的原因,我們還是給出原代碼。

 <a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com" target="_self">百度直接跳轉</a><br/>
<a href="http://www.baidu.com" target="_blank">百度新標籤跳轉</a><br/>

5. HTML列表標籤

HTML 支持有序、無序和定義列表,常用的爲前兩者。
1. 無序列表
<ul type=" xxx"> 是無序列表
- type 屬性可以修改列表項前面的符號
- li 是列表項

比如:	
  • 趙四
  • 劉能
  • 小瀋陽
  • 宋小寶
	<ul type="none">
	<li>趙四</li>
	<li>劉能</li>
	<li>小瀋陽</li>
	<li>宋小寶</li>
	</ul>

2. 有序列表

  1. Coffee
  2. Milk
  3. Tea
<ol>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ol>

3. 定義列表
這個真沒用過,我偷個懶不講了。
在這裏插入圖片描述

6.HTML 圖像標籤

<img />標籤可以在html 頁面上顯示圖片。

  • img 標籤是圖片標籤,用來顯示圖片
  • src 屬性可以設置圖片的路徑 <img src="url" />
  • width 屬性設置圖片的寬度
  • height 屬性設置圖片的高度
  • border 屬性設置圖片邊框大小
  • alt 屬性設置當指定路徑找不到圖片時,用來代替顯示的文本內容<img src="boat.gif" alt="Big Boat">
    Big Boat
我故意放錯的

源代碼:

<img
src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1238718249,2298049977&fm=26&gp=0.jpg" 
alt="Big Boat "
width="200" 
height="200"
border="2" <!-- 可能你看不到邊框 -->
/>
 
<img  src=" 0.jpg  " alt="我故意放錯的">

這裏我們簡單講一下Web中的路徑問題:

在web 中路徑分爲相對路徑和絕對路徑兩種

  • 相對路徑:
    . 表示當前文件所在的目錄
    .. 表示當前文件所在的上一級目錄
    文件名錶示當前文件所在目錄的文件,相當於./文件名./ 可以省略
  • 絕對路徑:
    正確格式是: http://ip:port/工程名/資源路徑
7.HTML表格標籤

表格由 <table> 標籤來定義。每個表格均有若干行(由 <tr> 標籤定義),每行被分割爲若干單元格(由 <td> 標籤定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

  • border 設置表格標籤
  • width 設置表格寬度
  • height 設置表格高度
  • align 設置表格相對於頁面的對齊方式
  • cellspacing 設置單元格間距
  • tr 是行標籤
  • th 是表頭標籤
  • td 是單元格標籤
  • align 設置單元格文本對齊方式
  • b 是加粗標籤
  • colspan 屬性設置跨列
  • rowspan 屬性設置跨行
1.1 1.3 1.4 1.5
2.1 2.2 2.3 2.4 2.5
3.1 3.2 3.3 3.4
4.1 4.2 4.3 4.4

可能不是很清楚,因爲markdown不能完全兼容HTM的代碼,將就一下,下面是源碼。

<table width="500" height="500" cellspacing="1" border="2">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td colspan="2" rowspan="2">3.4</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td>4.4</td>
</tr>
</table>
8.常用的特殊字符集

一定是常用的,因爲太多了,如果全寫出了,那得好幾個篇幅了,我知道你們不愛看,我就跳過了!
在這裏插入圖片描述

結果 描述 實體名稱 實體編號
空格 &nbsp; &#160;
" 引號 &quot; &#34;
' 撇號  &apos; &#39;
& 和號 &amp; &#38;
< 小於號 &lt; &#60;
> 大於號 &gt; &#62;

剩下的自己去查就完事,這時候有小夥伴要問了,換行換行!<br>我的錯,我忘記說換行標籤了,我錯了!

9.iframe 框架標籤(內嵌窗口)

我倒是挺想寫個窗口給大家演示的,但是mark down不允許!可惜!
在這裏插入圖片描述

<body>
<!--ifarme 標籤可以在頁面上開闢一個小區域顯示一個單獨的頁面
ifarme 和a 標籤組合使用的步驟:
1 在iframe 標籤中使用name 屬性定義一個名稱
2 在a 標籤的target 屬性上設置iframe 的name 的屬性值
-->
<iframe src="https://me.csdn.net/blog/weixin_43627118" width="500" height="400" name="mubiao"></iframe>
<br/>
<ul>
<li><a href="https://blog.csdn.net/weixin_43627118" target="mubiao">他的博文</a></li>
<li><a href="https://blog.csdn.net/weixin_43627118/category_9800870.html" target="mubiao">JAVA專欄</a></li>
<li><a href="https://blog.csdn.net/weixin_43627118/category_9800862.html" target="mubiao"> 數據庫專欄</a></li>
</ul>
</body>
 

可以把代碼粘貼到記事本後改擴展名爲HTML然後試一下,體驗體驗。
效果大概是這樣的
在這裏插入圖片描述
在這裏插入圖片描述

10表單標籤

表單就是html 頁面中,用來收集用戶信息的所有元素集合.然後把這些信息發送給服務器.

<form> 標籤就是表單

  • input type=text 是文件輸入框value 設置默認顯示內容
  • input type=password 是密碼輸入框value 設置默認顯示內容
  • input type=radio 是單選框name 屬性可以對其進行分組checked="checked"表示默認選中
  • input type=checkbox 是複選框checked="checked"表示默認選中
  • input type=reset 是重置按鈕value 屬性修改按鈕上的文本
  • input type=submit 是提交按鈕value 屬性修改按鈕上的文本
  • input type=button 是按鈕value 屬性修改按鈕上的文本
  • input type=file 是文件上傳域
  • input type=hidden 是隱藏域當我們要發送某些信息,而這些信息,不需要用戶參與,就可以使用隱藏域(提交的時候同時發送給服務器)
  • select 標籤是下拉列表框
    • option 標籤是下拉列表框中的選項selected="selected"設置默認選中
    • textarea 表示多行文本輸入框(起始標籤和結束標籤中的內容是默認值)
    • rows 屬性設置可以顯示幾行的高度
    • cols 屬性設置每行可以顯示幾個字符寬度

給出一個樣例:
在這裏插入圖片描述
同樣的,可粘貼後自己運行體驗一下啊!

<form>
<h1 align="center">用戶註冊</h1>
<table align="center">
<tr>
<td> 用戶名稱:</td>
<td>
<input type="text" value="默認值"/>
</td>
</tr>
<tr>
<td> 用戶密碼:</td>
<td><input type="password" value="abc"/></td>
</tr>
<tr>
<td>確認密碼:</td>
<td><input type="password" value="abc"/></td>
</tr>
<tr>
<td>性別:</td>
<td>
<input type="radio" name="sex"/>男
<input type="radio" name="sex" checked="checked" />女
</td>
</tr>
<tr>
<td> 興趣愛好:</td>
<td>
<input type="checkbox" checked="checked" />rap
<input type="checkbox" />唱
<input type="checkbox" />跳
<input type="checkbox" />籃球
</td>
</tr>
<tr>
<td>國籍:</td>
<td>
<select>
<option>--請選擇國籍--</option>
<option selected="selected">中國</option>
<option>美國</option>
<option>小日本</option>
</select>
</td>
</tr>
<tr>
<td>自我評價:</td>
<td><textarea rows="10" cols="20">請在此區域書寫</textarea></td>
</tr>
<tr>
<td><input type="reset" /></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
</body>

表單提交細節:

<form >標籤是表單標籤
action 屬性設置提交的服務器地址
method 屬性設置提交的方式GET(默認值)或POST
accept-charset 規定在被提交表單中使用的字符集(默認:頁面字符集)。
autocomplete 規定瀏覽器應該自動完成表單(默認:開啓)。
enctype 規定被提交數據的編碼(默認:url-encoded)。
name 規定識別表單的名稱(對於 DOM 使用:document.forms.name)。
novalidate 規定瀏覽器不驗證表單。
target 規定 action 屬性中地址的目標(默認:_self)。

表單提交的時候,數據沒有發送給服務器的三種情況:
1、表單項沒有name 屬性值
2、單選、複選(下拉列表中的option 標籤)都需要添加value 屬性,以便發送給服務器
3、表單項不在提交的form 標籤中
GET 請求的特點是:
1、瀏覽器地址欄中的地址是:action 屬性[+?+請求參數]
請求參數的格式是:name=value&name=value
2、不安全
3、它有數據長度的限制
POST 請求的特點是:
1、瀏覽器地址欄中只有action 屬性值
2、相對於GET 請求要安全
3、理論上沒有數據長度的限制

何時使用 GET?何時使用 POST?
您能夠使用 GET(默認方法):
如果表單提交是被動的(比如搜索引擎查詢),並且沒有敏感信息。

您應該使用 POST:
如果表單正在更新數據,或者包含敏感信息(例如密碼)。
POST 的安全性更加,因爲在頁面地址欄中被提交的數據是不可見的。

剛纔的代碼是不能正常提交,下面的代碼經過修改時可以提交的,仔細觀察一下有什麼區別。

<form action="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login" />
<h1 align="center">用戶註冊</h1>
<table align="center">
<tr>
<td> 用戶名稱:</td>
<td>
<input type="text" name="username" value="默認值"/>
</td>
</tr>
<tr>
<td> 用戶密碼:</td>
<td><input type="password" name="password" value="abc"/></td>
</tr>
<tr>
<td>性別:</td>
<td>
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" checked="checked" value="girl" />女
</td>
</tr>
<tr>
<td> 興趣愛好:</td>
<td>
<input name="hobby" type="checkbox" checked="checked" value="java"/>唱
<input name="hobby" type="checkbox" value="js"/>跳
<input name="hobby" type="checkbox" value="cpp"/>rap
<input name="hobby" type="checkbox" value="cpp"/>籃球
</td>
</tr>
<tr>
<td>國籍:</td>
<td>
<select name="country">
<option value="none">--請選擇國籍--</option>
<option value="cn" selected="selected">中國</option>
<option value="usa">美國</option>
<option value="jp">小日本</option>
</select>
</td>
</tr>
<tr>
<td>自我評價:</td>
<td><textarea name="desc" rows="10" cols="20">我纔是默認值</textarea></td>
</tr>
<tr>
<td><input type="reset" /></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
</body>
11.其他標籤
標籤默認獨佔一行 span 標籤它的長度是封裝數據的長度 p 段落標籤默認會在段落的上方或下方各空出一行來(如果已有就不再空)

看下邊:

div 標籤1
div 標籤2
span 標籤1 span 標籤2

p 段落標籤1

p 段落標籤2

你看這個像什麼!
░░░░░░░░░░░▄▄
░░░░░░░░░░░█░█
░░░░░░░░░░░█░█
░░░░░░░░░░█░░█
░░░░░░░░░█░░░█
███████▄▄█░░░██████▄
▓▓▓▓▓▓█░░░░░░░░░░░░█
▓▓▓▓▓▓█░░░░░░░░░░░░█
▓▓▓▓▓▓█░░░░░░░░░░░░█
▓▓▓▓▓▓██████████████

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章