亚洲青青草欧美,99re 这里有精品

內(nèi)容LongLongLong是一種情懷

本文是針對剛學(xué)編程的小白,都是一些基礎(chǔ)知識,如果想了解更多深層一點的東西,歡迎移步本人博客!!

博客地址點擊跳轉(zhuǎn)

在學(xué)習(xí)HTML5之前有幾點忠告給大家

1.HTML5要學(xué)習(xí)的內(nèi)容很多很雜,會越來越難,如果有人給你說H5一點都不難的話,那一定是坑你 ! 或者是對你有所圖.HTML5相對于別的語言來說可能稍微有點輕松,但是絕對不簡單!

2.其實,前期學(xué)H5的一些標(biāo)簽和樣式挺簡單的,你會感覺很輕松 ! 但是后面的內(nèi)容會越來越難.

3.首先你得明白得學(xué)習(xí)一些什么東西,包括那些內(nèi)容.下面是我給大家羅列的全部內(nèi)容

4.在你學(xué)習(xí)任何一門語言的時候,一定要有心里準(zhǔn)備和堅韌不拔的毅力.

下面廢話不多話,直接上代碼

**HTML5全部內(nèi)容**

瀏覽器功能

將網(wǎng)頁渲染出來給用戶查看
可以讓用戶通過瀏覽器和網(wǎng)頁交互
瀏覽器內(nèi)核就是通常所說的渲染引擎，因為內(nèi)核不同，所以存在兼容問題。

服務(wù)器

服務(wù)器就是超級計算機，頂級配置。服務(wù)器是用來存儲數(shù)據(jù)的，24小時不斷電不關(guān)機的超級計算機。

什么是URL

**
http://127.0.0.1：80/index.html（完整的格式） http://URL協(xié)議類型
127.0.0.1服務(wù)器的IP地址
:80服務(wù)器的端口號
index.html需要訪問的資源名稱**

認(rèn)識HTML

HTML 由HyperText（超文本） Markup（標(biāo)記） Language（語言）縮寫而來
HTML只有一個作用，它是專門用來給文本添加語義的。所以HTML被稱作“超文本標(biāo)記語言”。

字符集

示例代碼 :

<meta charset="GBK">     GBK中文漢字 國標(biāo)  純中文網(wǎng)站
<meta charset="UTF-8">   UTF-8 國際通用 字庫很全

DTD文檔聲明

示例代碼 :

<!DOCTYPE html>     作用告訴瀏覽器  我是一個文檔

H系列標(biāo)簽

示例代碼 :

h1 h2 h3 h4 h5 h6 標(biāo)簽 只有h1到h6   主標(biāo)題  字體依次變小
<!--在瀏覽器上顯示一條分割線-->
<!--注意：獨占一行-->
<hr/>標(biāo)簽
<!--注意：在瀏覽器中獨占一行-->
<p>我是一段文本</p>
<!--快速添加前后標(biāo)簽--><!--選中文字，然后快捷鍵：Ctrl+Alt+T-->

注釋

<!--<p>我是段落</p>-->  工作中注釋非常重要 注釋的內(nèi)容不會顯示在頁面上
<!--快捷鍵：Ctrl + / -->

img標(biāo)簽和路徑問題

img標(biāo)簽是英文的縮寫，用來顯示一張圖片

img標(biāo)簽的格式

<img src = ""> src是英文 source 的縮寫，source：資源，src是用來告訴img標(biāo)簽需要顯示的圖片。

注意點

和H系列的標(biāo)簽不一樣，img標(biāo)簽不會獨占一行- 如果我們手動指定圖片的寬度和高度，會使圖片變形如果不想圖片變形，只指定一個值，系統(tǒng)會自動自動高度，都是等比拉伸，不會變形

img包含的屬性：

**width：寬度 height：高度 width/height兩個屬性來控制圖片的高度和寬度如果沒有指定寬度和高度，系統(tǒng)會默認(rèn)顯示 **
**title：當(dāng)鼠標(biāo)懸停在圖片上的時候，需要彈出的描述框中顯示什么內(nèi)容 **
**alt：是英文alternate的縮寫作用是：當(dāng)需要顯示的圖片找不到時，顯示什么內(nèi)容。 **

