html5中推出了一些新的標(biāo)簽

        strong == b

        ins == u

        em == i

        del == s

新的標(biāo)簽是有語(yǔ)義的，而老的只是單純的添加樣式（這是CSS干的事）
        strong的語(yǔ)義：定義重要性強(qiáng)調(diào)的文字
        ins的語(yǔ)義（inserted）：定義插入的文字
        em的語(yǔ)義（emphasized）：定義強(qiáng)調(diào)的文字
        del的語(yǔ)義（deleted）：定義被刪除的文字 

三、 字符實(shí)體

#1、在HTML中對(duì)空格／回車／tab不敏感，會(huì)把多個(gè)空格／回車／tab當(dāng)作一個(gè)空格來(lái)處理

#2、字符實(shí)體指的是
在HTML中
有的字符是被HTML保留的比如大于號(hào)小于號(hào)
有的HTML字符，在HTML中是有特殊含義的，是不能在瀏覽器中直接顯示出來(lái)的，那么這些東西想顯示出來(lái)就必須通過(guò)字符實(shí)體，如下

注釋：實(shí)體名稱對(duì)大小寫敏感！

內(nèi)容    代碼  #一定要以;結(jié)束
空格     
>    >
<    &lt;
&    &amp;
¥    &yen;
版權(quán)    &copy;
注冊(cè)    ®

HTML特殊符號(hào)對(duì)照表

四、 h系列標(biāo)簽

語(yǔ)義：標(biāo)記內(nèi)容為一個(gè)標(biāo)題，全稱headline

h系列標(biāo)簽從h1-h6共6個(gè)，沒(méi)有h7標(biāo)簽，標(biāo)記內(nèi)容為1~6級(jí)標(biāo)題

雖然h1-h6標(biāo)簽的顯示樣式是從大到小，但再次強(qiáng)調(diào)：記憶HTML標(biāo)簽的顯示樣式是沒(méi)有意義的

    
        
        
    
    
        
一級(jí)標(biāo)題

        
二級(jí)標(biāo)題
        
三級(jí)標(biāo)題
        
四級(jí)標(biāo)題
        
五級(jí)標(biāo)題
        
六級(jí)標(biāo)題
        沒(méi)有七級(jí)標(biāo)題
    
 

注意：在企業(yè)開發(fā)中一定要慎用h系列標(biāo)簽，特別是h1標(biāo)簽，在企業(yè)開發(fā)中一般一個(gè)界面中只能出現(xiàn)一個(gè)h1標(biāo)簽（出于SEO考慮）,比如www.163.com。

五、 p標(biāo)簽

語(yǔ)義：標(biāo)記內(nèi)容為一個(gè)段落，全稱paragraph

    
        
        
    
    
        
Egon
        
論顏值，鶴立雞群
        
論才華，天下無(wú)敵
    

六、 img標(biāo)簽

語(yǔ)義：標(biāo)記一個(gè)圖片，全稱image

#1、用法


#2、注意
2.1 src指定的圖片地址可以是網(wǎng)絡(luò)地址，也可以是一個(gè)本地地址，本地地址可以用絕對(duì)或相對(duì)路徑，
但通常用相對(duì)路徑，相對(duì)路徑是以html文件當(dāng)前所在路徑為基準(zhǔn)進(jìn)行的

2.2 圖片的格式可以是png、jpg和gif

2.3 alt="圖片加載失敗時(shí)顯示的內(nèi)容"

2.4 title = "鼠標(biāo)懸停到圖片上時(shí)顯示的內(nèi)容"

2.5 如果沒(méi)有指定圖片的width和height則按照?qǐng)D片默認(rèn)的寬高顯示，如果指定圖片的width和height則可能讓圖片變形
那如果又想指定寬度和高度，又不想讓圖片變形，我們可以只指定寬度和高度的一個(gè)值即可
只要指定了一個(gè)值，系統(tǒng)會(huì)根據(jù)該值計(jì)算另外一個(gè)值，并且都是等比拉伸的，圖片將不會(huì)變形

七、 a標(biāo)簽

語(yǔ)義：標(biāo)記一個(gè)內(nèi)容為超鏈接，全稱anchor，錨

#1、超鏈接標(biāo)簽是超文本文件的精髓，可以控制頁(yè)面與頁(yè)面之間的跳轉(zhuǎn)，語(yǔ)法如下
需要展現(xiàn)給用戶查看的內(nèi)容
/也可以是圖片

