Hyper Text MarkUp Language(超文本標記語言)
接下來主要以代碼爲主，加少量註釋
書寫HTML的基本語句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>靜夜思</title>
</head>
<body>
<h1>靜夜思</h1>
<em>朝代：<strong>唐</strong></em> <br>作者：<strong>李白</strong><br/>
<p>
牀前明月光，<br>
疑是地上霜。<br>
舉頭望明月，<br>
低頭思故鄉。<br>
</p>
</body>
</html>
<em></em>代表特殊字體
<p></p>代表段落
<h1></h1>標題，隨着數字的改變字體大小會發生改變
超鏈接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://www.baidu.com/"target="_self">
<img src="../捕獲.PNG"alt="aaa"title="bbb"width="100"height="79">
</a>
<a href="mailto:[email protected]">聯繫我們</a>
<a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%A2%85%E9%9B%A8&hs=2&pn=1&spn=0&di=149160&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=2950670411%2C783034530&os=3222356758%2C2325416348&simid=3455887255%2C78381999&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E6%A2%85%E9%9B%A8&objurl=http%3A%2F%2Fwx2.sinaimg.cn%2Fcrop.0.0.610.342.1000%2F814c5ce4ly1fh05txysxxj20gy0b7dgk.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fojtk5_z%26e3Bv54AzdH3F7AzdH3Fd8mldmcnba%3Fgtvh%3D%25E0%25b8%25bF%25Ec%25BF%25lA%25Em%25B9%25Ba%25Em%25Bm%25l9%25Em%25Aa%25Am%25E0%25AE%25Bl_%26g5fv6trp%3D8%26tf_wss%3D8&gsm=&islist=&querylist="target="_self">梅雨</a>
<hr>
<!--<a href="http://wpa.qq.com/msgrd?v=3&uin=24736743&site=qq&menu=yes"target="_self">
<img border="0" src="../捕獲.PNG" alt="點擊這裏給我發消息" title="點擊這裏給我發消息></a>-->
</body>
</html>這裏實現的功能是用自己想要用的方式進行網頁跳轉
錨鏈接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#biaojia">a</a> <br>
<a href="#biaojib">b</a> <br>
<a href="#biaojic">c</a> <br>
<a href="https://www.cnblogs.com/TankXiao/p/9154085.html#dutte">d</a> <br>
<a href="">f</a> <br>
<a href="">g</a>
<hr>
<a name="biaojia">a</a>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<a name="biaojib">b</a>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<a name="biaojic">c</a>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
<p>11111111111111111111111111</p>
</body>
</html>上面那部分是定義標籤的格式，下面是對標籤進行放置，標籤可直接跳轉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lianxi</title>
</head>
<body>
<h1>流量統計表</h1>
<table border="1px">
<tr>
<td>流量統計</td>
<td>訪客統計</td>
<td>會員</td>
<td>遊客</td>
</tr><hr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr><hr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr><hr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr><hr>
<tr>
<td>1</td>
<td colspan="3">2</td>
</tr><hr>
</table>
</body>
</html>這裏實現的功能是畫了一個表，對一部分內容進行了行延拓和列延拓
內聯框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內聯框架</title>
</head>
<body>
<!--<iframe src="https://baidu.com/"width="1000px"height="600px"></iframe>
-->
<iframe name="mainframe"></iframe>
-->
<a href="https://ww.baidu.com"target="mainframe">點擊顯示</a>
</body>
</html>格式就是這麼規定的，沒啥好說的
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>1</li>
<li>4</li>
<li>3</li>
<li>2</li>
</ul><hr>
<ol>
<li>7</li>
<li>6</li>
<li>5</li>
<li>8</li>
</ol><hr>
<dl>
<dt>1</dt>
<dt>3</dt>
<dt>4</dt>
<dt>2</dt>
<dt>7</dt>
<dt>5</dt>
<dt>6</dt>
<dt>9</dt>
<dt>8</dt>
<dt>0</dt>
</dl><hr>
</body>
</html>這部分介紹了三種列表方式，有序無序和自定義列表。
網頁結構
有些要記住的詞，組成網頁必不可少的
<body>
<header>我是頭部</header>
<nav>導航欄</nav>
<aside>側邊欄</aside>
<artile>文章主題</artile>
<section>獨立區域</section>
<footer>我是尾部</footer>
</body>視頻，音頻
<body>
<!--<iframe src="../china.mp4"scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"width="1000px" height="500px"></iframe>
-->
<video src="../china.mp4"controls></video>
</body><body>
<audio src="../ab410f7bbbb0955e7ae476ae89527a5d.m4a"autoplay controls></audio>
</body>視頻和音頻大同小異，閒參數麻煩，就寫autoplay controls
表單
<body>
<form action="test.html" method="post">
<p>名字：<input type="text"name="username"></p>
<p>密碼：<input type="password"name="password"></p>
<p>
<input type="submit"value="提交">
<input type="reset"value="重置">
</p>
</form>
</body>格式固定
表單元素
<form action="test.html"method="get">
<p>
<input type="text"name="username"value=""size="20"maxlength="20"></p>
<p>
<input type="password"name="pwd"size="20"maxlength="20">
</p>
<p>
<input type="radio"value="男"name="sex">男
<input type="radio"value="女"name="sex">女
</p>
<p>
<input type="checkbox"name="hobby"value="code">敲代碼
<input type="checkbox"name="hobby"value="music">聽音樂
<input type="checkbox"name="hobby"value="girl">女孩
</p>
<hr>
<select name="科目">
<option value="1"></option>
<option value="2">數學</option>
<option value="3" >英語</option>
<option value="4">英語</option>
<option value="5">英語</option>
</select>
<hr>
<p>
<input type="submit"value="登錄">
<input type="reset"value="清空">
<input type="button"value="點我">
<!-- <input type="image"src="../捕獲.PNG">-->
<textarea name="textarea"cols="10"rows="10"></textarea>
</p>
<p>
郵箱：<input type="emial"name="emial">
</p>
<p>
url:<input type="url"name="url">
</p>
<p>
數字：<input type="number"min="0"max="100"step="10">
</p>
<p>
<input type="range"name="range"min="0"max="1000"step="2">
</p>
<p>
搜索：<input type="search"name="search">
</p>
</form>
</body>這裏面好多東西，給我最直觀的感覺就是type所對應的單詞起決定性作用，所以多看看背背。