二：文檔類型聲明方式：

　html:

　　　　過渡型：

　　　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

　　　　嚴格型:

　　　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

　　　　架構型:

　　　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

　　xml:

　　　　過渡型:

　　　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　　　嚴格型:

　　　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



　　　　架構型:

　　　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

　　html5:

　　　　<!DOCTYPE html>

三、語義：

html:沒有展現結構語義化的标簽，我們通常都是這樣來命名的<div id="header"></div>.這樣表示網站的頭部。

　　html5:在語義上卻有很大的優勢。提供了一些新的标簽，比如:<header><article><footer>

html5格式：可以用header和article代替div nav用來裝導航

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
   <script src="scripts/modernizr-1.6.min.js"></script>
</head>
<body>
  <header>
  <nav>
  <ul>
  </ul>
  </nav>
  </header>
  <article>
  </article>
  </body>
</html>

css一般是四個

1.basic.css把另外三個整合起來
@import url(color.css);
@import url(layout.css);
@import url(typography.css);
2.color.css 定義顔色
3.layout.css 定義布局 包括背景圖檔啥的
4.typography.css 定義字型大小啥的

表示全部設定距離為0 這樣就可以把不同浏覽器為元素設定的不同内外邊距全都删除

* {
  padding: 0;
  margin: 0;
}

設定ul導航欄為橫向排列

header nav li {
  display: inline;
}

設定背景圖檔

background-image: url(../images/background.gif);

背景圖檔是否固定或者随着頁面的其餘部分滾動

background-attachment    
scroll預設值 會随着其餘部分滾動而移動
fixed 當頁面的其餘部分滾動時 背景圖像不會移動

定位背景圖像：

background-position
一般center居中

是否及如何重複背景圖像

background-repeat
repeat-x 水準重複
repeat-y 垂直重複
no-repeat 背景圖像僅顯示一次

舉例：background-position: bottom right; 父窗體不是body而是 header 定義

背景圖檔的位置

header {
  background-image: url(../images/guitarist.gif);
  background-repeat: no-repeat;
  background-position: bottom right;
  border-width: .1em;
  border-style: solid;
  border-bottom-width: 0;
}

就近原則

1.如果是在同一個級别下比如都是 p{} p{} 會按照加載的順序後面的會覆寫掉前面的樣式

2.不是一個級别下聽靠近那一方比如 p{} p scan{} 最終聽後者的樣式定義

photos header {

background-image: url(../images/basshead.gif);

}

header {

background-image: url(../images/guitarist.gif);

}

定義版式字型格式之類的：

font-size: 76%;   字型大小
 font-size: 1em;
 font-family: "Helvetica","Arial",sans-serif;  字型格式
 font-weight: bold;        加粗
 text-decoration: none;    定義字型下劃線啥的
 line-height: 10px         行基線的距離
 font：順序
 •font-style
•font-variant   normal 預設值
•font-weight
•font-size/line-height
•font-family

js常見的函數：

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}


function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}

突出超連結添加挂鈎就可以對不同頁面進行不同操作

function highlightPage() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;  
  var headers = document.getElementsByTagName('header');
  if (headers.length == 0) return false;
  var navs = headers[0].getElementsByTagName('nav');
  if (navs.length == 0) return false;

  var links = navs[0].getElementsByTagName("a");
  for (var i=0; i<links.length; i++) {
      var linkurl;
      for (var i=0; i<links.length; i++) {
        linkurl = links[i].getAttribute("href");
        if (window.location.href.indexOf(linkurl) != -1) {
          links[i].className = "here";
          var linktext = links[i].lastChild.nodeValue.toLowerCase();
          document.body.setAttribute("id",linktext);
        }
      }
  }
}

如果想要實作内部頁面連結跳轉需要 setion标簽

每個連結包涵對應部分的id 開頭的”#”表示内部連結要提取一部分的id值

需要split 得到一個數組一個是#前面的内容一個是#後面的内容

隐藏内容需要元素.style.display=”none”;

如果局部變量和全局變量都無法完成任務的話需要給元素指派屬性

比如多個函數對同一個元素進行操作的時候要實作立即中斷

還有同一個頁面連結需要得到id

表單中分組用<fieldset> 标簽
<form method="post" action="submit.html">   method是規定用于發送 form-data 的 HTTP 方法
action是向何處發送表單
<input type="text" id="name" name="name" placeholder="Your name" required="required" />  
 placeholder="Your name"是占位符文本 提醒使用者如何填寫資訊 required是必須填寫資訊  

 <input type="button" /> 這就是一個按鈕。如果你不寫javascript 的話，按下去什麼也不會發生。
 <input type="submit" /> 這樣的按鈕使用者點選之後會自動送出 form，除非你寫了javascript 阻止它。
 而thisform.onsubmit = function()是阻止屬性 如果傳回的是false則不送出

