一天教会三岁表弟HTML，你值得拥有
目錄:
1.HTML基本骨架
2.head內部的可放標簽
3.文本所用標簽
4.列表標簽
5.表格標簽
6.表單標簽
7.導入圖片和超鏈接
8.行內元素和塊元素
9. 特殊符號在網頁中的轉換和注釋
10.框架
1. HTML基本骨架
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body> </html>對于骨架各部分的概述
| <!doctype html> | 是一個文檔聲明，表示這是一個HTML頁面，也表示表示網頁是按照html5標準編寫的 |
| <html> </html> | 是最根本的標簽表示整個網頁，是一個雙標簽 |
| <head></head> | 網頁的頭部里邊是一些網頁的配置除了title標簽其余都不可見，是一對雙標簽，標簽內容是幫瀏覽器解析頁面的 |
| <meta> | 里邊是一個網頁使用的字符集 |
| <title> </title> | 表示網頁的標題 |
| <body></body> | 用戶所能看到的內容區域 |
有時候我們會在html這個標簽里邊，看到一條屬性：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">xmlns是html的第一個屬性是一個命名空間，規定不同用戶在瀏覽器中標簽語義遵循的統一標準，第二個屬性就是lang代表所有的標簽語言都是英文
2. head標簽內部的可放標簽
2.1title標簽
<title></title>：雙標簽，放置網頁的標題
2.1meta標簽
<meta>：單標簽，一般用于定義頁面的特殊信息，如頁面關鍵字，頁面描述等，提供給搜索引擎，告訴搜索引擎這個頁面是做什么的
meta標簽有兩個屬性：
1.name屬性：常用取值只有2個：keywords、description,結合content一起用，屬性keywords主要是網頁的關鍵字，description則是對網頁的描述
2.http-equiv屬性：常用屬性值Content-Type和refresh，結合content一起用，Content-Type是定義網頁所用的編碼
refresh是定義網頁自動刷新跳轉：
注意在HTML5中定義網頁所用編碼可以直接用：<meta charset=“utf-8”/>
2.2其他標簽
<style type="text/css"></style>：標簽內寫CSS的代碼
2.3script標簽
<script></script>：標簽內寫JavaScript代碼
2.3link標簽
<link type="text/css" rel="stylesheet" href="css/index.css" >：導入css文件
3.文本所用標簽
3.1h標簽
<h1~6></h1~6>：分別對應六種標題1~6從大到小,h1標題所占權重最高最便利搜索引擎搜索，一個頁面一般要有一個h1標簽一般將這個標簽給logn(能代表整個網頁的圖標)
3.2p標簽
<p></p>：段落標簽
3.3兩個單標簽
<br/>：單標簽，換行標簽
<hr/>：單標簽，水平線標簽
3.4文本標簽(雙標簽)
| strong或者b | 粗體標簽 |
| i或者em或cite | 斜體標簽 |
| sup | 上標標簽(比如5的平方，那么平方的2就可以使用sup修飾) |
| sub | 下標標簽(化學方程式用的較多) |
| s | 中劃線標簽 |
| u | 下劃線標簽 |
| big | 大字號標簽 |
| small | 小字號標簽 |
3.5div標簽span標簽
<div></div>：可以在網頁劃分區域，可以用于網頁的整體的布局，無特殊含義
<span></span>：沒有特殊含義，代表小的范圍，文本級標簽，不能放容器級標簽,通常和CSS連用
4. 列表標簽
4.1有序列表
<ol><li></li><li></li><li></li><li></li></ol>比如我們使用a,b,c進行排序：
注意：ol標簽和li標簽需要配合使用，不能單獨使用，而且ol的子標簽只能是li標簽
4.2無序列表
//可用ul>li*4這種快捷鍵生成如下代碼 <ul><li></li><li></li><li></li><li></li> </ul>注意ul標簽里邊只能是li標簽，文本不能直接放在ul標簽內，而是放在標簽內
4.3定義列表
<dl>//定義列表<dt>名詞</dt>//定義標題<dd>描述</dd>//定義解釋.... </dl>舉個例子
注意：dt后邊可以有多個dd對dt進行解釋，dt后邊也可以不跟dd也不會影響整體結構
5.表格標簽
5.1表格標簽
| table | 表格 |
| tr | 代表行 |
| td | 代表單元格 |
| caption | 表格標題 |
| th | 表頭單元格 |
| thead | 劃分表頭部分 |
| tbody | 劃分表身部分 |
| tfoot | 表腳 |
行，單元格等都需要放在table標簽里邊，其實th和td在本質上都是單元格，但是瀏覽器會對th進行加粗居中，但是不會對td一居中加粗，后三個標簽沒有語義就是把表格分為三個部分，讓表格的代碼更具有可讀性
例子：
table標簽屬性border：代表整個表格邊框顏色的深度，0代表沒有邊框(默認是0)，以后邊框深度依次加深比如：
5.2合并單元格
| rowspan | 合并行 |
| colspan | 合并列 |
例子：
6.表單標簽
6.1form標簽
我們把表單標簽都放在form標簽中
form標簽屬性
| name | 表單的名字 |
| method | 提交方式 |
| action | 提交地址 |
6.2input標簽
是一個單標簽
關于input的type屬性
6.3單行文本框
input屬性值為text
從上邊的介紹，我們可以看到，單行文本框的瀏覽器效果，我們還可以給單行文本框設置屬性，常用的單行文本的屬性為：
| value | 設置單行文本框的默認值，也就是默認情況下單行文本框顯示的內容 |
| size | 設置單行文本框的長度 |
| maxlength | 設置單行文本框最多可以輸入的字符數 |
例子：
6.4密碼文本框
input屬性值為password
同樣的我們可以為密碼文本框設置屬性
| value | 設置密碼文本框的默認值，也就是默認情況下密碼文本框顯示的文字 |
| size | 設置密碼文本框的長度 |
| maxlength | 設置最大輸入字符數 |
6.5單選框
input屬性值為radio
我們單選框是必備兩個屬性的：
| name | 表示單選框按鈕所在的組名 |
| value | 表示單選框的可取值 |
舉個例子：
當name屬性一樣的時候，我們只能勾選一個，但是當name屬性不一致的時候，那么就都可以勾選，所以name屬性的一致性需要特別注意。還有一個缺點，那么就是只要我們不手動勾選，那么系統是不會默認勾選的，所以我們這里還有一個屬性可以為我們默認勾選，那就是checked，有兩種寫法都會默認的勾選女：
6.6復選框
input屬性值為checkbox
和單選框一致我們復選框也是三個屬性的：
| name | 表示單選框按鈕所在的組名 |
| value | 表示單選框的可取值 |
| checked | 默認勾選 |
6.7按鈕
input屬性值分為三個button，submit，reset,分別表示普通按鈕，提交按鈕，重置按鈕
和value屬性搭配使用，value里邊的內容就是按鈕上的內容
| 普通按鈕 | 一般都是搭配js操作 |
| 提交按鈕 | 給服務器提交數據 |
| 重置按鈕 | 重置用戶在表單輸入的內容(重置按鈕只能重置它所在的form標簽) |
6.8多行文本框
多行文本框不是放在input標簽里，他有自己的標簽textarea
兩個屬性：
| row | 行數 |
| cols | 列數 |
6.9下拉列表
同樣的不需要input標簽，是靠著select和option兩個標簽來完成的
1.關于select標簽：
他有兩種屬性：
| multiple | 設置下拉列表可以選擇多項(無屬性值) |
| size | 設置下拉列表顯示幾個列表項，取值為整數 |
想要多選需要按住ctrl加鼠標左鍵
2.option標簽：
兩個屬性：
| selected | 是否選中(默認選中) |
| value | 選項值(可以不加，他是和js配合使用) |
我們使用一下select屬性：
可以看到默認的jQuery被選中
6.10文件上傳
input屬性值為file
6.11綜合：
7.導入圖片和超鏈接
7.1導入圖片
<img/>：單標簽
三個屬性：
| src | 指定圖片路徑，可以是相對和絕對路徑 |
| alt | 用于圖片描述，這個描述是給搜索引擎看的，當我們的圖片無法顯示的時候，頁面會顯示alt屬性的內容 |
| title | 也是用于圖片描述，不過是描述給用戶看的，當我們鼠標移動到圖片上的時候會顯示title上的文字 |
7.2超鏈接
<a herf="鏈接地址">文本或者圖片</a>：實現頁面的跳轉，有兩個屬性，第一個是是herf，第二個是target
herf就不用多說了，關于target的屬性值：
| _self | 在原來窗口打開鏈接(默認值) |
| _blank | 在新的窗口打開鏈接 |
如果我們在一個項目下面有多個網頁，同樣也可以在這些網頁之間實現相互跳轉
7.3錨點跳轉
這個比如博主寫博客，點擊博主的目錄就會跳到本頁面對應的位置，這個就叫做錨點跳轉(跳轉到本頁面的指定位置)
h標簽內有一個id屬性可以設置一個id值，可以讓a標簽的屬性href等于#+id值,這樣就可以實現頁面內的跳轉
比如：
<a href="#a1" >1.簡介<a href="#a2" >2.說明 <h1 id="a1">1.簡介</h1> <h1 id="a2">2.說明</h1>8. 行內元素和塊元素
1.塊元素：獨占一行的元素，不管有多少內容，都會獨占一行
2.行內元素：只占自身大小，不會占一行
常見的塊元素：
| h1~h6 | 標題元素 |
| p | 段落元素 |
| div | div無特殊含有，與網頁布局有關 |
| hr | 水平線 |
| ol | 有序列表 |
| ul | 無序列表 |
塊元素的特點：
- 塊元素獨占一行，排斥其他元素（包括塊元素和行內元素）與其位于同一行；
- 塊元素內部可以容納其他塊元素和行內元素
行內元素：
常見行內元素:
| strong | 粗體元素 |
| em | 斜體元素 |
| a | 超鏈接 |
| span | 常用行內元素，結合css定義樣式 |
9.特殊符號在網頁中的轉換和注釋
9.1特殊符號在網頁中的轉換
| > | > |
| < | &It; |
| & | & |
| 空格 | |
9.2注釋
第一種：<!--注釋內容-->
第二種：ctrl+/
10.框架
框架的意思是從頁面里邊再嵌套頁面
格式及說明：
<iframe src="鏈接地址" width="數值" height="數值"></iframe>我們舉個例子：
總結
以上是生活随笔為你收集整理的一天教会三岁表弟HTML，你值得拥有的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 详解Linux的压缩解压缩命令
- 下一篇： CSS基础汇总