#2、注意：
2.1 a標(biāo)簽不僅可以標(biāo)記文字，也可以標(biāo)記圖片
    百度一下，你就知道

2.2 a標(biāo)簽必須有href屬性，href的值必須是http://或https://開頭

2.3 a標(biāo)簽還可以跳轉(zhuǎn)到自己的頁(yè)面
    錘你胸口

2.4 target="_blank"代表在新頁(yè)面中打開，其余的值均無(wú)需記憶，
    如果頁(yè)面中大量的a標(biāo)簽都需要設(shè)置target="_blank",那么我們可以在head標(biāo)簽內(nèi)新增一個(gè)base標(biāo)簽進(jìn)行統(tǒng)一設(shè)置
    
    如果a標(biāo)簽自己設(shè)置了target，那么就以自己的為準(zhǔn)，否則就會(huì)參照base的設(shè)置

2.5 title="鼠標(biāo)懸浮顯示的內(nèi)容"

假鏈接

#1、什么是假鏈接？
    就是點(diǎn)擊之后不會(huì)跳轉(zhuǎn)的鏈接，我們稱之為假鏈接

#2、假鏈接存在的意義：
    在企業(yè)開發(fā)前期，其他界面都還沒(méi)有寫出來(lái)，
    那么我們就不知道應(yīng)該跳轉(zhuǎn)到什么地方，所以就只能使用假鏈接來(lái)代替

#3、假鏈接的定義格式
    1、href="#"   :會(huì)自動(dòng)回到網(wǎng)頁(yè)的頂部
    2、href="javascript:" ：不會(huì)返回頂部

頁(yè)面內(nèi)錨點(diǎn)

#1、要想通過(guò)a標(biāo)簽跳轉(zhuǎn)到指定的位置，那么必須告訴a標(biāo)簽一個(gè)獨(dú)一無(wú)二的身份證號(hào)碼，
這樣a標(biāo)簽才能在當(dāng)前界面中找到需要跳轉(zhuǎn)到的目標(biāo)位置

#2、如何為html中的標(biāo)簽綁定一個(gè)獨(dú)一無(wú)二的身份證號(hào)碼呢？
在html中，每一個(gè)標(biāo)簽都有一個(gè)名稱叫做id的屬性
這個(gè)屬性就是用來(lái)給標(biāo)簽指定一個(gè)獨(dú)一無(wú)二的身份證號(hào)碼的

#3、所以要想實(shí)現(xiàn)通過(guò)a標(biāo)簽跳轉(zhuǎn)到指定的位置，分為兩步
3.1、給目標(biāo)位置的標(biāo)簽添加一個(gè)id屬性，然后指定一個(gè)獨(dú)一無(wú)二的值
3.2、告訴a標(biāo)簽?zāi)阈枰D(zhuǎn)到的目標(biāo)標(biāo)簽對(duì)應(yīng)的獨(dú)一無(wú)二的身份證號(hào)碼是多少

#4、a標(biāo)簽除了可以跳轉(zhuǎn)當(dāng)前頁(yè)面，還可以跳轉(zhuǎn)到其他頁(yè)面的指定位置 

跳到首頁(yè)

#1、跳到首頁(yè)
刷新頁(yè)面，回到頂部，人類感覺不出來(lái)區(qū)別 
回到頂部

#2、注意點(diǎn)：
    通過(guò)我們的a標(biāo)簽跳轉(zhuǎn)到指定的位置，是沒(méi)有過(guò)度動(dòng)畫的
    是直接一下子就跳轉(zhuǎn)到了指定位置,比如京東主頁(yè)
    如果跳到首頁(yè)需要過(guò)渡動(dòng)畫，則不用a標(biāo)簽做，比如天貓主頁(yè)

八、 列表標(biāo)簽

語(yǔ)義：標(biāo)記一堆數(shù)據(jù)是一個(gè)整體/列表

html中列表標(biāo)簽分為三種

1、無(wú)序列表（列表標(biāo)簽中使用最多的一種，非常重要）：unordered list

#1、作用：
制作導(dǎo)航條、商品列表、新聞列表等
#2、組合使用ul>li
    

        
秒殺
        
優(yōu)惠券
        