<label for="name">Name:</label>
     <input type="text" id="name" name="name" placeholder="Your name" required="required" />
     label的for屬性是用來關聯的input的  label被單擊時關聯的表單字段獲得焦點

     form對象：
     form.length傳回的是表單元素   childNodes.length傳回的是元素包涵所有節點的個數
     element.value儲存的是表單元素的目前值
     如果有placeholder屬性 就是它的屬性 否則就是輸入框中的内容

     function resetFields(whichform) {
  if (Modernizr.input.placeholder) return;
  for (var i=0; i<whichform.elements.length; i++) {
    var element = whichform.elements[i];
    if (element.type == "submit") continue;
    if (!element.getAttribute('placeholder')) continue;
    element.onfocus = function() {
    if (this.value == this.getAttribute('placeholder')) {
      this.value = "";
     }
    }
    element.onblur = function() {
      if (this.value == "") {
        this.value = this.getAttribute('placeholder')||this.placeholder;
      }
    }
    element.onblur();
  }
}

将表單的内容傳遞給一個位址 然後更新原位址的<article>屬性  輸入框不能為空  emil框得有@和.
function focusLabels() {
  if (!document.getElementsByTagName) return false;
  var labels = document.getElementsByTagName("label");
  for (var i=0; i<labels.length; i++) {
    if (!labels[i].getAttribute("for")) continue;
    labels[i].onclick = function() {
      var id = this.getAttribute("for");
      if (!document.getElementById(id)) return false;
      var element = document.getElementById(id);
      element.focus();
    }
  }
}

function resetFields(whichform) {
  if (Modernizr.input.placeholder) return;
  for (var i=0; i<whichform.elements.length; i++) {
    var element = whichform.elements[i];
    if (element.type == "submit") continue;
    if (!element.getAttribute('placeholder')) continue;
    element.onfocus = function() {
    if (this.value == this.getAttribute('placeholder')) {
      this.value = "";
     }
    }
    element.onblur = function() {
      if (this.value == "") {
        this.value = this.getAttribute('placeholder');
      }
    }
    element.onblur();
  }
}

function isFilled(field) {
  return (field.value.length > 1 && field.value != field.placeholder);
}

function isEmail(field) {
  return (field.value.indexOf("@") != -1 && field.value.indexOf(".") != -1);
}

function validateForm(whichform) {
  for (var i=0; i<whichform.elements.length; i++) {
    var element = whichform.elements[i];
    if (element.getAttribute("required") == 'required') {
      if (!isFilled(element)) {
        alert("Please fill in the "+element.name+" field.");
        return false;
      }
    }
    if (element.getAttribute("type") == 'email') {
      if (!isEmail(element)) {
        alert("The "+element.name+" field must be a valid email address.");
        return false;
      }
    }
  }
  return true;
}

function prepareForms() {
  for (var i=0; i<document.forms.length; i++) {
    var thisform = document.forms[i];
    resetFields(thisform);
    thisform.onsubmit = function() {
      if (!validateForm(this)) return false;
      var article = document.getElementsByTagName('article')[0];
      if (submitFormWithAjax(this, article)) return false;
      return true;
    }
  }
}

// Ajax

function getHTTPObject() {
  if (typeof XMLHttpRequest == "undefined")
    XMLHttpRequest = function () {
      try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
        catch (e) {}
      try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
        catch (e) {}
      try { return new ActiveXObject("Msxml2.XMLHTTP"); }
        catch (e) {}
      return false;
  }
  return new XMLHttpRequest();
}

function displayAjaxLoading(element) {
    // Remove the existing content.
  while (element.hasChildNodes()) {
      element.removeChild(element.lastChild);
  }
  //  Create a loading image.
  var content = document.createElement("img");
  content.setAttribute("src","images/loading.gif");
  content.setAttribute("alt","Loading...");
  // Append the loading element.
  element.appendChild(content);
}

function submitFormWithAjax( whichform, thetarget ) {

  var request = getHTTPObject();
  if (!request) { return false; }

  // Display a loading message.
  displayAjaxLoading(thetarget);

  // Collect the data.
  var dataParts = [];
  var element;
  for (var i=0; i<whichform.elements.length; i++) {
    element = whichform.elements[i];
    dataParts[i] = element.name + '=' + encodeURIComponent(element.value);
  }
  var data = dataParts.join('&');

  request.open('POST', whichform.getAttribute("action"), true);
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  request.onreadystatechange = function () {
    if (request.readyState == 4) {
        if (request.status == 200 || request.status == 0) {
          var matches = request.responseText.match(/<article>([\s\S]+)<\/article>/);
          if (matches.length > 0) {
            thetarget.innerHTML = matches[1];
          } else {
            thetarget.innerHTML = '<p>Oops, there was an error. Sorry.</p>';
          }
        } else {
          thetarget.innerHTML = '<p>' + request.statusText + '</p>';
        }
    }
  };

  request.send(data);

  return true;
};

建立一個網站需要的注意點（自己看的）photos header {

photos header {

繼續閱讀

[HTML5]自定義屬性 data-* 和 jQuery.data 詳解

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

[轉]iOS微信小視訊優化心得

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

android 主線程的相關問題

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條

建立一個網站需要的注意點 （自己看的）photos header {

photos header {

繼續閱讀

建立一個網站需要的注意點（自己看的）photos header {