內容LongLongLong是一種情懷
本文是針對剛學編程的小白,都是一些基礎知識,如果想了解更多深層一點的東西,歡迎移步本人博客!!
博客地址 點擊跳轉
在學習HTML5之前有幾點忠告給大家
1.HTML5要學習的內容很多很雜,會越來越難,如果有人給你說H5一點都不難的話,那一定是坑你 ! 或者是對你有所圖.HTML5相對于別的語言來說可能稍微有點輕松,但是絕對不簡單!
2.其實,前期學H5的一些標簽和樣式挺簡單的,你會感覺很輕松 ! 但是后面的內容會越來越難.
3.首先你得明白得學習一些什么東西,包括那些內容.下面是我給大家羅列的全部內容
4.在你學習任何一門語言的時候,一定要有心里準備和堅韌不拔的毅力.
下面廢話不多話,直接上代碼
瀏覽器功能
- 將網頁渲染出來給用戶查看
- 可以讓用戶通過瀏覽器和網頁交互
- 瀏覽器內核就是通常所說的渲染引擎，因為內核不同，所以存在兼容問題。
服務器
- 服務器就是超級計算機，頂級配置。服務器是用來存儲數據的，24小時不斷電不關機的超級計算機。
什么是URL
**
http://127.0.0.1：80/index.html（完整的格式） http://URL協議類型
127.0.0.1服務器的IP地址
:80服務器的端口號
index.html需要訪問的資源名稱**
認識HTML
- HTML 由HyperText（超文本） Markup（標記） Language（語言）縮寫而來
- HTML只有一個作用，它是專門用來給文本添加語義的。所以HTML被稱作“超文本標記語言”。
字符集
- 示例代碼 :
<meta charset="GBK"> GBK中文漢字 國標 純中文網站
<meta charset="UTF-8"> UTF-8 國際通用 字庫很全
DTD文檔聲明
- 示例代碼 :
<!DOCTYPE html> 作用告訴瀏覽器 我是一個文檔
H系列標簽
- 示例代碼 :
h1 h2 h3 h4 h5 h6 標簽 只有h1到h6 主標題 字體依次變小
<!--在瀏覽器上顯示一條分割線-->
<!--注意：獨占一行-->
<hr/>標簽
<!--注意：在瀏覽器中獨占一行-->
<p>我是一段文本</p>
<!--快速添加前后標簽--><!--選中文字，然后快捷鍵：Ctrl+Alt+T-->
注釋
<!--<p>我是段落</p>--> 工作中注釋非常重要 注釋的內容不會顯示在頁面上
<!--快捷鍵：Ctrl + / -->
img標簽和路徑問題
img標簽是英文的縮寫，用來顯示一張圖片
img標簽的格式
<img src = "">src是英文 source 的縮寫，source：資源，src是用來告訴img標簽需要顯示的圖片。
注意點
和H系列的標簽不一樣，img標簽不會獨占一行- 如果我們手動指定圖片的寬度和高度，會使圖片變形 如果不想圖片變形，只指定一個值，系統會自動自動高度，都是等比拉伸，不會變形
img包含的屬性 ：
- **width：寬度 height：高度 width/height兩個屬性來控制圖片的高度和寬度 如果沒有指定寬度和高度，系統會默認顯示 **
- **title：當鼠標懸停在圖片上的時候，需要彈出的描述框中顯示什么內容 **
- **alt：是英文alternate的縮寫 作用是：當需要顯示的圖片找不到時，顯示什么內容。 **
路徑問題：
- 給src賦值有兩種方式
**1.通過相對路徑賦值相對路徑就是每次從.html中查找
2.同級就是圖片和.html存儲在同一個文件夾中格式：src="QRCode.jpg"含義：在.html文件所在的文件夾中查找名稱叫做QRCode.jpg的圖片
下級下級就是存儲圖片的文件夾和.html文件在同一個文件夾中格式：在.html文件所在的文件夾中找到名稱教程images的文件夾
上級上級就是存儲圖片的位置和存儲代碼的文件夾在同一個文件夾中格式：src="../QRCode.jpg"../代表跳出現在的文件夾從上級文件夾中查找名稱叫做QRCode.jpg的文件
3.通過絕對路徑賦值絕對路徑每次都是從指定的硬盤開始查找
4.注意：
路徑中不要出現中文，否則會導致無法顯示圖片
通過相對路徑指定，不能跨硬盤**
換行標簽
- 如何在HTML中換行，可以用br標簽
- br標簽的作用：換行
- br標簽的格式：
- 注意點：
- 多個br標簽可以連續使用，使用了幾個就會換幾行
- 由于HTML的作用就是給文本添加語義，而br標簽的語義是不另起一個段落換行，而在企業中開發一般需要另起一個段落換行，所以開發中很少使用br標簽。
a標簽
- 什么是a標簽
- a標簽的作用:就是用于控制頁面與玉面之間跳轉的
- a標簽的格式：<a href="指定需要跳轉的目標界面">需要給用戶查看的內容</a>
- a標簽中還有一個叫做target(目標)屬性，這個屬性的作用是來控制如何跳轉頁面
- _self(當前):當前頁面跳轉，不新建選項卡
- _blank(空白):重新打開一個新選項卡跳轉
- a標簽中還有一個叫做title的屬性，和img標簽中的title屬性是一樣的，都是用來控制鼠標懸停時顯示的提示文本的
- 注意點：
**1.a標簽不僅可以讓文字可以點擊跳轉，還可以讓圖片跳轉
2.一個a標簽必須有一個href屬性，不然無法實現跳轉
3.如果通過a標簽的href屬性指定一個URL地址的時候，前面必須加上(http:)//或(https://)
4.a標簽除了可以指定網絡地址以外，還可以指定本地地址**
- 示例代碼 : 跳轉到另一頁
<a href="https://www.跳轉地址">內容頁</a>
<a href="https://www.跳轉地址">
</a>
- 示例代碼 : 本地跳轉
<a href="本地地址.html">內容標題.html</a>
- 示例代碼 : target
<a href="https://www.鏈接地址" target="_self">地址頁</a>
<a href="https://www.鏈接地址" target="_blank">地址頁</a>
- 示例代碼 : title
<a title="友情提示:會跳轉到百度糯米首頁">糯米</a>
base標簽
- base(基礎)標簽就是專門用來統一指定當前網頁中所有的超鏈接（a標簽）需要如何打開
- 注意點：
1.base標簽必須寫在head標簽的開始標簽和結尾標簽中間
2.如果既在base標簽中指定了target，又在a標簽中指定了target，那么瀏覽器會按照a標簽中指定的方式打開
- 示例代碼 :
<base target="_blank"> 控制整個頁面的跳轉 插入在head標簽之中
<a href="https://www.跳轉地址" target="_self">比如百度糯米</a>
<a href="http://news.跳轉地址">比如百度新聞</a>
<a href="https://www.跳轉地址">比如hao123</a>
<a href="http://跳轉地址">比如百度地圖</a>
<a href="http://跳轉地址">比如百度貼吧</a>
<a href="http://跳轉地址">比如百度視頻</a>
假鏈接
- 假鏈接就是點擊之后不會跳轉頁面意義：在企業開前期，其他界面都沒有寫出來，所以不知道該往那里跳，所以用假鏈接來代替。
- 開發到后期之后把假鏈接替換成真鏈接假鏈接的格式：1.#：點擊之后會自動回到頁面頂部2.javascript：點擊之后不會自動回到頂部
錨點
- 要想a標簽跳轉到指定的位置，必須告訴a標簽一個獨一無二的身份證號碼，這樣才能找到
- 如果給HTML中的標簽綁定一個獨一無二的身份號碼呢？ 在html中都有一個叫做id的屬性，id屬性是獨一無二的
- 想要跳轉到指定的位置分兩步
- 給目標位置添加一個id屬性，然后指定一個獨一無二的值
- 告訴a標簽需要跳轉到的目標標簽對用的獨一無二的身份證號碼是多少格式：
<a href="#center">跳轉到中部</a><h2 id="center">我是中部</h2> - 注意點：
1.通過a標簽跳轉到指定位置的時候，是沒有過度動畫效果的，直接一下就跳到指定位置
2.a標簽除了可以跳轉到當前界面的指定位置以后，還可以跳轉到其他界面的時候直接跳轉到指定位置格式：
- 示例代碼 :
<a href="13-錨點的測試界面.html#bottom" target="_blank">跳轉到錨點測試界面</a>
<h2 id="bottom">我是錨點測試界面3333</h2>
<a href="13-錨點的測試界面.html#bottom" target="_blank">跳轉到錨點測試界面</a>
<h2>我是頂部</h2>
<a href="#center">跳轉到中部</a>
<br/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><br/><br/><br/><hr/><br/><br/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><br/><br/>
<h2 id="center">我是中部</h2>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h2>我是底部</h2>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
無序列表
- 1.什么是列表標簽列表標簽就是用來給一對數據添加列表語義，告訴瀏覽器這堆數據是一個整體
- 2.HTML中列表標簽的分類
- 2.1無序列表（最多）（unordered list）(ul的縮寫)
- 2.2有序列表（最少）（ordered list）
- 2.3定義列表（其次）（definition list）
- 3.無序列表的作用給一堆數據添加列表語義，并且這一堆數據中所有的數據沒有先后之分先后之分：例如排行榜沒有先后之分：例如城市
- 4.無序列表格式
- 示例代碼 :
<ul>
<li>需要顯示的內容</li>
</ul>
li其實就是list item（列表條目）的縮寫 list：（列表） item：（條目）
- 注意點：
1.ul標簽是用來給一堆數據添加語義的，而不是給用來給它們前面添加小圓點的
2.ul標簽和li標簽是一個組合，一般情況同時出現，不會單個出現
3.ul標簽和li標簽是一個組合，所以ul標簽中不推薦包含其他標簽無序列表的
- 應用場景
1.新聞列表
2.商品列表
3.導航條
- 示例代碼 :
<h2>中國的城市有那些</h2>
<ul>
<li>北京</li>
<li>上海</li>
<li>武漢</li>
<li>天津</li>
</ul>
練習
<hr width="500px" align="left">
<ul type="circle">
<li>男子幫前車拆穿碰瓷 遭"碰瓷黨"砸穿車窗</li>
<li>老鼠咬壞天然氣膠管 戶主點火做飯氣灶閃爆</li>
<li>小區業主和物業激戰多年 老師被逼成“潑婦”</li>
<li>體操美女不幸爆菊身亡！下體血肉模糊</li>
<li>小伙陷傳銷欲騙家人錢 PS剁手指照被識破(圖)</li>
</ul>
- 圖片展示
- ul標簽中最好只放li標簽，但是在企業開發中，li標簽的內容可能會很復雜，所以我們可以繼續在li標簽中添加其他的標簽，來豐富界面
總結：
1.一定記住ul標簽中最好只放li標簽
2.但是li標簽中還可以繼續添加其他的標簽
3.無序列表中的li標簽除了可以添加別的標簽豐富界面以后，還可以添加ul標簽ul中可以有li，li中又可以有ul
有序列表
- 無序列表的作用
- 給一堆數據添加列表語義，并且這一堆數據中所有的數據有先后之分
- 有序列表格式：
<ol>(ordered list縮寫)
<li>需要顯示的內容</li>
</ol>
- 注意點和應用場景都和ul的差不多
定義列表
- 定義列表的格式：
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
- dt和dd都是英文縮寫
1.dt是英文definition title的縮寫，所以dt的含義就是用來定義列表
2.dd是英文definition description的縮寫，所以dd的含義就是用來定義標題對應的描述
-
定義列表的作用：
1.定義列表的作用
2.給一堆數據添加列表語義
3.先通過dt標簽定義列表中的所有標題，然后通過dd標簽給每個標題添加描述信息 -
定義列表的應用場景
1.做網頁底部的相關信息
2.圖文混排 注意點：
**1.和ul和ol一樣，dl和dt/dd是一個整體，所以他們一般都是同時出現的，不會單獨出現
2.和ul和ol一樣，由于dl和dt/dd是一組合標簽，所以dl中建議只放dt和dd標簽
3.一個dt可以沒有對應的dd，也可以有多個對應的dd，但無論有或者沒有dd都不推薦使用，只推薦一個dt對應一個dd
4.和li標簽一樣，需要豐富界面時，我們可以在dt和dd標簽中繼續添加其他標簽**
表格標簽基本使用
以前很多網站都用表格標簽做的，表格標簽是一個時代的代表
作用：用來給一堆數據添加表格語義
表格是一種數據的展現形式，當數據量特別大的時候，用表格來展示的時候就會非常清晰表格標簽的格式：
示例代碼 :
<table>
<tr>
<td>需要顯示的內容</td>
</tr>
</table>
table代表整個表格，一對table標簽就是一個表格
tr標簽代表表格中的一行數據，一對tr標簽就是一行數據
td標簽代表表格中一行的一個單元格，一對td標簽就是一行中的一個單元格
- 注意點
1.表格標簽中有一個邊框屬性，這個屬性決定了邊框的寬度，默認情況下屬性值是0，所以看不到
2.表格標簽和列表標簽一樣，是一個組合標簽，所以table/tr/td同時出現，不會單獨出現
表格標簽的屬性
- 寬度和高度的屬性
1.可以給td標簽和table標簽使用
2.表格的寬度和高度默認按照內容的尺寸來調整，也可以給table標簽設置width和height來手動指定
2.如果給td標簽設置width和height屬性，會修改當前單元格一行的寬度和高度，不會影響整個表格
- 水平對齊和垂直對齊屬性
1.其中水平對齊可以給table和tr和td標簽使用
2.垂直對齊只能對tr和td標簽使用
3.給table標簽設置align屬性，可以控制表格在水平方向的對齊
4.給tr標簽設置align屬性，可以控制當前行中單元格內容的水平方向對齊
5.給td標簽設置align屬性，可以控制當前單元格內容在水平方向的對齊方式
- 注意點：
**1.如果td和tr中都設置了align屬性，那么單元格中的內容會按照td中設置的來對齊
2.給tr標簽設置valign屬性，可以控制當前行中所有單元格的內容，在垂直方向的對齊方式
3.外邊距和內邊距屬性 只能對table標簽使用
4.外邊距就是單元格和單元格之間的距離 默認情況下，外邊距的距離是2px
5.內邊距就是表格中的內容和單元格邊框之間的距離 默認情況下內邊距是1**
- 示例代碼 :
<table border="1" width="500px" height="300px" align="center" cellspacing="12" cellpadding="20">
<tr valign="bottom">
<td width="150px" height="50px">11</td>
<td valign="top">22</td>
</tr>
<tr align="center">
<td align="right">33</td>
<td>44</td>
</tr>
</table>
細線表格
- 在表格標簽中想通過指定外邊距為0來實現細線表格是不行的，
- 其實他是2條線合并成一條線，看起來很不舒服的
- 細線表格的制作方式：
**1.給table標簽設置
backgroundcolor為黑色
2.給tr標簽設置backgroundcolor為白色
3.給table標簽設置cellspacing = "1px"
**
注意點：
table標簽和tr標簽以及td標簽都支持bgcolor屬性示例代碼 :
<table bgcolor="black" cellspacing="1">
<tr bgcolor="white">
<td>1.1</td>
<td>1.2</td>
</tr>
<tr bgcolor="white">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
- 圖片展示
表格標簽的其他標簽
表格的標題
- 在表格標簽中提供了一個專門用來設置表格標題的標簽，叫caption
-
只要將這個標簽寫入表格當中，它就會自動居中
caption標簽一定要寫在table中，否則無效
caption標簽一定要跟在table標簽后面
標題單元格標簽
- 在表格標簽中提供了一個專門用來存儲每一列標題的標簽，這個標簽叫做th標簽，只要將當前列的標題存 儲在這個標簽當中就會自動居中+加粗
- 到此為止我們發現，表格中有兩種單元格一種是td標簽，一種th標簽，th標簽就是專門用來存儲當前列 標題的
單元格合并
<table bgcolor="black" cellspacing="1px" width="500px" height="300px" align="center">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td colspan="2" rowspan="2"></td>
<!--<td></td>-->
</tr>
<tr bgcolor="white">
<td></td>
<!--<td colspan="2"></td>-->
<!--<td></td>-->
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
-
圖片展示
**單元格合并**