路徑問題：

給src賦值有兩種方式

**1.通過相對路徑賦值相對路徑就是每次從.html中查找
2.同級就是圖片和.html存儲在同一個文件夾中格式：src="QRCode.jpg"含義：在.html文件所在的文件夾中查找名稱叫做QRCode.jpg的圖片
下級下級就是存儲圖片的文件夾和.html文件在同一個文件夾中格式：在.html文件所在的文件夾中找到名稱教程images的文件夾

上級上級就是存儲圖片的位置和存儲代碼的文件夾在同一個文件夾中格式：src="../QRCode.jpg"../代表跳出現(xiàn)在的文件夾從上級文件夾中查找名稱叫做QRCode.jpg的文件
3.通過絕對路徑賦值絕對路徑每次都是從指定的硬盤開始查找
4.注意：
路徑中不要出現(xiàn)中文，否則會導(dǎo)致無法顯示圖片
通過相對路徑指定，不能跨硬盤**

換行標(biāo)簽

如何在HTML中換行，可以用br標(biāo)簽
br標(biāo)簽的作用：換行
br標(biāo)簽的格式：
注意點：
多個br標(biāo)簽可以連續(xù)使用，使用了幾個就會換幾行
由于HTML的作用就是給文本添加語義，而br標(biāo)簽的語義是不另起一個段落換行，而在企業(yè)中開發(fā)一般需要另起一個段落換行，所以開發(fā)中很少使用br標(biāo)簽。

a標(biāo)簽

什么是a標(biāo)簽
a標(biāo)簽的作用:就是用于控制頁面與玉面之間跳轉(zhuǎn)的
a標(biāo)簽的格式：<a href="指定需要跳轉(zhuǎn)的目標(biāo)界面">需要給用戶查看的內(nèi)容</a>
a標(biāo)簽中還有一個叫做target(目標(biāo))屬性，這個屬性的作用是來控制如何跳轉(zhuǎn)頁面
_self(當(dāng)前):當(dāng)前頁面跳轉(zhuǎn)，不新建選項卡
_blank(空白):重新打開一個新選項卡跳轉(zhuǎn)
a標(biāo)簽中還有一個叫做title的屬性，和img標(biāo)簽中的title屬性是一樣的，都是用來控制鼠標(biāo)懸停時顯示的提示文本的
注意點：

**1.a標(biāo)簽不僅可以讓文字可以點擊跳轉(zhuǎn)，還可以讓圖片跳轉(zhuǎn)
2.一個a標(biāo)簽必須有一個href屬性，不然無法實現(xiàn)跳轉(zhuǎn)

3.如果通過a標(biāo)簽的href屬性指定一個URL地址的時候，前面必須加上(http:)//或(https://)
4.a標(biāo)簽除了可以指定網(wǎng)絡(luò)地址以外，還可以指定本地地址**

示例代碼 : 跳轉(zhuǎn)到另一頁

<a href="https://www.跳轉(zhuǎn)地址">內(nèi)容頁</a>
<a href="https://www.跳轉(zhuǎn)地址">
  ![](圖片地址)
</a>

示例代碼 : 本地跳轉(zhuǎn)

<a href="本地地址.html">內(nèi)容標(biāo)題.html</a>

示例代碼 : target

<a href="https://www.鏈接地址" target="_self">地址頁</a>
<a href="https://www.鏈接地址" target="_blank">地址頁</a>

示例代碼 : title

<a  title="友情提示:會跳轉(zhuǎn)到百度糯米首頁">糯米</a>

base標(biāo)簽

base(基礎(chǔ))標(biāo)簽就是專門用來統(tǒng)一指定當(dāng)前網(wǎng)頁中所有的超鏈接（a標(biāo)簽）需要如何打開
注意點：