PLUS會(huì)員
        
閃購(gòu)
        
拍賣
        
京東服飾
        
京東超市
        
生鮮
        
全球購(gòu)
        
京東金融
    

#3、ul標(biāo)簽的屬性type（這屬于列表的樣式，所以了解即可）
type：列表標(biāo)識(shí)的類型
        disc：實(shí)心圓(默認(rèn)值)
        circle：空心圓
        square：實(shí)心矩形
        none：不顯示標(biāo)識(shí)
可以通過(guò)css直接去掉小圓點(diǎn)

#4、注意
ul與li是組合標(biāo)簽應(yīng)該一起出現(xiàn)，并且ul的子標(biāo)簽只應(yīng)該是li，而li的子標(biāo)簽則可以是任意其他標(biāo)簽

2、有序列表（極少使用）

    
智商排名
    

        
大娃
        
二娃
        
三娃
        
四娃
        
五娃
    

    
    
智商排名
    

        
1. 大娃
        
2. 二娃
        
3. 三娃
        
4. 四娃
        
5. 五娃
    

3、自定義列表（也會(huì)經(jīng)常使用）

#1、作用分析
選擇用什么標(biāo)簽的唯一標(biāo)準(zhǔn)，是看文本的實(shí)際語(yǔ)義，而不是看長(zhǎng)什么樣子
無(wú)序列表：內(nèi)容是并列的,沒(méi)有先后順序
有序列表：內(nèi)容是有先后順序的
自定義列表：對(duì)一個(gè)題目進(jìn)行解釋說(shuō)明的時(shí)候，用自定義列表,可以做網(wǎng)站尾部相關(guān)信息，網(wǎng)易注冊(cè)界面的輸入框

#2、自定義列表也是一個(gè)組合標(biāo)簽：dl>dt+dd
dl:defination list，自定義列表
dt：defination title，自定義標(biāo)題
dd：defination description，自定義描述

    
自定義標(biāo)題1

    
描述1

    
描述2

    
描述3


    
自定義標(biāo)題2

    
描述1

    
描述2

    
描述3


    
自定義標(biāo)題3

    
描述1

    
描述2

    
描述3

 #3、注意: 
3.1 dl>dt+dd應(yīng)該組合出現(xiàn)，dl中只應(yīng)該存放dt和dd，而可以在dt和dd中添加任意其他標(biāo)簽 
3.2 一個(gè)dt可以可以沒(méi)有對(duì)應(yīng)的dd，也可以有多個(gè)，但建議一個(gè)dt對(duì)應(yīng)一個(gè)dd

九、 table標(biāo)簽

語(yǔ)義：標(biāo)記一段數(shù)據(jù)為表格

#1、作用
表格標(biāo)簽是一種數(shù)據(jù)的展現(xiàn)形式，當(dāng)數(shù)據(jù)量非常大的時(shí)候，使用表格的形式來(lái)展示被認(rèn)為是最清晰的

#2、格式


tr代表表格的一行數(shù)據(jù)
td表一行中的一個(gè)單元格

#3、注意點(diǎn)：
表格標(biāo)簽有一個(gè)邊框?qū)傩裕@個(gè)屬性決定了邊框的寬度。默認(rèn)情況下這個(gè)屬性的值為0，所以看不到邊框 

表格屬性

#1、寬度和高度
    可以給table和td設(shè)置width和height屬性
    
    1.1 默認(rèn)情況下表格的寬高是按照內(nèi)容的尺寸來(lái)調(diào)整的，也可以通過(guò)給table標(biāo)簽設(shè)置widht和height來(lái)手動(dòng)指定表格的寬高

    1.2 如果給td標(biāo)簽設(shè)置width和height屬性，會(huì)修改當(dāng)前單元格的寬度和高度，只要不超過(guò)table的寬高，則不會(huì)影響整個(gè)表格的寬度和高度


