HTML基本知識一文速通

1 HTML簡介

HTML家底

HTML和HTML5

HTML(Hyper Text Markup Language)，超文本标记语言，产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发，我們平時看的一個個網頁就是HTML格式。HTML5是HTML最新的修订版本，最新的標準，2014年10月由万维网联盟（W3C）完成标准制定，它的设计目的是为了在移动设备上支持多媒体。
瀏覽器

瀏览器是网页显示、运行的平台，HTML由瀏覧器解析处理，轉換成可識別的信息，浏覧器的功能依靠其浏覽器內核實現。浏覽器內核从十几年前微软独家垄断到今天已經百花齊放，但目前還是四瀏覽器內核派系分天下。

IE(Trident): 代表作有IE、猎豹、360、百度
firefox(Gecko): 以前挺強，現在快被chrome做掉，速度有點慢
Safari(webkit): 苹果家的，不能說不好，只能說”特立獨行”，做個效果要特別考慮能不能适配它
chrome(chromium/Blink): 在Chromium项目中研发了Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink其实是 WebKit 的分支。大部分国产浏览器最新版都采用 Blink内核，二次开发，反正他最屌了，開發者都建議用它調試。

Web標準(御三家辣!)

结构标准: 用于对网页元素进行整理和分类(HTML)
表现标准: 用于设置网页元素的版式、颜色、大小等外观属性(CSS)
行为标准: 用于对网页模型的定义及交互的编写(JavaScript)

结构+表现+行为，就成了平時的網頁啦
優點: 易于維護、頁面響應速度快、結構和表現分離的HTML更易被訪問識別、不同樣式表解決設備兼容性，語義化HTML更易被搜索引撆解析

HTML規范

文檔類型: <!DOCTYPE>必須位於HTML文檔第一行，告訴瀏覽器要按甚麼標準解析頁面，HTML5就是<!DOCTYPE html>。
頁面語言: lang，指定該html所用語言，可以做識別的作用，方便不用的應用場景。

字符集: charset(Character set)，對字符的編碼方式，最常用的是UTF-8。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>文档标题</title>
  </head>
  <body>
    文档内容......
  </body>
</html>

meta有 name 和 http-equiv 兩個属性，都是定義一些信息和設定的。

name取值:

keywork: 當然就是keywork
description: 同上
viewport:移動端窗口
robots: 索引方式
autor: 作者
generator: 網頁制作軟件
copyright: 版权

http-equiv取值:

content-Type: HTML4的
Expires: 設定到期時間，過期要重傳重加載
Pragma: 設定禁止瀏覽器從緩存讀內容
Refresh: 刷新

cache-control: 緩存机制

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>全球樂子</title> 
	<meta name="description" content="每時每刻每地的樂子!">
	<meta name="keywords" content="HTML,CSS,XML,JavaScript">
	<meta name="author" content="kinghong">
</head>
	<body>
		<p>一堆樂子</p>
	</body>
</html>

其他head標簽:

title: 定義標題
link: 和外部資源的關係
script: 腳本文件
style: 樣式文件

base: 規定頁面上所有鏈接默認的URL和打開狀態

<head>
  <base href="http://www.pornhub.com" target="_blank" />
</head>
<body>
  <a href="">走，看點好康的</a>
</body>

2 HTML常用標簽

HTML5一共一百多個標簽，還各自有不同的属性，但其實最常用的也是那几個

1 網頁結構:

排版和表現標簽

排版標簽: 顯示網頁結構的最常用標簽

h1~h6: 標题標簽
p: 段落標簽，把HTML分割為若干段落，
元素会自动在其前后创建一些空白
hr: 定義水平線(分割線)
br: 換行，床前明月光
疑是…
div和span: 沒有語義，定義文檔中的分隔區域，做一個盒子用
< !— … —>: 注釋，快捷鍵是ctrl+/或ctrl+shift+/
pre: 預格式化文本標簽，按照預先寫好的文字格式顯示

表現標簽: b和strong(粗體)、i和em(斜體)、s和del(刪除線)、u和ins(下劃線)
2 圖像標簽:

img:
| 属性 | 值 | 描述 |
| —- | —- | —- |
| src | URL | 路徑 |
| alt | text | 图像替代文本 |
| title | text | 鼠標悬停顯示內容 |
| width，height | 像素，百分比 | 高寬度 |
| border | 數字 | 邊框寛度 |
| loading | eager|lazy | 立即加載还是建迟加載 |

map: 帶有可點击區域的圖像映射

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <!-- coords：定义形状路径：当shape=rect时，四个数字依次为：起点X、起点Y、终点X、终点Y(左下->右上)。coords="x1,y1,x2,y2"-->
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <!-- shape=circle，三個數字為中心點x、中心點y、半徑-->
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

canvas: 畫布，通過腳本繪制圖形

3 鏈接標簽:

a: 定義超鏈接

1
2
3

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
<!-- href: url-->
<!-- target: 指定打開方式，_self為默認，_blank為在新窗口中打開-->

