html5中推出了一些新的標簽

        strong == b

        ins == u

        em == i

        del == s

新的標簽是有語義的，而老的只是單純的添加樣式（這是CSS干的事）
        strong的語義：定義重要性強調的文字
        ins的語義（inserted）：定義插入的文字
        em的語義（emphasized）：定義強調的文字
        del的語義（deleted）：定義被刪除的文字 

三、 字符實體

#1、在HTML中對空格／回車／tab不敏感，會把多個空格／回車／tab當作一個空格來處理

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

注釋：實體名稱對大小寫敏感！

內容    代碼  #一定要以;結束
空格     
>    >
<    &lt;
&    &amp;
¥    &yen;
版權    &copy;
注冊    ®

HTML特殊符號對照表

四、 h系列標簽

語義：標記內容為一個標題，全稱headline

h系列標簽從h1-h6共6個，沒有h7標簽，標記內容為1~6級標題

雖然h1-h6標簽的顯示樣式是從大到小，但再次強調：記憶HTML標簽的顯示樣式是沒有意義的

    
        
        
    
    
        
一級標題

        
二級標題
        
三級標題
        
四級標題
        
五級標題
        
六級標題
        沒有七級標題
    
 

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

五、 p標簽

語義：標記內容為一個段落，全稱paragraph

    
        
        
    
    
        
Egon
        
論顏值，鶴立雞群
        
論才華，天下無敵
    

六、 img標簽

語義：標記一個圖片，全稱image

#1、用法


#2、注意
2.1 src指定的圖片地址可以是網絡地址，也可以是一個本地地址，本地地址可以用絕對或相對路徑，
但通常用相對路徑，相對路徑是以html文件當前所在路徑為基準進行的

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

2.3 alt="圖片加載失敗時顯示的內容"

2.4 title = "鼠標懸停到圖片上時顯示的內容"

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

七、 a標簽

語義：標記一個內容為超鏈接，全稱anchor，錨

#1、超鏈接標簽是超文本文件的精髓，可以控制頁面與頁面之間的跳轉，語法如下
需要展現給用戶查看的內容
/也可以是圖片

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

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

2.3 a標簽還可以跳轉到自己的頁面
    錘你胸口

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

2.5 title="鼠標懸浮顯示的內容"

假鏈接

#1、什么是假鏈接？
    就是點擊之后不會跳轉的鏈接，我們稱之為假鏈接

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

#3、假鏈接的定義格式
    1、href="#"   :會自動回到網頁的頂部
    2、href="javascript:" ：不會返回頂部

頁面內錨點

#1、要想通過a標簽跳轉到指定的位置，那么必須告訴a標簽一個獨一無二的身份證號碼，
這樣a標簽才能在當前界面中找到需要跳轉到的目標位置

#2、如何為html中的標簽綁定一個獨一無二的身份證號碼呢？
在html中，每一個標簽都有一個名稱叫做id的屬性
這個屬性就是用來給標簽指定一個獨一無二的身份證號碼的

#3、所以要想實現通過a標簽跳轉到指定的位置，分為兩步
3.1、給目標位置的標簽添加一個id屬性，然后指定一個獨一無二的值
3.2、告訴a標簽你需要跳轉到的目標標簽對應的獨一無二的身份證號碼是多少

#4、a標簽除了可以跳轉當前頁面，還可以跳轉到其他頁面的指定位置 

跳到首頁

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

#2、注意點：
    通過我們的a標簽跳轉到指定的位置，是沒有過度動畫的
    是直接一下子就跳轉到了指定位置,比如京東主頁
    如果跳到首頁需要過渡動畫，則不用a標簽做，比如天貓主頁

八、 列表標簽

語義：標記一堆數據是一個整體/列表

html中列表標簽分為三種

1、無序列表（列表標簽中使用最多的一種，非常重要）：unordered list

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

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

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

#4、注意
ul與li是組合標簽應該一起出現，并且ul的子標簽只應該是li，而li的子標簽則可以是任意其他標簽

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

    
智商排名
    

        
大娃
        
二娃
        
三娃
        
四娃
        
五娃
    

    
    
智商排名
    

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

3、自定義列表（也會經常使用）

