前端面試會出現的基本知識點html

HTML
1.session的專屬性質，div artticle 特殊的session。

2.css reset
什麼是 css reset：HTML都有默認樣式，在不同的瀏覽器的默認樣式也不一樣，這樣影響我們頁面樣式的統一性。並且有的默認樣式在不同的瀏覽器是通過不同的樣式生成，比如ul的縮進樣式，在IE下是通過margin實現，但是在火狐裏面是通過padding來實現的，所以這時候需要清除他們的默認樣式，重新定義標籤覆蓋默認樣式。
爲什麼要重置：不同的瀏覽器默認樣式不同，這樣就會影響我們頁面樣式的統一性。所以要重置。
css reset的內容：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}

3.兩欄佈局
問題比如：頁面由上下兩部分組成，下面那部分爲footer當頁面足夠高的時候footer在頁面的底部，當頁面沒有屏幕高時，footer在屏幕的底部，用css來實現
解決思路：給body設一個最小高度100%，給footer一個絕地定位，bottom等於0.
代碼實現如下：

<style type="text/css">
  body{min-height: 100%; width: 100%; position: absolute;}
  .top{height: 2300px; width: 100%;background-color: #008000;}
  .footer{height: 20px; width: 100%; background-color: #FFA500; position: absolute;bottom: 0;}
</style>
</head>
<body>

    <div class="top"></div>
    <div class="footer"></div>

</body>

4. 三欄佈局：
比如：4個方塊橫向排列，有什麼辦法，有什麼優缺點，

a.浮動：脫離文檔流，需要清浮動。clear： both，

clear是規定清除那一側的浮動，clear一共有五個值，
left ：在左側不允許浮動元素。
right ：在右側不允許浮動元素。
both ：在左右兩側均不允許浮動元素。
none ：默認值。允許浮動元素出現在兩側。
inherit ：規定應該從父元素繼承 clear 屬性的值。

<style type="text/css">
            .clearfix:before,.clearfix:after{display:table;content:"";}
            .clearfix:after{clear:both;}
            .clearfix{*zoom:1} 
            div{background-color: #008000; width: 100px; height: 100px; float: left; margin-right: 10px;}
        </style>
    </head>
    <body class="clearfix">
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>

    </body>

b,定位，定位沒有擴展性，當頁面大小出現變化時，定位元素，不能做出適應性變化，所以一般不用定位做排序這裏也就不做例子了。

c.flex，這是最近比較流行的佈局方法，建議深鑽。建議查看阮一峯寫的關於這方面的知識http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

flex佈局中在容器上有6個屬性
flex-direction:決定主軸的方向

.div{
    flex-direction:column//主軸的方向是從上到下
    flex-direction:column-reverse//主軸的方向是從下到上
    flex-direction:row//主軸的方向是從左到右
    flex-direction:row-reverse//主軸的方向是從右到左
}

flex-warp：當內容在一行中顯示不下的時候的換行方式


    .box{
      flex-wrap: nowrap; //不換行
      flex-wrap:wrap ;//換行第一行在上面
      flex-wrap: wrap-reverse;//換行第一行在下面
    }

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

.box{
    flex-flow:<flex-direction>||<flex-warp>;
}

justify-content屬性是對齊方式

.box{
    justify-content:flex-start;//左對齊（默認）
    justify-content:flex-end;//右對齊
    justify-content:center;//居中
    justify-content:space-between;//兩端對其,項目之間的間隔都相等。
    justfy-content:space-around;//每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍;
}

align-items項目對其方式


    .box {
      align-items: flex-start;//交叉軸的起點對其
       align-items:flex-end ;//交叉軸的終點對其
       align-items:center;//交叉軸的中點對其
        align-items:baseline;//如果項目沒有設高度或者auto則把頁面佔滿
         align-items:stretch;//項目第一行字的基準線對其
    }

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。


    .box {
      align-content: flex-star;//與交叉軸起點對其
      align-content:flex-end; //與交叉軸終點對其
      align-content:center ; //與交叉軸中點對其
      align-content:space-around;//每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
      align-content:stretch;//軸線佔滿整個交叉軸（默認值）
    }

flex佈局中項目上有6個屬性；
order項目的順序排列，值越小排列越靠前

.item{
    order:<integer>;
}

flex-grow是項目的放大比例，一般默認爲0；如果所有的項目爲1，其中有一個爲2，那麼爲2 的所佔剩餘空間是1的兩倍

.item{
    flex-grow:num;//默認爲0；
}

flex-shrink項目的縮小比例，一般默認值爲1；如果所有項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性爲0，其他項目都爲1，則空間不足時，前者不縮小。負值無效；

.item{
    flex-shrink:num;//默認是1
}

flex-basis這個屬性在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的本來大小。設置值以後則項目佔固定空間


    .item {
      flex-basis: <length> | auto; //默認是auto，
    }

flex是個符合屬性，由flex-grow，flex-shrink和flex-basis三個屬性組成，默認值爲0,1，auto後面兩個值可不寫
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)

.item{
    flex:none;
}

align-self這是給單個項目的屬性，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。


    .item {
      align-self: auto ;
      align-self:flex-start;
      align-self:flex-end;
      align-self:center;
      align-self:baseline;
      align-self:stretch;
    }

d.inline-block把塊狀元素轉換成內斂元素
它相對於margin：0 auto；的好處是它不用設置父元素的寬度

<style type="text/css">
            .clearfix:before,.clearfix:after{display:table;content:"";}
            .clearfix:after{clear:both;}
            .clearfix{*zoom:1} 
            div{background-color: #008000; width: 100px; height: 100px; margin-right: 10px;display: inline-block;}
        </style>
    </head>
    <body >
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>

    </body>

5移動端的viewport常用尺寸，基於iPhone幾。

6僞類和僞元素的區別和用處

僞元素：當文檔語言不能選擇到特定的位置是，這個時候就需要用到僞元素，比如第一個字母或者第一行。

僞元素有： :first-line，:first-letter，:before，:after

:first-line僞元素的用法：
p:first-line{
color:#fff;
}
:first-letter僞元素的用法
p:first-letter{
color:#fff;
}

還可以與css配合使

<p class="box"></p>
<style type="text/css">
    p.box:first-letter{
        color:#fff;
    }
</style>

:before在元素之前插入或者生成新的內容CSS2
：after在元素之後插入或者生成行的內容css2

h1:before
  {
  content:url(logo.gif);
  }
 h1:after
  {
  content:url(logo.gif);
  }

僞類：
css
:active 向被激活的元素添加樣式。 1
:focus 向擁有鍵盤輸入焦點的元素添加樣式。 2
:hover 當鼠標懸浮在元素上方時，向元素添加樣式。 1
:link 向未被訪問的鏈接添加樣式。 1
:visited 向已被訪問的鏈接添加樣式。 1
:first-child 向元素的第一個子元素添加樣式。(匹配的就是元素自身) 2
:lang 向帶有指定 lang 屬性的元素添加樣式。 2

前端面試會出現的基本知識點html

druid數據源 xml配置

全選才可以提交

全選才可以提交

購物車點擊管理刪除和商品價錢的計算

JavaScript正則表達式

前端面試會出現的基本知識點html

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結