1.base標(biāo)簽必須寫在head標(biāo)簽的開始標(biāo)簽和結(jié)尾標(biāo)簽中間
2.如果既在base標(biāo)簽中指定了target，又在a標(biāo)簽中指定了target，那么瀏覽器會按照a標(biāo)簽中指定的方式打開

示例代碼 :

<base target="_blank">   控制整個頁面的跳轉(zhuǎn)  插入在head標(biāo)簽之中
<a href="https://www.跳轉(zhuǎn)地址" target="_self">比如百度糯米</a>
<a href="http://news.跳轉(zhuǎn)地址">比如百度新聞</a>
<a href="https://www.跳轉(zhuǎn)地址">比如hao123</a>
<a href="http://跳轉(zhuǎn)地址">比如百度地圖</a>
<a href="http://跳轉(zhuǎn)地址">比如百度貼吧</a>
<a href="http://跳轉(zhuǎn)地址">比如百度視頻</a>

假鏈接

假鏈接就是點擊之后不會跳轉(zhuǎn)頁面意義：在企業(yè)開前期，其他界面都沒有寫出來，所以不知道該往那里跳，所以用假鏈接來代替。
開發(fā)到后期之后把假鏈接替換成真鏈接假鏈接的格式：1.#：點擊之后會自動回到頁面頂部2.javascript：點擊之后不會自動回到頂部

錨點

要想a標(biāo)簽跳轉(zhuǎn)到指定的位置，必須告訴a標(biāo)簽一個獨一無二的身份證號碼，這樣才能找到
如果給HTML中的標(biāo)簽綁定一個獨一無二的身份號碼呢？在html中都有一個叫做id的屬性，id屬性是獨一無二的
想要跳轉(zhuǎn)到指定的位置分兩步
給目標(biāo)位置添加一個id屬性，然后指定一個獨一無二的值
告訴a標(biāo)簽需要跳轉(zhuǎn)到的目標(biāo)標(biāo)簽對用的獨一無二的身份證號碼是多少格式：
<a href="#center">跳轉(zhuǎn)到中部</a><h2 id="center">我是中部</h2>
注意點：

1.通過a標(biāo)簽跳轉(zhuǎn)到指定位置的時候，是沒有過度動畫效果的，直接一下就跳到指定位置
2.a標(biāo)簽除了可以跳轉(zhuǎn)到當(dāng)前界面的指定位置以后，還可以跳轉(zhuǎn)到其他界面的時候直接跳轉(zhuǎn)到指定位置格式：

示例代碼 :

<a href="13-錨點的測試界面.html#bottom" target="_blank">跳轉(zhuǎn)到錨點測試界面</a>
<h2 id="bottom">我是錨點測試界面3333</h2>

<a href="13-錨點的測試界面.html#bottom" target="_blank">跳轉(zhuǎn)到錨點測試界面</a>
<h2>我是頂部</h2>
<a href="#center">跳轉(zhuǎn)到中部</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.什么是列表標(biāo)簽列表標(biāo)簽就是用來給一對數(shù)據(jù)添加列表語義，告訴瀏覽器這堆數(shù)據(jù)是一個整體
2.HTML中列表標(biāo)簽的分類
2.1無序列表（最多）（unordered list）(ul的縮寫)
2.2有序列表（最少）（ordered list）
2.3定義列表（其次）（definition list）
3.無序列表的作用給一堆數(shù)據(jù)添加列表語義，并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)沒有先后之分先后之分：例如排行榜沒有先后之分：例如城市
4.無序列表格式
示例代碼 :

<ul> 
      <li>需要顯示的內(nèi)容</li>
</ul>
li其實就是list item（列表條目）的縮寫  list：（列表） item：（條目）

注意點：

1.ul標(biāo)簽是用來給一堆數(shù)據(jù)添加語義的，而不是給用來給它們前面添加小圓點的
2.ul標(biāo)簽和li標(biāo)簽是一個組合，一般情況同時出現(xiàn)，不會單個出現(xiàn)
3.ul標(biāo)簽和li標(biāo)簽是一個組合，所以ul標(biāo)簽中不推薦包含其他標(biāo)簽無序列表的