#1、作用分析
選擇用什么標簽的唯一標準，是看文本的實際語義，而不是看長什么樣子
無序列表：內容是并列的,沒有先后順序
有序列表：內容是有先后順序的
自定義列表：對一個題目進行解釋說明的時候，用自定義列表,可以做網站尾部相關信息，網易注冊界面的輸入框

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

    
自定義標題1

    
描述1

    
描述2

    
描述3


    
自定義標題2

    
描述1

    
描述2

    
描述3


    
自定義標題3

    
描述1

    
描述2

    
描述3

 #3、注意: 
3.1 dl>dt+dd應該組合出現，dl中只應該存放dt和dd，而可以在dt和dd中添加任意其他標簽 
3.2 一個dt可以可以沒有對應的dd，也可以有多個，但建議一個dt對應一個dd

九、 table標簽

語義：標記一段數據為表格

#1、作用
表格標簽是一種數據的展現形式，當數據量非常大的時候，使用表格的形式來展示被認為是最清晰的

#2、格式


tr代表表格的一行數據
td表一行中的一個單元格

#3、注意點：
表格標簽有一個邊框屬性，這個屬性決定了邊框的寬度。默認情況下這個屬性的值為0，所以看不到邊框 

表格屬性

#1、寬度和高度
    可以給table和td設置width和height屬性
    
    1.1 默認情況下表格的寬高是按照內容的尺寸來調整的，也可以通過給table標簽設置widht和height來手動指定表格的寬高

    1.2 如果給td標簽設置width和height屬性，會修改當前單元格的寬度和高度，只要不超過table的寬高，則不會影響整個表格的寬度和高度


#2、水平對齊和垂直對齊
    水平對齊align可以給table、tr、td標簽設置
    垂直對齊valign只能給tr、td標簽設置

    ========水平對齊===========
    取值
    align=“left”
    align=“center”
    align=“right”

    2.1 給table標簽設置水平對齊，可以讓表格在水平方向上對齊
          強調：table只能設置水平方向

    2.2 給tr設置水平對齊，可以控制當前行所有單元格內容都水平對齊

    2.3 給td設置水平對齊，可以控制當前單元格內容水平對齊，tr與td沖突的情況下，以td為準

    ========垂直對齊===========
    取值
    valign=“top”
    valign=“center”
    valign=“bottom”
    
    2.4 給tr設置垂直對齊可以讓當前行所有單元格內容都垂直對齊
    2.5 給td設置垂直對齊可以讓當前單元格內容垂直對齊


#3、外邊距和內邊距
    只能給table設置

    3.1 外邊距：單元格與單元格之間的間隔，cellspacing="3px"，默認值為2px
    3.2 內邊距：單元格邊框與文字之間的距離:cellpadding="200px"

細線表格的制作方式：
        1、給table標簽設置bgcolor
        2、給tr標簽設置bgcolor
        3、給table標簽設置cellspacing="1px"

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

        "white">
                "white">
                "white">
                "white">
                "white">
                
學員信息統(tǒng)計
        

            
姓名
                
性別
                
年齡

            
        

        

            
多多
                
male
                
18

            

            
多多2
                
male
                
18

            

            
多多3
                
male
                
18

            
        

        

            
3
                
3
                
3

            
        
    

表格的結構 

為了方便管理維護以及提升語義，我們將表格中存儲的數據分為四類：
#1、表格的標題:caption
    特點:相對于表格寬度自動居中對齊
    注意:
        1.1 該標簽一定要寫在table標簽里，否則無效
        1.2 caption一定要緊跟在table標簽內的第一個

#2、表格的表頭信息:thead
    特點：專門用來存儲每一列的標題，只要將當前列的標題存儲在這個標簽中就會自動居中+加粗文字


#3、表格的主體信息:tbody
    注意：
        3.1 如果沒有添加tbody，瀏覽器會自動添加
        3.2 如果指定了thread和tfoot，那么在修改整個表格的高度時，thead和tfoot有自己默認的高度，不會隨著
            表格的高度變化而變化

#4、表尾信息:tfoot

單元格合并 

#1、水平向上的單元格colspan
    可以給td標簽添加一個colspan屬性，來把水平方向的單元格當做多個單元格來看待
    

#2、垂直向上的單元格rowspan
    可以給td標簽設置一個rowspan屬性，來把垂直方向的的單元格當成多個去看待

#注意注意注意:
1、由于把某一個單元格當作了多個單元格來看待，所以就會多出一些單元格，所以需要刪掉一些單元格
2、一定要記住，單元格合并永遠是向后或者向下合并，而不能向前或向上合并

十、 form標簽

語義：標記表單

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

#2、表單的格式
    

        <表單元素>
    

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

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