html的學習
阿新 • • 發佈：2018-01-26
java 動畫 afa 設置顏色 ade 打開 快捷鍵 超級 邊框 html語法的學習
什麽是html
html: 超級文本標記語言(HyperText Markup Language)（不是編程語言）
- "超文本"：字面意思，比普通文本更加高級；頁面內可以包含圖片，鏈接等非文字內容。
- "標記"：使用標簽的方法將需要的內容包括起來。
html是做什麽的？
html用於編寫網頁。對網頁的內容進行排版。
- html代碼：用於展示需要展示的數據。
- CSS代碼：使顯示的數據更加好看。
- JavaScript代碼：使整個頁面顯示的數據具有動畫效果。
網頁根據內容是否改變分為：靜態頁面、動態頁面
- 靜態頁面：代碼編寫好後，在瀏覽器裏面看到的頁面內容就不再改變了。html編寫的就是靜態頁面。
- 動態頁面：在瀏覽器裏面會根據不同的情況展示不同的頁面。（例如登陸成功後顯示的用戶名，不同人登陸所顯示的用戶名是不同的）
html語言的特點
- html文件不需要編譯，可以直接通過瀏覽器閱讀。
- html文件的擴展名是.html 或者.htm
- html結構都是由標簽組成的
- 標簽名是預先定義好的，我們只需要根據需要拿來用就可以了。
- 標簽名不區分大小寫。
- 通常情況下，一組標簽是由開始標簽和結束標簽組成的。例如：<a></a>
- 有些標簽沒有結束標簽，這些標簽建議使用 / 結尾。例如：<img/>
- html結構大體分為兩類：頭head , 和 體 body
一個Html文件的模板
html5的固定格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
- <html> 是整個頁面的根標簽，理論上一個html頁面只需要一個，它裏面包含了頭<head>和體<body>這兩個標簽。
- <head>為頭標簽，用於引入腳本，導入樣式，提供元信息等，一般在瀏覽器裏面不顯示這些信息。
- <title>子標簽用於顯示瀏覽器的標題。
- <body>體標簽，是整個網頁的主體，大部分的代碼都在此標簽內。
- <head>為頭標簽，用於引入腳本，導入樣式，提供元信息等，一般在瀏覽器裏面不顯示這些信息。
html開發環境的搭建
為了更加快捷方便地編寫Html，我們安裝較為流行的前端IDE(集成開發環境) HBuilder 。
註釋的使用：
- 註釋的格式：<!--註釋內容--> 快捷鍵為：ctrl + /
常用的排版標簽
- 標題標簽： <h1>
html提供了<hn>系列的標簽，包含了：<h1> <h2> <h3> <h4> <h5> <h6> ，定義了<h1> 為最大的標題，<h6> 為最小的標題。 - 水平線標簽：<hr>
- <hr> 在html頁面中插入一條水平分割線，用於定義內容中的主題變化。
- size 屬性 ：水平線的高度，單位像素（hx）
- noshade 屬性： 沒有陰影，取值：noshade，表示顯示純色。
例如：<!--水平線的使用--> <hr /> <hr size="5" /> <hr noshade="noshade" />
- 字體標簽： <front>
- <front> 用於設置字體的尺寸，字體，顏色等。
- size 屬性：用於設置字體的大小，可能的值：從1到7的數字。瀏覽器默認是3。
- color屬性：設置字體的顏色
- 顏色的取值：#xxxxxx 或者 colorname
- #xxxxxx 表示使用紅綠藍三原色設置顏色。
- 紅綠藍分別取值範圍：00~FF ，此處使用的是16進制。
- #000000 表示黑色，#FFFFFF 白色
- 紅綠藍2為取值相同時可以省略為1位。例如：#112233可以簡化為：#123
- colorname :使用英文單詞確定顏色。red紅色，blue藍色，green綠色，等等，在IDE中有顏色提示。
例如：<!--字體--> <front size="7">字體最大</front> <front color="#FF0000">顏色為紅色</font> <front color="blue">顏色為藍色</front>
- #xxxxxx 表示使用紅綠藍三原色設置顏色。
- 顏色的取值：#xxxxxx 或者 colorname
- 格式化標簽：<b> <i>
<b> 粗體
<i> 斜體
例子：<!--格式化--> <b>粗體</b> <i>斜體</i> - 段落標簽：<p> <br/>
<p> 定義段落。p標簽會自動在文字的前後創建一些空白，形成段與段分明的效果
<br/> 插入單個換行
例子：
<!--段落-->
<p>段落1</p>
<p>段落2</p><br/>
- 圖片標簽：<img>
- <img> 在html 中引用一張圖片
- src 屬性：指定需要顯示圖片的URL路徑。(路徑可以是絕對路徑也可以是相對路徑)
- alt 屬性：圖片無法顯示時的替代文本。
- width: 設置圖片的寬度
- heigth: 設置圖片的高度
例子：
<!--顯示test.png圖片-->
<img src="../img/test.png" alt="示例圖片" width="200px" heigth:"200px" title="鼠標移上顯示的文字" />- 列表標簽：<ul> <ol>
- <ol> 定義有序列表
- type 屬性：列表的類型，取值有：A，a ，I，i，1 等
- <ul> 定義無序列表
- type屬性：符號的類型，取值：disc 實心圓，square 方塊，circle 空心圓
- 定義列表項。 是<ul>或<ol> 的子標簽
例如：
<!--列表標簽-->
<ul type="circle"> <!--以空心圓顯示無序列表-->
<li>無序列表1</li>
<li>無序列表2</li>
<li>無序列表3</li>
</ul>
<ol type="I"> <!--以阿拉伯數字顯示有序列表-->
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>顯示效果：
- 超鏈接標簽：<a>
- <a>標簽是超鏈接，是在html中提供一種可以訪問其他位置的實現方式
- href : 用於確定需要顯示頁面的路徑(URL)
- target: 確定以何種方式打開href 中的頁面。長取得值：_blank 、 _self等
- _blank 在新窗口中打開href確定的頁面。
- _self 默認。使用href 中的頁面替換當前的頁面。
例如：
<!--超鏈接-->
<a href="http://www.baidu.com" target="_blank">
訪問百度網，並在新窗口中打開鏈接
</a>效果：
9. 表格標簽：<table > <tr> <td>
html表格標簽是由<table>標簽以及一個或者多個<tr><td><th>標簽組成的
- <table> 是父標簽，相當於整個表格的容器
- border 表格邊框的寬度
- width 表格的寬度
- cellpadding 單元邊沿與其內容之間的空白
- cellspacing 單元格與單元格之間的空白
- bgcolor 表格的背景顏色
- <tr> 標簽用於定義行
- <td>標簽用於定義表格的單元格(1列)
- colspan 單元格可橫跨的列數
- rowspan 單元格可橫跨的行數
- align 單元格內容的水平對齊方式，取值：left 左，right 右，center 居中
- nowrap 單元格中的內容是否折行
- <th> 標簽用於定義表頭，單元格的內容默認居中，加粗
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格的跨行跨列操作</title>
</head>
<body>
<table border="1px" width="500px" height="200px" align="center" cellspacing="0px" cellpadding="0px">
<tr>
<td colspan="2">
<img src="../../img/hl1.jpg" height="100%" width="100%"/>
</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td colspan="2" rowspan="2">
<table border="3px" align="center" width="100%" height="100%" cellspacing="0px" cellpadding="0px">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td rowspan="2" align="center">34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</table>
</body>
</html>
效果：
html的學習