HTML
HTML簡單介紹css
一、html簡介html
HTML （ Hyper Text Markup Language ）是一種超文本標記語言，是用來對網頁文檔信息進行格式化展現的一門語言。描述瀏覽器所需的信息，而主體則包括頭部（head）和主體（body）兩大部分。簡而言之：HTML是一種專門對網頁信息進行規範化展現的語言。html後綴：.html or .htm 可經過瀏覽器直接運行(推薦Google、火狐)sql
HTML語言被稱爲互聯網的三大基石之一
三大基石簡介：
HTTP協議：解決了服務器和瀏覽器之間數據如何傳送、傳送格式的問題！實現了分佈式的信息共享。
URL統一資源定位符：解決了衆多服務器中資源定位問題。從而讓瀏覽器能夠訪問不一樣的服務器資源，實現了全球信息的精肯定位。
HTML語言：解決了數據在瀏覽器中如何豐富多彩的展現，及如何合理標示信息的問題。
HTML規範
1：一個html文件有開始標籤和結束標籤<html>標籤對</html>
2：html包含兩部分
(1)<head>設置相關信息</head>
(2)<body>主體，用於顯示內容</body>
(3)標籤成對出現
(4)不區分大小寫
(5)有些標籤不須要結束標籤 <br/>換行 <hr/>一條橫線瀏覽器
二、html中經常使用標籤
文字標籤和註釋標籤
文字標籤:修改文字的樣式：-<font></font>
屬性：
-size:文字的大小 取值範圍1-7
-color:文字的顏色(表示方式:英文單詞，十六進制數#ffff)
- 經過取色工具去獲取相關顏色
註釋標籤： -html註釋 <!--註釋內容--> 安全
三、標題標籤、水平線標籤和特殊字符
標題標籤
-<h1></h1> 1-6級標題標籤 依次變小,自動換行
水平線標籤：-<hr/>
屬性：
size:水平線粗細 取值範圍 1-7
color:顏色
-代碼：<hr size="5" color="blue"/>
特殊字符
- 在網頁上顯示這樣的內容 <html>:網頁的開始
- 這是就須要特殊字符進行轉義： < < > > 空格: & ： &服務器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!-- meta：頭標籤 charset：編碼格式--> 5 <meta charset="utf-8" /> 6 <!-- 標題標籤內容會顯示在瀏覽器的頭標裏--> 7 <title>標題標籤、水平線標籤和特殊字符</title> 8 9 <!--作搜索引擎優化的三個標籤--> 10 <meta name="author" content="遊戲解說柚子" /> 11 <meta name="keywords" content="girl,CF"/> 12 <meta name="description" content="遊戲解說主播"/> 13 </head> 14 <body> 15 16 <!--被註釋的內容--> 17 <h1>標題一</h1> 18 <h2>標題二</h2> 19 <h3>標題三</h3> 20 <h6>標題六</h6> 21 <!--演示水平線--> 22 <hr size="3" color="blue"/> 23 <!--演示特殊字符--> 24 <html>:是網頁的 開始 25 </body> 26 </html>
四、列表標籤
- 顯示效果
信息工程學院
軟件工程
計算機科學與技術
網絡工程
<dl> </dl>:表示列表的範圍
在dl裏面 <dt> </dt>：上層內容
在dl裏面 <dd> </dd>：下層內容網絡
<table> <dl>信息工程學院 <dd>軟件工程</dd> <dd>網絡工程</dd> </dl> </table>
有序列表：
<ol> </ol>:有序列表的範圍
- 屬性 type: 設置排序方式1(默認) a、 i
在ol標籤裏面<li>具體內容</li>框架
無序列表
<ul></ul>:無序列表的範圍
- 屬性:type:空心圓circle、實心圓disc、實心方塊square、默認disc
在ul裏面<li>具體內容</li>分佈式
<!--有序列表--> <ol type="1"> <li>HTML</li> <li>CSS</li> <li>JS</li> </ol> <!--無序列表--> <ul type="square"> <li>Java</li> <li>JavaScript</li> <li>Python</li> </ul>
五、圖像標籤
<img src="img路徑 /">
-src:圖片的路徑
-屬性:width、height
-border:設置圖片的邊框
-alt:圖片的描述信息，當圖片加載失敗的時候會顯示alt中的內容
-title：當鼠標滑動到圖片上顯示的文本ide
<img src="img/5ba9901fa5.jpg"/ title="迪麗熱巴" alt="迪麗熱巴"><br /><hr /> <img src="img/5ba9948101fa5.jpg"/ border="12" width="500px" height="400px" title="迪麗熱巴" alt="迪麗熱巴">
六、路徑的介紹
絕對路徑
- D:\JavaWeb\html_code\Img\1P216130321-1.jpg
- http://www.baidu.come.jpg
相對路徑
- 同個文件夾下讀取
七、超連接標籤
連接資源
- <a href="要連接的資源路徑"> 顯示在頁面上的內容</a>
target:設置打開的方式，默認當前頁面
-- _blank：新窗口打開
-- _self:當前頁面[默認]
- 當超連接不須要任何的地址 在href加上#
- <a href="#">超連接3</a>
定位資源
若是想要定位資源:定義一個位置
<a name="top">頂部</a>
<a href="#top">回到頂部</a>
原樣輸出:<pre> </pre>
1 <!--超連接標籤--> 2 <a name="top">頂部在這</a><br/><hr/> 3 <a href="test.html" target="_blank">超連接1</a><br/> 4 <!--href參數爲空 網頁的存儲路徑--> 5 <a href="">超連接2</a><br/> 6 <!--href參數# 沒有鏈接任何地址--> 7 <a href="#">超連接3</a><hr/> 8 9 <!-- 定位資源 --> 10 <pre> 11 不少現實的文本加載進去就看的出效果回到頂部的效果 12 </pre> 13 <a href="#top">回到頂部</a>
八、表格標籤:對數據進行格式化，使數據更加清晰
<table></table>：表示表格的範圍
- border：表格線
- bordercolor：表格線的顏色
- cellspacing：單元格的直接距離
- width：表格的寬度
- height：表格的高度
在table裏面<tr></tr>：定義行
- 設置對齊方式 align：left center right
在tr裏面<td></td>：定義單元格
- 設置顯示方式 align：left center right
th 也表示單元格：居中且加粗
合併單元格
- rowspan:跨行
- colspan:跨列
<!--表格--> <table border="1" bordercolor="blue" cellspacing="0" width="150" height="100"> <caption>武俠小說</caption> <tr align="center"> <th>姓名</th> <th>性別</th> <th>年齡</th> </tr> <tr> <td>東方不敗</td> <td>男</td> <td>20</td> </tr> <tr> <td>嶽不羣</td> <td>男</td> <td>21</td> </tr>
1 <body> 2 <!-- 單元格跨列 --> 3 <table border="1" bordercolor="red" cellspacing="0" width="200"> 4 <tr> 5 <td colspan="3" align="center">人員信息</td> 6 </tr> 7 <tr> 8 <td>黃蓉</td> 9 <td>女</td> 10 <td>18</td> 11 </tr> 12 <tr> 13 <td>迪麗熱巴</td> 14 <td>女</td> 15 <td>18</td> 16 </tr> 17 <tr> 18 <td>小龍女</td> 19 <td>女</td> 20 <td>18</td> 21 </tr> 22 </table> 23 24 <hr/> 25 <!-- 單元格跨行 --> 26 <table border="1" bordercolor="red" cellspacing="0" width="200"> 27 <tr> 28 <td colspan="3" align="center">人員信息</td> 29 </tr> 30 <tr> 31 <td>黃蓉</td> 32 <td>女</td> 33 <td rowspan="3">照片</td> 34 </tr> 35 <tr> 36 <td>迪麗熱巴</td> 37 <td>女</td> 38 39 </tr> 40 <tr> 41 <td>小龍女</td> 42 <td>女</td> 43 </tr> 44 </table> 45 </body>
九、表單標籤
<form></form>:定義一個表單的範圍
屬性
- action:提交到的地址(默認當前頁面)
- method:表單的提交方式
-經常使用的兩種方式 get和post 默認是get
get和post區別:
1，get請求地址欄會攜帶提交的數據，post不會攜帶(請求體裏面。)
2，get請求安全級別較低，post較高
3，get具備請求數據大小的限制，post沒有限制
- enctype:通常請求下不需這個屬性，文件上傳時須要這個屬性值
輸入項:可輸入內容或者選擇內容的部分
- 大部分輸入項:<input type="輸入項內容"/>
普通輸入項:<input type="text"/>
密碼輸入項:<input type="password"/>
屬性值：placeholder【H5的新特性】、name、value等值
- placeholder 屬性規定描述文本區域預期值的簡短提示。該提示會在文本區域爲空時顯示，當字段得到焦點時消失。
登陸:<input type="text" name="user" placeholder="帳戶/郵箱/手機號" /><br /> 密碼:<input type="text" name="user" placeholder="請輸入密碼" />
單選輸入項：<input type="radio"/>
- 有一個name屬性
- name屬性值必須相同
- 必須有一個value值
實現默認選中的屬性
- checked="checked"【默認選擇男性】
性別:<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女
複選輸入項:<input type="checkbox"/>
- 有一個name屬性
- name屬性值必須相同
- 必須有一個value值
實現默認選中的屬性
- checked="checked"
愛好:<input type="checkbox" name="hobby" value="ping-pong" checked="checked" />乒乓球 <input type="checkbox" name="hobby" value="basketball" />籃球 <input type="checkbox" name="hobby" value="badminton" />羽毛球
下拉輸入項：
<select name="birth">
<option value="0">請選擇</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
</select>
默認選擇屬性
-- selected="selected"
出生年月 <select name="birth"> <option value="0">請選擇</option> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> <option value="1995">1995</option> </select>
文本域
<textarea cols="20" rows="5"></textarea>
屬性： - cols寬 rows 高
隱藏項(不會顯示在頁面上，存在於html代碼裏)
<input type="hidden"/>
自我描述:<br /><textarea cols="30" rows="10" name="text" placeholder="請開始你的表演" ></textarea>
提交按鈕
<input type="submit"/> 默認
<input type="submit" value="註冊"/>
重置按鈕(回到輸入初始狀態)
<input type="reset"/>
<input type="reset"/ value="撤銷">
普通按鈕(js點擊事件用的比較多)
<input type="button" value="普通按鈕"/>
圖片提交
<input type="image" src="圖片路徑"/>
<input type="image" src="imges\bug.png"/>
文件輸入項:
<input type="file"/> 文件上傳
表單的整合小案例：
效果圖：
十、其餘經常使用標籤的使用
p:段落標籤比 br 標籤多換一行
b:加粗
s:刪除線
u:下劃線
i:斜體
pre:原樣輸出
sub:上標
sup:下標
=== css常常用===
div:自動換行
span:下一行顯示
1 <b>天之道</b> 2 <u>損有餘而補不足</u> 3 <i>是故虛勝實</i> 4 <s>不足勝有餘</s> 5 <hr /> 6 <pre> 7 開心就是笑，幸福就是開心的笑。開心就是笑，幸福就是開心的笑。開心就是笑，幸福就是開心的笑。開心就是笑，幸福就是開心的笑。 8 開心就是笑，幸福就是開心的笑。開心就是笑，幸福就是開心的笑。開心就是笑，幸福就是開心的笑。 9 開心就是笑，幸福就是開心的笑。開心就是笑，幸福就是開心的笑。開心就是笑，幸福就是開心的笑。 10 開心就是笑，幸福就是開心的笑。 11 </pre> 12 <hr /> 13 4<sup>200</sup> 14 <br /> 15 3<sub>100</sub> 16 <hr /> 17 18 <div>這是div1</div> 19 <div>這是div2</div> 20 <div>這是div3</div> 21 <hr /> 22 23 <span>這是span1</span> 24 <span>這是span2</span> 25 <span>這是span3</span> 26 <hr />
十一、html頭標籤的使用
html兩部分組成 head和body
在head裏面的標籤
title:表示在標籤上顯示的內容
<meta> 標籤:設置頁面的一些相關內容
- <meta http-equiv="refre<sh" content="3;url=01-hello.html" />
<base>:設置超連接的基本設置
- <base target="_blank" />//統一設置超連接的打開方式
link標籤:引入外部文件
- 引入css等文件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <!--<meta http-equiv="refre<sh" content="3;url=01-hello.html" />--> 6 <title>頭標籤的演示</title> 7 <base target="_blank" /> 8 </head> 9 <body> 10 <h1>頭標籤</h1> 11 <a href="01-hello.html">超連接1</a> 12 <a href="01-hello.html">超連接2</a> 13 <a href="01-hello.html">超連接3</a> 14 </body> 15 </html>
十二、框架標籤
<frameset>
- rows：按行進行劃分
-<frameset rows="80",*">
- cols：按列進行劃分
-<frameset cols="80",*">
<frame>
- 具體顯示的頁面
** <frame name="lower_left" src="b.html">
frameborder=「yes」：是否顯示框線,no不顯示框線
frame：是 frameset分隔的一部分
noresize:使用者沒法調節頁面的大小
scrolling:是否有滾動條 yes有 no沒有
注意：使用框架標籤必需要把body主體部分去掉
<!--code解析--> <frameset rows="80,*"> // 把頁面劃分上下兩部分 <frame name="top" src="top.html"> // 上面頁面 <frameset cols="150,*"> // 把下面部分劃分紅左右兩部分 <frame name="lower_left" src="b.html"> // 左面 <frame name="lower_right" src="c.html"> // 右面 </frameset> </frameset>
案例效果圖：
HTML經常使用標籤差很少就這樣了，具體參照w3school進行詳細的學習。剩下的就是多練習多操做增長熟練度。
- 1. HTML+CSS vs HTML
- 2. 【HTML】HTML概述
- 3. HTML---初識HTML
- 4. 【HTML】初識HTML
- 5. [HTML]HTML表格
- 6. 【HTML】HTML屬性
- 7. HTML vs HTML+CSS
- 8. 【html】html教程3
- 9. 【html】html教程1
- 10. html_01 | HTML——① HTML 基礎
- 更多相關文章...
- • HTML 指南 - 網站建設指南
- • W3C HTML 活動 - W3C 教程
- • 適用於PHP初學者的學習線路和建議
- • JDK13 GA發佈：5大特性解讀
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. HTML+CSS vs HTML
- 2. 【HTML】HTML概述
- 3. HTML---初識HTML
- 4. 【HTML】初識HTML
- 5. [HTML]HTML表格
- 6. 【HTML】HTML屬性
- 7. HTML vs HTML+CSS
- 8. 【html】html教程3
- 9. 【html】html教程1
- 10. html_01 | HTML——① HTML 基礎