link: 鏈接到外部样式文件
| 属性 | 值 | 描述 |
| —- | —- | —- |
| href | URL | 位置 |
| media | media_query | 將顯示的設備 |
| rel | altemate| archives| author| bookmark| external| first| help| icon| last| license| next| nofollow| noreferrer| pingback| prefetch| prev| search| sidebar| stylesheet| tag| up | 必需，與被鏈接文檔的關係 |
| type | MIME_type | 被鏈接文檔的MIME类型，css对应”text/css” |
nav: 导航標簽
1
2
3
4
5
6
<nav>
<a href="/wife/">wife</a> |
<a href="/injection/">injection</a> |
<a href="/snapped/">snapped</a> |
<a href="/bigcock/">big cock</a>
</nav>
src和href的區別是src(source)用於替換當前元素，如js腳本，img圖片，當瀏覽器解析到元素會暫停其他資源下載和處理，直到元素加載完畢。href用於當前文檔和引用資源建立聯系，識別到資源會並行下載資源，不會停止處理。
href還能用來創建錨點鏈接，快速定位內容，使用相應的id名稱跳轉目標位置:<a href="#id">鏈接位置</a>。

4 特殊字符、表情等
特殊字符: 符號參考手册—https://www.runoob.com/tags/html-symbols.html
表情: Emoji參考手册—https://www.runoob.com/charsets/ref-emoji.html
國家和地区代碼: https://www.runoob.com/tags/ref-country-codes.html

3 表單
表單的目的是為了收集用戶信息，由控件、提示信息和表單域三部分構成。

1 表單控件
input: 單標簽，輸入的意思
1
2
3
4
5
用户名:
<input type="text" />
密码：
<input type="password" />
<input type="submit" value="提交">
| 属性 | 值 | 描述 |
| —- | —- | —- |
| value | text | 設定默認值 |
| name | text | 名稱 |
| checked | checked | 是否选中，只針对checkbos或radio |
| type | button|checkbox|color|date|datetime|datetime-local|email|file|hidden|image|month|number|password|radio|range|reset|search|submit|tel|text|time|url|week | input的类型 |
| form | from_id | input所属的一個或多個表單 |
| disabled | disabled | 禁用? |
| placeholder | text | 輸入提示 |
textarea: 文本框

属性值和輸入框基本一样，常用的多了几個:

cols	number	可見寬
rows	number	可見行
required	required	是否必填
wrap	hard\|soft	怎样換行
maxlength	number	最大字符數

button: 按鈕

select: 下拉列表

多了个size属性可以規定選項可見數目，multiple可以选多個選項

<select>
    <option value="girl1">Volvo</option>
    <option value="girl2">Saab</option>
    <option value="girl3">Mercedes</option>
    <option value="girl4">Audi</option>
</select>

optgroup: 可以把相關选項組合在一起

2 提示信息
label: 標簽

比基本的多兩個属性，for(規定與哪個表單元素綁定)，form(規定所属的一個或多個表單)，label> 标签为 input 元素定义标記，如果您在 label 元素内点击文本，就会触发此控件。
1
2
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

datalist: 提示元素可能的选项列表，提供自動完成的特性，用戶能看到一個下拉列表，有預先定義好的數據。

<form>
	<input list="browsers" name="browser">
		<datalist id="browsers">
  		<option value="Internet Explorer">
  		<option value="Firefox">
  		<option value="Chrome">
  		<option value="Opera">
  		<option value="Safari">
		</datalist>
	<input type="submit">
</form>

3 表單域

form: 定义一个 HTML 表单，用于用户输入，form 中的所有内容都会被提交给服务器。
1
<form action="url地址" method="提交方式" name="表单名称">各种表单控件</form>
| 属性 | 属性值 | 作用 |
| —- | —- | —- |
| action | URL | 服務器程序url |
| method | get/post | 提交方式 |
| name | string | 名稱 |

GET和POST区別:

瀏覽器回退時GET無軎，POST會再提交
GET會被瀏覽器主動cache
GET只能url編碼，只接受ASCII字符，GET更不安全，參數暴露在URL上
GET的參數會被完整保留在歷史記錄里

4 表格
用來展示表格式數據，顯示規整可讀性好

1 表格創建
**table、tr、td**是創建表格的基本標簽，缺一不可，table定義表格標簽，tr定義行，td定義單元格，它們必須互相嵌套。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1">
<tr>
<th>Month</th>
<th>Spand</th>
</tr>
<tr>
<td>November</td>
<td>$6000</td>
</tr>
<tr>
<td>December</td>
<td>$3000</td>
</tr>
</table>
th: 表單頭單元格，會加粗居中
caption: 表格標题，必須在table后面，但是會在表格之上居中顯示

單元格的rowspan和colspan属性: 合井單元格的個數，順序最好按上下左右合並

2 表格劃分结構

對於比較复雜的表格，可以分割成题頭、正文和腳注三部分，分別是thead，tbody和tfoot。

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
元素内部必须包含一个或者多个标签。
5 列表
容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表，特点就是整齐、整洁、有序，可組合自由度比表格高。

無序列表 ul

ul中只能嵌套列表項li

<ul>
    <li>hotel</li>
    <li>home</li>
    <li>playground</li>
</ul>

有序列表 ol

ol標簽中的type属性為排序的序列號，默認從1開始排，常見的值有1,a,A,i,I。

自定義列表 dl

dl嵌套dd，表項前無任何符號

1 HTML簡介

2 HTML常用標簽

1 網頁結構:

2 圖像標簽:

3 鏈接標簽:

4 特殊字符、表情等

3 表單

1 表單控件

2 提示信息

3 表單域

4 表格

1 表格創建

2 表格劃分结構

5 列表