#2、水平對(duì)齊和垂直對(duì)齊
    水平對(duì)齊align可以給table、tr、td標(biāo)簽設(shè)置
    垂直對(duì)齊valign只能給tr、td標(biāo)簽設(shè)置

    ========水平對(duì)齊===========
    取值
    align=“left”
    align=“center”
    align=“right”

    2.1 給table標(biāo)簽設(shè)置水平對(duì)齊，可以讓表格在水平方向上對(duì)齊
          強(qiáng)調(diào)：table只能設(shè)置水平方向

    2.2 給tr設(shè)置水平對(duì)齊，可以控制當(dāng)前行所有單元格內(nèi)容都水平對(duì)齊

    2.3 給td設(shè)置水平對(duì)齊，可以控制當(dāng)前單元格內(nèi)容水平對(duì)齊，tr與td沖突的情況下，以td為準(zhǔn)

    ========垂直對(duì)齊===========
    取值
    valign=“top”
    valign=“center”
    valign=“bottom”
    
    2.4 給tr設(shè)置垂直對(duì)齊可以讓當(dāng)前行所有單元格內(nèi)容都垂直對(duì)齊
    2.5 給td設(shè)置垂直對(duì)齊可以讓當(dāng)前單元格內(nèi)容垂直對(duì)齊


#3、外邊距和內(nèi)邊距
    只能給table設(shè)置

    3.1 外邊距：?jiǎn)卧衽c單元格之間的間隔，cellspacing="3px"，默認(rèn)值為2px
    3.2 內(nèi)邊距：?jiǎn)卧襁吙蚺c文字之間的距離:cellpadding="200px"

細(xì)線表格的制作方式：
        1、給table標(biāo)簽設(shè)置bgcolor
        2、給tr標(biāo)簽設(shè)置bgcolor
        3、給table標(biāo)簽設(shè)置cellspacing="1px"

      注意：
      table、tr、td標(biāo)簽都支持bgcolor屬性
"200px" height="200px" bgcolor="black" cellspacing="1px">

        "white">
                "white">
                "white">
                "white">
                "white">
                
學(xué)員信息統(tǒng)計(jì)
        

            
姓名
                
性別
                
年齡

            
        

        

            
多多
                
male
                
18

            

            
多多2
                
male
                
18

            

            
多多3
                
male
                
18

            
        

        

            
3
                
3
                
3

            
        
    

表格的結(jié)構(gòu) 

為了方便管理維護(hù)以及提升語(yǔ)義，我們將表格中存儲(chǔ)的數(shù)據(jù)分為四類：
#1、表格的標(biāo)題:caption
    特點(diǎn):相對(duì)于表格寬度自動(dòng)居中對(duì)齊
    注意:
        1.1 該標(biāo)簽一定要寫在table標(biāo)簽里，否則無(wú)效
        1.2 caption一定要緊跟在table標(biāo)簽內(nèi)的第一個(gè)

#2、表格的表頭信息:thead
    特點(diǎn)：專門用來(lái)存儲(chǔ)每一列的標(biāo)題，只要將當(dāng)前列的標(biāo)題存儲(chǔ)在這個(gè)標(biāo)簽中就會(huì)自動(dòng)居中+加粗文字


#3、表格的主體信息:tbody
    注意：
        3.1 如果沒(méi)有添加tbody，瀏覽器會(huì)自動(dòng)添加
        3.2 如果指定了thread和tfoot，那么在修改整個(gè)表格的高度時(shí)，thead和tfoot有自己默認(rèn)的高度，不會(huì)隨著
            表格的高度變化而變化

#4、表尾信息:tfoot

單元格合并 

#1、水平向上的單元格colspan
    可以給td標(biāo)簽添加一個(gè)colspan屬性，來(lái)把水平方向的單元格當(dāng)做多個(gè)單元格來(lái)看待
    

#2、垂直向上的單元格rowspan
    可以給td標(biāo)簽設(shè)置一個(gè)rowspan屬性，來(lái)把垂直方向的的單元格當(dāng)成多個(gè)去看待

#注意注意注意:
1、由于把某一個(gè)單元格當(dāng)作了多個(gè)單元格來(lái)看待，所以就會(huì)多出一些單元格，所以需要?jiǎng)h掉一些單元格
2、一定要記住，單元格合并永遠(yuǎn)是向后或者向下合并，而不能向前或向上合并

十、 form標(biāo)簽

語(yǔ)義：標(biāo)記表單

#1、什么是表單？
    表單就是專門用來(lái)接收用戶輸入或采集用戶信息的

#2、表單的格式
    

        <表單元素>
    

鏈接：https://www.processon.com/view/link/5aeea789e4b084d6e4bf6911 

圖片:https://pan.baidu.com/s/1db6o--q557aKmtYJSBsyqA