HTML介紹
一，概念
超文本標記語言（Hypertext Markup Language）
- 超文本定義：包含了圖片，文檔，鏈接，主要體現在鏈接
- 標記語言：通過定義的標記來約束數據編寫的格式和規範
- 種類：xml，html，md
- 特性/作用：數據展示，數據傳輸
dtd概念
- 文檔類型定義（Document Type Definition），用來定義標記語言的語法，制定了標記語言的語法規則。
二，HTML分類
1. html4
- Strick：不包含過時的標記（basefont，font），不能使用框架frameset。
- Transitional： 不能使用框架集（frameset）
- frameset：可以使用框架集（frameset）
2. xhtml1.1
- Strick：不包含過時的元素（basefont，font），不能使用框架frameset。文檔格式強制約束
- Transitional： 不能使用框架集（frameset），文檔格式強制約束（必須要閉包，否則就編譯不過去）
- frameset：可以使用框架集（frameset），文檔格式強制約束
3. html5：
- 不是SGML的子級
- 增加了用於減少腳本的標記（autofocus屬性），增加了很多標籤，節省了很多js的腳本的使用，只需要一個標籤就可以搞定。
- 減少了對外部設備的需求，自身提供了一些不靠外部設備的東西，比如動畫。
- 標準化，提供了強制的規範性，比如瀏覽器無需考慮兼容性的問題
4，dhtml：
- 動態的，不是一種標記語言，而是多種技術（js+css+html）的集合，微軟提出
三，html標準結構
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
</body>
</html>
四，html結構解析
1. 文檔類型標記：
- 定義：告訴瀏覽器使用哪個html版本進行編寫的指令
- 標記
- 標記說明<! 文檔類型 頂級元素 可用性 “註冊//組織//類型 標籤//
定義 語言” “dtd 文件地址”>
五，HTML文檔標記
- 頭標記
- 定義：用於腳本和css的定義和引用，以及頁面元數據信息的定義
- 標記：<hea/d></hea/d>（去掉中間的/，這裏爲了能顯示才寫的）
- 頁面元數據：頁面關鍵字，頁面文檔類型字符集等等
六：html元數據標記
- 元數據標記：用於頁面關鍵字，頁面文檔類型字符集，刷新等信息的定義
- 標記：
<head>
<title>html練習</title>
<!-- 頁面關鍵字：keywords裏面的關鍵字對seo影響較大，影響它在搜索引擎的排名-->
<meta name="keywords" content="kola 可樂">
<!-- 設置內容類型-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- 重定向，設置2s跳轉到百度-->
<meta http-equiv="Refresh" content="2;https://www.baidu.com">
<!-- 緩存控制，max-age：緩存的內容將在xx秒後失效, 這個選項只在HTTP 1.1可用-->
<meta http-equiv="Cache-Control" content="max-age=10">
</head>
七：html格式/排版標記
- <br> 換行符
- <hr> 水平線
- <pre> 預格式標記，按編寫格式展示
<body>
<!--br:換行符-->
大家好<br>
我是可樂！
<!--水平線標記-->
<hr>
<!--上面這種寫法只能保證換行，但是無法保證前面的空格之類的顯示正確，所以有了預編譯標籤,代碼什麼格式就展示什麼格式-->
<pre>
大家好
我是可樂！
</pre>
八：html字體標記（去掉中間的/，這裏爲了能顯示才寫的）
- <del> 添加刪除線標記
- <b> 粗體文本標記
- <strong> 強調文本標記（和b標籤實現的效果是一樣的，目前w3c推薦使用這個）
- <sup> 定義上標文本
- <sub> 定義下表文本
- <small> 文本縮細標記
- <big> 文本放大標記
- <H?> 標題標記
- <I> 斜體文本標記
<del>del標籤：刪除</del>
<br>
<b>b標籤：放大</b>
<br>
<strong>strong標籤：強調文本，效果和b標籤一樣</strong>
<br>
java整型最大的取值數爲：
2<sup>31</sup>-1
<br>
水：H<sub>2</sub>O
<br>
<small>small：縮小</small>
<br>
<big>big：放大</big>
<br>
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<I>斜體</I>
九：html表單標記
- <form> 表單標記
- <input> 文本輸入控件
- <textarea> 多行文本輸入控件
- <button> 按鈕控件
- <select> 下拉列表控件
- <option> 下拉列表選項控件
- <optgroup> 下拉列表選項集合控件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>form</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<!--點擊提交，就跳轉到名爲html4的文件-->
<form method="get" action="html4.html"></form>
<!-- input：文本輸入框-->
<input name="input_1" type="text" value="文本">
<br>
<!-- textarea：多行文本輸入控件-->
<textarea name="textarea1" rows="3" cols="3"></textarea>
<br>
<!-- select：下拉選擇控件-->
<select name="select_1">
<!-- optgroup：下拉列表選擇集合控件-->
<optgroup label="optgroup_1">
<option>1</option>
<option>2</option>
<option>3</option>
</optgroup>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<br>
<!-- 按鈕-->
<button type="submit">提交</button>
</form>
</body>
</html>
十：html表格標記
- <table> 表格控件
- <caption> 表題目
- <th> 表格單元頭 table head
- <tr> 表格單元行 table row
- <td> 表格單元列 table
- <thead> 表頭
- <tbody> 表體
- <tfoot> 表尾
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>table</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<form method="get" action="html4.html">
<table border="1">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>sex</th>
</tr>
</thead>
<tfoot>
<tr>
<td>
<button type="submit">提交</button>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<th rowspan="2">飲料</th>
<td>1</td>
<td>可樂</td>
</tr>
<tr>
<td>2</td>
<td>雪碧</td>
</tr>
<tr>
<th rowspan="1">零食</th>
<td>3</td>
<td>旺旺雪餅</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
十一：html列表標記
- <ul> 無序列表標記
- <ol> 有序列表標記
- <li> 列表內容標記
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>有序無序標籤</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</body>
</html>
十二：htm鏈接標記\
- <a> 瞄標記
- <link> 鏈接樣式表標記
<a href="https://www.baidu.com">跳轉到百度</a>
十三：htm樣式標記
- <div> 層標記
- <style> 文檔樣式標記
十四：htm腳本標記
<script> 腳本標記
十五：htm轉義字符
1. "<" ： < 小於號 less than
2. ">" ： > 大於號 greater than
3. “&”：& and符
4. “"”：雙引號
5. “©”：版權
6. “®”：已註冊商標
7. “ ” ：空白格
<input value=""雙引號"">
