前端基础复习--14 link扩展学习？meta扩展学习？HTML5新的语义化标签？表格扩展学习？

1. link扩展学习？
    
     外部资源文件，可以引css

    添加网址标题栏前的小图标：
    <link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">

    DNS预解析： 大的公司都会去做的
    HTML访问网址都是通过ip访问的，不是通过域名访问的，域名要通过dns解析之后，转成一个ip映射然后去查找远程ip
    <link rel="dns-prefetch" href="//static.360buyimg.com">

2. meta扩展学习？

    meta添加一些辅助信息。

    <meta name="description" content="大连美团网精选大连美食餐厅,酒店预订,电影票,旅游景点,外卖订餐,大连团购信息,您可查询商家评价店铺信息。大连生活,下载美团官方APP ,吃喝玩乐1折起。">
    <meta name="keywords" content="大连美食,大连酒店,大连团购">
    <meta name="renderer" content="webkit">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="refresh" content="3" url="">  做刷新的
    <meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"> 做缓存的

3. HTML5新的语义化标签？

    header : 页眉
    footer : 页脚
    main : 主体
    hgroup : 标题组合
    nav : 导航

    ⭐️注：header、footer、main 在一个网页中只能出现一次。

    article : 独立的内容
    aside : 辅助信息的内容
    ------------------------上面两个是对立的
    section : 区域       -----article和section之间的差异是什么？独立&划分区域

    figure : 描述图像或视频
    figcaption : 描述图像或视频的标题部分    
    ------------------------上面两个组合用的

    datalist : 选项列表  ----智能进行选项搜索
        例如
                 <input type="text" list="elems">
                <datalist id="elems">
                    <option value="a"></option>
                    <option value="ab"></option>
                    <option value="abc"></option>
                    <option value="ass"></option>
                    <option value="ada"></option>
                    <option value="awd"></option>
                </datalist >

    details / summary : 文档细节 / 文档标题
    progress / meter : 定义进度条 / 定义度量范围  会根据大小值的一个变化决定颜色
    time : 定义日期或时间
    mark : 带有记号的文本

4. 表格扩展学习？

    添加单线 : border-collapse : collapse
    隐藏空单元 : empty-cells : hide

 table {
            empty-cells: hide;
            border-collapse: collapse;
        }
        

    斜线分类 : border / rotate

 .line {
            border-top: 50px solid red;
            border-left: 150px blue solid;
            position: relative;
        }

    列分组 : colgroup  / col
     <colgroup>
            <col span="2" style="background: paleturquoise;">
            <col span="1" style="background: palegoldenrod;">
        </colgroup>