什么是HTML
超文本標記語言：
-
寫網頁的腳本語言
-
超文本，只是不僅僅能夠顯示文字，更能處理照片，視頻，音頻等資料
-
相當于約定標記的XML
-
約定的跟元素
<html> -
約定的元素嵌套關系
<html><head></head></html>
-
寫網頁，使用HTML
如何使用HTML
使用文本開發工具書寫，第一個HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
Hello World!
</body>
</html>HTML 基本格式：
-
<!DOCTYPE html>約定HTML版本，這個是HTML5版本 -
HTML 的根元素必須是
<html> -
<html>的子元素有兩個-
<head>元資料，這些資料不會直接顯示到網頁上-
<meta charset="UTF-8">擁有設定頁面的編碼，UTF-8支持中文
-
-
<body>網頁正文，這個區域中的內容會顯示到瀏覽器上
-
文本
-
空白折疊：網頁正文中的空格回車等空白會在顯示時候折疊為一個 空格
-
如果希望有更多空白，請使用 不可折疊空白
-
可以使用
<br>輸出硬回車
案例：
Hello World！
HI 第一個測驗！ <br><!-- 硬回車，換行輸出 -->
Hello World！文本元素
-
標題 h1 h2 h3 h4 h5 h6 1到6號標題
-
段落 p
<h1>1 HTML</h1>
<h2>1.1 什么是HTML</h2>
<p><strong>HTML</strong>就是<em>超文本</em><small>標記</small>語言</p>
<h2>1.2 什么情況下使用HTML</h2>
<p>需要寫網頁時候就使用<strong><em>HTML</em></strong></p>塊元素 行內元素
-
在螢屏上占有一個方形區域，文字后自動插入回車
-
h1 h2 h3 h4 h5 h6 p 都是塊元素
-
-
不會單獨占有一個行，后面不會自動插入回車
-
i 斜體 em
-
b 加粗 strong
-
small 小一號
-
屬性
在標簽上可以有屬性
-
標準屬性： id class style 等，以后在CSS JS 課程中使用
-
自定義屬性，用于JavaScript腳本編程
案例：
<h2 align="center">1.2 什么情況下使用HTML</h2>HTML 表格
標簽： table tr td th
tr 表格行
td 表格資料
th 表頭
原理：
案例：
<table border="1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>表格列合并
在td/th元素上使用 colspan屬性可以設定列合并功能：
原理：
案例：
<table border="1">
<tr>
<th colspan="2">日期</th> <th>數量</th> <th>價格</th>
</tr>
<tr>
<td>7</td> <td>1</td> <td>3</td> <td>1.5</td>
</tr>
<tr>
<td>7</td> <td>1</td> <td>3</td> <td>1.5</td>
</tr>
<tr>
<td>7</td> <td>1</td> <td>3</td> <td>1.5</td>
</tr>
<tr>
<td colspan="2">合計</td> <td>9</td> <td>4.5</td>
</tr>
</table>行合并
原理：
案例：
<table border="1">
<tr>
<th rowspan="2">姓名</th> <th colspan="3">課程</th>
</tr>
<tr>
<td>語文</td> <td>數學</td> <td>科學</td>
</tr>
<tr>
<td>李四</td> <td>100</td> <td>20</td> <td>5</td>
</tr>
<tr>
<td王五</td> <td>100</td> <td>20</td> <td>5</td>
</tr>
<tr>
<td>馬六</td> <td>100</td> <td>20</td> <td>5</td>
</tr>
</table>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/299997.html
標籤：其他