创建一个网站需要的注意点（自己看的）photos header {

71 阅读 0 评论 47 点赞

我是靠谱客的博主专一美女，最近开发中收集的这篇文章主要介绍创建一个网站需要的注意点（自己看的）photos header {，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

二：文档类型声明方式：

　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>([sS]+)</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;
};