應(yīng)用場景

1.新聞列表
2.商品列表
3.導(dǎo)航條

示例代碼 :

<h2>中國的城市有那些</h2>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>武漢</li>
        <li>天津</li>
    </ul>

練習(xí)
<hr width="500px" align="left">
<ul type="circle">
    <li>男子幫前車拆穿碰瓷 遭"碰瓷黨"砸穿車窗</li>
    <li>老鼠咬壞天然氣膠管 戶主點火做飯氣灶閃爆</li>
    <li>小區(qū)業(yè)主和物業(yè)激戰(zhàn)多年 老師被逼成“潑婦”</li>
    <li>體操美女不幸爆菊身亡！下體血肉模糊</li>
    <li>小伙陷傳銷欲騙家人錢 PS剁手指照被識破(圖)</li>
</ul>

圖片展示

**無序列表練習(xí)**

ul標(biāo)簽中最好只放li標(biāo)簽，但是在企業(yè)開發(fā)中，li標(biāo)簽的內(nèi)容可能會很復(fù)雜，所以我們可以繼續(xù)在li標(biāo)簽中添加其他的標(biāo)簽，來豐富界面
總結(jié)：

1.一定記住ul標(biāo)簽中最好只放li標(biāo)簽
2.但是li標(biāo)簽中還可以繼續(xù)添加其他的標(biāo)簽
3.無序列表中的li標(biāo)簽除了可以添加別的標(biāo)簽豐富界面以后，還可以添加ul標(biāo)簽ul中可以有l(wèi)i，li中又可以有ul

有序列表

無序列表的作用
給一堆數(shù)據(jù)添加列表語義，并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)有先后之分
有序列表格式：

        <ol>(ordered list縮寫)
            <li>需要顯示的內(nèi)容</li>
        </ol>

注意點和應(yīng)用場景都和ul的差不多

定義列表

定義列表的格式：

        <dl>
            <dt></dt>
            <dd></dd>
            <dt></dt>
            <dd></dd>
        </dl>

dt和dd都是英文縮寫

1.dt是英文definition title的縮寫，所以dt的含義就是用來定義列表
2.dd是英文definition description的縮寫，所以dd的含義就是用來定義標(biāo)題對應(yīng)的描述

定義列表的作用：

1.定義列表的作用
2.給一堆數(shù)據(jù)添加列表語義
3.先通過dt標(biāo)簽定義列表中的所有標(biāo)題，然后通過dd標(biāo)簽給每個標(biāo)題添加描述信息
定義列表的應(yīng)用場景

1.做網(wǎng)頁底部的相關(guān)信息
2.圖文混排
注意點：

**1.和ul和ol一樣，dl和dt/dd是一個整體，所以他們一般都是同時出現(xiàn)的，不會單獨出現(xiàn)
2.和ul和ol一樣，由于dl和dt/dd是一組合標(biāo)簽，所以dl中建議只放dt和dd標(biāo)簽

3.一個dt可以沒有對應(yīng)的dd，也可以有多個對應(yīng)的dd，但無論有或者沒有dd都不推薦使用，只推薦一個dt對應(yīng)一個dd
4.和li標(biāo)簽一樣，需要豐富界面時，我們可以在dt和dd標(biāo)簽中繼續(xù)添加其他標(biāo)簽**

表格標(biāo)簽基本使用

以前很多網(wǎng)站都用表格標(biāo)簽做的，表格標(biāo)簽是一個時代的代表
作用：用來給一堆數(shù)據(jù)添加表格語義
表格是一種數(shù)據(jù)的展現(xiàn)形式，當(dāng)數(shù)據(jù)量特別大的時候，用表格來展示的時候就會非常清晰
表格標(biāo)簽的格式：
示例代碼 :

    <table>
        <tr>
            <td>需要顯示的內(nèi)容</td>
        </tr>
    </table>
    table代表整個表格，一對table標(biāo)簽就是一個表格
    tr標(biāo)簽代表表格中的一行數(shù)據(jù)，一對tr標(biāo)簽就是一行數(shù)據(jù)
    td標(biāo)簽代表表格中一行的一個單元格，一對td標(biāo)簽就是一行中的一個單元格

