前端htmlCssJavascript

html–結構
css–樣式
js–行爲

標籤tag

html 標準文檔
html doctype 標籤
html root 標籤
html head 標籤
html head title 標籤
html head meta 標籤
html head meta 標籤
html body 標籤
html body style 標籤
html body script 標籤
div[style=""] 內聯樣式
head>style 內部樣式
head>link[ href="" rel=“stylesheet” type=“text/css” ] 外部部樣式

html 按鈕組件

<!--Internet Explorer 的默認類型是 "button"，而其他瀏覽器中（包括 W3C 規範）的默認值是 "submit"。-->
    <!--type = button  reset  submit-->
    <button type="button">點擊</button>
    <button type="button" disabled>點擊</button>

h5 表單

<!--novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。-->
<form action="" novalidate>
  <!--規定 form 或 input 域應該擁有自動完成功能。-->
  <p>text<input type="text" placeholder="請輸入用戶名" autocomplete="off"></p>
  <p>email<input type="email"></p>
  <p>search<input type="search"></p>
  <p>file<input type="file" multiple></p>
  <p>image<input type="image" width="99" height="99" alt="替代文本" title="鼠標提示"></p>
  <p><img src="" alt="替代文本" title="鼠標提示" width="99"></p>
  <!--min, max 和 step-->
  <p>number<input type="number" min="1" max="10"></p>
  
  <p>
    url_list<input type="url" list="url_list" name="link" />
      <datalist id="url_list">
        <option label="W3School" value="http://www.W3School.com.cn" >
        <option label="W3School" value="http://www.W3School.com.cn" >
        <option label="W3School" value="http://www.W3School.com.cn" >
        <option label="W3School" value="http://www.W3School.com.cn" >
      </datalist>
  </p>
</form>

css 選擇器

/*css  id選擇器*/
#test{}
#test span{}
/*css  class選擇器*/
.test{}
.test span{}
/*css  屬性選擇器*/
P#test[title]{}
/*css  標籤選擇器*/
h2{}

css背景

 p{
    background-color: #fff; /*色彩*/
    background-image: url(..);/*圖片路勁*/
    background-position: left;/*圖片路勁*/
    background:#000 url(..) repeat fixed left top;
  }

css 文本對齊

  p{
    text-indent: 2px; /*縮進*/
    text-transform : capitalize; /*capitalize -首字大寫 uppercase -英文大寫 lowercase- 英文小寫 */
    text-align: center;/*justify-兩端對齊 center -居中  left-左對齊  right-右對齊*/
  }
  p{
    vertical-align: top;/*top-頂端 middle -中間  bottom-底部  baseline-基線*/
  }

css 字體

 p{
    color:#008834; /*文字顏色*/
    font-family : 宋體,sans-serif; /*字體家族*/
    font-size: 12px; /*字體大小*/
    line-height:15px; /*字間距*/
  }

A標籤樣式

  a{
    text-decoration: none; /*下滑線*/
  }
  a:link{}
  a:visited{}
  a:active{}
  a:hover{}

盒子模型

  div{
    display: none; /*block - 塊級 inline - 行內*/
    display: block; /*block - 塊級 inline - 行內*/
    display: inline-block; /*block - 塊級 inline - 行內*/
  }
  div{
    width: 100px; /*寬*/
    height: 100px; /*高*/
    margin: 10px; /* top -上 right -右 bottom -下 left -左*/  /*外邊界*/
    padding: 10px; /* top -上 right -右 bottom -下 left -左*/ /*內邊界*/
    padding: 10px 20px; /*上右下左*/
    border-style: solid; /* solid - 實線 dotted - 點線*/
    border-width: 1px; /* 邊框寬度*/
    border:1px solid #000000; /* 邊框寬度 邊框樣式 顏色*/
  }

列表樣式

 ul{
    position: absolute; /*absolute - 絕對定位 relative - 相對定位 static - 靜止定位*/
    top:50px;
    left: 50px;
  }
  ul li{
    list-style-type:none; /* circle - 圓圈 disc - 圓點 square - 方塊 decimal - 數字 outside - 外 inside -內*/
    list-style-position:outside; /* outside - 外 inside -內*/
    list-style-image:url(..); /* outside - 外 inside -內*/
  }

css可見控制

  div{
    visibility: hidden; /* hidden - 不可見 inherit - 繼承 visible -可見 可佔位*/
    overflow: hidden; /* hidden - 不可見 scroll - 滾動可見 visible -可見  auto - 自動  超出可見*/
  }