注意點

1.表格標(biāo)簽中有一個邊框?qū)傩?，這個屬性決定了邊框的寬度，默認(rèn)情況下屬性值是0，所以看不到
2.表格標(biāo)簽和列表標(biāo)簽一樣，是一個組合標(biāo)簽，所以table/tr/td同時出現(xiàn)，不會單獨出現(xiàn)

表格標(biāo)簽的屬性

寬度和高度的屬性

1.可以給td標(biāo)簽和table標(biāo)簽使用
2.表格的寬度和高度默認(rèn)按照內(nèi)容的尺寸來調(diào)整，也可以給table標(biāo)簽設(shè)置width和height來手動指定
2.如果給td標(biāo)簽設(shè)置width和height屬性，會修改當(dāng)前單元格一行的寬度和高度，不會影響整個表格

水平對齊和垂直對齊屬性

1.其中水平對齊可以給table和tr和td標(biāo)簽使用
2.垂直對齊只能對tr和td標(biāo)簽使用
3.給table標(biāo)簽設(shè)置align屬性，可以控制表格在水平方向的對齊
4.給tr標(biāo)簽設(shè)置align屬性，可以控制當(dāng)前行中單元格內(nèi)容的水平方向?qū)R
5.給td標(biāo)簽設(shè)置align屬性，可以控制當(dāng)前單元格內(nèi)容在水平方向的對齊方式

注意點：

**1.如果td和tr中都設(shè)置了align屬性，那么單元格中的內(nèi)容會按照td中設(shè)置的來對齊

2.給tr標(biāo)簽設(shè)置valign屬性，可以控制當(dāng)前行中所有單元格的內(nèi)容，在垂直方向的對齊方式
3.外邊距和內(nèi)邊距屬性只能對table標(biāo)簽使用
4.外邊距就是單元格和單元格之間的距離默認(rèn)情況下，外邊距的距離是2px
5.內(nèi)邊距就是表格中的內(nèi)容和單元格邊框之間的距離默認(rèn)情況下內(nèi)邊距是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>

細(xì)線表格

在表格標(biāo)簽中想通過指定外邊距為0來實現(xiàn)細(xì)線表格是不行的，
其實他是2條線合并成一條線，看起來很不舒服的
細(xì)線表格的制作方式：

**1.給table標(biāo)簽設(shè)置backgroundcolor為黑色
2.給tr標(biāo)簽設(shè)置backgroundcolor為白色
3.給table標(biāo)簽設(shè)置cellspacing = "1px"
**

注意點：
table標(biāo)簽和tr標(biāo)簽以及td標(biāo)簽都支持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>

圖片展示

**細(xì)線表格**

表格標(biāo)簽的其他標(biāo)簽

表格的標(biāo)題

在表格標(biāo)簽中提供了一個專門用來設(shè)置表格標(biāo)題的標(biāo)簽，叫caption
只要將這個標(biāo)簽寫入表格當(dāng)中，它就會自動居中
caption標(biāo)簽一定要寫在table中，否則無效
caption標(biāo)簽一定要跟在table標(biāo)簽后面

標(biāo)題單元格標(biāo)簽

在表格標(biāo)簽中提供了一個專門用來存儲每一列標(biāo)題的標(biāo)簽，這個標(biāo)簽叫做th標(biāo)簽，只要將當(dāng)前列的標(biāo)題存儲在這個標(biāo)簽當(dāng)中就會自動居中+加粗
到此為止我們發(fā)現(xiàn)，表格中有兩種單元格一種是td標(biāo)簽，一種th標(biāo)簽，th標(biāo)簽就是專門用來存儲當(dāng)前列標(biāo)題的

單元格合并

<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>

圖片展示

**單元格合并**

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

01 - HTML5知識點匯總一